feat: support mermaid

[cabljac]

This PR adds support for mermaid and also adds the bare bones for screenshot testing with playwright

[gemini-code-assist]

Summary of Changes

This pull request significantly enhances the documentation platform by introducing support for Mermaid diagrams, allowing for richer visual content within MDX files. Concurrently, it establishes a foundational Playwright setup for robust screenshot testing, ensuring visual consistency across different domains. The changes also include crucial updates to the Remix application's hydration strategy to better support interactive client-side components and a general refresh of project dependencies.

Highlights

• Mermaid Diagram Support: Implemented the ability to render Mermaid diagrams directly within MDX content. This involves processing mermaid code blocks in the API to transform them into a custom MDX component and integrating the mdx-mermaid component into the frontend for rendering.
• Playwright Screenshot Testing Setup: Introduced Playwright as a new testing framework, setting up a basic test suite for screenshot comparisons across various domains. This includes a new Playwright configuration and an example test to ensure visual consistency.
• Remix Hydration Improvements: Updated the Remix application's client and server entry points to leverage react-router-dom's BrowserRouter and StaticRouter respectively. Conditional client-side hydration has been implemented for routes that require interactive components, optimizing initial page load performance.
• Dependency Updates: Performed a series of dependency updates across the api, website, and root package.json files, including @code-hike/mdx, @docsearch/react, @remix-run/* packages, msw, and tailwindcss, ensuring the project uses more recent and stable versions of its libraries.

Changelog

• .gitignore
  • Added new entries to ignore Playwright-related output directories (/test-results/, /playwright-report/, /playwright/.cache/).
• tests/example.spec.ts
  • Added a new Playwright test file to perform screenshot comparisons for various domains, checking for 200 status and visual consistency.
• api/package.json
  • Updated @code-hike/mdx to 0.7.4.
  • Added mermaid (9.1.7) as a dependency.
• api/src/bundler/getPlugins.ts
  • Added a @ts-ignore directive for rehypeKatex when experimentalMath is enabled.
• api/src/bundler/plugins/rehype-code-blocks.ts
  • Modified the rehypeCodeBlocks plugin to detect mermaid language code blocks and transform them into an mdxJsxFlowElement named Mermaid with the chart content as an attribute.
  • Added logic to handle console language code blocks by removing leading $ symbols for copy/paste and highlighting them as shell scripts.
• api/src/utils/bundle.ts
  • Added assignment of githubContents.path to this.path in the Bundle class (line 118).
• api/src/utils/config.ts
  • Corrected a typo from defaulLocale to defaultLocale (line 158).
• domains.json
  • Removed the melos.invertase.io entry.
  • Adjusted formatting for the docs.flexcolorscheme.com entry.
• package.json
  • Added @playwright/test (1.27.1) to devDependencies at the root level.
• packages/server/package.json
  • Added @types/pino-std-serializers to devDependencies.
• playwright.config.ts
  • Added a new Playwright configuration file, setting up the test directory, timeouts, parallel execution, and a Chromium project.
• website/app/components/mdx/index.tsx
  • Imported the Mermaid component from mdx-mermaid (line 12).
  • Added Mermaid to the default MDX components mapping, enabling Mermaid rendering in the frontend (lines 76-80).
• website/app/entry.client.tsx
  • Updated client-side hydration from hydrate to hydrateRoot (line 1).
  • Wrapped RemixBrowser with BrowserRouter for React Router compatibility (lines 22-26).
• website/app/entry.server.tsx
  • Imported StaticRouter from react-router-dom/server (line 4).
  • Wrapped RemixServer with StaticRouter for server-side rendering, aligning with React Router v6 (lines 15-18).
• website/app/root.tsx
  • Imported useMatches from remix (line 10).
  • Introduced useMatches to conditionally render <Scripts /> based on a handle.hydrate property in route matches, optimizing client-side hydration (lines 117-120, 146).
• website/app/routes/$owner.$repo.$.tsx
  • Added export const handle = { hydrate: true }; to enable client-side hydration for this dynamic route (line 22).
• website/app/routes/preview.tsx
  • Added export const handle = { hydrate: true }; to enable client-side hydration for the preview route (line 13).
• website/package.json
  • Updated @code-hike/mdx to 0.7.4 (line 17).
  • Updated @docsearch/react to 3.2.2 (line 20).
  • Updated @remix-run/* packages to 1.7.5 (lines 23-26, 54).
  • Added mdx-mermaid (v1.3.0) and mermaid (9.1.7) dependencies (lines 39-40).
  • Updated msw to 0.47.4 (line 65).
  • Updated tailwindcss to 3.2.0 (line 68).
• website/public/mockServiceWorker.js
  • Updated the MSW service worker to version 0.47.4 (line 5).
  • Updated INTEGRITY_CHECKSUM (line 11).
  • Modified self.addEventListener('activate') handling (lines 18-20).
  • Updated self.clients.matchAll to filter by type: 'window' (lines 35-37).
  • Refactored fetch event listener logic and response handling, including changes to respondWithMock and removal of uuidv4 and delayPromise utilities (lines 87-302).

Activity

• No explicit reviewer activity was provided in the context.