nested tag support and tag index page

quartz/plugins/emitters/componentResources.ts

@@ -160,7 +160,7 @@ export const ComponentResources: QuartzEmitterPlugin<Options> = (opts?: Partial<
           content: transform({
             filename: "index.css",
             code: Buffer.from(stylesheet),
-            minify: true
+            minify: true,
           }).code.toString(),
         }),
         emit({

quartz/plugins/emitters/tagPage.tsx

@@ -5,7 +5,13 @@ import BodyConstructor from "../../components/Body"
 import { pageResources, renderPage } from "../../components/renderPage"
 import { ProcessedContent, defaultProcessedContent } from "../vfile"
 import { FullPageLayout } from "../../cfg"
-import { CanonicalSlug, FilePath, ServerSlug, joinSegments } from "../../path"
+import {
+  CanonicalSlug,
+  FilePath,
+  ServerSlug,
+  getAllSegmentPrefixes,
+  joinSegments,
+} from "../../path"
 
 export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
   if (!opts) {
@@ -26,15 +32,23 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
       const allFiles = content.map((c) => c[1].data)
       const cfg = ctx.cfg.configuration
 
-      const tags: Set<string> = new Set(allFiles.flatMap((data) => data.frontmatter?.tags ?? []))
+      const tags: Set<string> = new Set(
+        allFiles.flatMap((data) => data.frontmatter?.tags ?? []).flatMap(getAllSegmentPrefixes),
+      )
+      // add base tag
+      tags.add("")
+
       const tagDescriptions: Record<string, ProcessedContent> = Object.fromEntries(
-        [...tags].map((tag) => [
-          tag,
-          defaultProcessedContent({
-            slug: `tags/${tag}/index` as ServerSlug,
-            frontmatter: { title: `Tag: ${tag}`, tags: [] },
-          }),
-        ]),
+        [...tags].map((tag) => {
+          const title = tag === "" ? "Tag Index" : `Tag: #${tag}`
+          return [
+            tag,
+            defaultProcessedContent({
+              slug: joinSegments("tags", tag, "index") as ServerSlug,
+              frontmatter: { title, tags: [] },
+            }),
+          ]
+        }),
       )
 
       for (const [tree, file] of content) {
@@ -48,7 +62,7 @@ export const TagPage: QuartzEmitterPlugin<FullPageLayout> = (opts) => {
       }
 
       for (const tag of tags) {
-        const slug = `tags/${tag}/index` as CanonicalSlug
+        const slug = joinSegments("tags", tag) as CanonicalSlug
         const externalResources = pageResources(slug, resources)
         const [tree, file] = tagDescriptions[tag]
         const componentData: QuartzComponentProps = {

quartz/plugins/transformers/frontmatter.ts

@@ -2,7 +2,7 @@ import matter from "gray-matter"
 import remarkFrontmatter from "remark-frontmatter"
 import { QuartzTransformerPlugin } from "../types"
 import yaml from "js-yaml"
-import { slug as slugAnchor } from "github-slugger"
+import { slugTag } from "../../path"
 
 export interface Options {
   language: "yaml" | "toml"
@@ -43,7 +43,7 @@ export const FrontMatter: QuartzTransformerPlugin<Partial<Options> | undefined>
             }
 
             // slug them all!!
-            data.tags = data.tags?.map((tag: string) => slugAnchor(tag)) ?? []
+            data.tags = data.tags?.map((tag: string) => slugTag(tag)) ?? []
 
             // fill in frontmatter
             file.data.frontmatter = {

quartz/plugins/transformers/ofm.ts

@@ -9,7 +9,7 @@ import path from "path"
 import { JSResource } from "../../resources"
 // @ts-ignore
 import calloutScript from "../../components/scripts/callout.inline.ts"
-import { FilePath, canonicalizeServer, pathToRoot, slugifyFilePath } from "../../path"
+import { FilePath, canonicalizeServer, pathToRoot, slugTag, slugifyFilePath } from "../../path"
 
 export interface Options {
   comments: boolean
@@ -337,7 +337,7 @@ export const ObsidianFlavoredMarkdown: QuartzTransformerPlugin<Partial<Options>
 
               return {
                 type: "link",
-                url: base + `/tags/${slugAnchor(tag)}`,
+                url: base + `/tags/${slugTag(tag)}`,
                 data: {
                   hProperties: {
                     className: ["tag-link"],