diff --git a/site/quartz.layout.ts b/site/quartz.layout.ts index 79000fa..ee9fb87 100644 --- a/site/quartz.layout.ts +++ b/site/quartz.layout.ts @@ -2,6 +2,49 @@ import { PageLayout, SharedLayout } from "./quartz/cfg" import * as Component from "./quartz/components" import DelveholdMasthead from "./quartz/components/DelveholdMasthead" +const documentationExplorer = Component.ConditionalRender({ + component: Component.DesktopOnly( + Component.Explorer({ + title: "Documentation", + folderDefaultState: "open", + folderClickBehavior: "link", + useSavedState: false, + filterFn: (node) => node.slug.startsWith("Documentation"), + }), + ), + condition: (page) => + page.fileData.slug === "Documentation" || page.fileData.slug?.startsWith("Documentation/"), +}) + +const gameDesignExplorer = Component.ConditionalRender({ + component: Component.DesktopOnly( + Component.Explorer({ + title: "Game Design", + folderDefaultState: "open", + folderClickBehavior: "link", + useSavedState: false, + filterFn: (node) => node.slug.startsWith("Game-Design"), + }), + ), + condition: (page) => + page.fileData.slug === "Game-Design" || page.fileData.slug?.startsWith("Game-Design/"), +}) + +const loreExplorer = Component.ConditionalRender({ + component: Component.DesktopOnly( + Component.Explorer({ + title: "Lore", + folderDefaultState: "open", + folderClickBehavior: "link", + useSavedState: false, + filterFn: (node) => node.slug.startsWith("Lore"), + }), + ), + condition: (page) => page.fileData.slug === "Lore" || page.fileData.slug?.startsWith("Lore/"), +}) + +const sectionExplorers = [documentationExplorer, gameDesignExplorer, loreExplorer] + export const sharedPageComponents: SharedLayout = { head: Component.Head(), header: [DelveholdMasthead()], @@ -29,12 +72,7 @@ export const defaultContentPageLayout: PageLayout = { condition: (page) => page.fileData.slug !== "index", }), ], - left: [ - Component.ConditionalRender({ - component: Component.DesktopOnly(Component.Explorer()), - condition: (page) => page.fileData.slug !== "index", - }), - ], + left: sectionExplorers, right: [ Component.ConditionalRender({ component: Component.DesktopOnly(Component.TableOfContents()), @@ -49,6 +87,6 @@ export const defaultContentPageLayout: PageLayout = { export const defaultListPageLayout: PageLayout = { beforeBody: [Component.Breadcrumbs({ rootName: "DELVE/HOLD" }), Component.ArticleTitle(), Component.ContentMeta()], - left: [Component.DesktopOnly(Component.Explorer())], + left: sectionExplorers, right: [], }