feat: add table of content element

public/app.css

@@ -9,13 +9,18 @@ h3 {
   font-family: 'Roboto', sans-serif;
 }
 
+article>h1 {
+  font-size: 28px;
+  margin-top: 24px;
+}
+
 article>h2 {
-  font-size: 24px;
+  font-size: 22px;
   margin-top: 20px;
 }
 
 article>h3 {
-  font-size: 20px;
+  font-size: 18px;
   margin-top: 16px;
 }
 

src/components/ImageSlider.svelte

@@ -55,7 +55,7 @@
 </script>
 
 <div
-  class="wrapper grid overflow-hidden rounded-xl border border-light"
+  class="wrapper grid overflow-hidden rounded-xl border border-neutral"
   class:title
   class:not-loaded={!loaded}
   class:loaded

src/components/Max.astro

@@ -10,7 +10,7 @@ const t = useTranslations(Astro.url);
 ---
 
 <Card
-  classes="googley-eye-target relative rounded-diag-md border border-neutral gradient grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
+  classes="googley-eye-target relative rounded-diag-md border border-neutral bg-dark grid xs:grid-cols-[250px_1fr] min-h-[180px] sm:h-[180px] mt-8"
 >
   <div
     class="image relative h-[130%] self-end items-end flex overflow-hidden order-last xs:order-first"
@@ -55,6 +55,21 @@ const t = useTranslations(Astro.url);
     bottom: 0;
     background: linear-gradient(-12deg, var(--background) 0%, transparent 50%);
   }
+  .image {
+    filter: brightness(1.1) contrast(0.9);
+  }
+
+  :global(.dark) .image {
+    filter: brightness(0.9);
+  }
+
+  :global(.dark) .image::before {
+    background: linear-gradient(
+      -12deg,
+      var(--background-dark) 0%,
+      transparent 50%
+    );
+  }
 
   .image > :global(img) {
     height: 100%;

src/components/TOC.astro

@@ -0,0 +1,36 @@
+---
+import { useTranslations } from "@i18n/utils";
+import type { MarkdownHeading } from "astro";
+const t = useTranslations(Astro.url);
+
+type Props = {
+  headings: MarkdownHeading[];
+};
+
+const { headings } = Astro.props;
+---
+
+<div class="toc-wrapper lg:fixed lg:left-6 lg:top-6">
+  <details
+    class="py-2 px-4 rounded-xl border border-neutral flex flex-col bg gap-2"
+  >
+    <summary class="text-lg cursor-pointer select-none"
+      >{t("toc.title")}</summary
+    >
+    <div class="flex flex-col gap-[2px] my-2">
+      {
+        headings.map((heading) => {
+          return (
+            <a
+              href={`#${heading.slug}`}
+              style={{ marginLeft: `${(heading.depth - 1) * 1}rem` }}
+              class={`block text my-0`}
+            >
+              {heading.text}
+            </a>
+          );
+        })
+      }
+    </div>
+  </details>
+</div>

src/content/projects/karl/index.mdx

@@ -3,8 +3,8 @@ title: "K.A.R.L"
 date: 2021-04-01
 cover: ./images/Indicatrices_of_Distortion.png
 license: "CC-BY-SA:4.0"
-comments: true
 featured: true
+toc: true
 links:
   [
     ["live", "https://max-richter.dev/karl"],

src/content/projects/plantarium/index.mdx

@@ -45,9 +45,9 @@ import ImageGallery from "@components/ImageGallery.svelte"
 
 Schon gar nicht schlecht, aber wie das mit Prototypen so ist gab es noch einiges zu verbessern. Also eine Kurze Historie der größten Änderungen bis heute:
 
-## Refactors
+# Refactors
 
-### Svelte Rewrite
+## Svelte Rewrite
 
 Der erste Prototyp war handgeschriebenes ungetestes Javascript. Das kann man sich etwa so vorstellen als ob man ein Auto nur aus Zahnstochern und Ducttape bauen muss.
 Man kriegt es eventuell hin, ist vielleicht sogar ganz begeistert von seiner Kreation, wenn man sich das ganze aber dann ne Woche später nochmal anschaut oder schlimmer noch Verbesserungen daran machen will wird es recht schnell schwierig. Das hieß es war Zeit für die Lieblingsbeschäftigung eines jeden Web Entwicklers; herausfinden was gerade der heiße Scheiß in der Welt der Webentwicklung ist. Sobald man sich dann für eine der tausenden möglichen Technologien entschieden hat, macht man diese zu seiner persönlichen Religion und verteidigt sie mit religiösem Fanatismus. Ganz einfach, oder?
@@ -67,7 +67,9 @@ Im Hinterkopf hatte ich eigentlich schon die Lösung für das Problem, war mir n
 
 Die Lösung sind Node-Systeme! Hmm, was ist das denn?
 
+<div class="center my-4">
 ![Node-Systeme](./images/nodes.svg)
+</div>
 
 Node-Systeme bestehen aus Nodes und Connections. Nodes haben inputs und outputs und man kann diese miteinander verbinden.
 
@@ -86,15 +88,17 @@ Das coole ist das man dieses System sehr generisch gestalten kann und zum beispi
 
 ### Svelte-Kit Rewrite
 
-## Architektur
+# Architektur
 
-## Design
+# Design
 
-## Zukunft
+# Zukunft
 
-## Abschluss
+# Abschluss
 
 Aktuell sieht die Architectur in etwa so aus:
 
+<div class="center my-4">
 ![Architecture](./images/architecture.svg)
+</div>
 

src/i18n/ui.ts

@@ -22,6 +22,7 @@ export const ui = {
     'nav.projects': 'Projects',
     'nav.videos': 'Videos',
     'nav.photos': 'Photos',
+    'toc.title': 'Table of Contents',
   },
   de: {
     "en": "English",
@@ -38,6 +39,7 @@ export const ui = {
     'nav.projects': 'Projekte',
     'nav.videos': 'Videos',
     'nav.photos': 'Fotos',
+    'toc.title': 'Inhaltsverzeichnis',
   },
 } as const;
 

src/layouts/Layout.astro

@@ -118,11 +118,11 @@ const { title, width = "compact" } = Astro.props;
       })();
     </script>
   </head>
