refined layout

quartz.layout.ts

@@ -1,5 +1,7 @@
+import { FunctionComponent } from "preact"
 import { PageLayout, SharedLayout } from "./quartz/cfg"
 import * as Component from "./quartz/components"
+import { QuartzComponentProps } from "./quartz/components/types"
 
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
@@ -41,12 +43,26 @@ const graph_cfg = {
     opacityScale: 1,
   },
 }
+
+function IndexOnly(
+  c: FunctionComponent<QuartzComponentProps>,
+): FunctionComponent<QuartzComponentProps> {
+  return Component.ConditionalRender({
+    component: c,
+    condition: (page) => page.fileData.slug === "index",
+  })
+}
+function LeafOnly(
+  c: FunctionComponent<QuartzComponentProps>,
+): FunctionComponent<QuartzComponentProps> {
+  return Component.ConditionalRender({
+    component: c,
+    condition: (page) => page.fileData.slug !== "index",
+  })
+}
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
-    Component.ConditionalRender({
-      component: Component.Breadcrumbs(),
-      condition: (page) => page.fileData.slug !== "index",
-    }),
+    LeafOnly(Component.Breadcrumbs()),
     Component.ArticleTitle(),
     Component.ContentMeta() /*Component.TagList()*/,
   ],
@@ -63,14 +79,10 @@ export const defaultContentPageLayout: PageLayout = {
         { Component: Component.ReaderMode() },
       ],
     }),
-    // Component.Explorer(),
-    Component.DesktopOnly(Component.TableOfContents()),
-  ],
-  right: [
-    Component.Graph(graph_cfg),
-    Component.Backlinks(),
-    Component.RecentNotes({ title: "Recent writing" }),
+    Component.DesktopOnly(IndexOnly(Component.Explorer())),
+    Component.DesktopOnly(LeafOnly(Component.TableOfContents())),
   ],
+  right: [Component.Graph(graph_cfg), IndexOnly(Component.RecentNotes()), Component.Backlinks()],
 }
 
 // components for pages that display lists of pages  (e.g. tags or folders)
@@ -86,13 +98,9 @@ export const defaultListPageLayout: PageLayout = {
           grow: true,
         },
         { Component: Component.Darkmode() },
+        { Component: Component.ReaderMode() },
       ],
     }),
-    Component.Explorer(),
-  ],
-  right: [
-    Component.Graph(),
-    Component.DesktopOnly(Component.TableOfContents()),
-    Component.Backlinks(),
   ],
+  right: [Component.Graph(graph_cfg)],
 }