GitHub/quartz
1
0
Fork 2
mirror of https://github.com/jackyzha0/quartz.git synced 2026-03-24 06:55:42 -05:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

feat(layout): add new component navbar to layout option

Browse Source
This commit is contained in:
vanadium23 2024-11-13 11:20:16 +03:00
parent 137d55eb1b
commit fd9a8579f7
8 changed files with 68 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
quartz.layout.ts
View File

@ -4,6 +4,7 @@ import * as Component from "./quartz/components"
// components shared across all pages // components shared across all pages
export const sharedPageComponents: SharedLayout = { export const sharedPageComponents: SharedLayout = {
head: Component.Head(), head: Component.Head(),
navbar: [],
header: [], header: [],
afterBody: [], afterBody: [],
footer: Component.Footer({ footer: Component.Footer({

3
quartz/cfg.ts
View File

@ -84,6 +84,7 @@ export interface QuartzConfig {
export interface FullPageLayout { export interface FullPageLayout {
head: QuartzComponent head: QuartzComponent
navbar: QuartzComponent[]
header: QuartzComponent[] header: QuartzComponent[]
beforeBody: QuartzComponent[] beforeBody: QuartzComponent[]
pageBody: QuartzComponent pageBody: QuartzComponent
@ -94,4 +95,4 @@ export interface FullPageLayout {
} }
export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right"> export type PageLayout = Pick<FullPageLayout, "beforeBody" | "left" | "right">
export type SharedLayout = Pick<FullPageLayout, "head" | "header" | "footer" | "afterBody"> export type SharedLayout = Pick<FullPageLayout, "head" | "navbar" | "header" | "footer" | "afterBody">

37
quartz/components/Navbar.tsx Normal file
View File

@ -0,0 +1,37 @@
import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
const Navbar: QuartzComponent = ({ children }: QuartzComponentProps) => {
return children.length > 0 ? (
<nav>
<ul>
{children.map((child, index) => (
<li key={index}>{child}</li>
))}
</ul>
</nav>
) : 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

9
quartz/components/renderPage.tsx
View File

@ -2,6 +2,7 @@ import { render } from "preact-render-to-string"
import { QuartzComponent, QuartzComponentProps } from "./types" import { QuartzComponent, QuartzComponentProps } from "./types"
import HeaderConstructor from "./Header" import HeaderConstructor from "./Header"
import BodyConstructor from "./Body" import BodyConstructor from "./Body"
import NavbarContructor from "./Navbar";
import { JSResourceToScriptElement, StaticResources } from "../util/resources" import { JSResourceToScriptElement, StaticResources } from "../util/resources"
import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path" import { clone, FullSlug, RelativeURL, joinSegments, normalizeHastElement } from "../util/path"
import { visit } from "unist-util-visit" import { visit } from "unist-util-visit"
@ -11,6 +12,7 @@ import { i18n } from "../i18n"
interface RenderComponents { interface RenderComponents {
head: QuartzComponent head: QuartzComponent
navbar: QuartzComponent[]
header: QuartzComponent[] header: QuartzComponent[]
beforeBody: QuartzComponent[] beforeBody: QuartzComponent[]
pageBody: QuartzComponent pageBody: QuartzComponent
@ -190,6 +192,7 @@ export function renderPage(
const { const {
head: Head, head: Head,
navbar,
header, header,
beforeBody, beforeBody,
pageBody: Content, pageBody: Content,
@ -200,6 +203,7 @@ export function renderPage(
} = components } = components
const Header = HeaderConstructor() const Header = HeaderConstructor()
const Body = BodyConstructor() const Body = BodyConstructor()
const Navbar = NavbarContructor()
const LeftComponent = ( const LeftComponent = (
<div class="left sidebar"> <div class="left sidebar">
@ -223,6 +227,11 @@ export function renderPage(
<Head {...componentData} /> <Head {...componentData} />
<body data-slug={slug}> <body data-slug={slug}>
<div id="quartz-root" class="page"> <div id="quartz-root" class="page">
<Navbar {...componentData}>
{navbar.map((NavbarComponent) => (
<NavbarComponent {...componentData} />
))}
</Navbar>
<Body {...componentData}> <Body {...componentData}>
{LeftComponent} {LeftComponent}
<div class="center"> <div class="center">

6
quartz/plugins/emitters/404.tsx
View File

@ -1,6 +1,7 @@
import { QuartzEmitterPlugin } from "../types" import { QuartzEmitterPlugin } from "../types"
import { QuartzComponentProps } from "../../components/types" import { QuartzComponentProps } from "../../components/types"
import BodyConstructor from "../../components/Body" import BodyConstructor from "../../components/Body"
import NavbarContructor from "../../components/Navbar"
import { pageResources, renderPage } from "../../components/renderPage" import { pageResources, renderPage } from "../../components/renderPage"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
import { FilePath, FullSlug } from "../../util/path" import { FilePath, FullSlug } from "../../util/path"
@ -20,13 +21,14 @@ export const NotFoundPage: QuartzEmitterPlugin = () => {
right: [], right: [],
} }
const { head: Head, pageBody, footer: Footer } = opts const { head: Head, navbar, pageBody, footer: Footer } = opts
const Body = BodyConstructor() const Body = BodyConstructor()
const Navbar = NavbarContructor()
return { return {
name: "404Page", name: "404Page",
getQuartzComponents() { getQuartzComponents() {
return [Head, Body, pageBody, Footer] return [Head, Navbar, ...navbar, Body, pageBody, Footer]
}, },
async getDependencyGraph(_ctx, _content, _resources) { async getDependencyGraph(_ctx, _content, _resources) {
return new DepGraph<FilePath>() return new DepGraph<FilePath>()

6
quartz/plugins/emitters/contentPage.tsx
View File

@ -6,6 +6,7 @@ import { QuartzEmitterPlugin } from "../types"
import { QuartzComponentProps } from "../../components/types" import { QuartzComponentProps } from "../../components/types"
import HeaderConstructor from "../../components/Header" import HeaderConstructor from "../../components/Header"
import BodyConstructor from "../../components/Body" import BodyConstructor from "../../components/Body"
import NavbarContructor from "../../components/Navbar";
import { pageResources, renderPage } from "../../components/renderPage" import { pageResources, renderPage } from "../../components/renderPage"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
import { Argv } from "../../util/ctx" import { Argv } from "../../util/ctx"
@ -59,15 +60,18 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
...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 Header = HeaderConstructor()
const Body = BodyConstructor() const Body = BodyConstructor()
const Navbar = NavbarContructor()
return { return {
name: "ContentPage", name: "ContentPage",
getQuartzComponents() { getQuartzComponents() {
return [ return [
Head, Head,
Navbar,
...navbar,
Header, Header,
Body, Body,
...header, ...header,

6
quartz/plugins/emitters/folderPage.tsx
View File

@ -2,6 +2,7 @@ import { QuartzEmitterPlugin } from "../types"
import { QuartzComponentProps } from "../../components/types" import { QuartzComponentProps } from "../../components/types"
import HeaderConstructor from "../../components/Header" import HeaderConstructor from "../../components/Header"
import BodyConstructor from "../../components/Body" import BodyConstructor from "../../components/Body"
import NavbarContructor from "../../components/Navbar"
import { pageResources, renderPage } from "../../components/renderPage" import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile" import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
@ -33,15 +34,18 @@ export const FolderPage: QuartzEmitterPlugin<Partial<FolderPageOptions>> = (user
...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 Header = HeaderConstructor()
const Body = BodyConstructor() const Body = BodyConstructor()
const Navbar = NavbarContructor()
return { return {
name: "FolderPage", name: "FolderPage",
getQuartzComponents() { getQuartzComponents() {
return [ return [
Head, Head,
Navbar,
...navbar,
Header, Header,
Body, Body,
...header, ...header,

6
quartz/plugins/emitters/tagPage.tsx
View File

@ -2,6 +2,7 @@ import { QuartzEmitterPlugin } from "../types"
import { QuartzComponentProps } from "../../components/types" import { QuartzComponentProps } from "../../components/types"
import HeaderConstructor from "../../components/Header" import HeaderConstructor from "../../components/Header"
import BodyConstructor from "../../components/Body" import BodyConstructor from "../../components/Body"
import NavbarContructor from "../../components/Navbar"
import { pageResources, renderPage } from "../../components/renderPage" import { pageResources, renderPage } from "../../components/renderPage"
import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile" import { ProcessedContent, QuartzPluginData, defaultProcessedContent } from "../vfile"
import { FullPageLayout } from "../../cfg" import { FullPageLayout } from "../../cfg"
@ -30,15 +31,18 @@ export const TagPage: QuartzEmitterPlugin<Partial<TagPageOptions>> = (userOpts)
...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 Header = HeaderConstructor()
const Body = BodyConstructor() const Body = BodyConstructor()
const Navbar = NavbarContructor()
return { return {
name: "TagPage", name: "TagPage",
getQuartzComponents() { getQuartzComponents() {
return [ return [
Head, Head,
Navbar,
...navbar,
Header, Header,
Body, Body,
...header, ...header,