refactor: use markdown layouts

2024-04-06 19:11:06 +02:00
parent 6a5d1fa849
commit 5ea9e2bc20
12 changed files with 148 additions and 47 deletions
--- a/astro.config.mjs
+++ b/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({
-      remarkPlugins: [
-        remarkToc
-      ]
-    }),
+    mdx(),
    svelte(),
    UnoCSS({
      injectReset: true
--- a/package.json
+++ b/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",
--- a/pnpm-lock.yaml
+++ b/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:
--- a/src/components/LanguagePicker.astro
+++ b/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>
--- a/src/content/photos/sestri-levante/index.en.mdx
+++ b/src/content/photos/sestri-levante/index.en.mdx
--- a/src/content/photos/sestri-levante/index.mdx
+++ b/src/content/photos/sestri-levante/index.mdx
--- a/src/content/projects/plantarium/index.mdx
+++ b/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
--- a/src/layouts/Layout.astro
+++ b/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>
-    <LanguagePicker />
+    <footer>
+      <LanguagePicker />
+    </footer>
    <style>
      .layout-compact {
        max-width: 600px;
--- a/src/layouts/Post.astro
+++ b/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 = {
-  layout?: "normal" | "transparent";
-  backlink?: string;
-};
-type Props = CollectionEntry<"blog" | "photos" | "videos" | "projects"> &
-  CustomProps;
+type Props = MarkdownLayoutProps<{
+  title: string;
+  date: Date;
+  links?: string[][];
+  toc?: boolean;
+}>;

-const { data, backlink = "/" } = Astro.props;
-const { title, date, links, _layout } = data;
+const { frontmatter } = Astro.props;
+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)}
-      ><span class="i-tabler-arrow-left"></span> overview</a
+    <a class="flex items-center gap-1 opacity-50" href={path("/" + collection)}
+      ><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>
--- a/src/pages/blog/[slug].astro
+++ b/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 />
-</Post>
+<Content />
--- a/src/pages/photos/[slug].astro
+++ b/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 />
-</Post>
+<Content />
--- a/src/pages/projects/[slug].astro
+++ b/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 />
-</Post>
+<Content />