feat(docs): build-time Mermaid rendering in docs with rehype-mermaid and Playwright#552
feat(docs): build-time Mermaid rendering in docs with rehype-mermaid and Playwright#552
Conversation
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Refactored the `Mermaid` component to enhance readability and maintainability. Removed unnecessary state management and introduced a caching mechanism for Mermaid imports. Updated the initialization settings for Mermaid to improve rendering performance.
🌏 Preview Deployments
Built from commit: 🤖 This comment will be updated automatically when you push new commits to this PR. |
|
I will hold keep this PR as a draft for now. I would like to make the mermaid chart rendering, happening at build time.. The current approach increases the final bundle with 3MB. |
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
|
@copilot can you investigate if we could make use of rehype plugins to handle the mermaid chart at build time? https://github.com/remcohaszing/rehype-mermaid I would prefer not to have mermaid at runtime, since it adds around 2-3MB. |
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Handled in 58bbfdf. The Mermaid diagram is now rendered at build time through the MDX pipeline, and the runtime Mermaid component/import was removed from the docs app. Screenshot: https://github.com/user-attachments/assets/dc68d0d7-2c13-44a6-aa97-391fa710efa7
Investigated and switched it over in 58bbfdf. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot can you rebase the PR onto main? So we have the latest changes. Also I dont think we need playwright. Let's remove it! |
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Handled the dependency part in bc5049e: |
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
|
@copilot Just install rehype-mermaid, but also playwright! That is fine, I have investigated.. and we need it. |
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Updated in 08f4f86. The docs app now uses Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
apps/docs/test/source.config.test.ts
Outdated
There was a problem hiding this comment.
Removed in 2401318. The requested file is gone, and I rechecked the docs setup with lint, typecheck, and a docs build after reinstalling Playwright Chromium in this fresh environment. Screenshot: https://github.com/user-attachments/assets/a0188fc4-f85e-4a06-8d54-8536a19231b0
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
|
Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
|
@copilot fix the playwright install in build apps workflow |
luxass
changed the title
Co-authored-by: luxass <40726067+luxass@users.noreply.github.com>
Fixed in c3c4a26. The CI workflow now installs Playwright Chromium with the working workspace command before every job in Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
There was a problem hiding this comment.
Pull request overview
Restores build-time Mermaid diagram rendering in the docs app by reintroducing rehype-mermaid and ensuring Playwright Chromium is installed for docs builds (locally and in CI).
Changes:
- Re-enabled
rehype-mermaidin the docs MDX pipeline and addedplaywright+rehype-mermaidas docs dependencies. - Replaced the checked-in client flow SVG with an inline Mermaid code block in the client docs page.
- Updated docs/CI setup instructions to install Playwright Chromium before building.
Reviewed changes
Copilot reviewed 8 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
| pnpm-workspace.yaml | Adds playwright and rehype-mermaid to the docs catalog. |
| pnpm-lock.yaml | Locks new docs dependencies and their transitive graph. |
| packages/client/README.md | Refreshes client README to describe resource-based API and discovery/config usage. |
| apps/docs/source.config.ts | Enables rehype-mermaid MDX rehype plugin with inline SVG strategy. |
| apps/docs/package.json | Adds playwright and rehype-mermaid dependencies for docs build. |
| apps/docs/content/api-reference/client/meta.json | Updates client doc section description. |
| apps/docs/content/api-reference/client/index.mdx | Replaces SVG with Mermaid flowchart and updates narrative around discovery/config. |
| apps/docs/README.md | Documents installing Playwright Chromium for docs builds. |
| .github/workflows/ci.yml | Installs Playwright Chromium in relevant CI jobs before building. |
Files not reviewed (1)
- pnpm-lock.yaml: Language not supported
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| The returned client exposes four resource namespaces: | ||
|
|
||
| - `client.files.get(path)` to fetch a Unicode file or directory listing | ||
| - `client.versions.list()` to list available Unicode versions | ||
| - `client.versions.getFileTree(version)` to fetch a version's file tree |
| ### Automatic discovery with `createUCDClient` | ||
|
|
||
| `createUCDClient()` fetches `/.well-known/ucd-config.json` from the provided origin, validates it, and then creates resource wrappers from the discovered endpoint paths. | ||
|
|
||
| ```typescript | ||
| import { client } from "@ucdjs/client"; | ||
| import { createUCDClient } from "@ucdjs/client"; | ||
|
|
||
| const client = await createUCDClient("https://api.ucdjs.dev"); |
| Create a client instance using `createUCDClient()`. This fetches `/.well-known/ucd-config.json` from the provided origin, validates it, and uses the discovered endpoint paths to build the resource wrappers. | ||
|
|
||
| ```typescript title="client.ts" | ||
| import { createUCDClient } from "@ucdjs/client"; | ||
|
|
|
@copilot Will this also work in development? Or will it only allow for showing the mermaid charts at build time? |
Yes — it also works in development. Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
Restores Mermaid diagrams in the docs app as build-time rendered SVGs using
rehype-mermaid, withplaywrightinstalled as the supported renderer dependency.Changes Made
rehype-mermaidinapps/docs/source.config.tsfor build-time Mermaid rendering.rehype-mermaidandplaywrightback toapps/docsand the workspace docs catalog.client-flow.svgfallback with a Mermaid fenced code block inapps/docs/content/api-reference/client/index.mdx.apps/docs/README.mdto document the Playwright Chromium requirement for local docs builds.Testing
Screenshot: https://github.com/user-attachments/assets/a0188fc4-f85e-4a06-8d54-8536a19231b0
📍 Connect Copilot coding agent with Jira, Azure Boards or Linear to delegate work to Copilot in one click without leaving your project management tool.