subtitle support in frontmatter

quartz.layout.ts

@@ -20,6 +20,7 @@ export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
     Component.Breadcrumbs(),
     Component.ArticleTitle(),
+    Component.ArticleSubtitle(),
     Component.ContentMeta(),
     Component.TagList(),
   ],

quartz/components/ArticleSubtitle.tsx

@@ -0,0 +1,21 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+
+const ArticleSubtitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+  const subtitle = fileData.frontmatter?.subtitle
+  if (subtitle) {
+    return <h3 class={classNames(displayClass, "article-subtitle")}>{subtitle}</h3>
+  } else {
+    return null
+  }
+}
+
+ArticleSubtitle.css = `
+.article-subtitle {
+  margin: 0.5rem 0 0 0;
+  color: var(--gray);
+  font-weight: normal;
+}
+`
+
+export default (() => ArticleSubtitle) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -3,6 +3,7 @@ import TagContent from "./pages/TagContent"
 import FolderContent from "./pages/FolderContent"
 import NotFound from "./pages/404"
 import ArticleTitle from "./ArticleTitle"
+import ArticleSubtitle from "./ArticleSubtitle"
 import Darkmode from "./Darkmode"
 import Head from "./Head"
 import PageTitle from "./PageTitle"
@@ -22,6 +23,7 @@ import Breadcrumbs from "./Breadcrumbs"
 
 export {
   ArticleTitle,
+  ArticleSubtitle,
   Content,
   TagContent,
   FolderContent,