navbar layout reference added and Navbarcomponent added before the Header Component

PrathameshDhande22 · PrathameshDhande22 · commit 97743e97466c · 2025-03-09T17:38:24.000+05:30
diff --git a/quartz/components/renderPage.tsx b/quartz/components/renderPage.tsx
@@ -15,6 +15,7 @@ import { QuartzPluginData } from "../plugins/vfile"
 
 interface RenderComponents {
   head: QuartzComponent
+  navbar: QuartzComponent[]
   header: QuartzComponent[]
   beforeBody: QuartzComponent[]
   pageBody: QuartzComponent
@@ -34,12 +35,7 @@ export function pageResources(
   const contentIndexScript = `const fetchData = fetch("${contentIndexPath}").then(data => data.json())`
 
   const resources: StaticResources = {
-    css: [
-      {
-        content: joinSegments(baseDir, "index.css"),
-      },
-      ...staticResources.css,
-    ],
+    css: [{ content: joinSegments(baseDir, "index.css") }, ...staticResources.css],
     js: [
       {
         src: joinSegments(baseDir, "prescript.js"),
@@ -107,12 +103,7 @@ export function renderPage(
           let blockNode = page.blocks?.[blockRef]
           if (blockNode) {
             if (blockNode.tagName === "li") {
-              blockNode = {
-                type: "element",
-                tagName: "ul",
-                properties: {},
-                children: [blockNode],
-              }
+              blockNode = { type: "element", tagName: "ul", properties: {}, children: [blockNode] }
             }
 
             node.children = [
@@ -210,6 +201,7 @@ export function renderPage(
   const {
     head: Head,
     header,
+    navbar,
     beforeBody,
     pageBody: Content,
     afterBody,
@@ -228,6 +220,16 @@ export function renderPage(
     </div>
   )
 
+  const NavbarComponent = (
+    <div class="navbar">
+      <div class="navbar-center">
+        {navbar.map((BodyComponent) => (
+          <BodyComponent {...componentData} />
+        ))}
+      </div>
+    </div>
+  )
+
   const RightComponent = (
     <div class="right sidebar">
       {right.map((BodyComponent) => (
@@ -238,11 +240,12 @@ export function renderPage(
 
   const lang = componentData.fileData.frontmatter?.lang ?? cfg.locale?.split("-")[0] ?? "en"
   const doc = (
-    <html lang={lang}>
+    <html lang={lang} saved-theme="dark">
       <Head {...componentData} />
       <body data-slug={slug}>
         <div id="quartz-root" class="page">
           <Body {...componentData}>
+            {NavbarComponent}
             {LeftComponent}
             <div class="center">
               <div class="page-header">
diff --git a/quartz/components/styles/footer.scss b/quartz/components/styles/footer.scss
@@ -11,5 +11,6 @@ footer {
     flex-direction: row;
     gap: 1rem;
     margin-top: -1rem;
+    justify-content: center;
   }
 }
diff --git a/quartz/plugins/emitters/contentPage.tsx b/quartz/plugins/emitters/contentPage.tsx
@@ -59,7 +59,17 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
     ...userOpts,
   }
 
-  const { head: Head, header, beforeBody, pageBody, afterBody, left, right, footer: Footer } = opts
+  const {
+    head: Head,
+    header,
+    navbar,
+    beforeBody,
+    pageBody,
+    afterBody,
+    left,
+    right,
+    footer: Footer,
+  } = opts
   const Header = HeaderConstructor()
   const Body = BodyConstructor()
 
@@ -69,6 +79,7 @@ export const ContentPage: QuartzEmitterPlugin<Partial<FullPageLayout>> = (userOp
       return [
         Head,
         Header,
+        ...navbar,
         Body,
         ...header,
         ...beforeBody,
diff --git a/quartz/styles/base.scss b/quartz/styles/base.scss
@@ -203,7 +203,7 @@ a {
         height: unset;
         flex-direction: row;
         padding: 0;
-        padding-top: 2rem;
+        padding-top: 6rem;
       }
     }
 
diff --git a/quartz/styles/custom.scss b/quartz/styles/custom.scss
@@ -1,3 +1,15 @@
 @use "./base.scss";
+@import "../components/styles/navbar.scss";
 
 // put your custom CSS here!
+.header {
+    margin: 0.5rem 0;
+}
+
+ul.overflow > li:last-of-type {
+    margin-bottom: 0;
+}
+
+.article-title {
+    margin: 1rem 0 0;
+}

Original file line number	Diff line number	Diff line change
`@@ -11,5 +11,6 @@ footer {`
`11`	`11`	`flex-direction: row;`
`12`	`12`	`gap: 1rem;`
`13`	`13`	`margin-top: -1rem;`
	`14`	`+ justify-content: center;`
`14`	`15`	`}`
`15`	`16`	`}`
Original file line number	Diff line number	Diff line change
`@@ -203,7 +203,7 @@ a {`
`203`	`203`	`height: unset;`
`204`	`204`	`flex-direction: row;`
`205`	`205`	`padding: 0;`
`206`		`- padding-top: 2rem;`
	`206`	`+ padding-top: 6rem;`
`207`	`207`	`}`
`208`	`208`	`}`
`209`	`209`