-  <body class=`layout-${width} bg-dark text-neutral p-2`>
+  <body class="bg-dark text-neutral p-2 flex flex-col gap-4">
     <header>
       <Nav />
     </header>
-    <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
+    <main id="main-content" class="flex flex-col gap-4">
       <slot />
     </main>
     <footer class="px-4 flex gap-8 mb-4">
@@ -135,7 +135,7 @@ const { title, width = "compact" } = Astro.props;
       </a>
     </footer>
     <style>
-      .layout-compact {
+      body {
         max-width: 600px;
         margin: 0 auto;
       }

src/layouts/Post.astro

@@ -1,5 +1,6 @@
 ---
 import Layout from "./Layout.astro";
+import TOC from "@components/TOC.astro";
 import { useTranslatedPath, useTranslations } from "@i18n/utils";
 import type { MarkdownLayoutProps } from "astro";
 
@@ -10,7 +11,7 @@ type Props = MarkdownLayoutProps<{
   toc?: boolean;
 }>;
 
-const { frontmatter } = Astro.props;
+const { frontmatter, headings } = Astro.props;
 const t = useTranslations(Astro.url);
 const { title, url, date: dateString, links, toc } = frontmatter;
 const collection = url?.split("/")[2];
@@ -56,11 +57,12 @@ const backlinkContent = t(`nav.${collection}`).toLowerCase();
     </div>
   </div>
   <article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
-    <div class="mb-4 flex flex-col gap-1">
+    <div class="flex flex-col gap-1">
       <h1 class="text-4xl">
         {title}
       </h1>
     </div>
+    {toc && <TOC headings={headings} />}
     <slot />
   </article>
 </Layout>