added homebar

quartz.layout.ts

@@ -4,7 +4,9 @@ import * as Component from "./quartz/components"
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
-  header: [],
+  header: [
+    Component.Homebar(),
+  ],
   footer: Component.Footer({
     links: {
       "Main social profile": "https://derg.social/@ulysia",

quartz/components/Homebar.tsx

@@ -0,0 +1,38 @@
+import { pathToRoot } from "../util/path"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
+
+const Homebar: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
+  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
+  const baseDir = pathToRoot(fileData.slug!)
+  return (
+    <div class={classNames(displayClass, "homebar")}>
+        <a href="/index">Home</a>
+        <a href="Characters">Characters</a>
+        <a href="Links">Where you can find me</a>
+        <a href="Projects">Projects</a>
+        <a href="Articles">Articles</a>
+    </div>
+  )
+}
+
+Homebar.css = `
+.homebar {
+  margin: 0;
+  display: flex;
+  flex-direction: row;
+}
+.homebar > * {
+    border-radius: 25%;
+    background-color: rgba(100,100,100, 0.3);
+    padding: 0.2rem 0.4rem;
+    margin: 0.2rem 0.4rem;
+    text-decoration: none;
+}
+.homebar > *:hover {
+    background-color: rgba(100,100,100, 0.5);
+}
+`
+
+export default (() => Homebar) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -20,6 +20,7 @@ import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import PageImage from "./PageImage"
+import Homebar from "./Homebar"
 
 export {
   ArticleTitle,
@@ -44,4 +45,5 @@ export {
   NotFound,
   Breadcrumbs,
   PageImage,
+  Homebar,
 }