docs: genericize custom labels and add notes

quartz.config.ts

@@ -8,7 +8,7 @@ import * as Plugin from "./quartz/plugins"
  */
 const config: QuartzConfig = {
   configuration: {
-    pageTitle: "Lest I Forget",
+    pageTitle: "TITLE", // Site title shown in the sidebar header and browser metadata
     pageTitleSuffix: "",
     enableSPA: true,
     enablePopovers: true,
@@ -16,41 +16,41 @@ const config: QuartzConfig = {
       provider: "plausible",
     },
     locale: "en-US",
-    baseUrl: "quartz.jzhao.xyz",
+    baseUrl: "YOUR-DOMAIN.com", // Canonical deployed domain used for OG images, RSS, and sitemap URLs
     ignorePatterns: ["private", "templates", ".obsidian"],
     defaultDateType: "modified",
     theme: {
       fontOrigin: "googleFonts",
       cdnCaching: true,
       typography: {
-        title: "Playfair Display",
-        header: "Anonymous Pro",
-        body: "JetBrains Mono",
-        meta: "Caveat",
-        code: "JetBrains Mono",
+        title: "Playfair Display", // Sidebar site title font
+        header: "Anonymous Pro", // Headings and explorer labels
+        body: "JetBrains Mono", // Main prose font
+        meta: "Caveat", // Metadata and small UI labels
+        code: "JetBrains Mono", // Inline code and code blocks
       },
       colors: {
         lightMode: {
-          light: "#E0E1DA",
-          lightgray: "#afb0a9",
-          gray: "#80817a",
-          darkgray: "#353630",
-          dark: "#171717",
-          secondary: "#2F3026",
-          tertiary: "#91a29c",
-          highlight: "rgba(143, 159, 169, 0.15)",
-          textHighlight: "#fff23688",
+          light: "#E0E1DA", // Page background
+          lightgray: "#afb0a9", // Borders and separators
+          gray: "#80817a", // Muted UI text
+          darkgray: "#353630", // Body text
+          dark: "#171717", // Strong headings and icons
+          secondary: "#2F3026", // Primary link color
+          tertiary: "#91a29c", // Hover/active accent
+          highlight: "rgba(143, 159, 169, 0.15)", // Internal link and code-line highlight
+          textHighlight: "#fff23688", // ==highlighted text==
         },
         darkMode: {
-          light: "#111516",
-          lightgray: "#7E7E7E",
-          gray: "#7D7D7D",
-          darkgray: "#CACACA",
-          dark: "#D0D0D0",
-          secondary: "#fff",
-          tertiary: "#CACACA",
-          highlight: "#313B4A",
-          textHighlight: "#313B4A",
+          light: "#111516", // Page background
+          lightgray: "#7E7E7E", // Borders and separators
+          gray: "#7D7D7D", // Muted UI text
+          darkgray: "#CACACA", // Body text
+          dark: "#D0D0D0", // Strong headings and icons
+          secondary: "#fff", // Primary link color
+          tertiary: "#CACACA", // Hover/active accent
+          highlight: "#313B4A", // Internal link and code-line highlight
+          textHighlight: "#313B4A", // ==highlighted text==
         },
       },
     },
@@ -91,9 +91,9 @@ const config: QuartzConfig = {
       Plugin.Static(),
       Plugin.Favicon(),
       Plugin.NotFoundPage(),
-      // Comment out CustomOgImages to speed up build time
+      // Comment out CustomOgImages to speed up build time.
       Plugin.CustomOgImages({
-        colorScheme: "darkMode",
+        colorScheme: "darkMode", // Use the dark palette when generating social cards
       }),
     ],
   },

quartz/components/RuinsDarkmode.tsx

@@ -8,11 +8,11 @@ const RuinsDarkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentPr
   return (
     <button class={classNames(displayClass, "darkmode", "ruins-darkmode")}>
       <p class="dayIcon" aria-label={i18n(cfg.locale).components.themeToggle.darkMode}>
-        Dreamy Days
+        LIGHT LABEL
         <title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
       </p>
       <p class="nightIcon" aria-label={i18n(cfg.locale).components.themeToggle.lightMode}>
-        Somber Nights
+        DARK LABEL
         <title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
       </p>
     </button>
@@ -28,8 +28,8 @@ RuinsDarkmode.css = `
   border: none;
   margin: 0;
   text-align: inherit;
-  color: var(--gray);
-  font-family: var(--metaFont);
+  color: var(--gray); /* toggle label color */
+  font-family: var(--metaFont); /* toggle label font */
   font-size: 1.05rem;
   line-height: 1.2;
 }

quartz/components/RuinsFooter.tsx

@@ -4,7 +4,7 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 
 export default (() => {
   const RuinsFooter: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
-    return <footer class={classNames(displayClass, "footer")}>See you in another file</footer>
+    return <footer class={classNames(displayClass, "footer")}>FOOTER TEXT</footer>
   }
 
   RuinsFooter.css = style

quartz/i18n/locales/en-US.ts

@@ -33,7 +33,7 @@ export default {
       title: "Reader mode",
     },
     explorer: {
-      title: "Notes",
+      title: "TITLE",
     },
     footer: {
       createdWith: "Created with",

quartz/styles/custom.scss

@@ -1,6 +1,7 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+// Sidebar site title styling.
 .page-title {
   font-size: 2.6rem;
   margin: 0;
@@ -29,22 +30,26 @@
   }
 }
 
+// Article heading styling.
 .article-title {
   font-size: 2.2rem;
   margin: 2rem 0 1.2rem 0;
 }
 
+// Date / reading-time metadata styling.
 .content-meta {
   font-family: var(--metaFont);
   font-size: 1.3rem;
 }
 
+// Main article body typography.
 .center article {
   font-size: 0.93rem;
   text-align: justify;
   hyphens: none;
 }
 
+// Dual-image floating media effect used by the custom float-image syntax.
 .floating-image {
   @media all and (max-width: 800px) {
     display: none;
@@ -71,6 +76,7 @@
   }
 }
 
+// Float placement helpers used by the transformer output.
 .float-left {
   float: left;
   margin: 0 2rem 0 0;
@@ -86,6 +92,7 @@
   margin: 0 auto;
 }
 
+// Minimal footer styling for the custom footer component.
 .footer {
   font-family: var(--metaFont);
   font-size: 1.3rem;
@@ -93,6 +100,7 @@
   margin-bottom: 2rem;
 }
 
+// Small spacing tweak below the explorer header button.
 .explorer-toggle {
   margin-bottom: 0.8rem;
 }