tag and folder pages

quartz/components/PageList.tsx

@@ -0,0 +1,53 @@
+import { relativeToRoot } from "../path"
+import { QuartzPluginData } from "../plugins/vfile"
+import { Date } from "./Date"
+import { stripIndex } from "./scripts/util"
+import { QuartzComponentProps } from "./types"
+
+function byDateAndAlphabetical(f1: QuartzPluginData, f2: QuartzPluginData): number {
+  if (f1.dates && f2.dates) {
+    // sort descending by last modified
+    return f2.dates.modified.getTime() - f1.dates.modified.getTime()
+  } else if (f1.dates && !f2.dates) {
+    // prioritize files with dates
+    return -1
+  } else if (!f1.dates && f2.dates) {
+    return 1
+  }
+
+  // otherwise, sort lexographically by title
+  const f1Title = f1.frontmatter?.title.toLowerCase() ?? ""
+  const f2Title = f2.frontmatter?.title.toLowerCase() ?? ""
+  return f1Title.localeCompare(f2Title) 
+}
+
+export function PageList({ fileData, allFiles }: QuartzComponentProps) {
+  const slug = fileData.slug!
+  return <ul class="section-ul">
+    {allFiles.sort(byDateAndAlphabetical).map(page => {
+      const title = page.frontmatter?.title
+      const pageSlug = page.slug!
+      const tags = page.frontmatter?.tags ?? []
+      return <li class="section-li">
+        <div class="section">
+          {page.dates && <p class="meta">
+            <Date date={page.dates.modified} />
+          </p>}
+          <div class="desc">
+            <h3><a href={stripIndex(relativeToRoot(slug, pageSlug))} class="internal">{title}</a></h3>
+          </div>
+          <div class="spacer"></div>
+          <ul class="tags">
+            {tags.map(tag => <li><a href={relativeToRoot(slug, `tags/${tag}`)}>#{tag}</a></li>)}
+          </ul>
+        </div>
+      </li>
+    })}
+  </ul>
+}
+
+PageList.css = `
+.section h3 {
+  margin: 0;
+}
+`