feat: d2 diagrams, process model (#2202)

.github/CONTRIBUTING.md

@@ -95,6 +95,17 @@ Not yet created, will be added in the future.
 
 Topics that are around understanding something can be written as a blog post (we welcome submissions to the Tauri blog from anyone). Blog posts are a good option because they help the reader understand that information is accurate at the time of writing (and of course can always be updated later if it becomes stale). Blog posts follow the goals of [explanation in Diátaxis](https://diataxis.fr/explanation), but not all blog posts necessarily fit this specific format.
 
+### Diagrams
+
+We use [Astro D2](https://astro-d2.vercel.app/) to generate diagrams. Because Netlify does not support compiling the diagrams in its end we have to push the prebuilt images manually. This is annoying, but not the end of the world seeing as we've previously been pushing the images manually anyway.
+
+If you make an update to a diagram you'll need to [install D2](https://github.com/terrastruct/d2/blob/master/docs/INSTALL.md) on your system, then when you run either the `build` or `dev` commands you'll need to enable building the diagrams by setting the environment variable `CONTEXT=d2`.
+
+```sh
+# Adapt the command as relevant for your system to define the variable
+CONTEXT=d2 pnpm dev
+```
+
 ## Translations (i18n)
 
 Thanks for your interest in helping to translate the documentation! Visit the [translation status page](https://v2.tauri.app/contribute/translate-status) to see which docs are ready for translation, need updated, or need reviewed.

astro.config.mjs

@@ -6,6 +6,7 @@ import locales from './locales.json';
 import starlightLinksValidator from 'starlight-links-validator';
 import starlightBlog from 'starlight-blog';
 import serviceWorker from 'astrojs-service-worker';
+import astroD2 from 'astro-d2'
 
 const authors = {
   nothingismagick: {
@@ -251,6 +252,12 @@ export default defineConfig({
       locales,
       lastUpdated: true,
     }),
+    astroD2({
+      skipGeneration: process.env.CONTEXT !== 'd2',
+      theme: {
+        default: '105'
+      }
+    }),
     serviceWorker({
       workbox: {
         cleanupOutdatedCaches: true,
@@ -378,9 +385,9 @@ function i18nRedirect(from, to) {
     locale === 'root'
       ? (routes[from] = to)
       : (routes[`/${locale}/${from.replaceAll(/^\/*/g, '')}`] = `/${locale}/${to.replaceAll(
-          /^\/*/g,
-          ''
-        )}`)
+        /^\/*/g,
+        ''
+      )}`)
   );
   return routes;
 }

package.json

@@ -25,6 +25,7 @@
     "@astrojs/starlight": "^0.23.0",
     "@types/json-schema": "^7.0.15",
     "astro": "^4.4.4",
+    "astro-d2": "^0.2.1",
     "astro-feelback": "^0.3.4",
     "astrojs-service-worker": "^2.0.0",
     "jsdom": "^24.0.0",

pnpm-lock.yaml

@@ -23,6 +23,9 @@ importers:
       astro:
         specifier: ^4.4.4
         version: 4.9.1(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)(typescript@5.4.5)
+      astro-d2:
+        specifier: ^0.2.1
+        version: 0.2.1(astro@4.9.1(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)(typescript@5.4.5))
       astro-feelback:
         specifier: ^0.3.4
         version: 0.3.4
@@ -1537,6 +1540,12 @@ packages:
     resolution: {integrity: sha512-ISvCdHdlTDlH5IpxQJIex7BWBywFWgjJSVdwst+/iQCoEYnyOaQ95+X1JGshuBjGp6nxKUy1jMgE3zPqN7fQdg==}
     hasBin: true
 
+  astro-d2@0.2.1:
+    resolution: {integrity: sha512-/h3eRiaVKyWgbhjdSNliS9UO0+0vzcUF+AbJPtT6ySWgLN49jDIZh4RItrSKZmhLJbSRuWkWnC4HRjYUxzZ9FA==}
+    engines: {node: '>=18'}
+    peerDependencies:
+      astro: '>=4.0.0'
+
   astro-expressive-code@0.35.3:
     resolution: {integrity: sha512-f1L1m3J3EzZHDEox6TXmuKo5fTSbaNxE/HU0S0UQmvlCowtOKnU/LOsoDwsbQSYGKz+fdLRPsCjFMiKqEoyfcw==}
     peerDependencies:
@@ -5402,6 +5411,11 @@ snapshots:
 
   astring@1.8.6: {}
 
+  astro-d2@0.2.1(astro@4.9.1(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)(typescript@5.4.5)):
+    dependencies:
+      astro: 4.9.1(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)(typescript@5.4.5)
+      unist-util-visit: 5.0.0
+
   astro-expressive-code@0.35.3(astro@4.9.1(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)(typescript@5.4.5)):
     dependencies:
       astro: 4.9.1(@types/node@20.12.12)(sass@1.77.2)(terser@5.31.0)(typescript@5.4.5)

src/content/docs/concept/process-model.md

@@ -30,9 +30,36 @@ guarantees memory safety while retaining excellent performance.
 
 <figure>
 
-![IPC Diagram](@assets/concept/process-model.svg)
+```d2 sketch pad=50
+direction: right
 
-<figcaption>Figure 1-1: Simplified representation of the Tauri process model. A single Core process manages one or more WebView processes.</figcaption>
+Core: {
+  shape: diamond
+}
+
+"Events & Commands 1": {
+  WebView1: WebView
+}
+
+"Events & Commands 2": {
+  WebView2: WebView
+}
+
+"Events & Commands 3": {
+  WebView3: WebView
+}
+
+Core -> "Events & Commands 1"{style.animated: true}
+Core -> "Events & Commands 2"{style.animated: true}
+Core -> "Events & Commands 3"{style.animated: true}
+
+"Events & Commands 1" -> WebView1{style.animated: true}
+"Events & Commands 2" -> WebView2{style.animated: true}
+"Events & Commands 3" -> WebView3{style.animated: true}
+
+```
+
+<figcaption>Simplified representation of the Tauri process model. A single Core process manages one or more WebView processes.</figcaption>
 </figure>
 
 ## The WebView Process

src/styles/custom.scss

@@ -145,3 +145,8 @@ article.card {
 body {
   overflow-y: scroll;
 }
+
+figcaption {
+  font-size: 0.9rem;
+  text-align: center;
+}