fix: remove mermaid capability for now...

The mdx-mermaid plugin broke and rehype-markdown uses playwright so fuck it

.gitignore

@@ -107,3 +107,7 @@ dist
 # TernJS port file
 .tern-port
 .vercel
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

next.config.mjs

@@ -1,22 +1,38 @@
+import withBundleAnalyzer from "@next/bundle-analyzer";
 import createMDX from "@next/mdx";
-import mdxMermaid from "mdx-mermaid";
-import rehypeKatex from "rehype-katex";
-import rehypePrism from "rehype-prism-plus";
 import remarkGfm from "remark-gfm";
 import remarkHint from "remark-hint";
 import remarkMath from "remark-math";
-import withBundleAnalyzer from "@next/bundle-analyzer";
+import rehypeKatex from "rehype-katex";
+import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
+import { bundledLanguages, createHighlighter } from "shiki";
+
+export const highlighter = await createHighlighter({
+  themes: [
+    import("shiki/themes/github-dark.mjs"),
+    import("shiki/themes/github-light.mjs"),
+  ],
+  langs: Object.keys(bundledLanguages),
+});
 
 const withMDX = createMDX({
   extension: /\.mdx?$/,
   options: {
-    remarkPlugins: [
-      remarkMath,
-      remarkGfm,
-      remarkHint,
-      [mdxMermaid, { output: "svg" }],
+    remarkPlugins: [remarkMath, remarkGfm, remarkHint],
+    rehypePlugins: [
+      rehypeKatex,
+      [
+        // @ts-ignore
+        rehypeShikiFromHighlighter,
+        highlighter,
+        {
+          themes: {
+            light: "github-dark",
+            dark: "github-light",
+          },
+        },
+      ],
     ],
-    rehypePlugins: [rehypeKatex, [rehypePrism, { plugins: ["line-numbers"] }]],
     format: "mdx",
   },
 });

package.json

@@ -56,7 +56,6 @@
     "katex": "^0.16.11",
     "lucide-react": "^0.358.0",
     "mdx-embed": "^1.1.2",
-    "mdx-mermaid": "^2.0.1",
     "mermaid": "^10.9.2",
     "mini-css-extract-plugin": "^2.9.1",
     "natsort": "^2.0.3",

src/lib/article-metadata.ts

@@ -49,8 +49,10 @@ export function parseFrontmatter(
       date: data.date || fileStat.mtime.toISOString(),
       tags: data.tags || [],
       order: parseInt(data.order, 10) || -1,
-      authors:
-        [...toAuthorsArray(data.author), ...toAuthorsArray(data.authors)] || [],
+      authors: [
+        ...toAuthorsArray(data.author),
+        ...toAuthorsArray(data.authors),
+      ],
       description: data.description || "",
       images: data.images || [],
     },

src/lib/highlighting.ts

@@ -1,7 +1,9 @@
-import { getHighlighter } from "shiki";
-import { bundledLanguages } from "shiki/langs";
+import { bundledLanguages, createHighlighter } from "shiki";
 
-export const highlighter = await getHighlighter({
-  themes: ["github-light", "github-dark"],
-  langs: [...Object.keys(bundledLanguages)],
+export const highlighter = await createHighlighter({
+  themes: [
+    import("shiki/themes/github-dark.mjs"),
+    import("shiki/themes/github-light.mjs"),
+  ],
+  langs: Object.keys(bundledLanguages),
 });

src/lib/markdown.ts

@@ -1,5 +1,4 @@
 import rehypeShikiFromHighlighter from "@shikijs/rehype/core";
-import mdxMermaid from "mdx-mermaid";
 import type { SerializeOptions } from "next-mdx-remote/dist/types";
 import rehypeKatex from "rehype-katex";
 import remarkGfm from "remark-gfm";
@@ -22,12 +21,7 @@ import { highlighter } from "./highlighting";
 
 export const mdxOptions: SerializeOptions = {
   mdxOptions: {
-    remarkPlugins: [
-      remarkMath,
-      remarkGfm,
-      remarkHint,
-      [mdxMermaid, { output: "svg" }],
-    ],
+    remarkPlugins: [remarkMath, remarkGfm, remarkHint],
     rehypePlugins: [
       rehypeKatex,
       [

summaries/deddebme/psp/pspspspspsp.mdx

@@ -28,7 +28,7 @@ tags: [PSP, Versuch 0, ATmega 644]
 Der ATmega 644 (das ist der große Chip in der Mitte vom Board), kann über seine Ports verschiedene Sachen ansteuern.
 An welchen Ports die Geräte genau angeschlossen sind, kann der Tabelle ganz unten in den Versuchsdokumenten entnommen werden, jedoch sind das die häufigsten Anschlüsse.
 
-1. Das LC~~D~~-Display: Häufig an PORTA oder PORTB
+1. Das LCD-Display: Häufig an PORTA oder PORTB
 2. Die Taster (Buttons): Eigentlich immer an PORTC (PINC7, PINC6, PINC1, PINC0)
 3. Die LEDs: Wenn genutzt, dann meistens an PORTD
 
@@ -132,4 +132,3 @@ void write_port_c(uint8_t val)
   PORTC = (PORTC & 0b11110000) | (val & 0b00001111); // schreibe die unteren 4 bits ohne die oberen zu ändern
 }
 ```
-

summaries/sibd/dbis/NoSQL.mdx

@@ -1,66 +1,67 @@
 ---
 title: SPARQL ✨
-description: Woow Mongo 
+description: Woow Mongo
 author: Jonas Schneider
 date: 1/08/2023
 order: 8
-tags:
-  [
-    XML,
-    Graphdatenbanken
-  ]
+tags: [XML, Graphdatenbanken]
 ---
 
 ## Skalierung
+
 - Vertikale Skalierung bedeuted, dass jeder Knoten mehr Leistung hat (Mehr RAM, )
-![buy ram](https://media.tenor.com/YcFi_XrKoJcAAAAC/digibyte-dgb.gif)
+  ![buy ram](https://media.tenor.com/YcFi_XrKoJcAAAAC/digibyte-dgb.gif)
 - Horizontale Skalierung bedeuted, dass mehr Knoten hinzugefügt werden
   - Verteilte Tabellen auf mehreren Knoten
   - Synchronisations und Konsistenzprobleme => Overhead
   - Sharding: Daten werden auf mehrere Knoten verteilt und können so parallel abgefragt werden
   - Replikation: Daten werden auf mehrere Knoten verteilt und können so parallel abgefragt werden
     - 2PC: 2 Phase Commit => 1. Phase Prepare | 2. Phase Commit mit ACK's mal wieder :)
   - CAP: Consistency | Availability | Partition Tolerance => Nur 2 von 3. gehen
-  - Daher BASE: Basically Available | Soft State (kann also temporär inkonsistent sein)| Eventual Consistency als ACID Ersatz  
+  - Daher BASE: Basically Available | Soft State (kann also temporär inkonsistent sein)| Eventual Consistency als ACID Ersatz
 
 ## NoSQL
+
 - Dokumentendatenbanken
 - Key-Value Datenbanken
 - Graphdatenbanken
 - Spaltenorientierte Datenbanken
 
 ## Dokumentendatenbanken
+
 - Dokumente sind JSON / XML / PDF / ...
 - Dokumente sind indexiert
 - Bsp: MongoDB (Nutzt BSON: Binary Json)
 
 ## Key-Value Datenbanken
+
 - Key-Value Paare
 - Bsp: Redis (Wird oft als Cache verwendet und ist größtenteils in Memory)
 
 ## Graphdatenbanken
+
 - Knoten sind Entities
 - Kanten sind Relationen/Beziehungen
 - Bsp: Neo4J
 
-
 ## RDF
 
 - Resourcen im Tripel Format: Subjekt-Prädikat-Objekt. "Aachen ist eine Stadt"
 
 Leider gehen mermaid diagramme noch nicht in einer experimentellen version von mdx-remote...
-{/* 
-```mermaid
+
+``mermaid
 graph LR
-  A(Ressource ) -- Eigenschaft --> B(Wert)
-``` */}
+A(Ressource ) -- Eigenschaft --> B(Wert)
+
+````
 
 - Ressourcen sind: URI, Blank Nodes (URI: Uniform Resource Identifier bsp: `urn:example:animal:ferret:nose`)
 - Eigenschaften sind: URI die eine Eigenschaft beschreibt
 - Werte sind: URI, Blank Nodes, Literale (Strings interpretiert mit Datentyp `"123"^^http//www.w3.org/2001/XMLSchema#int`)
 
 Leider gehen mermaid diagramme noch nicht in einer experimentellen version von mdx-remote...
-{/* 
+{/*
 ```mermaid
 graph LR
   HansMueller(Bsp:HansMueller) -- Bsp:hatAdresse --> EmptyNode( )
@@ -104,22 +105,22 @@ Somit ergibt sich eine Abfrage wie folgt:
     wbsp:John foaf:knows ?friend .
     ?friend foaf:firstname ?friendname .
   }
-```
+````
 
 Weiteres:
-  - Modifikatoren
-    - `ORDER BY ASC/DESC ?x`
-    - `LIMIT n | OFFSET n`: Limitiert die Anzahl der Ergebnisse oder gibt die ersten n Ergebnisse nicht zurück
-  - Vergleichungen von urls
-    - `== | != ` Großschreibungen relevant
-  - Filter
-    - `! | && | ||` Logisch... halt wirklich
-    - `+ | - | * | /`
-    - `= | != | < | > | ...`
-    - `isURI() | isBlank() | isLiteral() | str() | lang() | datatype() | regex() | contains()`
-  - `OPTIONAL`: `{GraphMuster1} OPTIONAL {Optionale Sache}` ähnlich wie left join 
-  - `UNION`: Selbst erklärend
-  - `SELECT DISTINCT`: Auch selbst erklärend
-  
+
+- Modifikatoren
+  - `ORDER BY ASC/DESC ?x`
+  - `LIMIT n | OFFSET n`: Limitiert die Anzahl der Ergebnisse oder gibt die ersten n Ergebnisse nicht zurück
+- Vergleichungen von urls
+  - `== | != ` Großschreibungen relevant
+- Filter
+  - `! | && | ||` Logisch... halt wirklich
+  - `+ | - | * | /`
+  - `= | != | < | > | ...`
+  - `isURI() | isBlank() | isLiteral() | str() | lang() | datatype() | regex() | contains()`
+- `OPTIONAL`: `{GraphMuster1} OPTIONAL {Optionale Sache}` ähnlich wie left join
+- `UNION`: Selbst erklärend
+- `SELECT DISTINCT`: Auch selbst erklärend
 
 Der Rest ist unnütz (denke ich)