Feat: Random Page and Scroll to Top

- added 'Scroll to top' and 'Random page' buttons to site footer
- Updated credits

Credit: [Eilleen's (online!) Everything Notebook](https://quartz.eilleeenz.com/)

Author: MasssiveJuice08

Diff for: content/credits-and-readmes/index.md

@@ -17,4 +17,10 @@ aliases:
 ## [ITS Theme for Obsidian](https://publish.obsidian.md/slrvb-docs/ITS+Theme/ITS+Theme)
 
 - Thanks to [SIRvb](https://github.com/SlRvb) for providing the ITS Theme's [Image Adjustments](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Images%20Adjustments.css) and [Callouts](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/Snippets/S%20-%20Callouts.css) CSS snippets used throughout the site.
-- [License](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/LICENSE)
+- [License](https://github.com/SlRvb/Obsidian--ITS-Theme/blob/main/LICENSE)
+
+## [Eilleen's (online!) Everything Notebook](https://quartz.eilleeenz.com/)
+
+- Thanks to [fanteastick](https://github.com/fanteastick) for 'Eilleen's (online!) Everything Notebook', from whom the code for the site footer's 'Scroll to top' and 'Random page' buttons was borrowed. 
+- **Github:** [fanteastick/quartz-test](https://github.com/fanteastick/quartz-test)
+- [License](https://github.com/fanteastick/quartz-test/blob/v4/LICENSE.txt)

Diff for: quartz/components/Footer.tsx

@@ -2,6 +2,9 @@ import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } fro
 import style from "./styles/footer.scss"
 import { version } from "../../package.json"
 import { i18n } from "../i18n"
+// MMW randomPage script
+// @ts-ignore
+import script from "./scripts/randomPage.inline"
 
 interface Options {
   links: Record<string, string>
@@ -25,10 +28,24 @@ export default ((opts?: Options) => {
             </li>
           ))}
         </ul>
+        <p></p> 
+        <ul>
+          <li>
+            <a href="#">
+            Scroll to top ↑
+            </a> 
+          </li>
+          <li>
+            <a id="random-page-button">
+            Random Page 🎲
+            </a>
+          </li>
+        </ul>
       </footer>
     )
   }
 
   Footer.css = style
+  Footer.afterDOMLoaded = script
   return Footer
 }) satisfies QuartzComponentConstructor

Diff for: 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)
+})

Diff for: quartz/components/styles/footer.scss

@@ -13,3 +13,7 @@ footer {
     margin-top: -1rem;
   }
 }
+
+#random-page-button:hover{
+  cursor: pointer;
+}