Merge branch 'main' into hien

Author: Octavi00

astro.config.mjs

@@ -49,6 +49,7 @@ export default defineConfig({
         ],
       },
     }),
+    mermaid(),
   ],
   prefetch: {
     defaultStrategy: "viewport",
@@ -80,5 +81,6 @@ export default defineConfig({
     shikiConfig: {
       theme: 'github-light',
     },
+    
   },
 });

package-lock.json

@@ -69,6 +69,7 @@
     "@typescript-eslint/parser": "^7.0.2",
     "@uiw/codemirror-extensions-basic-setup": "^4.21.22",
     "@uiw/react-codemirror": "^4.21.22",
+    "astro-mermaid": "^1.1.0",
     "documentation": "^14.0.3",
     "eslint": "^8.56.0",
     "eslint-config-preact": "^1.3.0",
@@ -84,10 +85,12 @@
     "jsdom": "^24.0.0",
     "log-update": "^6.1.0",
     "marked": "^4.0.10",
+    "mermaid": "^11.12.1",
     "msw": "^2.2.9",
     "path": "^0.12.7",
     "prettier": "^3.2.5",
     "prettier-plugin-tailwindcss": "^0.5.11",
+    "rehype-mermaid": "^3.0.0",
     "remark": "^15.0.1",
     "remark-gfm": "^4.0.0",
     "remark-mdx": "^3.0.1",

package.json

@@ -228,33 +228,27 @@ It also has the following per-vertex attributes:
 
 ## Classes
 
+<h4 align="center"><small>p5.js WebGL Classes</small></h4>
+
 ```mermaid
----
-title: p5.js WebGL Classes
----
 classDiagram
-    class Base["p5.Renderer"] {
-    }
-    class P2D["p5.Renderer2D"] {
-    }
-    class WebGL["p5.RendererGL"] {
-    }
-    class Geometry["p5.Geometry"] {
-    }
-    class Shader["p5.Shader"] {
-    }
-    class Texture["p5.Texture"] {
-    }
-    class Framebuffer["p5.Framebuffer"] {
-    }
-    Base <|-- P2D
-    Base <|-- WebGL
-    WebGL "*" o-- "*" Geometry
-    WebGL "1" *-- "*" Shader
-    WebGL "1" *-- "*" Texture
-    WebGL "1" *-- "*" Framebuffer
+  class Base["p5.Renderer"]
+  class P2D["p5.Renderer2D"]
+  class WebGL["p5.RendererGL"]
+  class Geometry["p5.Geometry"]
+  class Shader["p5.Shader"]
+  class Texture["p5.Texture"]
+  class Framebuffer["p5.Framebuffer"]
+
+  Base <|-- P2D
+  Base <|-- WebGL
+  WebGL "1" *-- "*" Geometry
+  WebGL "1" *-- "*" Shader
+  WebGL "1" *-- "*" Texture
+  WebGL "1" *-- "*" Framebuffer
 ```
 
+
 The entry point to most WebGL code is through **p5.RendererGL**. Top-level p5.js functions are passed to the current renderer. Both 2D and WebGL modes have renderer classes that conform to a common `p5.Renderer` interface. Immediate mode and retained mode functions are split up into `p5.RendererGL.Immediate.js` and `p5.RendererGL.Retained.js`.
 
 Within the renderer, references to models are stored in the `retainedMode.geometry` map. Each value is an object storing the buffers of a `p5.Geometry` When calling `model(yourGeometry)` for the first time, the renderer adds an entry in the map. It then stores references to the geometry's GPU resources there. If you draw a `p5.Geometry` to the main canvas and also to a WebGL `p5.Graphics`, it will have entries in two renderers.

src/content/contributor-docs/en/webgl_mode_architecture.mdx

@@ -16,6 +16,7 @@ relatedContent:
 authors:
   - Layla Quiñones
   - Jaleesa Trapp
+
 ---
 
 import EditableSketch from "../../../components/EditableSketch/index.astro";
