Skip to content

Fix basePath issues in Doctocat UI components - #46

Merged
rezrah merged 5 commits into
mainfrom
rerah/fix-index-cards
Jun 20, 2025
Merged

Fix basePath issues in Doctocat UI components#46
rezrah merged 5 commits into
mainfrom
rerah/fix-index-cards

Conversation

@rezrah

@rezrah rezrah commented Jun 20, 2025

Copy link
Copy Markdown
Collaborator

Towards primer/brand#1059

Fixes 3 bugs:

  1. Index cards now resolve URLs with basePath, previously 404s otherwise
  2. Index card images now resolve frontmatter images correctly in basePath contexts
  3. Forwards basePath to Doctocat UI (which can't access it otherwise) and applies it to ReactCodeBlock previews to fix 404'ing images

Copilot AI review requested due to automatic review settings June 20, 2025 09:28
@rezrah
rezrah requested a review from a team as a code owner June 20, 2025 09:28
@rezrah rezrah changed the title Rerah/fix index cards Fix basePath issues in Doctocat UI components Jun 20, 2025

Copilot AI left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR ensures that the Next.js basePath is respected by Doctocat UI elements (index cards and live code previews) by exposing it via environment, wiring it through context, and rewriting URLs accordingly.

  • Expose basePath from Next.js config to Doctocat via NEXT_PUBLIC_DOCTOCAT_BASE_PATH.
  • Forward basePath into React context and apply it to index card links.
  • Add codeTransformer and hook it into ReactCodeBlock so previewed images get the correct path.

Reviewed Changes

Copilot reviewed 8 out of 8 changed files in this pull request and generated no comments.

Show a summary per file
File Description
packages/theme/doctocat.config.js Expose basePath to Doctocat via env var
packages/theme/components/layout/root-layout/index.tsx Provide basePath in ConfigContext
packages/theme/components/layout/index-cards/IndexCards.tsx Wrap cards in Next.js Link and prepend basePath to links
packages/theme/components/layout/code-block/code-transformer.ts Utility to rewrite image src with basePath
packages/theme/components/layout/code-block/ReactCodeBlock.tsx Apply codeTransformer to live previews via transformCode
packages/theme/components/context/useConfig.tsx Add basePath field to ConfigContextValue
.changeset/warm-teachers-repeat.md, .changeset/chatty-trains-explode.md Document patch updates for basePath support
Comments suppressed due to low confidence (3)

packages/theme/components/layout/index-cards/IndexCards.tsx:95

  • [nitpick] Using a placeholder href="#" may introduce unintended URL fragments; consider removing the href prop on Card and relying on Next.js Link's passHref behavior, or render Card as via the as prop.
              <Card href="#" hasBorder>

packages/theme/components/layout/index-cards/IndexCards.tsx:94

  • Add unit or integration tests to verify that index card links are correctly prefixed with basePath when NEXT_PUBLIC_DOCTOCAT_BASE_PATH is set.
            <Link legacyBehavior passHref href={item.route}>

packages/theme/components/layout/code-block/code-transformer.ts:1

  • Introduce unit tests for codeTransformer to ensure it properly prepends basePath to various local image src patterns and skips external URLs as intended.
export const codeTransformer = (sourceCode: string, basePath: string): string => {

…er ones that are impoted through webpack instead
@rezrah
rezrah merged commit 2b99ba6 into main Jun 20, 2025
8 checks passed
@primer-css primer-css mentioned this pull request Jun 20, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants