Navbar Wrapper Component Added which can able to wrap all the component along with its script and css in one component

Author: PrathameshDhande22

quartz/components/NavbarWrapper.tsx

@@ -0,0 +1,26 @@
+import { concatenateResources } from "../util/resources"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/navbarwrapper.scss"
+interface Options {
+  components: QuartzComponent[]
+}
+
+export default ((opts: Options) => {
+  const NavbarWrapper: QuartzComponent = (props: QuartzComponentProps) => {
+    return (
+      <div class="navbar-wrapper">
+        {opts?.components.map((Component) => {
+          return <Component {...props}></Component>
+        })}
+      </div>
+    )
+  }
+  NavbarWrapper.afterDOMLoaded = concatenateResources(
+    ...opts.components.map((c) => c.afterDOMLoaded),
+  )
+  NavbarWrapper.beforeDOMLoaded = concatenateResources(
+    ...opts.components.map((c) => c.beforeDOMLoaded),
+  )
+  NavbarWrapper.css = concatenateResources(...opts.components.map((c) => c.css), style)
+  return NavbarWrapper
+}) satisfies QuartzComponentConstructor<Options>

quartz/components/index.ts

@@ -22,6 +22,7 @@ import Breadcrumbs from "./Breadcrumbs"
 import Comments from "./Comments"
 import NavigationLinks from "./NavigationLinks"
 import Drawer from "./Drawer"
+import NavbarWrapper from "./NavbarWrapper"
 
 export {
   ArticleTitle,
@@ -39,6 +40,7 @@ export {
   Explorer,
   TagList,
   Graph,
+  NavbarWrapper,
   Backlinks,
   Search,
   Footer,

quartz/components/styles/navbarwrapper.scss

@@ -0,0 +1,6 @@
+.navbar-wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+}

quartz/plugins/emitters/componentResources.ts

@@ -36,17 +36,21 @@ function getComponentResources(ctx: BuildCtx): ComponentResources {
     afterDOMLoaded: new Set<string>(),
   }
 
+  function normalizeResource(resource: string | string[] | undefined): string[] {
+    if (!resource) return []
+    if (Array.isArray(resource)) return resource
+    return [resource]
+  }
+
   for (const component of allComponents) {
     const { css, beforeDOMLoaded, afterDOMLoaded } = component
-    if (css) {
-      componentResources.css.add(css)
-    }
-    if (beforeDOMLoaded) {
-      componentResources.beforeDOMLoaded.add(beforeDOMLoaded)
-    }
-    if (afterDOMLoaded) {
-      componentResources.afterDOMLoaded.add(afterDOMLoaded)
-    }
+    const normalizedCss = normalizeResource(css)
+    const normalizedBeforeDOMLoaded = normalizeResource(beforeDOMLoaded)
+    const normalizedAfterDOMLoaded = normalizeResource(afterDOMLoaded)
+
+    normalizedCss.forEach((c) => componentResources.css.add(c))
+    normalizedBeforeDOMLoaded.forEach((b) => componentResources.beforeDOMLoaded.add(b))
+    normalizedAfterDOMLoaded.forEach((a) => componentResources.afterDOMLoaded.add(a))
   }
 
   return {

quartz/util/resources.tsx

@@ -63,3 +63,10 @@ export interface StaticResources {
   css: CSSResource[]
   js: JSResource[]
 }
+
+export type StringResource = string | string[] | undefined
+export function concatenateResources(...resources: StringResource[]): StringResource {
+  return resources
+    .filter((resource): resource is string | string[] => resource !== undefined)
+    .flat()
+}