feat: renders code example using Expressive Code

HiDeoo · Feb 17, 2024 · 4d93a6d · 4d93a6d
1 parent 23d3b7f
commit 4d93a6d
Show file tree

Hide file tree

Showing 8 changed files with 160 additions and 76 deletions.
diff --git a/docs/package.json b/docs/package.json
@@ -17,7 +17,6 @@
     "@astrojs/starlight": "0.19.0",
     "astro": "4.2.7",
     "sharp": "0.33.2",
-    "shiki": "0.14.4",
     "starlight-openapi": "workspace:*",
     "starlight-package-managers": "0.1.0"
   },

diff --git a/docs/src/content/docs/guides/getting-started.mdx b/docs/src/content/docs/guides/getting-started.mdx
@@ -20,12 +20,6 @@ Install the Starlight OpenAPI integration using your favorite package manager:
 
 <PackageManagers pkg="starlight-openapi" />
 
-:::note
-When using a [strict package manager](https://pnpm.io/pnpm-vs-npm#npms-flat-tree) like pnpm, you will also need to install the [Shiki](https://shiki.matsu.io/) syntax highlighter so it can be found during builds:
-
-<PackageManagers pkg="shiki" pkgManagers={['pnpm']} />
-:::
-
 Update your [Astro configuration](https://docs.astro.build/en/guides/configuring-astro/#supported-config-file-types) to generate documentation from your OpenAPI/Swagger specification:
 
 ```ts

diff --git a/packages/starlight-openapi/components/example/Example.astro b/packages/starlight-openapi/components/example/Example.astro
@@ -1,18 +1,21 @@
 ---
+import { Code } from '@astrojs/starlight/components'
+
 import type { ExampleV3 } from '../../libs/example'
 import Md from '../Md.astro'
 import Text from '../Text.astro'
 
 interface Props {
   example?: ExampleV3
   raw?: ExampleV3['value']
+  type?: string
 }
 
-const { example, raw } = Astro.props
+const { example, raw, type } = Astro.props
 
 const exampleToRender = raw === undefined ? example : { value: raw }
 
-function getExampleValue(value: unknown): string  {
+function getExampleValue(value: unknown): string {
   switch (typeof value) {
     case 'string': {
       return value
@@ -26,6 +29,17 @@ function getExampleValue(value: unknown): string  {
     }
   }
 }
+
+function getExampleLang(type: string | undefined) {
+  switch (type) {
+    case 'application/json': {
+      return 'json'
+    }
+    default: {
+      return 'plaintext'
+    }
+  }
+}
 ---
 
 {
@@ -38,12 +52,7 @@ function getExampleValue(value: unknown): string  {
           <a href={exampleToRender.externalValue}>{exampleToRender.externalValue}</a>
         </Text>
       )}
-      <!-- prettier-ignore-start -->
-      {exampleToRender.value &&
-        // eslint-disable-next-line astro/jsx-a11y/no-noninteractive-tabindex
-        (<pre tabindex="0"><code>{getExampleValue(exampleToRender.value)}</code></pre>)
-      }
-      <!-- prettier-ignore-end -->
+      {exampleToRender.value && <Code code={getExampleValue(exampleToRender.value)} lang={getExampleLang(type)} />}
     </>
   )
 }

diff --git a/packages/starlight-openapi/components/example/Examples.astro b/packages/starlight-openapi/components/example/Examples.astro
@@ -20,7 +20,7 @@ const { example, examples } = Astro.props
         <ContentPicker label="Select example" types={Object.keys(examples)}>
           {Object.entries(examples).map(([type, data], index) => (
             <div data-openapi-content-type={type} hidden={index > 0} role="tabpanel">
-              <Example example={data} />
+              <Example example={data} {type} />
             </div>
           ))}
         </ContentPicker>

diff --git a/packages/starlight-openapi/components/response/ResponseExamples.astro b/packages/starlight-openapi/components/response/ResponseExamples.astro
@@ -17,7 +17,7 @@ const examples = Object.entries(Astro.props.examples)
       <ContentPicker label="Select response example" types={Object.keys(Astro.props.examples)}>
         {examples.map(([type, data], index) => (
           <div data-openapi-content-type={type} hidden={index > 0} role="tabpanel">
-            <Example raw={data} />
+            <Example raw={data} {type} />
           </div>
         ))}
       </ContentPicker>

diff --git a/packages/starlight-openapi/tests/requestBody.test.ts b/packages/starlight-openapi/tests/requestBody.test.ts
@@ -80,11 +80,7 @@ test('supports schema object `oneOf` property', async ({ docPage }) => {
 
   await requestBody.getByRole('tab', { name: 'object' }).click()
 
-  await expect(
-    requestBody.getByText(`{
-  "name": "Harley"
-}`),
-  ).toBeVisible()
+  await expect(requestBody.getByText(`{ "name": "Harley"}`)).toBeVisible()
 })
 
 test('supports schema object `anyOf` property', async ({ docPage }) => {

diff --git a/packages/starlight-openapi/tests/response.test.ts b/packages/starlight-openapi/tests/response.test.ts
@@ -50,33 +50,11 @@ test('display the examples for a v2.0 schema', async ({ docPage }) => {
 
   await examples.getByRole('combobox').selectOption('application/json')
 
-  await expect(
-    examples.getByText(`[
-  {
-    "id": 1,
-    "name": "Bessy"
-  },
-  {
-    "id": 2,
-    "name": "Hazel"
-  }
-]`),
-  ).toBeVisible()
+  await expect(examples.getByText(`[ { "id": 1, "name": "Bessy" }, { "id": 2, "name": "Hazel" }]`)).toBeVisible()
 
   await examples.getByRole('combobox').selectOption('application/xml')
 
-  await expect(
-    examples.getByText(`[
-  {
-    "id": 3,
-    "name": "Cleo"
-  },
-  {
-    "id": 4,
-    "name": "Daisy"
-  }
-]`),
-  ).toBeVisible()
+  await expect(examples.getByText(`[ { "id": 3, "name": "Cleo" }, { "id": 4, "name": "Daisy" }]`)).toBeVisible()
 })
 
 test('displays nested objects collapsed by default', async ({ docPage }) => {