v0.5.0

docs/package.json

@@ -13,8 +13,8 @@
     "lint": "prettier -c --cache . && eslint . --cache --max-warnings=0"
   },
   "dependencies": {
-    "@astrojs/starlight": "0.21.1",
-    "astro": "4.5.1",
+    "@astrojs/starlight": "0.23.1",
+    "astro": "4.8.6",
     "sharp": "0.33.2",
     "starlight-image-zoom": "workspace:*",
     "starlight-package-managers": "0.4.0"

docs/src/content/docs/tests/specific-syntax.md

@@ -0,0 +1,20 @@
+---
+title: Specific syntax Markdown
+slug: tests/specific-syntax-md
+pagefind: false
+---
+
+A code block with no frame:
+
+```js frame="none"
+// src/example.js
+console.log('Hello, world!')
+```
+
+A remote image using Markdown syntax:
+
+![Astro logo](https://astro.build/assets/press/astro-logo-light-gradient.png)
+
+A remote image using HTML syntax with the `img` tag:
+
+<img src="https://astro.build/assets/press/astro-logo-light-gradient.png" alt="Astro logo" />

packages/starlight-image-zoom/libs/integration.ts

@@ -3,7 +3,7 @@ import rehypeRaw from 'rehype-raw'
 
 import type { StarlightImageZoomConfig } from '..'
 
-import { rehypeStarlightImageZoom } from './rehype'
+import { rehypeMetaString, rehypeStarlightImageZoom } from './rehype'
 import { vitePluginStarlightImageZoomConfig } from './vite'
 
 export function starlightImageZoomIntegration(config: StarlightImageZoomConfig): AstroIntegration {
@@ -13,7 +13,7 @@ export function starlightImageZoomIntegration(config: StarlightImageZoomConfig):
       'astro:config:setup': ({ updateConfig }) => {
         updateConfig({
           markdown: {
-            rehypePlugins: [rehypeRaw, rehypeStarlightImageZoom],
+            rehypePlugins: [rehypeMetaString, rehypeRaw, rehypeStarlightImageZoom],
           },
           vite: {
             plugins: [vitePluginStarlightImageZoomConfig(config)],

packages/starlight-image-zoom/libs/rehype.ts

@@ -106,3 +106,26 @@ export function rehypeStarlightImageZoom() {
     })
   }
 }
+
+/**
+ * rehype-raw strips the `meta` property from code blocks so we manually moved it to a `metastring` property which is
+ * supported by expressive-code.
+ *
+ * @see https://github.com/syntax-tree/hast-util-raw/issues/13
+ * @see https://github.com/expressive-code/expressive-code/blob/21fdaa441c89d6a6ac38f5d522b6b60741df2f5d/packages/rehype-expressive-code/src/utils.ts#L15
+ */
+export function rehypeMetaString() {
+  return function (tree: Root) {
+    visit(tree, ['element'], (node) => {
+      if (node.type === 'element' && node.tagName === 'code' && node.data?.meta) {
+        node.properties['metastring'] = node.data.meta
+      }
+    })
+  }
+}
+
+declare module 'hast' {
+  interface Data {
+    meta?: string
+  }
+}

packages/starlight-image-zoom/package.json

@@ -21,14 +21,14 @@
     "unist-util-visit-parents": "6.0.1"
   },
   "devDependencies": {
-    "@astrojs/starlight": "0.21.1",
+    "@astrojs/starlight": "0.23.1",
     "@playwright/test": "1.42.1",
     "@types/hast": "3.0.4",
-    "astro": "4.5.1",
+    "astro": "4.8.6",
     "mdast-util-mdx-jsx": "3.1.2"
   },
   "peerDependencies": {
-    "@astrojs/starlight": ">=0.20.0"
+    "@astrojs/starlight": ">=0.22.0"
   },
   "engines": {
     "node": ">=18"

packages/starlight-image-zoom/tests/specific-syntax.test.ts

@@ -11,3 +11,9 @@ test('mdx: zooms an image using the `<Picture>` component', async ({ testPage })
 
   await expect(testPage.getNthImage(1)).toBeZoomedAfterClick()
 })
+
+test('md: preserves code block metadata', async ({ testPage }) => {
+  await testPage.goto('specific-syntax-md')
+
+  await expect(testPage.page.getByText('// src/example.js')).toBeVisible()
+})