Add 'hideOnRoot' option to 'Component.ArticleTitle'

docs/configuration.md

@@ -137,6 +137,7 @@ The home page is the main web page of your Quartz. The content for the home page
 
 Customization of the home page can be achieved by conditionally hiding or unhiding components; by passing in a boolean value to the `hideOnRoot{:ts}` option for the components detailed in the `defaultContentPageLayout{:ts}` variable in `quartz.config.ts`. The components that support this feature are:
 
+- Article title is shown by default, to hide it the configuration looks like: `Component.ArticleTitle({hideOnRoot:true}){:ts}`
 - [[Backlinks]] are shown by default, to hide them the configuration looks like: `Component.Backlinks({ hideOnRoot: true }){:ts}`
 - [[Breadcrumbs]] are hidden by default, to unhide them the configuration looks like: `Component.Breadcrumbs({ hideOnRoot: false }){:ts}`
 - Date and reading time are shown by default, to hide them the configuration looks like: `Component.ContentMeta({ hideOnRoot: true }){:ts}`

quartz/components/ArticleTitle.tsx

@@ -1,19 +1,36 @@
 import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
 import { classNames } from "../util/lang"
 
-const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+interface ArticleTitleOptions {
-  const title = fileData.frontmatter?.title
+  hideOnRoot: boolean
-  if (title) {
+}
-    return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
+
-  } else {
+const defaultOptions: ArticleTitleOptions = {
-    return null
+  hideOnRoot: false
+}
+
+export default ((opts?: Partial<ArticleTitleOptions>) => {
+  const options: ArticleTitleOptions = { ...defaultOptions, ...opts }
+
+  const ArticleTitle: QuartzComponent = ({ fileData, displayClass }: QuartzComponentProps) => {
+    // Hide article title on root if enabled
+    if (opts?.hideOnRoot && fileData.slug === "index") {
+      return null
+    }
+
+    const title = fileData.frontmatter?.title
+    if (title) {
+      return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
+    } else {
+      return null
+    }
   }
-}
 
-ArticleTitle.css = `
+  ArticleTitle.css = `
-.article-title {
+  .article-title {
-  margin: 2rem 0 0 0;
+    margin: 2rem 0 0 0;
-}
+  }
-`
+  `
 
-export default (() => ArticleTitle) satisfies QuartzComponentConstructor
+  return ArticleTitle
+}) satisfies QuartzComponentConstructor