Start flying section

quartz/components/ArticleTitle.tsx

@@ -1,11 +1,12 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import { classNames } from "../util/lang"
+import { classNames, titlecase } from "../util/lang"
 import { deslugify } from "../util/path"
 
 const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
-  const title = fileData.frontmatter?.title
+  const fileTitle = fileData.frontmatter?.title
+  const title = fileTitle == 'index' ? titlecase(deslugify(fileData.slug!, 2)) : fileTitle 
   if (title) {
-    return <h1 class={classNames(displayClass, "article-title")}>{title == 'index' ? deslugify(fileData.slug!, 2) : title}</h1>
+    return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
   } else {
     return null
   }

quartz/components/Breadcrumbs.tsx

@@ -1,7 +1,7 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import breadcrumbsStyle from "./styles/breadcrumbs.scss"
 import { FullSlug, SimpleSlug, resolveRelative, simplifySlug } from "../util/path"
-import { classNames } from "../util/lang"
+import { classNames, titlecase } from "../util/lang"
 import { trieFromAllFiles } from "../util/ctx"
 
 type CrumbData = {
@@ -80,7 +80,7 @@ export default ((opts?: Partial<BreadcrumbOptions>) => {
       <nav class={classNames(displayClass, "breadcrumb-container")} aria-label="breadcrumbs">
         {crumbs.map((crumb, index) => (
           <div class="breadcrumb-element">
-            <a href={crumb.path}>{crumb.displayName}</a>
+            <a href={crumb.path}>{titlecase(crumb.displayName)}</a>
             {index !== crumbs.length - 1 && <p>{` ${options.spacerSymbol} `}</p>}
           </div>
         ))}

quartz/plugins/transformers/captions.ts

@@ -0,0 +1,11 @@
+import rehypeImageCaption from "rehype-image-caption";
+import { QuartzTransformerPlugin } from "../types";
+
+export const FigureCaptions: QuartzTransformerPlugin = () => {
+    return {
+        name: "FigureCaptions",
+        htmlPlugins() {
+            return [[rehypeImageCaption]]
+        },
+    }
+}

quartz/plugins/transformers/frontmatter.ts

@@ -149,6 +149,7 @@ declare module "vfile" {
         draft: boolean | string
         lang: string
         enableToc: string
+        enableMeta: string
         cssclasses: string[]
         socialImage: string
         comments: boolean | string

quartz/plugins/transformers/index.ts

@@ -11,3 +11,4 @@ export { SyntaxHighlighting } from "./syntax"
 export { TableOfContents } from "./toc"
 export { HardLineBreaks } from "./linebreaks"
 export { RoamFlavoredMarkdown } from "./roam"
+export { FigureCaptions } from "./captions"

quartz/styles/custom.scss

@@ -1,3 +1,19 @@
 @use "./base.scss";
 
 // put your custom CSS here!
+
+// Styling for Figures
+figure {
+    margin: 0;
+}
+
+figcaption {
+    text-align: center;
+    margin-top: .35em;
+    font-size: 0.9em;
+    opacity: 0.8;
+}
+
+figure>img {
+    margin: 0;
+}

quartz/util/lang.ts

@@ -11,3 +11,10 @@ export function classNames(
   }
   return classes.join(" ")
 }
+
+export function titlecase(s: string): string {
+  return s
+    .split(" ")
+    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
+    .join(" ")
+}