components: add ruins layout primitives

quartz.layout.ts

@@ -6,17 +6,13 @@ export const sharedPageComponents: SharedLayout = {
   head: Component.Head(),
   header: [],
   afterBody: [],
-  footer: Component.Footer({
-    links: {
-      GitHub: "https://github.com/jackyzha0/quartz",
-      "Discord Community": "https://discord.gg/cRFFHYye7t",
-    },
-  }),
+  footer: Component.RuinsFooter(),
 }
 
 // components for pages that display a single page (e.g. a single note)
 export const defaultContentPageLayout: PageLayout = {
   beforeBody: [
+    Component.Height(),
     Component.ConditionalRender({
       component: Component.Breadcrumbs(),
       condition: (page) => page.fileData.slug !== "index",
@@ -26,12 +22,13 @@ export const defaultContentPageLayout: PageLayout = {
   ],
   left: [
     Component.PageTitle(),
+    Component.Height({ height: "1rem" }),
     Component.MobileOnly(Component.Spacer()),
     Component.Search(),
     Component.Explorer(),
-    Component.DesktopOnly(Component.Darkmode()),
+    Component.DesktopOnly(Component.RuinsDarkmode()),
   ],
-  right: [Component.MobileOnly(Component.Darkmode())],
+  right: [Component.MobileOnly(Component.RuinsDarkmode())],
 }
 
 // components for pages that display lists of pages  (e.g. tags or folders)

quartz/components/Height.tsx

@@ -0,0 +1,20 @@
+import { classNames } from "../util/lang"
+import { QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+interface Options {
+  height: string
+}
+
+export default ((opts?: Partial<Options>) => {
+  function Height({ displayClass }: QuartzComponentProps) {
+    return <div class={classNames(displayClass, "title-height")}></div>
+  }
+
+  Height.css = `
+  .title-height {
+    height: ${opts?.height || "4rem"};
+  }
+  `
+
+  return Height
+}) satisfies QuartzComponentConstructor

quartz/components/RuinsDarkmode.tsx

@@ -0,0 +1,66 @@
+// @ts-ignore
+import darkmodeScript from "./scripts/darkmode.inline"
+import { i18n } from "../i18n"
+import { classNames } from "../util/lang"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+const RuinsDarkmode: QuartzComponent = ({ displayClass, cfg }: QuartzComponentProps) => {
+  return (
+    <button class={classNames(displayClass, "darkmode", "ruins-darkmode")}>
+      <p class="dayIcon" aria-label={i18n(cfg.locale).components.themeToggle.darkMode}>
+        Dreamy Days
+        <title>{i18n(cfg.locale).components.themeToggle.darkMode}</title>
+      </p>
+      <p class="nightIcon" aria-label={i18n(cfg.locale).components.themeToggle.lightMode}>
+        Somber Nights
+        <title>{i18n(cfg.locale).components.themeToggle.lightMode}</title>
+      </p>
+    </button>
+  )
+}
+
+RuinsDarkmode.beforeDOMLoaded = darkmodeScript
+RuinsDarkmode.css = `
+.ruins-darkmode {
+  cursor: pointer;
+  padding: 0;
+  background: none;
+  border: none;
+  margin: 0;
+  text-align: inherit;
+  color: var(--gray);
+  font-family: var(--metaFont);
+  font-size: 1.05rem;
+  line-height: 1.2;
+}
+
+.ruins-darkmode p {
+  margin: 0;
+}
+
+:root[saved-theme="dark"] {
+  color-scheme: dark;
+}
+
+:root[saved-theme="light"] {
+  color-scheme: light;
+}
+
+:root[saved-theme="dark"] .ruins-darkmode > .dayIcon {
+  display: none;
+}
+
+:root[saved-theme="dark"] .ruins-darkmode > .nightIcon {
+  display: inline;
+}
+
+:root .ruins-darkmode > .dayIcon {
+  display: inline;
+}
+
+:root .ruins-darkmode > .nightIcon {
+  display: none;
+}
+`
+
+export default (() => RuinsDarkmode) satisfies QuartzComponentConstructor

quartz/components/RuinsFooter.tsx

@@ -0,0 +1,12 @@
+import style from "./styles/footer.scss"
+import { classNames } from "../util/lang"
+import { QuartzComponent, QuartzComponentConstructor, QuartzComponentProps } from "./types"
+
+export default (() => {
+  const RuinsFooter: QuartzComponent = ({ displayClass }: QuartzComponentProps) => {
+    return <footer class={classNames(displayClass, "footer")}>See you in another file</footer>
+  }
+
+  RuinsFooter.css = style
+  return RuinsFooter
+}) satisfies QuartzComponentConstructor

quartz/components/index.ts

@@ -6,6 +6,7 @@ import ArticleTitle from "./ArticleTitle"
 import Darkmode from "./Darkmode"
 import ReaderMode from "./ReaderMode"
 import Head from "./Head"
+import Height from "./Height"
 import PageTitle from "./PageTitle"
 import ContentMeta from "./ContentMeta"
 import Spacer from "./Spacer"
@@ -16,6 +17,8 @@ import Graph from "./Graph"
 import Backlinks from "./Backlinks"
 import Search from "./Search"
 import Footer from "./Footer"
+import RuinsFooter from "./RuinsFooter"
+import RuinsDarkmode from "./RuinsDarkmode"
 import DesktopOnly from "./DesktopOnly"
 import MobileOnly from "./MobileOnly"
 import RecentNotes from "./RecentNotes"
@@ -32,6 +35,7 @@ export {
   Darkmode,
   ReaderMode,
   Head,
+  Height,
   PageTitle,
   ContentMeta,
   Spacer,
@@ -42,6 +46,8 @@ export {
   Backlinks,
   Search,
   Footer,
+  RuinsFooter,
+  RuinsDarkmode,
   DesktopOnly,
   MobileOnly,
   RecentNotes,