switched few things around

package-lock.json

@@ -76,6 +76,7 @@
         "@types/js-yaml": "^4.0.9",
         "@types/node": "^20.11.29",
         "@types/pretty-time": "^1.1.5",
+        "@types/react": "^18.2.79",
         "@types/source-map-support": "^0.5.10",
         "@types/ws": "^8.5.10",
         "@types/yargs": "^17.0.32",
@@ -1184,6 +1185,22 @@
       "integrity": "sha512-5yl+BYwmnRWZb783W8YYoHXvPY8q/rp7ctHBVaGBB9RxlzGpHNJ72tGQMK7TrUSnxzl1dbDcBDuBCSbtfnSQGg==",
       "dev": true
     },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.12",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.12.tgz",
+      "integrity": "sha512-5zvhXYtRNRluoE/jAp4GVsSduVUzNWKkOZrCDBWYtE7biZywwdC2AcEzg+cSMLFRfVgeAFqpfNabiPjxFddV1Q==",
+      "dev": true
+    },
+    "node_modules/@types/react": {
+      "version": "18.2.79",
+      "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.79.tgz",
+      "integrity": "sha512-RwGAGXPl9kSXwdNTafkOEuFrTBD5SA2B3iEB96xi8+xu5ddUa/cpvyVCSNn+asgLCTHkb5ZxN8gbuibYJi4s1w==",
+      "dev": true,
+      "dependencies": {
+        "@types/prop-types": "*",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/@types/source-map-support": {
       "version": "0.5.10",
       "resolved": "https://registry.npmjs.org/@types/source-map-support/-/source-map-support-0.5.10.tgz",
@@ -1665,6 +1682,12 @@
         "node": ">=18"
       }
     },
+    "node_modules/csstype": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
+      "dev": true
+    },
     "node_modules/d3": {
       "version": "7.8.5",
       "resolved": "https://registry.npmjs.org/d3/-/d3-7.8.5.tgz",
@@ -3198,9 +3221,9 @@
       }
     },
     "node_modules/katex": {
-      "version": "0.16.8",
+      "version": "0.16.10",
-      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.8.tgz",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.10.tgz",
-      "integrity": "sha512-ftuDnJbcbOckGY11OO+zg3OofESlbR5DRl2cmN8HeWeeFIV7wTXvAOx8kEjZjobhA+9wh2fbKeO6cdcA9Mnovg==",
+      "integrity": "sha512-ZiqaC04tp2O5utMsl2TEZTXxa6WSC4yo0fv5ML++D3QZv/vx2Mct0mTlRx3O+uUkjfuAgOkzsCmq5MiUEsDDdA==",
       "funding": [
         "https://opencollective.com/katex",
         "https://github.com/sponsors/katex"

package.json

@@ -98,6 +98,7 @@
     "@types/js-yaml": "^4.0.9",
     "@types/node": "^20.11.29",
     "@types/pretty-time": "^1.1.5",
+    "@types/react": "^18.2.79",
     "@types/source-map-support": "^0.5.10",
     "@types/ws": "^8.5.10",
     "@types/yargs": "^17.0.32",

quartz.layout.ts

@@ -4,18 +4,15 @@ import * as Component from "./quartz/components"
 // components shared across all pages
 export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
-  header: [
+  header: [Component.DesktopOnly(Component.PageImage()), Component.Homebar()],
-    Component.DesktopOnly(Component.PageImage()),
+  footer: Component.Footer({
-    Component.Homebar(),
-  ],
-  footer: [
-    Component.Footer({
     links: {
       "Main social profile": "https://derg.social/@ulysia",
     },
+    rings: {
+      Fediring: "https://fediring.net/",
+    },
   }),
-    Component.Rings()
-  ],
 }
 
 // components for pages that display a single page (e.g. a single note)

quartz/components/Footer.tsx

@@ -5,12 +5,14 @@ import { i18n } from "../i18n"
 
 interface Options {
   links: Record<string, string>
+  rings: Record<string, string>
 }
 
 export default ((opts?: Options) => {
   const Footer: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
     const year = new Date().getFullYear()
     const links = opts?.links ?? []
+    const rings = opts?.rings ?? []
     return (
       <footer class={`${displayClass ?? ""}`}>
         <hr />
@@ -21,6 +23,22 @@ export default ((opts?: Options) => {
             </li>
           ))}
         </ul>
+        <div class="rings">
+          {Object.entries(rings).map(([text, link]) => (
+            <div class="ring">
+              <a href={link}>{text}</a>
+              <a class="ringbtn" href={link + "previous?host=nexie.net"}>
+                ◄
+              </a>
+              <a class="ringbtn" href={link + "random"}>
+                Random
+              </a>
+              <a class="ringbtn" href={link + "next?host=nexie.net"}>
+                ►
+              </a>
+            </div>
+          ))}
+        </div>
       </footer>
     )
   }

quartz/components/Rings.tsx

@@ -1,53 +0,0 @@
-import { pathToRoot } from "../util/path"
-import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
-import { classNames } from "../util/lang"
-import { i18n } from "../i18n"
-
-const Rings: QuartzComponent = ({ fileData, cfg, displayClass }: QuartzComponentProps) => {
-  const title = cfg?.pageTitle ?? i18n(cfg.locale).propertyDefaults.title
-  const baseDir = pathToRoot(fileData.slug!)
-  return (
-    <div class="rings">
-        <div class="ring">
-            <a href ="https://fediring.net">Fediring</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>
-  )
-}
-
-Rings.css = `
-.rings {
-    display:flex;
-    flex-direction: column;
-}
-.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 (() => Rings) satisfies QuartzComponentConstructor

quartz/components/index.ts

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

quartz/components/styles/footer.scss

@@ -13,3 +13,33 @@ footer {
     margin-top: -1rem;
   }
 }
+
+.rings {
+  display:flex;
+  flex-direction: column;
+}
+.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;
+}