feat(starlight): add ContentPanel override, update stoplight elements

astro.config.mjs

@@ -12,6 +12,9 @@ export default defineConfig({
       social: {
         github: 'https://github.com/indyandie/lucero',
       },
+      components: {
+        ContentPanel: './src/components/overrides/CustomContentPanel.astro'
+      },
       plugins: [
         // Generate the OpenAPI documentation pages.
         starlightOpenAPI([
@@ -37,8 +40,8 @@ export default defineConfig({
           items: openAPISidebarGroups,
         },
         {
-          label: 'Stoplight',
-          autogenerate: { directory: 'stoplight' },
+          label: 'Stoplight Elements',
+          autogenerate: { directory: 'stoplight-elements' },
         },
       ],
     }),

src/components/StoplightElementsPokeapi.html

@@ -0,0 +1,12 @@
+<script src="/lucero/stoplight-elements/js/web-component.min.js"></script>
+<link
+  rel="stylesheet"
+  href="/lucero/stoplight-elements/css/styles.min.css"
+/>
+
+<div class="not-content">
+  <elements-api
+    apiDescriptionUrl="https://raw.githubusercontent.com/PokeAPI/pokeapi/master/openapi.yml"
+    router="hash"
+  />
+</div>

src/components/overrides/CustomContentPanel.astro

@@ -0,0 +1,22 @@
+---
+import type { Props } from '@astrojs/starlight/props'
+import Default from '@astrojs/starlight/components/ContentPanel.astro'
+const pageSlug = Astro.props.slug
+---
+{
+  pageSlug === 'rapidoc/pokeapi' || pageSlug === 'stoplight-elements/pokeapi' ? (
+    <section>
+      <slot />
+    </section>
+  ) : (
+    <Default {...Astro.props}>
+      <slot />
+    </Default>
+  )
+}
+
+<style>
+  section:first-child {
+    display: none;
+  }
+</style>

src/content/docs/stoplight-elements/pokeapi.mdx

@@ -0,0 +1,12 @@
+---
+title: PokeAPI (Stoplight Elements)
+template: splash
+prev: true
+next: true
+attrs:
+  target: _blank
+---
+
+import Poke from "../../../components/StoplightElementsPokeapi.html";
+
+<Poke/>