changed randompage

quartz/components/_RandomPageButton.tsx

@@ -0,0 +1,33 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+// @ts-ignore
+import script from "./scripts/_randomPage.inline"
+import style from "./styles/_randomPage.scss"
+import { classNames } from "../util/lang"
+
+const RandomPageButton: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
+    return (
+        <div id="random-page-button" class={classNames(displayClass,  "random-page")}>
+            {/* <ul>
+                <li> */}
+                <svg y="0px" x="0px" viewBox="0 0 316 316">
+                    <title>Random page</title>
+                    <g>
+                        <rect class="random-page-square" stroke-width="15" rx="30" height="300" width="300" y="8" x="8" fill="none" />
+                        <ellipse class="random-page-ellipse" ry="20" rx="20" cy="83" cx="108" />
+                        <ellipse class="random-page-ellipse" ry="20" rx="20" cy="83" cx="208" />
+                        <ellipse class="random-page-ellipse" ry="20" rx="20" cy="233" cx="208" />
+                        <ellipse class="random-page-ellipse" ry="20" rx="20" cy="233" cx="108" />
+                        <ellipse class="random-page-ellipse" ry="20" rx="20" cy="158" cx="208" />
+                        <ellipse class="random-page-ellipse" ry="20" rx="20" cy="158" cx="108" />
+                    </g>
+                </svg>
+                {/* </li>
+            </ul> */}
+            
+            {/* <h3>Go to a random page 🎲</h3> */}
+        </div>
+    )
+}
+RandomPageButton.css = style
+RandomPageButton.afterDOMLoaded = script
+export default (() => RandomPageButton) satisfies QuartzComponentConstructor

quartz/components/scripts/_randomPage.inline.ts

@@ -0,0 +1,28 @@
+import { FullSlug, getFullSlug, pathToRoot, simplifySlug } from "../../util/path"
+
+function getRandomInt(max: number) {
+    return Math.floor(Math.random() * max);
+  }
+
+async function navigateToRandomPage() {
+    const fullSlug = getFullSlug(window)
+    const data = await fetchData
+    const allPosts = Object.keys(data).map((slug) => simplifySlug(slug as FullSlug))
+    // window.location.href = `${pathToRoot(fullSlug)}/${allPosts[getRandomInt(allPosts.length - 1)]}`
+    let newSlug = `${pathToRoot(fullSlug)}/${allPosts[getRandomInt(allPosts.length - 1)]}`;
+
+    if (newSlug === fullSlug) {
+      // Generate a new random slug until it's different from the starting fullSlug
+      do {
+        newSlug = `${pathToRoot(fullSlug)}/${allPosts[getRandomInt(allPosts.length - 1)]}`;
+      } while (newSlug === fullSlug);
+    }
+    window.location.href = newSlug;
+}
+
+document.addEventListener("nav", async (e: unknown) => {
+//   const slug = (e as CustomEventMap["nav"]).detail.url
+  const button = document.getElementById("random-page-button")
+  button?.removeEventListener("click", navigateToRandomPage)
+  button?.addEventListener("click", navigateToRandomPage)
+})

quartz/components/styles/_randomPage.scss

@@ -0,0 +1,41 @@
+.random-page {
+    position: relative;
+    width: 20px;
+    height: 20px;
+    margin-left: auto; 
+    margin: 0 10px;
+
+    &>ul {
+        list-style: none;
+        padding: 0;
+        margin: 0.5rem 0;
+    }
+  
+    > svg {
+      cursor: pointer;
+      position: absolute;
+      width: 20px;
+      height: 20px;
+      top: calc(50% - 10px);
+    }
+
+    &:hover {
+        opacity: 0.7; /* Decrease opacity on hover */
+        cursor: pointer;
+    } 
+    &>h3 {
+        font-size: 1rem;
+        margin: 0;
+    }
+  }
+  
+  .random-page-ellipse {
+    stroke: var(--darkgray);
+    fill: var(--darkgray);
+    transition: stroke 0.5s ease;
+  }
+  
+  .random-page-square {
+    stroke: var(--darkgray);
+    transition: stroke 0.5s ease;
+  }