refactor: use markdown layouts

astro.config.mjs

@@ -4,7 +4,6 @@ import sitemap from "@astrojs/sitemap";
 import Icons from 'unplugin-icons/vite'
 import mdx from '@astrojs/mdx';
 import glsl from 'vite-plugin-glsl';
-import remarkToc from 'remark-toc'
 
 import svelte from "@astrojs/svelte";
 import UnoCSS from 'unocss/astro'
@@ -15,6 +14,15 @@ const locales = {
   de: "de",
 };
 
+const DEFAULT_LAYOUT = '@layouts/Post.astro';
+
+function setDefaultLayout() {
+  return function (_, file) {
+    const { frontmatter } = file.data.astro;
+    if (!frontmatter.layout) frontmatter.layout = DEFAULT_LAYOUT;
+  };
+}
+
 // https://astro.build/config
 export default defineConfig({
   site: "https://max-richter.dev",
@@ -31,12 +39,11 @@ export default defineConfig({
       }),
     ],
   },
+  markdown: {
+    remarkPlugins: [setDefaultLayout]
+  },
   integrations: [
-    mdx({
+    mdx(),
-      remarkPlugins: [
-        remarkToc
-      ]
-    }),
     svelte(),
     UnoCSS({
       injectReset: true

package.json

@@ -17,6 +17,10 @@
     "astro": "^4.5.5",
     "astro-i18n-aut": "^0.7.0",
     "astro-imagetools": "^0.9.0",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-slug": "^6.0.0",
+    "rehype-stringify": "^10.0.0",
+    "rehype-toc": "^3.0.2",
     "remark-toc": "^9.0.0",
     "svelte": "^4.2.12",
     "svelte-gestures": "^4.0.0",

pnpm-lock.yaml

@@ -26,6 +26,18 @@ dependencies:
   astro-imagetools:
     specifier: ^0.9.0
     version: 0.9.0(astro@4.5.5)
+  rehype-autolink-headings:
+    specifier: ^7.1.0
+    version: 7.1.0
+  rehype-slug:
+    specifier: ^6.0.0
+    version: 6.0.0
+  rehype-stringify:
+    specifier: ^10.0.0
+    version: 10.0.0
+  rehype-toc:
+    specifier: ^3.0.2
+    version: 3.0.2
   remark-toc:
     specifier: ^9.0.0
     version: 9.0.0
@@ -1609,6 +1621,11 @@ packages:
       '@jridgewell/resolve-uri': 3.1.2
       '@jridgewell/sourcemap-codec': 1.4.15
 
+  /@jsdevtools/rehype-toc@3.0.2:
+    resolution: {integrity: sha512-n5JEf16Wr4mdkRMZ8wMP/wN9/sHmTjRPbouXjJH371mZ2LEGDl72t8tEsMRNFerQN/QJtivOxqK1frdGa4QK5Q==}
+    engines: {node: '>=10'}
+    dev: false
+
   /@mdx-js/mdx@3.0.1:
     resolution: {integrity: sha512-eIQ4QTrOWyL3LWEe/bu6Taqzq2HQvHcyTMaOrI95P2/LmJE7AsfPfgJGuFLPVqBUE1BC1rik3VIhU+s9u72arA==}
     dependencies:
@@ -3294,6 +3311,12 @@ packages:
       vfile-location: 5.0.2
       web-namespaces: 2.0.1
 
+  /hast-util-heading-rank@3.0.0:
+    resolution: {integrity: sha512-EJKb8oMUXVHcWZTDepnr+WNbfnXKFNf9duMesmr4S8SXTJBJ9M4Yok08pu9vxdJwdlGRhVumk9mEhkEvKGifwA==}
+    dependencies:
+      '@types/hast': 3.0.4
+    dev: false
+
   /hast-util-is-element@3.0.0:
     resolution: {integrity: sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==}
     dependencies:
@@ -3393,6 +3416,12 @@ packages:
       web-namespaces: 2.0.1
       zwitch: 2.0.4
 
+  /hast-util-to-string@3.0.0:
+    resolution: {integrity: sha512-OGkAxX1Ua3cbcW6EJ5pT/tslVb90uViVkcJ4ZZIMW/R33DX/AkcJcRrPebPwJkHYwlDHXz4aIwvAAaAdtrACFA==}
+    dependencies:
+      '@types/hast': 3.0.4
+    dev: false
+
   /hast-util-to-text@4.0.0:
     resolution: {integrity: sha512-EWiE1FSArNBPUo1cKWtzqgnuRQwEeQbQtnFJRYV1hb1BWDgrAlBU0ExptvZMM/KSA82cDpm2sFGf3Dmc5Mza3w==}
     dependencies:
@@ -4976,6 +5005,17 @@ packages:
     resolution: {integrity: sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==}
     dev: false
 
+  /rehype-autolink-headings@7.1.0:
+    resolution: {integrity: sha512-rItO/pSdvnvsP4QRB1pmPiNHUskikqtPojZKJPPPAVx9Hj8i8TwMBhofrrAYRhYOOBZH9tgmG5lPqDLuIWPWmw==}
+    dependencies:
+      '@types/hast': 3.0.4
+      '@ungap/structured-clone': 1.2.0
+      hast-util-heading-rank: 3.0.0
+      hast-util-is-element: 3.0.0
+      unified: 11.0.4
+      unist-util-visit: 5.0.0
+    dev: false
+
   /rehype-parse@9.0.0:
     resolution: {integrity: sha512-WG7nfvmWWkCR++KEkZevZb/uw41E8TsH4DsY9UxsTbIXCVGbAs4S+r8FrQ+OtH5EEQAs+5UxKC42VinkmpA1Yw==}
     dependencies:
@@ -4990,6 +5030,16 @@ packages:
       hast-util-raw: 9.0.2
       vfile: 6.0.1
 
+  /rehype-slug@6.0.0:
+    resolution: {integrity: sha512-lWyvf/jwu+oS5+hL5eClVd3hNdmwM1kAC0BUvEGD19pajQMIzcNUd/k9GsfQ+FfECvX+JE+e9/btsKH0EjJT6A==}
+    dependencies:
+      '@types/hast': 3.0.4
+      github-slugger: 2.0.0
+      hast-util-heading-rank: 3.0.0
+      hast-util-to-string: 3.0.0
+      unist-util-visit: 5.0.0
+    dev: false
+
   /rehype-stringify@10.0.0:
     resolution: {integrity: sha512-1TX1i048LooI9QoecrXy7nGFFbFSufxVRAfc6Y9YMRAi56l+oB0zP51mLSV312uRuvVLPV1opSlJmslozR1XHQ==}
     dependencies:
@@ -4997,6 +5047,13 @@ packages:
       hast-util-to-html: 9.0.0
       unified: 11.0.4
 
+  /rehype-toc@3.0.2:
+    resolution: {integrity: sha512-DMt376+4i1KJGgHJL7Ezd65qKkJ7Eqp6JSB47BJ90ReBrohI9ufrornArM6f4oJjP2E2DVZZHufWucv/9t7GUQ==}
+    engines: {node: '>=10'}
+    dependencies:
+      '@jsdevtools/rehype-toc': 3.0.2
+    dev: false
+
   /rehype@13.0.1:
     resolution: {integrity: sha512-AcSLS2mItY+0fYu9xKxOu1LhUZeBZZBx8//5HKzF+0XP+eP8+6a5MXn2+DW2kfXR6Dtp1FEXMVrjyKAcvcU8vg==}
     dependencies:

src/components/LanguagePicker.astro

@@ -16,14 +16,24 @@ function translatePath(lang: string) {
   return `/${[lang, ...split].join("/")}`;
 }
 
+const flags = {
+  de: "🇩🇪",
+  en: "🇬🇧",
+};
+
 const t = useTranslations(Astro.url);
 ---
 
-<ul>
+<ul class="flex items-center gap-4">
   {
     Object.entries(locales).map(([lang, label]) => (
       <li>
-        <a href={translatePath(lang)} data-astro-prefetch>
+        <a
+          class="flex gap-2 items-center"
+          href={translatePath(lang)}
+          data-astro-prefetch
+        >
+          <span class="text-xs">{flags[label as keyof typeof flags]}</span>
           {t(label as "de")}
         </a>
       </li>

src/content/photos/sestri-levante/index.en.mdx

@@ -0,0 +1,31 @@
+---
+title: "Sestri Levante 2021"
+date: 2021-06-02
+cover: ./images/MAX_7055-Panorama.jpg
+license: "CC-BY-SA:4.0"
+comments: true
+---
+
+import Image from "@components/Image.astro";
+import MAX_7053 from "./images/MAX_7053.jpg";
+import MAX_7054 from "./images/MAX_7054.jpg";
+import MAX_7055_Panorama from "./images/MAX_7055-Panorama.jpg";
+import MAX_7076_Panorama from "./images/MAX_7076-Panorama.jpg";
+import ImageGallery from "@components/ImageGallery.svelte"
+
+<ImageGallery client:load/>
+
+Best images from a short trip to liguria in italy
+
+This image took way to long, had to do several attempts because its really hard to get focus and exposure right when you use self-timer. But i think in the end it payed off :)
+<Image src={MAX_7053} alt=""/>
+
+Liminal spaces anyone?
+<Image src={MAX_7054} alt=""/>
+
+I had one day with a bit of rain, but that was actually really nice because i never saw this part of the coast in fog.
+<Image src={MAX_7055_Panorama} alt=""/>
+
+Sestri Levante is just nice to look at.
+<Image src={MAX_7076_Panorama} alt=""/>
+

src/content/photos/sestri-levante/index.mdx

@@ -15,17 +15,17 @@ import ImageGallery from "@components/ImageGallery.svelte"
 
 <ImageGallery client:load/>
 
-Best images from a short trip to liguria in italy
+Beste Bilder von einem Kurztrip nach Ligurien in Italien
 
-This image took way to long, had to do several attempts because its really hard to get focus and exposure right when you use self-timer. But i think in the end it payed off :)
+Dieses Bild hat viel zu lange gedauert und musste mehrere Versuche machen, da es wirklich schwierig ist, den Fokus und die richtige Belichtung zu erzielen, wenn man den Selbstauslöser verwendet. Aber ich denke, am Ende hat es sich ausgezahlt :)
 <Image src={MAX_7053} alt=""/>
 
 Liminal spaces anyone?
 <Image src={MAX_7054} alt=""/>
 
-I had one day with a bit of rain, but that was actually really nice because i never saw this part of the coast in fog.
+Ich hatte einen Tag mit etwas Regen, aber das war wirklich schön, weil ich diesen Teil der Küste nie im Nebel gesehen habe.
 <Image src={MAX_7055_Panorama} alt=""/>
 
-Sestri Levante is just nice to look at.
+Sestri Levante ist einfach schön anzusehen.
 <Image src={MAX_7076_Panorama} alt=""/>
 

src/content/projects/plantarium/index.mdx

@@ -6,6 +6,7 @@ featured: true
 links: [["website", "https://plant.max-richter.dev"], ["git", "https://github.com/jim-fx/plantarium"]]
 tags: ["Web", "3D", "Svelte", "Node-Systeme"]
 draft: false
+toc: true
 ---
 
 # Einführung

src/layouts/Layout.astro

@@ -65,7 +65,9 @@ const { title, width = "compact" } = Astro.props;
         --neutral-000: #f1f1f4;
         --fill: #cb5a5a;
 
+        --border-radius-sm: 10px;
         --border-radius-md: 20px;
+        --border-radius-lg: 30px;
 
         --spacing-sm: 10px;
         --spacing-md: 20px;
@@ -99,15 +101,6 @@ const { title, width = "compact" } = Astro.props;
         --text: var(--neutral-100);
         --text-light: white;
       }
-
-      /* .dark .icon-tabler-sun, */
-      /* .light .icon-tabler-moon { */
-      /*   display: none; */
-      /* } */
-      /* .dark .icon-tabler-moon, */
-      /* .light .icon-tabler-sun { */
-      /*   display: block; */
-      /* } */
     </style>
     <script>
       (function () {
@@ -130,7 +123,9 @@ const { title, width = "compact" } = Astro.props;
     <main id="main-content" class="flex flex-col mt-4xl gap-y-2xl">
       <slot />
     </main>
+    <footer>
       <LanguagePicker />
+    </footer>
     <style>
       .layout-compact {
         max-width: 600px;

src/layouts/Post.astro

@@ -1,24 +1,31 @@
 ---
-import type { CollectionEntry } from "astro:content";
 import Layout from "./Layout.astro";
-import { useTranslatedPath } from "@i18n/utils";
+import { useTranslatedPath, useTranslations } from "@i18n/utils";
+import type { MarkdownLayoutProps } from "astro";
 
-type CustomProps = {
+type Props = MarkdownLayoutProps<{
-  layout?: "normal" | "transparent";
+  title: string;
-  backlink?: string;
+  date: Date;
-};
+  links?: string[][];
-type Props = CollectionEntry<"blog" | "photos" | "videos" | "projects"> &
+  toc?: boolean;
-  CustomProps;
+}>;
 
-const { data, backlink = "/" } = Astro.props;
+const { frontmatter } = Astro.props;
-const { title, date, links, _layout } = data;
+const t = useTranslations(Astro.url);
+const { title, url, date: dateString, links, toc } = frontmatter;
+const collection = url?.split("/")[2];
+const date = new Date(dateString);
 const path = useTranslatedPath(Astro.url);
+
+//@ts-ignore
+const backlinkContent = t(`nav.${collection}`).toLowerCase();
 ---
 
 <Layout title={title}>
   <div class="top-info flex items-center place-content-between m-y-2">
-    <a class="flex items-center gap-1 opacity-50" href={path(backlink)}
+    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}
-      ><span class="i-tabler-arrow-left"></span> overview</a
+      ><span class="i-tabler-arrow-left"></span>
+      {backlinkContent}</a
     >
 
     {
@@ -48,13 +55,11 @@ const path = useTranslatedPath(Astro.url);
       }
     </div>
   </div>
-  <article class={`layout-${_layout} flex flex-col gap-4`}>
+  <article class={`flex flex-col gap-4 ${toc ? "show-toc" : ""}`}>
     <div class="mb-4 flex flex-col gap-1">
       <h1 class="text-4xl">
         {title}
       </h1>
-
-      <div class="toc"></div>
     </div>
     <slot />
   </article>
@@ -65,4 +70,32 @@ const path = useTranslatedPath(Astro.url);
     padding: 20px;
     background: var(--background);
   }
+
+  article :global(picture) {
+    border-radius: var(--border-radius-sm);
+    overflow: hidden;
+  }
+
+  article :global(.toc-post) {
+    display: none;
+  }
+
+  article.show-toc :global(.toc-post) {
+    display: flex !important;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  article :global(.toc-post > ol ol) {
+    margin-left: 20px;
+  }
+
+  @media (min-width: 1200px) {
+    :global(.toc-post) {
+      position: fixed;
+      top: 0;
+      height: 80vh;
+      left: 10px;
+    }
+  }
 </style>

src/pages/blog/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Post from "@layouts/Post.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection, parseSlug } from "@i18n/utils";
 
@@ -32,6 +31,4 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page} backlink="/blog">
+<Content />
-  <Content />
-</Post>

src/pages/photos/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Post from "@layouts/Post.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection, parseSlug } from "@i18n/utils";
 
@@ -32,6 +31,4 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page} backlink="/photos">
+<Content />
-  <Content />
-</Post>

src/pages/projects/[slug].astro

@@ -1,6 +1,5 @@
 ---
 import { getCollection } from "astro:content";
-import Post from "@layouts/Post.astro";
 import { getLocale } from "astro-i18n-aut";
 import { filterCollection, parseSlug } from "@i18n/utils";
 
@@ -32,6 +31,4 @@ if (!page) {
 const { Content } = await page.render();
 ---
 
-<Post {...page} backlink="/projects">
+<Content />
-  <Content />
-</Post>