From fd9a8579f780bf120f8efb0f33f408bffa8ccd2e Mon Sep 17 00:00:00 2001 From: vanadium23 Date: Wed, 13 Nov 2024 11:20:16 +0300 Subject: [PATCH] feat(layout): add new component navbar to layout option --- quartz.layout.ts | 1 + quartz/cfg.ts | 3 +- quartz/components/Navbar.tsx | 37 +++++++++++++++++++++++++ quartz/components/renderPage.tsx | 9 ++++++ quartz/plugins/emitters/404.tsx | 6 ++-- quartz/plugins/emitters/contentPage.tsx | 6 +++- quartz/plugins/emitters/folderPage.tsx | 6 +++- quartz/plugins/emitters/tagPage.tsx | 6 +++- 8 files changed, 68 insertions(+), 6 deletions(-) create mode 100644 quartz/components/Navbar.tsx diff --git a/quartz.layout.ts b/quartz.layout.ts index 4a78256aa..d77462938 100644 --- a/quartz.layout.ts +++ b/quartz.layout.ts @@ -4,6 +4,7 @@ import * as Component from "./quartz/components" // components shared across all pages export const sharedPageComponents: SharedLayout = { head: Component.Head(), + navbar: [], header: [], afterBody: [], footer: Component.Footer({ diff --git a/quartz/cfg.ts b/quartz/cfg.ts index 135f58499..9b8dc55e9 100644 --- a/quartz/cfg.ts +++ b/quartz/cfg.ts @@ -84,6 +84,7 @@ export interface QuartzConfig { export interface FullPageLayout { head: QuartzComponent + navbar: QuartzComponent[] header: QuartzComponent[] beforeBody: QuartzComponent[] pageBody: QuartzComponent @@ -94,4 +95,4 @@ export interface FullPageLayout { } export type PageLayout = Pick -export type SharedLayout = Pick +export type SharedLayout = Pick diff --git a/quartz/components/Navbar.tsx b/quartz/components/Navbar.tsx new file mode 100644 index 000000000..7abb2389c --- /dev/null +++ b/quartz/components/Navbar.tsx @@ -0,0 +1,37 @@ +import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types" + +const Navbar: QuartzComponent = ({ children }: QuartzComponentProps) => { + return children.length > 0 ? ( + + ) : null; +}; + +Navbar.css = ` +nav { + display: flex; + align-items: center; + justify-content: flex-end; + padding: 1rem 2rem; +} + +nav ul { + display: flex; + list-style: none; + padding: 0; + margin: 0; + gap: 1.5rem; +} + +nav li { + display: flex; + align-items: center; +} +` + +export default (() => Navbar) satisfies QuartzComponentConstructor diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx index 9c530967b..7767477a9 100644 --- a/quartz/components/renderPage.tsx +++ b/quartz/components/renderPage.tsx @@ -2,6 +2,7 @@ import { render } from "preact-render-to-string" import { QuartzComponent, QuartzComponentProps } from "./types" import HeaderConstructor from "./Header" import BodyConstructor from "./Body" +import NavbarContructor from "./Navbar"; import { JSResourceToScriptElement, StaticResources } from "../util/resources" import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path" import { visit } from "unist-util-visit" @@ -11,6 +12,7 @@ import { i18n } from "../i18n" interface RenderComponents { head: QuartzComponent + navbar: QuartzComponent[] header: QuartzComponent[] beforeBody: QuartzComponent[] pageBody: QuartzComponent @@ -190,6 +192,7 @@ export function renderPage( const { head: Head, + navbar, header, beforeBody, pageBody: Content, @@ -200,6 +203,7 @@ export function renderPage( } = components const Header = HeaderConstructor() const Body = BodyConstructor() + const Navbar = NavbarContructor() const LeftComponent = (
@@ -223,6 +227,11 @@ export function renderPage(
+ + {navbar.map((NavbarComponent) => ( + + ))} + {LeftComponent}
diff --git a/quartz/plugins/emitters/404.tsx b/quartz/plugins/emitters/404.tsx index e4605cfcd..e102710eb 100644 --- a/quartz/plugins/emitters/404.tsx +++ b/quartz/plugins/emitters/404.tsx @@ -1,6 +1,7 @@ import { QuartzEmitterPlugin } from "../types" import { QuartzComponentProps } from "../../components/types" import BodyConstructor from "../../components/Body" +import NavbarContructor from "../../components/Navbar" import { pageResources, renderPage } from "../../components/renderPage" import { FullPageLayout } from "../../cfg" import { FilePath, FullSlug } from "../../util/path" @@ -20,13 +21,14 @@ export const NotFoundPage: QuartzEmitterPlugin = () => { right: [], } - const { head: Head, pageBody, footer: Footer } = opts + const { head: Head, navbar, pageBody, footer: Footer } = opts const Body = BodyConstructor() + const Navbar = NavbarContructor() return { name: "404Page", getQuartzComponents() { - return [Head, Body, pageBody, Footer] + return [Head, Navbar, ...navbar, Body, pageBody, Footer] }, async getDependencyGraph(_ctx, _content, _resources) { return new DepGraph() diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx index 2ac132147..bfd2bb8a3 100644 --- a/quartz/plugins/emitters/contentPage.tsx +++ b/quartz/plugins/emitters/contentPage.tsx @@ -6,6 +6,7 @@ import { QuartzEmitterPlugin } from "../types" import { QuartzComponentProps } from "../../components/types" import HeaderConstructor from "../../components/Header" import BodyConstructor from "../../components/Body" +import NavbarContructor from "../../components/Navbar"; import { pageResources, renderPage } from "../../components/renderPage" import { FullPageLayout } from "../../cfg" import { Argv } from "../../util/ctx" @@ -59,15 +60,18 @@ export const ContentPage: QuartzEmitterPlugin> = (userOp ...userOpts, } - const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts + const { head: Head, navbar, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts const Header = HeaderConstructor() const Body = BodyConstructor() + const Navbar = NavbarContructor() return { name: "ContentPage", getQuartzComponents() { return [ Head, + Navbar, + ...navbar, Header, Body, ...header, diff --git a/quartz/plugins/emitters/folderPage.tsx b/quartz/plugins/emitters/folderPage.tsx index b6d860272..032cd5ee2 100644 --- a/quartz/plugins/emitters/folderPage.tsx +++ b/quartz/plugins/emitters/folderPage.tsx @@ -2,6 +2,7 @@ import { QuartzEmitterPlugin } from "../types" import { QuartzComponentProps } from "../../components/types" import HeaderConstructor from "../../components/Header" import BodyConstructor from "../../components/Body" +import NavbarContructor from "../../components/Navbar" import { pageResources, renderPage } from "../../components/renderPage" import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile" import { FullPageLayout } from "../../cfg" @@ -33,15 +34,18 @@ export const FolderPage: QuartzEmitterPlugin> = (user ...userOpts, } - const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts + const { head: Head, navbar, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts const Header = HeaderConstructor() const Body = BodyConstructor() + const Navbar = NavbarContructor() return { name: "FolderPage", getQuartzComponents() { return [ Head, + Navbar, + ...navbar, Header, Body, ...header, diff --git a/quartz/plugins/emitters/tagPage.tsx b/quartz/plugins/emitters/tagPage.tsx index 066d4ec26..d97409fbc 100644 --- a/quartz/plugins/emitters/tagPage.tsx +++ b/quartz/plugins/emitters/tagPage.tsx @@ -2,6 +2,7 @@ import { QuartzEmitterPlugin } from "../types" import { QuartzComponentProps } from "../../components/types" import HeaderConstructor from "../../components/Header" import BodyConstructor from "../../components/Body" +import NavbarContructor from "../../components/Navbar" import { pageResources, renderPage } from "../../components/renderPage" import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile" import { FullPageLayout } from "../../cfg" @@ -30,15 +31,18 @@ export const TagPage: QuartzEmitterPlugin> = (userOpts) ...userOpts, } - const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts + const { head: Head, navbar, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts const Header = HeaderConstructor() const Body = BodyConstructor() + const Navbar = NavbarContructor() return { name: "TagPage", getQuartzComponents() { return [ Head, + Navbar, + ...navbar, Header, Body, ...header,