feeat: add expressive-code

.vscode/launch.json

@@ -3,7 +3,7 @@
   "configurations": [
     {
       "command": "./node_modules/.bin/astro dev",
-      "name": "Development server",
+      "name": "Development",
       "request": "launch",
       "type": "node-terminal"
     }

astro.config.mjs

@@ -16,6 +16,8 @@ import rehypeExternalLinks from 'rehype-external-links'
 import rehypeAutoLinkHeadings from 'rehype-autolink-headings'
 import rehypeSlug from 'rehype-slug'
 
+import expressiveCode from 'astro-expressive-code'
+
 // https://astro.build/config
 export default defineConfig({
   site: 'https://hawk-gt1191.de',
@@ -34,11 +36,14 @@ export default defineConfig({
     },
     '/hilfe': '/dokumentation',
     '/seminar': '/',
-    '/tutorials/lernpfade': '/tutorials/lernpfade/grundlagen'
+    '/tutorials/lernpfade': '/tutorials/lernpfade/grundlagen',
+    '/tutorials/art-direction-im-kreditantragsprozess': {
+      status: 301,
+      destination: '/tutorials/responsive-images'
+    }
   },
   markdown: {
     shikiConfig: {
-      theme: 'github-dark',
       wrap: true
     },
     gfm: true,
@@ -66,6 +71,11 @@ export default defineConfig({
     ]
   },
   integrations: [
+    expressiveCode({
+      themes: ['catppuccin-frappe', 'catppuccin-latte'],
+      themeCssSelector: (theme) => `[data-code-theme='${theme.name}']`,
+      styleOverrides: {}
+    }),
     mdx({
       remarkRehype: {
         handlers: {

package.json

@@ -23,8 +23,8 @@
   },
   "dependencies": {
     "@astrojs/check": "^0.9.4",
-    "@astrojs/markdown-remark": "^5.0.0",
-    "@astrojs/mdx": "4.0.3",
+    "@astrojs/markdown-remark": "6.1.0",
+    "@astrojs/mdx": "4.0.8",
     "@astrojs/rss": "4.0.11",
     "@astrojs/sitemap": "3.2.1",
     "@astropub/md": "^1.0.0",
@@ -36,8 +36,9 @@
     "@iconify-json/simple-icons": "^1.2.18",
     "@vercel/og": "^0.6.4",
     "add": "^2.0.6",
-    "astro": "5.1.2",
+    "astro": "5.2.5",
     "astro-embed": "^0.9.0",
+    "astro-expressive-code": "^0.40.1",
     "astro-icon": "^1.1.5",
     "astro-link": "^1.2.1",
     "autoprefixer": "^10.4.20",

src/components/ArticleCard.astro

@@ -24,7 +24,7 @@ if (!images[imagePath]) {
 }
 ---
 
-<article class:list={['article-card', { draft: article.data.isDraft }]}>
+<article class:list={['article-card', { draft: article.data?.isDraft }]}>
   {article.data.isDraft && <div class='draft-banner' />}
 
   <a href={`/tutorials/${article.id}`}>
@@ -41,7 +41,7 @@ if (!images[imagePath]) {
 
     <div class='image'>
       {
-        imagePath && (
+        imagePath && article.data.cover.path && (
           <Image
             src={images[imagePath]()}
             widths={[380, 670, 710]}

src/components/Figure.astro

@@ -50,20 +50,24 @@ if (imagePath !== undefined && !images[imagePath]) {
 <style lang='scss' is:global>
   @use '../styles/base/mixins';
 
-  figure {
+  figure:not([class]) {
     @include mixins.media-item();
 
     img {
       display: block;
     }
 
-    figcaption {
+    img + .expressive-code {
+      margin-block-start: var(--sp);
+    }
+
+    > figcaption {
       font-size: 0.8em;
       padding-block: 0.5em 1em;
       margin-block-end: 0;
     }
 
-    &:has(figcaption) {
+    &:has(> figcaption) {
       padding-block-end: var(--sp) 0;
     }
 

src/components/Metadata.astro

@@ -89,8 +89,22 @@ const openGraphImage = Astro.url.pathname.startsWith('/tutorials')
         'data-theme',
         mode === 'system' ? prefersScheme : mode
       )
+      document.documentElement.setAttribute(
+        'data-code-theme',
+        mode === 'system'
+          ? prefersScheme === 'dark'
+            ? 'catppuccin-frappe'
+            : 'catppuccin-latte'
+          : mode === 'dark'
+            ? 'catppuccin-frappe'
+            : 'catppuccin-latte'
+      )
     } else {
       document.documentElement.setAttribute('data-theme', prefersScheme)
+      document.documentElement.setAttribute(
+        'data-code-theme',
+        prefersScheme === 'dark' ? 'catppuccin-frappe' : 'catppuccin-latte'
+      )
     }
   })()
 </script>

src/components/ThemeButton.astro

@@ -83,23 +83,37 @@
   }
 
   themeToggleButton.addEventListener('click', () => {
+    console.log('clicked')
     const prefersScheme = window.matchMedia('(prefers-color-scheme: dark)')
       .matches
       ? 'dark'
       : 'light'
 
     if (localStorage.getItem('data-theme') === 'system') {
       localStorage.setItem('data-theme', 'light')
+
       document.documentElement.setAttribute('data-theme', 'light')
+      document.documentElement.setAttribute(
+        'data-code-theme',
+        'catppuccin-latte'
+      )
       svg.dataset.env = 'light'
     } else {
       if (document.documentElement.dataset.theme === 'light') {
         localStorage.setItem('data-theme', 'dark')
         document.documentElement.setAttribute('data-theme', 'dark')
+        document.documentElement.setAttribute(
+          'data-code-theme',
+          'catppuccin-frappe'
+        )
         svg.dataset.env = 'dark'
       } else if (document.documentElement.dataset.theme === 'dark') {
         localStorage.setItem('data-theme', 'system')
         document.documentElement.setAttribute('data-theme', prefersScheme)
+        document.documentElement.setAttribute(
+          'data-code-theme',
+          prefersScheme === 'dark' ? 'catppuccin-frappe' : 'catppuccin-latte'
+        )
         svg.dataset.env = 'system'
       }
     }

src/components/ThemeSwitch.astro

@@ -131,6 +131,10 @@ import { Icon } from 'astro-icon/components'
 
         const applyThemeAttributes = (): void => {
           document.documentElement.setAttribute('data-theme', theme.scheme)
+          document.documentElement.setAttribute(
+            'data-code-theme',
+            theme.scheme === 'dark' ? 'catppuccin-frappe' : 'catppuccin-latte'
+          )
 
           inputElements.forEach((el) => {
             if (theme.name === 'system') {

src/data/learningpaths/grundlagen.json

@@ -7,6 +7,8 @@
   "related": [
     "einstieg-in-html",
     "einstieg-in-css",
-    "website-mit-visual-studio-code"
+    "website-mit-visual-studio-code",
+    "absolute-und-relative-einheiten",
+    "logische-eigenschaften-in-css"
   ]
 }

src/data/learningpaths/layout.json

@@ -4,9 +4,5 @@
   "path": "/tutorials/lernpfade/layout",
   "description": "steigst du tiefer in die Gestaltung von Websites ein.",
   "order": 2,
-  "related": [
-    "absolute-und-relative-einheiten",
-    "logische-eigenschaften-in-css",
-    "layouts-in-css"
-  ]
+  "related": ["layouts-in-css", "responsive-images"]
 }

src/data/tutorials/einstieg-in-css.mdx

@@ -25,11 +25,11 @@ Eigenschaften bestimmen das Aussehen von HTML-Elementen. In CSS sind diese inner
 Die Selektoren bestimmen, auf welche HTML-Elemente die Deklarationen angewendet werden sollen. Eine Deklaration besteht aus einer oder mehreren Eigenschaften und den dazugehörigen Werten. Eine Eigenschaft wird durch einen Doppelpunkt (`:`) vom Wert getrennt und mit einem Semikolon (`;`) abgeschlossen.
 
 <Figure caption="Diese CSS-Regel deklariert Schriftgröße, Schriftstärke und Farbe des Selektors `h2`. Das ist eine Überschrift der zweiten Ordnung.">
-  ```html
+  ```html title="HTML"
   <h2>Meine Überschrift</h2>
   ```
 
-  ```css
+  ```css title="CSS"
   h2 {
     font-size: 1.5rem;
     font-weight: 500;
@@ -61,13 +61,11 @@ Pseudoklassen
 
 Stellen wir uns nun ein Formular vor, das zwei Buttons enthält. Einen Abbrechen-Button und einen Absende-Button:
 
-<Figure caption="Das HTML der beiden Buttons">
-  ```html
-  <button type="button" class="btn" id="cancel-button">Abbrechen</button>
+```html title="HTML"
+<button type="button" class="btn" id="cancel-button">Abbrechen</button>
 
-  <button type="submit" class="btn btn-primary">Absenden</button>
-  ```
-</Figure>
+<button type="submit" class="btn btn-primary">Absenden</button>
+```
 
 Die Buttons sollen eine blaue Schrift und einen blauen Rahmen enthalten. Beim Darüberfahren mit der Maus soll sich der Hintergrund blau färben, die Schrift weiß. Das ist gleichzeitig auch die Vorgabe für den Primär-Button, den Absende-Button. Dieser ändert beim Darüberfahren mit der Maus die Hintergrundfarbe auf Dunkelblau.
 
@@ -76,7 +74,7 @@ In CSS kannst du die Buttons über ihren Elementselektor `button` oder über ihr
 Hier das CSS und das Ergebnis dazu:
 
 <Figure imagePath="/src/images/tutorials/form-buttons.png" alt="Zwei Buttons: Ein Abbrechen- und ein Absende-Button." caption="Komplexes Beispiel mit Attributen, ID und Klassen.">
-  ```css
+  ```css title="CSS"
   .btn {
     border: 1px solid blue;
     background-color: transparent;
@@ -101,7 +99,7 @@ Hier das CSS und das Ergebnis dazu:
 Cascading Style Sheets bedeutet übersetzt so viel wie „gestufte Gestaltungsbögen“. Der Begriff „Kaskade“ bezieht sich auf die hierarchische Abfolge von CSS-Regeln. Die Reihenfolge, in der diese Regeln definiert sind, bestimmt, welche Regel Vorrang hat. Man kann es sich wie bei einem Wasserfall vorstellen: Das Wasser beginnt mit wenig Kraft, wird aber immer stärker, je weiter es nach unten fließt. Daher gilt das Prinzip: Je weiter unten eine Regel definiert ist, desto stärker wirkt sie sich aus. Ein Beispiel:
 
 <Figure caption="In diesen Regeln wird zwei Mal die Hintergrundfarbe von `<div>`-Elementen bestimmt.">
-  ```css
+  ```css title="CSS"
   div {
     background-color: red;
     color: white;
@@ -143,11 +141,11 @@ Die CSS-Spezifität ist der Algorithmus der Browser, die Gewichtung und Relevanz
 Schauen wir uns das erst einmal an:
 
 <Figure caption="CSS-Regeln mit einer Klasse, einer ID und einem Elementnamen als Selektor.">
-  ```html
+  ```html title="HTML"
   <div class="my-box" id="alert">Test</div>
   ```
 
-  ```css
+  ```css title="CSS"
   div.my-box {
     background-color: yellow;
   }
@@ -179,7 +177,7 @@ Das Box-Modell ist ein Konzept in CSS, das beschreibt, wie Elemente auf einer We
 Eine Box mit schwarzen Rand und einem Innenabstand zum Text könnte in CSS so aussehen:
 
 <Figure imagePath="/src/images/tutorials/zwei-boxen.png" alt="Zwei Boxen nebeneinander" caption="Den Innenabstand regeln wir über `padding`, den Außenabstand über `margin`.">
-  ```css
+  ```css title="CSS"
   .box {
     border: 1px solid black;
     border-radius: 0.5em;
@@ -201,7 +199,7 @@ Möchtest du zwei Boxen nebeneinander platzieren, die sich die Breite zu `50%` t
 Hier noch einmal eine Beispielrechnung:
 
 <Figure caption="Beide `box-sizing`-Eigenschaften im Vergleich">
-  ```css
+  ```css title="CSS"
   /* 200 + 10 + 10 + 1 + 1 = 222 */
   /* Inhalt: 200px, Gesamt: 222px */
   .box {
@@ -225,7 +223,7 @@ Hier noch einmal eine Beispielrechnung:
 Du kannst **und solltest** alle HTML-Elemente auf einer Seite immer auf `border-box` umstellen. Das geht mit dem Sternselektor `*`, der alle Elemente auf der Website selektiert, und einer universellen Regel:
 
 <Figure caption="Der Sternselektor wählt alle Elmente einer Seite aus.">
-  ```css
+  ```css title="CSS"
   *, *::before, *::after {
     box-sizing: border-box;
   }