Add 'hideOnRoot' option to Component.Explorer

docs/configuration.md

@@ -135,10 +135,11 @@ typography: {
 
 The home page is the main web page of your Quartz. The content for the home page lives in `content/index.md`, to change it see [[authoring content|the authoring content guide]].
 
-Customization of the home page can be achieved by conditionally hiding or unhiding components; by passing in a boolean value to the `hideOnRoot:` options in `quartz.config.ts`. The components that support this feature are:
+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:
 
 - [[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}`
+- [[Explorer]] is shown by default, to hide it the configuration looks like: `Component.Explorer({ hideOnRoot: true }){:ts}`
 
 A differnet method is used to configure the comment box on the home page, see [[Comments#Conditionally display comments|conditionally display comments]].

docs/features/explorer.md

@@ -42,6 +42,7 @@ Want to customize it even more?
 
 - Removing explorer: remove `Component.Explorer()` from `quartz.layout.ts`
   - (optional): After removing the explorer component, you can move the [[table of contents | Table of Contents]] component back to the `left` part of the layout
+- Hide on root: hide `Explorer` on the home page `content/index.md` (default to `false`). To enable this, use `Component.Explorer({ hideOnRoot: true })`.
 - Changing `sort`, `filter` and `map` behavior: explained in [[#Advanced customization]]
 - Component:
   - Wrapper (Outer component, generates file tree, etc): `quartz/components/Explorer.tsx`

quartz/components/Explorer.tsx

@@ -20,6 +20,7 @@ export interface Options {
   filterFn: (node: FileTrieNode) => boolean
   mapFn: (node: FileTrieNode) => void
   order: OrderEntries[]
+  hideOnRoot: boolean
 }
 
 const defaultOptions: Options = {
@@ -48,6 +49,7 @@ const defaultOptions: Options = {
   },
   filterFn: (node) => node.slugSegment !== "tags",
   order: ["filter", "map", "sort"],
+  hideOnRoot: false
 }
 
 export type FolderState = {
@@ -59,7 +61,12 @@ export default ((userOpts?: Partial<Options>) => {
   const opts: Options = { ...defaultOptions, ...userOpts }
   const { OverflowList, overflowListAfterDOMLoaded } = OverflowListFactory()
 
-  const Explorer: QuartzComponent = ({ cfg, displayClass }: QuartzComponentProps) => {
+  const Explorer: QuartzComponent = ({ cfg, fileData, displayClass }: QuartzComponentProps) => {
+    // Hide explorer on root if enabled
+    if (opts.hideOnRoot && fileData.slug === "index") {
+      return null
+    }
+
     return (
       <div
         class={classNames(displayClass, "explorer")}