From 95823ec85543448ef8852557526a9fc42aa3dd8d Mon Sep 17 00:00:00 2001
From: josh-sanders <sandersjoshua@gmail.com>
Date: Thu, 13 Mar 2025 23:18:08 +1000
Subject: [PATCH] Add 'hideOnRoot' option to 'Component.ArticleTitle'

---
 docs/configuration.md              |  1 +
 quartz/components/ArticleTitle.tsx | 43 +++++++++++++++++++++---------
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/docs/configuration.md b/docs/configuration.md
index 4efe5a39b..38c72195a 100644
--- a/docs/configuration.md
+++ b/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}`
diff --git a/quartz/components/ArticleTitle.tsx b/quartz/components/ArticleTitle.tsx
index 318aeb24e..eed299d2a 100644
--- a/quartz/components/ArticleTitle.tsx
+++ b/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) => {
-  const title = fileData.frontmatter?.title
-  if (title) {
-    return <h1 class={classNames(displayClass, "article-title")}>{title}</h1>
-  } else {
-    return null
+interface ArticleTitleOptions {
+  hideOnRoot: boolean
+}
+
+const defaultOptions: ArticleTitleOptions = {
+  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 = `
-.article-title {
-  margin: 2rem 0 0 0;
-}
-`
+  ArticleTitle.css = `
+  .article-title {
+    margin: 2rem 0 0 0;
+  }
+  `
 
-export default (() => ArticleTitle) satisfies QuartzComponentConstructor
+  return ArticleTitle
+}) satisfies QuartzComponentConstructor