@@ -44,6 +45,17 @@ Before you begin you should be able to:
 
 For a step-by-step guide to creating and saving projects in the [p5.js Web Editor](https://editor.p5js.org/) or [VS Code](https://code.visualstudio.com/), visit [Setting Up Your Environment](../setting-up-your-environment).
 
+# Mermaid test
+
+<div className="mermaid">
+{String.raw`flowchart TD
+  A[Start] --> B{Build-time Mermaid?}
+  B -- Yes --> C[Inline SVG ✅]
+  B -- No  --> D[Code block ❌]
+`}
+</div>
+
+
 
 ## Step 1: Name and save a new p5.js project
 
@@ -77,6 +89,7 @@ function setup() {
 function draw() {
   background(220);
 }
+
 ```
 
 Every sketch.js file begins with two main functions: [`setup()`](/reference/p5/setup) and [`draw()`](/reference/p5/draw). 

src/content/tutorials/en/get-started.mdx

@@ -1,3 +1,4 @@
 /* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="astro/client" />

src/env.d.ts

@@ -67,6 +67,7 @@ const headerTopic = topic
   lang={currentLocale}
 >
   <head>
+    <script src="https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js"></script>
     <script is:inline>
       // Get any theme settings and apply before load
       const settings = [
@@ -88,9 +89,9 @@ const headerTopic = topic
       rel="stylesheet"
       href="https://foundation-donate-banner.netlify.app/static/css/main.css"
     />
-    <script src="https://foundation-donate-banner.netlify.app/static/js/main.js"
-    ></script>
+    <script src="https://foundation-donate-banner.netlify.app/static/js/main.js"></script>
   </head>
+
   <body>
     <div class="top-layout-grid">
       <Nav />
@@ -117,18 +118,64 @@ const headerTopic = topic
         }
       </header>
       <main id="main-content" class="relative">
-        <div id="processing-banner" style="margin-left: var(--nav-offset-x);">
-        </div>
+        <div id="processing-banner" style="margin-left: var(--nav-offset-x);"></div>
         {
           HeaderContent && (
             <div class="px-5 md:px-lg pt-sm pb-lg">
               <div class="rendered-markdown">
                 <HeaderContent />
               </div>
             </div>
-        )}
+          )
+        }
         <div class={mainContentParentClass}>
           <slot />
+          <script>
+            function extractMermaid(text) {
+              // strip YAML front-matter if present
+              if (text.startsWith('---')) {
+                const parts = text.split('\n');
+                let i = 1;
+                while (i < parts.length && parts[i] !== '---') i++;
+                if (i < parts.length) text = parts.slice(i + 1).join('\n');
+              }
+              return text.trim();
+            }
+
+            function renderMermaid() {
+              // 1) Convert fenced code blocks that look like Mermaid
+              const mermaidHeads = new Set([
+                'classDiagram','flowchart','graph','sequenceDiagram','stateDiagram',
+                'erDiagram','journey','pie','gantt','mindmap','timeline','quadrantChart',
+                'requirementDiagram','gitGraph'
+              ]);
+
+              const codeBlocks = document.querySelectorAll('pre code');
+              codeBlocks.forEach((codeEl) => {
+                const raw = extractMermaid(codeEl.textContent || '');
+                const first = raw.split(/\s+/)[0];
+                const isMermaid = codeEl.className.includes('language-mermaid') || mermaidHeads.has(first);
+                if (!isMermaid) return;
+
+                const pre = codeEl.closest('pre');
+                const div = document.createElement('div');
+                div.className = 'mermaid';
+                div.textContent = raw; // pure Mermaid only
+                if (pre && pre.parentNode) pre.parentNode.replaceChild(div, pre);
+              });
+
+              // 2) Render any <div class="mermaid"> now on the page
+              if (window.mermaid) {
+                window.mermaid.initialize({ startOnLoad: false, securityLevel: 'strict' });
+                window.mermaid.run().catch((e) => console.error('[mermaid] render failed', e));
+              } else {
+                console.error('[mermaid] global mermaid not found');
+              }
+            }
+
+            document.addEventListener('astro:page-load', renderMermaid);
+            renderMermaid();
+          </script>
         </div>
       </main>
       <Footer />

src/layouts/BaseLayout.astro

@@ -3,16 +3,15 @@ import TextDetailLayout from "@layouts/TextDetailLayout.astro";
 import { getCollectionInDefaultLocale } from "@pages/_utils";
 import { removeLocalePrefix } from "@i18n/utils";
 
+// Generate all static paths for tutorial pages
 export const getStaticPaths = async () => {
   const pages = await getCollectionInDefaultLocale("text-detail");
+
   return pages
     .map((page) => {
       const slug = removeLocalePrefix(page.slug);
 
-      // if slug has / at the beginning (and will if we only remove
-      // the locale prefix) then chop it off
-      // this is necessary because this file is [slug].astro and
-      // not [...slug].astro, so sub routes are not allowed
+      // Fix leading slash for simple slugs
       if (slug.startsWith("/")) {
         return {
           params: { slug: slug.slice(1) },
@@ -29,3 +28,4 @@ const { page } = Astro.props;
 ---
 
 <TextDetailLayout page={page} />
+

src/pages/[slug].astro

@@ -9,6 +9,7 @@
     "src/scripts/parsers/out"
   ],
   "compilerOptions": {
+    "types": ["astro/client"],
     "jsx": "react-jsx",
     "jsxImportSource": "preact",
     "allowJs": true,
@@ -26,5 +27,6 @@
       "@i18n/*": ["src/i18n/*"],
       "@styles/*": ["./styles/*"],
     }
-  }
+  },
+  "include": ["src"]
 }