switched to component ring

quartz.layout.ts

@@ -8,11 +8,14 @@ export const sharedPageComponents: SharedLayout = {
     Component.DesktopOnly(Component.PageImage()),
     Component.Homebar(),
   ],
-  footer: Component.Footer({
-    links: {
-      "Main social profile": "https://derg.social/@ulysia",
-    },
-  }),
+  footer: [
+    Component.Footer({
+      links: {
+        "Main social profile": "https://derg.social/@ulysia",
+      },
+    }),
+    Component.Rings()
+  ],
 }
 
 // components for pages that display a single page (e.g. a single note)

quartz/components/Rings.tsx

@@ -0,0 +1,49 @@
+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="homebar">
+        <div class="ring">
+        <a href ="https://fediring.net"><h2>Fediring:</h2></a>
+        <a class="ringbtn" href="https://fediring.net/previous?host=nexie.net">◄</a>
+        <a class="ringbtn" href="https://fediring.net/random">Random</a>
+        <a class="ringbtn" href="https://fediring.net/next?host=nexie.net">►</a>
+        </div>
+    </div>
+  )
+}
+
+Homebar.css = `
+.ring {
+    display:flex;
+    flex-flow: row wrap;
+}
+
+.ringbtn {
+    font-size: 0.9rem !important;
+    border-radius: 16px !important;
+    border:none !important;
+    background-color: rgba(100,100,100, 0.3) !important;
+    padding: 0.4rem 0.8rem !important;
+    margin: 0.2rem 0.4rem !important;
+    text-decoration: none !important;
+    width: fit-content !important;
+    height: fit-content !important;
+    cursor:pointer !important;
+}
+
+.ringbtn:hover{
+    background-color: rgba(100,100,100, 0.5) !important;
+}
+
+.ring svg {
+    display:none !important;
+}
+`
+
+export default (() => Homebar) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -21,6 +21,7 @@ import RecentNotes from "./RecentNotes"
 import Breadcrumbs from "./Breadcrumbs"
 import PageImage from "./PageImage"
 import Homebar from "./Homebar"
+import Rings from "./Rings"
 
 export {
   ArticleTitle,
@@ -46,4 +47,5 @@ export {
   Breadcrumbs,
   PageImage,
   Homebar,
+  Rings,
 }

quartz/styles/custom.scss

@@ -1,28 +1,3 @@
 @use "./base.scss";
 
 // put your custom CSS here!
-.ring {
-    display:flex;
-    flex-flow: row wrap;
-}
-
-.ringbtn {
-    font-size: 0.9rem !important;
-    border-radius: 16px !important;
-    border:none !important;
-    background-color: rgba(100,100,100, 0.3) !important;
-    padding: 0.4rem 0.8rem !important;
-    margin: 0.2rem 0.4rem !important;
-    text-decoration: none !important;
-    width: fit-content !important;
-    height: fit-content !important;
-    cursor:pointer !important;
-}
-
-.ringbtn:hover{
-    background-color: rgba(100,100,100, 0.5) !important;
-}
-
-.ring svg {
-    display:none !important;
-}