docs: support mermaid (#708) (#722)

* docs: support mermaid

* docs: refactor mermaid integration

docs/package.json

@@ -12,7 +12,7 @@
     "update": "npx npm-check-updates -u"
   },
   "dependencies": {
-    "@astrojs/starlight": "^0.12.0",
+    "@astrojs/starlight": "^0.14.0",
     "@codemirror/lang-javascript": "^6.1.9",
     "@codemirror/state": "^6.2.1",
     "@discoveryjs/discovery": "^1.0.0-beta.77",
@@ -21,6 +21,7 @@
     "@vercel/kv": "^0.2.2",
     "astro": "^3.4.3",
     "codemirror": "^6.0.1",
+    "mermaid": "^10.6.1",
     "sharp": "^0.32.4",
     "sucrase": "^3.34.0",
     "tsx": "^3.12.7",

docs/src/components/MarkdownContent.astro

@@ -7,98 +7,20 @@ import DefaultMarkdownContent from '@astrojs/starlight/components/MarkdownConten
 </DefaultMarkdownContent>
 
 <script>
-  const SvgNs = 'http://www.w3.org/2000/svg'
-
-  const copyButtonTemplate = document.createElement('button')
-  copyButtonTemplate.className = 'code-block-copy'
-  const copyButtonSvg = document.createElementNS(SvgNs, 'svg')
-  copyButtonSvg.setAttribute('viewBox', '0 0 24 24')
-  copyButtonSvg.innerHTML =
-    '<path d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path>'
-  copyButtonTemplate.appendChild(copyButtonSvg)
-
-  const codeBlocks = document.querySelectorAll(
-    'pre.astro-code',
-  ) as NodeListOf<HTMLElement>
-  for (const codeBlock of codeBlocks) {
-    const codeText = codeBlock.innerText
-
-    const copy = async () => {
-      try {
-        await navigator.clipboard.writeText(codeText)
-      } catch (error) {
-        console.error(error)
+  // prettier-ignore
+  const MermaidTypes = 'sequenceDiagram,flowchart,classDiagram,stateDiagram,erDiagram,gantt,journey,gitGraph,pie,mindmap,quadrantChart,xyChart'.split(',')
+
+  const codeBlocks = document.querySelectorAll('.expressive-code')
+  await Promise.all(
+    [...(codeBlocks as NodeListOf<HTMLElement>)].map(async (block) => {
+      const content = block.innerText
+      if (!MermaidTypes.some((type) => content.startsWith(type))) {
         return
       }
-
-      copyButton.classList.add('highlight')
-      setTimeout(() => copyButton.classList.remove('highlight'), 500)
-    }
-
-    codeBlock.onscroll = () => {
-      const scroll = codeBlock.scrollLeft
-      requestAnimationFrame(() => {
-        codeBlock.style.setProperty('--scroll', scroll + 'px')
-      })
-    }
-
-    const copyButton = copyButtonTemplate.cloneNode(true) as HTMLButtonElement
-    copyButton.onclick = copy
-    copyButton.title = 'Copy snippet'
-    codeBlock.appendChild(copyButton)
-  }
+      const { mermaid } = await import('./mermaid')
+      const id = 'mermaid-' + Math.random().toString(36).slice(2, 8)
+      const result = await mermaid.render(id, content)
+      block.outerHTML = result.svg
+    }),
+  )
 </script>
-
-<style is:global>
-  .astro-code {
-    box-sizing: border-box;
-    position: relative;
-    --scroll: 0px;
-  }
-
-  .code-block-copy {
-    position: absolute;
-    top: 1rem;
-    right: calc(var(--scroll) * -1 + 0.75rem);
-
-    width: 28px;
-    height: 28px;
-    padding: 2px;
-
-    background: var(--astro-code-color-background);
-    border-radius: 4px;
-    border: 1px solid var(--sl-color-text);
-
-    opacity: 0.1;
-    transition: all 0.07s;
-
-    cursor: pointer;
-  }
-  .code-block-copy > svg {
-    transition: all 0.07s;
-    fill: currentColor;
-  }
-
-  .astro-code:hover .code-block-copy {
-    opacity: 0.7;
-  }
-
-  .code-block-copy.highlight {
-    border-color: green;
-  }
-
-  .code-block-copy.highlight > svg {
-    fill: green;
-  }
-
-  .code-block-copy.highlight,
-  .code-block-copy:hover {
-    opacity: 1 !important;
-  }
-
-  @media (pointer: coarse) {
-    .code-block-copy {
-      opacity: 1;
-    }
-  }
-</style>

docs/src/components/mermaid.ts

@@ -0,0 +1,7 @@
+import mermaid from 'mermaid'
+
+mermaid.initialize({
+  theme: document.documentElement.dataset.theme === 'dark' ? 'dark' : 'pastel',
+})
+
+export { mermaid }

docs/src/content/docs/package/form.md

@@ -110,18 +110,19 @@ By combining this statuses you can know a different meta info too.
 You can set a validation function and manage validation triggers using [the options](#field-options). The flow looks like this.
 
 ```mermaid
-graph TB
-    trigger[Validation trigger]
-    trigger --> hasfunction[has validation function]
-    hasfunction --> |valid==false| validate[call validation]
-    hasfunction ----> |No| valid[return `error: undefined, valid: true, validating: false`]
-    validate ----> |error throwed| notvalid[return `error: string, valid: true, validating: false`]
-    validate --> |promise returned| promise
-    validate ----> |any return| valid
-    promise --> |keepErrorDuringValidating==true| keepErrorDuringValidatingTrue["set `error: undefined | string, valid: true, validating: true`"]
-    promise --> |keepErrorDuringValidating==false| keepErrorDuringValidatingFalse[set `error: undefined, valid: true, validating: true`]
-    promise -----> |promise fulfilled| valid
-    promise -----> |promise rejected| notvalid
+flowchart TB
+    trigger([Validation triggered])
+    trigger --> hasfunction{Has validation function?}
+    hasfunction --> |Yes| validate{Validate}
+    hasfunction --> |No| valid[error: undefined, valid: true, validating: false]
+    validate --> |Validator threw| invalid["return {error: string, valid: true, validating: false}"]
+    validate --> |Validator returned a promise| promise[Promise]
+    validate --> |Validator returned any other value| valid
+    promise --> |Pending| keepErrorDuringValidating{keepErrorDuringValidating}
+    keepErrorDuringValidating --> |true| keepErrorDuringValidatingTrue["set {error: previousError, valid: true, validating: true}"]
+    keepErrorDuringValidating --> |false| keepErrorDuringValidatingFalse["set {error: undefined, valid: true, validating: true}"]
+    promise --> |Fulfilled| valid
+    promise --> |Rejected| invalid
 ```
 
 ### Field options

packages/form/README.md

@@ -101,18 +101,19 @@ By combining this statuses you can know a different meta info too.
 You can set a validation function and manage validation triggers using [the options](#field-options). The flow looks like this.
 
 ```mermaid
-graph TB
-    trigger[Validation trigger]
-    trigger --> hasfunction[has validation function]
-    hasfunction --> |valid==false| validate[call validation]
-    hasfunction ----> |No| valid[return `error: undefined, valid: true, validating: false`]
-    validate ----> |error throwed| notvalid[return `error: string, valid: true, validating: false`]
-    validate --> |promise returned| promise
-    validate ----> |any return| valid
-    promise --> |keepErrorDuringValidating==true| keepErrorDuringValidatingTrue["set `error: undefined | string, valid: true, validating: true`"]
-    promise --> |keepErrorDuringValidating==false| keepErrorDuringValidatingFalse[set `error: undefined, valid: true, validating: true`]
-    promise -----> |promise fulfilled| valid
-    promise -----> |promise rejected| notvalid
+flowchart TB
+    trigger([Validation triggered])
+    trigger --> hasfunction{Has validation function?}
+    hasfunction --> |Yes| validate{Validate}
+    hasfunction --> |No| valid[error: undefined, valid: true, validating: false]
+    validate --> |Validator threw| invalid["return {error: string, valid: true, validating: false}"]
+    validate --> |Validator returned a promise| promise[Promise]
+    validate --> |Validator returned any other value| valid
+    promise --> |Pending| keepErrorDuringValidating{keepErrorDuringValidating}
+    keepErrorDuringValidating --> |true| keepErrorDuringValidatingTrue["set {error: previousError, valid: true, validating: true}"]
+    keepErrorDuringValidating --> |false| keepErrorDuringValidatingFalse["set {error: undefined, valid: true, validating: true}"]
+    promise --> |Fulfilled| valid
+    promise --> |Rejected| invalid
 ```
 
 ### Field options