chore: work on the docs, fix mermaid integration

Author: jorenbroekema

.gitignore

@@ -1,2 +1,3 @@
 node_modules
-.astro/
+.astro/
+dist/

README.md

@@ -27,7 +27,7 @@ Many users of design tokens use theming, such as the use of light and dark mode
 
 To manage these tokens amd their various combinations, users usually end up adopting complicated naming taxonomies to keep all of the tokens unique within a global namespace.
 
-![Naming problems](./assets/naming.webp)
+![Naming problems](./docs/public/naming.webp)
 
 These solutions via naming are overly brittle, and in practice most users end up separating their various dimensions like `theme`, `mode` `variant` ,etc into different sets which are intended to override each other. The is also used to circumvent issues of changing tokens when using tools that attach a token directly on a design element.
 
@@ -47,7 +47,7 @@ Using the above parameters, the proposal is that we create standalone resolver f
 
 ## Background
 
-This approach is based off the existing work in the [Tokens Studio Plugin](https://github.com/tokens-studio/figma-plugin) which currently supports multidimensional tokens through the use of its `$themes.json` file that it exports with the following shape
+This approach is based on the existing work in the [Tokens Studio Plugin](https://github.com/tokens-studio/figma-plugin) which currently supports multidimensional tokens through the use of its `$themes.json` file that it exports with the following shape
 
 ```json5
 [
@@ -101,7 +101,7 @@ _The token sets used are typically larger than what is shown and there are cases
 
 There are a number of problems to this approach though. This is currently being applied to create a single addressable space for tokens and is not granular. If you wanted to create a much smaller set that represented each component for example, you could not as the output of the set resolution is a single named token set that is then used to reference the tokens.
 
-![Resolver image](./assets/Button-Breakdown.png)
+![Resolver image](./docs/public/Button-Breakdown.png)
 
 _The references to the tokens used in this styling are tied to a single addressable token space_
 
@@ -191,7 +191,7 @@ Please see the [json schema](./schema.json) for this for a more rigid definition
 
 For visual thinkers the following is in effect
 
-![Resolver image](./assets/resolvers.png)
+![Resolver image](./docs/public/resolvers.png)
 
 For the type property there are multiple possible values
 

docs/expressive-code-plugin-language-class.ts

@@ -0,0 +1,31 @@
+import type { ExpressiveCodePlugin } from '@expressive-code/core';
+
+export function pluginLanguageClass(): ExpressiveCodePlugin {
+  return {
+    name: 'PluginLanguageClass',
+    hooks: {
+      postprocessRenderedBlock: (opts) => {
+        if (opts.codeBlock.language === 'mermaid') {
+          const pre = opts.renderData.blockAst.children.find(
+            (child) => child.type === 'element' && child.tagName === 'pre',
+          );
+          if (pre && pre.type === 'element') {
+            // add the mermaid language class so mermaid can pick this up
+            pre.properties = {
+              class: `${opts.codeBlock.language} hidden`,
+            };
+
+            // replace the AST that expressive code has made and put back the simple text
+            // otherwise mermaid gets confused by all of the generated HTML syntax
+            pre.children = [
+              {
+                value: opts.codeBlock.code,
+                type: 'text',
+              },
+            ];
+          }
+        }
+      },
+    },
+  };
+}

docs/public/Button-Breakdown.png

@@ -0,0 +1,8 @@
+---
+import Default from '@astrojs/starlight/components/Head.astro';
+import type { Props } from '@astrojs/starlight/props';
+---
+<Default {...Astro.props}>
+  <slot />
+</Default>
+<script src="../setup"></script>