@primer/doctocat-nextjs 0.0.0-20250620092520 → 0.0.0-20250620095921

package/CHANGELOG.md

@@ -1,18 +1,18 @@
 # @primer/doctocat-nextjs
 
-## 0.0.0-20250620092520
+## 0.0.0-20250620095921
 
 ### Patch Changes
 
 - Fake entry to force publishing
 
-## 0.0.0-20250620092519
+## 0.0.0-20250620095919
 
 ### Patch Changes
 
 - [#43](https://github.com/primer/doctocat-nextjs/pull/43) [`c5542e9`](https://github.com/primer/doctocat-nextjs/commit/c5542e915dc0fbe6e054e8fde96f7136498b9cc7) Thanks [@rezrah](https://github.com/rezrah)! - Fix lack of `basePath` support on index cards. `href` now prepends the `basePath`.
 
-- [`fea58bc`](https://github.com/primer/doctocat-nextjs/commit/fea58bc04c1cfb4897ef8f5921dbc9afd5b18dc8) Thanks [@rezrah](https://github.com/rezrah)! - Prepend basePath to paths in Doctocat UI, where it would previously not resolve correctly.
+- [#46](https://github.com/primer/doctocat-nextjs/pull/46) [`fea58bc`](https://github.com/primer/doctocat-nextjs/commit/fea58bc04c1cfb4897ef8f5921dbc9afd5b18dc8) Thanks [@rezrah](https://github.com/rezrah)! - Prepend `basePath` from `next.config.js` to paths in Doctocat UI components, where it would previously not resolve correctly.
 
 ## 0.5.2
 

package/components/layout/code-block/code-transformer.ts

@@ -7,14 +7,13 @@ export const codeTransformer = (sourceCode: string, basePath: string): string =>
   // normalise for absolute (/path) and relative (path) values
   const transformSrc = (src: string) => (src.startsWith('/') ? `${basePath}${src}` : `${basePath}/${src}`)
 
-  const transformElement =
-    (imgTag: string) =>
-    (match: string, before = '', src: string, after: string) => {
+  // Assumes all elements with a src attribute are trying to point at Next.js public folder
+  return sourceCode.replace(
+    /<(\w+)\s+([^>]*\s+)?src=["']([^"']+)["']([^>]*)/g,
+    (match, tagName, before = '', src, after) => {
       if (!shouldTransform(src)) return match
-      return `<${imgTag} ${before}src="${transformSrc(src)}"${after}`
-    }
 
-  return sourceCode
-    .replace(/<img\s+([^>]*\s+)?src=["']([^"']+)["']([^>]*>)/g, transformElement('img'))
-    .replace(/<Image\s+([^>]*\s+)?src=["']([^"']+)["']([^>]*)/g, transformElement('Image'))
+      return `<${tagName} ${before}src="${transformSrc(src)}"${after}`
+    },
+  )
 }

package/components/layout/index-cards/IndexCards.tsx

@@ -18,6 +18,7 @@ import placeholderLightFiveThumb from './images/light-5.png'
 import placeholderLightSixThumb from './images/light-6.png'
 
 import styles from './IndexCards.module.css'
+import {useConfig} from '../../context/useConfig'
 
 type IndexCardsProps = {
   route: string
@@ -43,6 +44,7 @@ const lightModePlaceholderThumbs = [
 ] as unknown as StaticImageData[]
 
 export function IndexCards({route, folderData}: IndexCardsProps) {
+  const {basePath} = useConfig()
   const lastPlaceholderIndexRef = useRef<number>(-1)
   // We don't want to show children of these pages. E.g. tabbed pages
   const onlyDirectChildren = folderData.filter(item => {
@@ -93,7 +95,7 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
           <Grid.Column span={{xsmall: 12, small: 12, medium: 12, large: 6, xlarge: 4}} key={item.frontMatter.title}>
             <Link legacyBehavior passHref href={item.route}>
               <Card href="#" hasBorder>
-                <Card.Image src={thumbnailUrl} alt="" aspectRatio="4:3" />
+                <Card.Image src={`${basePath ? basePath : ''}${thumbnailUrl}`} alt="" aspectRatio="4:3" />
                 <Card.Heading>{item.frontMatter.title}</Card.Heading>
                 {item.frontMatter.description && <Card.Description>{item.frontMatter.description}</Card.Description>}
               </Card>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.0-20250620092520",
+  "version": "0.0.0-20250620095921",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "type": "module",