feat: New Blogs Page Components and emitter Plugin Support Added

Author: PrathameshDhande22

quartz.config.ts

@@ -88,6 +88,7 @@ const config: QuartzConfig = {
       Plugin.Assets(),
       Plugin.Static(),
       Plugin.NotFoundPage(),
+      Plugin.ExplorerWithTocPage(),
     ],
   },
 }

quartz/components/pages/Blogs.tsx

@@ -1,5 +1,8 @@
+import { classNames } from "../../util/lang"
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "../types"
-import style from "./styles/navigationheader.scss"
+import styles from "../styles/blogs.scss"
+// @ts-ignore
+import script from "../scripts/blogpatterns.inline"
 
 interface Options {
   links: Record<string, string>
@@ -8,8 +11,66 @@ interface Options {
 
 export default ((opts?: Options) => {
   const Blogs: QuartzComponent = (props: QuartzComponentProps) => {
-    return <div>Blogs Page</div>
+    /**
+     * Sorts all files in descending order based on their creation date.
+     *
+     * @param props - The component props containing the allFiles array.
+     * @returns An array of sorted files with the most recently created files first.
+     */
+    const allFiles = props.allFiles.sort((a, b) => {
+      return b.dates?.created.valueOf()! - a.dates?.created.valueOf()!
+    })
+    return (
+      <div class="toc-elements">
+        {allFiles.map((data, index) => {
+          return (
+            <div class={classNames(props.displayClass, "toc")}>
+              <button
+                type="button"
+                id="toc"
+                class={classNames(
+                  props.displayClass,
+                  !data.collapseToc ? "collapsed" : "",
+                  "toc-button",
+                )}
+                aria-controls="toc-content"
+                aria-expanded={!data.collapseToc}
+              >
+                <h3>{data.frontmatter?.title}</h3>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width="24"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  fill="none"
+                  stroke="currentColor"
+                  stroke-width="2"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  class="fold"
+                >
+                  <polyline points="6 9 12 15 18 9"></polyline>
+                </svg>
+              </button>
+              <div id="toc-content" class={!props.fileData.collapseToc ? "collapsed" : ""}>
+                <ul class="overflow">
+                  {data.toc?.map((tocEntry) => (
+                    <li key={tocEntry.slug} class={`depth-${tocEntry.depth}`}>
+                      <a href={`#${tocEntry.slug}`} data-for={tocEntry.slug}>
+                        {tocEntry.text}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    )
   }
 
+  Blogs.css = styles
+  Blogs.afterDOMLoaded = script
   return Blogs
 }) satisfies QuartzComponentConstructor

quartz/components/scripts/blogpatterns.inline.ts

@@ -0,0 +1,25 @@
+
+
+const tocbutton = document.querySelectorAll(".toc-button")
+
+function closeAllToc(exclude: Element) {
+    tocbutton.forEach((value) => {
+        if (value !== exclude && !value.classList.contains("collapsed")) {
+            toggleToc(value)
+        }
+    })
+}
+
+function toggleToc(value: Element) {
+    console.log("triggerd")
+    value.classList.toggle("collapsed")
+    value.nextElementSibling?.classList.toggle("collapsed")
+}
+
+tocbutton.forEach((value) => {
+    value.addEventListener("click", () => {
+        closeAllToc(value)
+
+        toggleToc(value)
+    })
+})

quartz/components/styles/blogs.scss

@@ -0,0 +1,5 @@
+.toc-elements {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}

quartz/plugins/emitters/explorerwithtocPage.tsx

@@ -0,0 +1,105 @@
+import { QuartzEmitterPlugin } from "../types"
+import { QuartzComponentProps } from "../../components/types"
+import HeaderConstructor from "../../components/Header"
+import BodyConstructor from "../../components/Body"
+import { pageResources, renderPage } from "../../components/renderPage"
+import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
+import { FullPageLayout } from "../../cfg"
+import {
+  FilePath,
+  FullSlug,
+  getAllSegmentPrefixes,
+  joinSegments,
+  pathToRoot,
+} from "../../util/path"
+import {
+  defaultContentPageLayout,
+  defaultListPageLayout,
+  sharedPageComponents,
+} from "../../../quartz.layout"
+import { Content, TagContent } from "../../components"
+import { write } from "./helpers"
+import { i18n } from "../../i18n"
+import DepGraph from "../../depgraph"
+import Blogs from "../../components/pages/Blogs"
+
+interface ExplorerWithTocPageOptions extends FullPageLayout {
+  sort?: (f1: QuartzPluginData, f2: QuartzPluginData) => number
+}
+
+export const ExplorerWithTocPage: QuartzEmitterPlugin<Partial<ExplorerWithTocPageOptions>> = (
+  userOpts,
+) => {
+  const opts: FullPageLayout = {
+    ...sharedPageComponents,
+    ...defaultContentPageLayout,
+    pageBody: Blogs(),
+    ...userOpts,
+  }
+
+  const {
+    head: Head,
+    header,
+    navbar,
+    beforeBody,
+    pageBody,
+    afterBody,
+    left,
+    right,
+    footer: Footer,
+  } = opts
+  const Header = HeaderConstructor()
+  const Body = BodyConstructor()
+
+  return {
+    name: "DesignPatterns",
+    getQuartzComponents() {
+      return [
+        Head,
+        Header,
+        ...navbar,
+        Body,
+        ...header,
+        ...beforeBody,
+        pageBody,
+        ...afterBody,
+        ...left,
+        ...right,
+        Footer,
+      ]
+    },
+    async getDependencyGraph(_ctx, _content, _resources) {
+      return new DepGraph<FilePath>()
+    },
+    async emit(ctx, _content, resources): Promise<FilePath[]> {
+      const cfg = ctx.cfg.configuration
+      const allFiles = _content.map((c) => c[1].data)
+      const slug = "blogs" as FullSlug
+      const title = "Pattern Blogs"
+      const [tree, vfile] = defaultProcessedContent({
+        slug,
+        text: title,
+        frontmatter: { title: title, tags: [] },
+      })
+      const externalResources = pageResources(pathToRoot(slug), vfile.data, resources)
+      const componentData: QuartzComponentProps = {
+        ctx,
+        fileData: vfile.data,
+        externalResources,
+        cfg,
+        children: [],
+        tree,
+        allFiles: allFiles,
+      }
+
+      return [
+        await write({
+          ctx,
+          content: renderPage(cfg, slug, componentData, opts, externalResources),
+          slug,
+          ext: ".html",
+        }),
+      ]
+    },
+  }
+}

quartz/plugins/emitters/index.ts

@@ -8,3 +8,4 @@ export { Static } from "./static"
 export { ComponentResources } from "./componentResources"
 export { NotFoundPage } from "./404"
 export { CNAME } from "./cname"
+export { ExplorerWithTocPage } from "./explorerwithtocPage"