added _ScrollToTop.tsx

quartz/components/Footer.tsx

@@ -23,6 +23,19 @@ export default ((opts?: Options) => {
             </li>
           ))}
         </ul>
+        <p></p>
+        <ul>
+          <li>
+            <a href="#">
+              Наверх ↑
+            </a>
+          </li>
+          <li>
+            <a id="random-page-button">
+              Случайная заметка 🎲
+            </a>
+          </li>
+        </ul>
       </footer>
     )
   }

quartz/components/_ScrollToTop.tsx

@@ -0,0 +1,31 @@
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+import style from "./styles/_scrollToTop.scss"
+
+// @ts-ignore
+import script from "./scripts/_randomPage.inline"
+import { classNames } from "../util/lang"
+import { i18n } from "../i18n"
+
+const ScrollToTop: QuartzComponent = ({ displayClass, fileData }: QuartzComponentProps) => {
+return (
+  <div class={classNames(displayClass, "scroll-to-top")}>
+    <h3>Utilities</h3>
+    <ul>
+      <li>
+        <a href="#">
+        Scroll to top ↑
+        </a> 
+      </li>
+      <li>
+        <a id="random-page-button">
+        Random Page 🎲
+        </a>
+      </li>
+    </ul>
+
+  </div>
+)}
+
+ScrollToTop.css = style
+ScrollToTop.afterDOMLoaded = script
+export default (() => ScrollToTop) satisfies QuartzComponentConstructor

quartz/components/styles/_scrollToTop.scss

@@ -0,0 +1,31 @@
+.scroll-to-top {
+    &>h3 {
+        font-size: 1rem;
+        margin: 0;
+    }
+
+    &>ul {
+        list-style: none;
+        padding: 0;
+        margin: 0.5rem 0;
+
+        &>li {
+            &>a {
+                background-color: transparent;
+            }
+        }
+    }
+}
+
+a {
+    text-decoration: none;
+}
+
+.external-icon {
+    height: 1ex;
+    margin: 0 0.15em;
+
+    > path {
+      fill: var(--dark);
+    }
+}