@primer/doctocat-nextjs 0.0.1 → 0.0.2-rc.5b7f8ce

package/CHANGELOG.md

@@ -0,0 +1,13 @@
+# @primer/doctocat-nextjs
+
+## 0.0.2
+
+### Patch Changes
+
+- [#4](https://github.com/primer/doctocat-nextjs/pull/4) [`4f28982`](https://github.com/primer/doctocat-nextjs/commit/4f28982e327e75f199f28fad987f1e827deafeb2) Thanks [@joseph-lozano](https://github.com/joseph-lozano)! - Wrap links with Next's Link component
+
+- [#6](https://github.com/primer/doctocat-nextjs/pull/6) [`afd4e17`](https://github.com/primer/doctocat-nextjs/commit/afd4e1762f6294a14942d415c693319a874cd3fb) Thanks [@rezrah](https://github.com/rezrah)! - - Add MDX to HTML overrides mechanism and apply to headings and anchors
+
+  - Added anchor links to headings to match current functionality on primer.style
+
+- [#2](https://github.com/primer/doctocat-nextjs/pull/2) [`2742b32`](https://github.com/primer/doctocat-nextjs/commit/2742b3214e7a53416d23f0459dc389f7c22cf5a1) Thanks [@rezrah](https://github.com/rezrah)! - Remove code blocks stylesheet, now merged into global.css

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

@@ -1,9 +1,9 @@
 import React from 'react'
 import {Card, Grid} from '@primer/react-brand'
 import {Folder, MdxFile} from 'nextra'
-import {useRouter} from 'next/router'
 
 import styles from './IndexCards.module.css'
+import Link from 'next/link'
 
 type IndexCardsProps = {
   route: string
@@ -22,7 +22,6 @@ type DocsItem = (MdxFile | FolderWithoutChildren) & {
 }
 
 export function IndexCards({route, folderData}: IndexCardsProps) {
-  const {basePath} = useRouter()
   const filteredData = folderData.filter(item => item.kind === 'MdxPage' && item.route.includes(`${route}/`))
 
   return (
@@ -31,12 +30,14 @@ export function IndexCards({route, folderData}: IndexCardsProps) {
         if (item.kind !== 'MdxPage') return null
         return (
           <Grid.Column span={{medium: 6}} key={`cell-${item.route}`}>
-            <Card href={`${basePath}${item.route}`} hasBorder style={{width: '100%'}}>
-              {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
-              {item.frontMatter && item.frontMatter.description && (
-                <Card.Description>{item.frontMatter.description}</Card.Description>
-              )}
-            </Card>
+            <Link href={item.route} legacyBehavior passHref>
+              <Card href="#" hasBorder style={{width: '100%'}}>
+                {item.frontMatter && <Card.Heading>{item.frontMatter.title}</Card.Heading>}
+                {item.frontMatter && item.frontMatter.description && (
+                  <Card.Description>{item.frontMatter.description}</Card.Description>
+                )}
+              </Card>
+            </Link>
           </Grid.Column>
         )
       })}

package/components/layout/nav-drawer/NavDrawer.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+import NextLink from 'next/link'
 import {Box, IconButton, Link, ThemeProvider} from '@primer/react'
 import {XIcon} from '@primer/octicons-react'
 
@@ -34,7 +35,7 @@ export function NavDrawer({isOpen, onDismiss, navItems}: NavDrawerProps) {
             }}
           >
             <Box sx={{py: 20, pl: 4, pr: 3, alignItems: 'center', justifyContent: 'space-between', display: 'flex'}}>
-              <Link href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
+              <Link as={NextLink} href="https://primer.style" sx={{fontWeight: 'bold', color: 'inherit'}}>
                 Explore
               </Link>
               <IconButton icon={XIcon} aria-label="Close" onClick={onDismiss} variant="invisible" />

package/components/layout/root-layout/Theme.tsx

@@ -1,9 +1,12 @@
 import React, {useMemo} from 'react'
+import NextLink from 'next/link'
 import Head from 'next/head'
 import type {Folder, MdxFile, NextraThemeLayoutProps} from 'nextra'
+import {MDXProvider} from 'nextra/mdx'
 import {useFSRoute} from 'nextra/hooks'
 import {PencilIcon} from '@primer/octicons-react'
 import {BaseStyles, Box as PRCBox, Breadcrumbs, PageLayout, ThemeProvider} from '@primer/react'
+
 import {
   Animate,
   AnimationProvider,
@@ -31,12 +34,13 @@ import {TableOfContents} from '../table-of-contents/TableOfContents'
 import bodyStyles from '../../../css/prose.module.css'
 import {IndexCards} from '../index-cards/IndexCards'
 import {useColorMode} from '../../context/color-modes/useColorMode'
+import {getComponents} from '../../mdx-components/mdx-components'
 
 const {publicRuntimeConfig} = getConfig()
 
 export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
   const {title, frontMatter, headings, filePath, pageMap, route} = pageOpts
-  const {locale = 'en-US', defaultLocale, basePath} = useRouter()
+  const {locale = 'en-US', defaultLocale} = useRouter()
   const fsPath = useFSRoute()
   const {colorMode} = useColorMode()
   const {activePath, topLevelNavbarItems, docsDirectories, flatDocsDirectories} = useMemo(
@@ -96,7 +100,8 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                   <Breadcrumbs>
                                     {siteTitle && (
                                       <Breadcrumbs.Item
-                                        href={basePath || '/'}
+                                        as={NextLink}
+                                        href="/"
                                         sx={{
                                           color: 'var(--brand-InlineLink-color-rest)',
                                         }}
@@ -107,8 +112,9 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                                     {activePath.map((item, index) => {
                                       return (
                                         <Breadcrumbs.Item
+                                          as={NextLink}
                                           key={item.name}
-                                          href={`${basePath}${item.route}`}
+                                          href={item.route}
                                           selected={index === activePath.length - 1}
                                           sx={{
                                             textTransform: 'capitalize',
@@ -159,7 +165,11 @@ export function Theme({children, pageOpts}: NextraThemeLayoutProps) {
                               </>
                             )}
                             <article className={route !== '/' && !isIndexPage ? bodyStyles.Prose : ''}>
-                              {isIndexPage ? <IndexCards folderData={flatDocsDirectories} route={route} /> : children}
+                              {isIndexPage ? (
+                                <IndexCards folderData={flatDocsDirectories} route={route} />
+                              ) : (
+                                <MDXProvider components={getComponents()}>{children}</MDXProvider>
+                              )}
                             </article>
                             <footer>
                               <Box marginBlockStart={64}>

package/components/layout/sidebar/Sidebar.tsx

@@ -1,4 +1,5 @@
 import React, {useMemo} from 'react'
+import NextLink from 'next/link'
 import {NavList} from '@primer/react'
 import {Folder, MdxFile, PageMapItem} from 'nextra'
 import {useRouter} from 'next/router'
@@ -60,7 +61,6 @@ function getOcticonForType(type?: string): Icon | undefined {
 
 export function Sidebar({pageMap}: SidebarProps) {
   const router = useRouter()
-  const basePath = router.basePath
 
   const {sidebarLinks}: ThemeConfig = publicRuntimeConfig
 
@@ -94,7 +94,7 @@ export function Sidebar({pageMap}: SidebarProps) {
 
           if (item.kind === 'MdxPage') {
             return (
-              <NavList.Item key={item.name} href={`${basePath}${item.route}`} sx={{textTransform: 'capitalize'}}>
+              <NavList.Item as={NextLink} key={item.name} href={item.route} sx={{textTransform: 'capitalize'}}>
                 {item.frontMatter?.title ?? item.name}
               </NavList.Item>
             )
@@ -109,7 +109,7 @@ export function Sidebar({pageMap}: SidebarProps) {
             const shouldShowTabs = indexPage.frontMatter?.['show-tabs'] ?? false
             if (shouldShowTabs) {
               return (
-                <NavList.Item key={indexPage.name} href={`${basePath}${indexPage.route}`}>
+                <NavList.Item as={NextLink} key={indexPage.name} href={indexPage.route}>
                   {(indexPage as MdxFile).frontMatter?.title || item.name}
                 </NavList.Item>
               )
@@ -129,8 +129,9 @@ export function Sidebar({pageMap}: SidebarProps) {
                       if (child.kind === 'MdxPage') {
                         return (
                           <NavList.Item
+                            as={NextLink}
                             key={child.name}
-                            href={`${basePath}${child.route}`}
+                            href={child.route}
                             aria-current={child.route === router.pathname ? 'page' : undefined}
                           >
                             {(child as MdxFile).frontMatter?.title || item.name}
@@ -144,8 +145,9 @@ export function Sidebar({pageMap}: SidebarProps) {
                         )
                         return (
                           <NavList.Item
-                            key={`${(landingPageItem as MdxFile).route}`}
-                            href={`${basePath}${(landingPageItem as MdxFile).route}`}
+                            as={NextLink}
+                            key={(landingPageItem as MdxFile).route}
+                            href={(landingPageItem as MdxFile).route}
                             sx={{textTransform: 'capitalize'}}
                             aria-current={(landingPageItem as MdxFile).route === router.pathname ? 'page' : undefined}
                           >
@@ -170,7 +172,12 @@ export function Sidebar({pageMap}: SidebarProps) {
               const LeadingIcon = getOcticonForType(leadingIcon)
 
               return (
-                <NavList.Item key={link.title} href={link.href} target={isExternalUrl ? '_blank' : undefined}>
+                <NavList.Item
+                  as={NextLink}
+                  key={link.title}
+                  href={link.href}
+                  target={isExternalUrl ? '_blank' : undefined}
+                >
                   <NavList.LeadingVisual>{LeadingIcon && <LeadingIcon />}</NavList.LeadingVisual>
                   {link.title}
                   {isExternalUrl && (

package/components/mdx-components/mdx-components.module.css

@@ -0,0 +1,14 @@
+.Heading__anchor {
+  color: var(--brand-color-text-default) !important;
+  text-decoration: none !important;
+}
+
+.Heading__anchorIcon {
+  visibility: hidden;
+  margin-left: var(--base-size-8);
+  vertical-align: middle !important;
+}
+
+.Heading__anchor:hover .Heading__anchorIcon {
+  visibility: visible;
+}

package/components/mdx-components/mdx-components.tsx

@@ -0,0 +1,43 @@
+import React from 'react'
+import type {ComponentProps, ReactElement} from 'react'
+import clsx from 'clsx'
+import type {Components} from 'nextra/mdx'
+
+import {LinkIcon} from '@primer/octicons-react'
+import NextLink from 'next/link'
+
+import styles from './mdx-components.module.css'
+
+// Anchor links for Headings
+function HeadingLink({
+  tag: Tag,
+  context,
+  children,
+  id,
+  className,
+  ...props
+}: ComponentProps<'h2'> & {
+  tag: `h${2 | 3 | 4 | 5 | 6}`
+  context: {index: number}
+}): ReactElement {
+  return (
+    <Tag {...props} id={id} className={clsx(className)}>
+      <NextLink href={`#${id}`} className={styles.Heading__anchor}>
+        {children} <LinkIcon className={styles.Heading__anchorIcon} size={16} />
+      </NextLink>
+    </Tag>
+  )
+}
+
+export const Link = ({href = '', className, ...props}) => <NextLink href={href} {...props} />
+export const getComponents = (): Components => {
+  const context = {index: 0}
+  return {
+    h2: props => <HeadingLink tag="h2" context={context} {...props} />,
+    h3: props => <HeadingLink tag="h3" context={context} {...props} />,
+    h4: props => <HeadingLink tag="h4" context={context} {...props} />,
+    h5: props => <HeadingLink tag="h5" context={context} {...props} />,
+    h6: props => <HeadingLink tag="h6" context={context} {...props} />,
+    a: Link,
+  }
+}

package/css/global.css

@@ -1,3 +1,7 @@
+/**
+ * Global
+ */
+
 html,
 body {
   background-color: var(--brand-color-canvas-default) !important;
@@ -9,3 +13,173 @@ body {
 .exclude-from-prose * + * {
   margin-block-start: 0 !important;
 }
+
+/**
+ * Code block overrides
+ */
+
+:root {
+  --shiki-color-text: #414141;
+  --shiki-color-background: transparent;
+  --shiki-token-constant: #1976d2;
+  --shiki-token-string: #22863a;
+  --shiki-token-comment: #aaa;
+  --shiki-token-keyword: #d32f2f;
+  --shiki-token-parameter: #ff9801;
+  --shiki-token-function: #6f42c1;
+  --shiki-token-string-expression: var(--shiki-token-string);
+  --shiki-token-punctuation: #212121;
+  --shiki-token-link: var(--shiki-token-string);
+  --shiki-color-ansi-black: #24292e;
+  --shiki-color-ansi-black-dim: rgba(36, 41, 46, 0.5);
+  --shiki-color-ansi-red: #d73a49;
+  --shiki-color-ansi-red-dim: rgba(215, 58, 73, 0.5);
+  --shiki-color-ansi-green: #28a745;
+  --shiki-color-ansi-green-dim: rgba(40, 167, 69, 0.5);
+  --shiki-color-ansi-yellow: #dbab09;
+  --shiki-color-ansi-yellow-dim: rgba(219, 171, 9, 0.5);
+  --shiki-color-ansi-blue: #0366d6;
+  --shiki-color-ansi-blue-dim: rgba(3, 102, 214, 0.5);
+  --shiki-color-ansi-magenta: #5a32a3;
+  --shiki-color-ansi-magenta-dim: rgba(90, 50, 163, 0.5);
+  --shiki-color-ansi-cyan: #1b7c83;
+  --shiki-color-ansi-cyan-dim: rgba(27, 124, 131, 0.5);
+  --shiki-color-ansi-white: #6a737d;
+  --shiki-color-ansi-white-dim: rgba(106, 115, 125, 0.5);
+  --shiki-color-ansi-bright-black: #959da5;
+  --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
+  --shiki-color-ansi-bright-red: #cb2431;
+  --shiki-color-ansi-bright-red-dim: rgba(203, 36, 49, 0.5);
+  --shiki-color-ansi-bright-green: #22863a;
+  --shiki-color-ansi-bright-green-dim: rgba(34, 134, 58, 0.5);
+  --shiki-color-ansi-bright-yellow: #b08800;
+  --shiki-color-ansi-bright-yellow-dim: rgba(176, 136, 0, 0.5);
+  --shiki-color-ansi-bright-blue: #005cc5;
+  --shiki-color-ansi-bright-blue-dim: rgba(0, 92, 197, 0.5);
+  --shiki-color-ansi-bright-magenta: #5a32a3;
+  --shiki-color-ansi-bright-magenta-dim: rgba(90, 50, 163, 0.5);
+  --shiki-color-ansi-bright-cyan: #3192aa;
+  --shiki-color-ansi-bright-cyan-dim: rgba(49, 146, 170, 0.5);
+  --shiki-color-ansi-bright-white: #d1d5da;
+  --shiki-color-ansi-bright-white-dim: rgba(209, 213, 218, 0.5);
+}
+
+[data-color-mode='dark'] {
+  --shiki-color-text: #d1d1d1;
+  --shiki-token-constant: #79b8ff;
+  --shiki-token-string: #ffab70;
+  --shiki-token-comment: #6b737c;
+  --shiki-token-keyword: #f97583;
+  --shiki-token-function: #b392f0;
+  --shiki-token-string-expression: #4bb74a;
+  --shiki-token-punctuation: #bbb;
+  --shiki-token-link: var(--shiki-token-string);
+  --shiki-color-ansi-black: #586069;
+  --shiki-color-ansi-black-dim: rgba(88, 96, 105, 0.5);
+  --shiki-color-ansi-red: #ea4a5a;
+  --shiki-color-ansi-red-dim: rgba(234, 74, 90, 0.5);
+  --shiki-color-ansi-green: #34d058;
+  --shiki-color-ansi-green-dim: rgba(52, 208, 88, 0.5);
+  --shiki-color-ansi-yellow: #ffea7f;
+  --shiki-color-ansi-yellow-dim: rgba(255, 234, 127, 0.5);
+  --shiki-color-ansi-blue: #2188ff;
+  --shiki-color-ansi-blue-dim: rgba(33, 136, 255, 0.5);
+  --shiki-color-ansi-magenta: #b392f0;
+  --shiki-color-ansi-magenta-dim: rgba(179, 146, 240, 0.5);
+  --shiki-color-ansi-cyan: #39c5cf;
+  --shiki-color-ansi-cyan-dim: rgba(57, 197, 207, 0.5);
+  --shiki-color-ansi-white: #d1d5da;
+  --shiki-color-ansi-white-dim: rgba(209, 213, 218, 0.5);
+  --shiki-color-ansi-bright-black: #959da5;
+  --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
+  --shiki-color-ansi-bright-red: #f97583;
+  --shiki-color-ansi-bright-red-dim: rgba(249, 117, 131, 0.5);
+  --shiki-color-ansi-bright-green: #85e89d;
+  --shiki-color-ansi-bright-green-dim: rgba(133, 232, 157, 0.5);
+  --shiki-color-ansi-bright-yellow: #ffea7f;
+  --shiki-color-ansi-bright-yellow-dim: rgba(255, 234, 127, 0.5);
+  --shiki-color-ansi-bright-blue: #79b8ff;
+  --shiki-color-ansi-bright-blue-dim: rgba(121, 184, 255, 0.5);
+  --shiki-color-ansi-bright-magenta: #b392f0;
+  --shiki-color-ansi-bright-magenta-dim: rgba(179, 146, 240, 0.5);
+  --shiki-color-ansi-bright-cyan: #56d4dd;
+  --shiki-color-ansi-bright-cyan-dim: rgba(86, 212, 221, 0.5);
+  --shiki-color-ansi-bright-white: #fafbfc;
+  --shiki-color-ansi-bright-white-dim: rgba(250, 251, 252, 0.5);
+}
+
+pre {
+  background-color: var(--brand-color-canvas-subtle);
+  border-radius: var(--brand-borderRadius-large);
+  padding-top: 1rem;
+  padding-block-end: 1rem;
+}
+
+code {
+  -webkit-box-decoration-break: slice;
+  box-decoration-break: slice;
+  font-feature-settings:
+    'rlig' 1,
+    'calt' 1,
+    'ss01' 1;
+}
+code[data-line-numbers] > .line {
+  padding-left: 0.5rem;
+}
+code[data-line-numbers] > .line:before {
+  counter-increment: line;
+  content: counter(line);
+  float: left;
+  text-align: right;
+  --tw-text-opacity: 1;
+  color: rgba(107, 114, 128, var(--tw-text-opacity));
+  min-width: 2.6rem;
+  height: 100%;
+  padding-right: 1rem;
+}
+code .line {
+  margin-block-start: 0 !important;
+}
+code .line.highlighted {
+  background-color: rgba(218, 221, 226, 0.5);
+  color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 45%/0.5);
+  --tw-shadow: 2px 0 currentColor inset;
+  --tw-shadow-colored: inset 2px 0 var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
+}
+code .line .highlighted {
+  --tw-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
+  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
+  background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
+  --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
+  --tw-shadow: var(--tw-shadow-colored);
+  border-radius: 0.125rem;
+}
+:is(html[class~='dark'] code .line .highlighted) {
+  background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
+  --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
+  --tw-shadow: var(--tw-shadow-colored);
+}
+pre {
+  contain: paint;
+}
+pre code {
+  color: currentColor;
+  border-style: none;
+  border-radius: 0;
+  min-width: 100%;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  display: grid;
+  background-color: transparent !important;
+  padding: 0 !important;
+}
+:is(html[class~='dark'] pre code) {
+  background-color: transparent !important;
+}
+pre code .line,
+pre:not([data-theme]) {
+  padding-left: 1rem;
+  padding-right: 1rem;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/doctocat-nextjs",
-  "version": "0.0.1",
+  "version": "0.0.2-rc.5b7f8ce",
   "description": "A Next.js theme for building Primer documentation sites",
   "main": "index.js",
   "scripts": {

package/css/code-block-overrides.css

@@ -1,162 +0,0 @@
-:root {
-  --shiki-color-text: #414141;
-  --shiki-color-background: transparent;
-  --shiki-token-constant: #1976d2;
-  --shiki-token-string: #22863a;
-  --shiki-token-comment: #aaa;
-  --shiki-token-keyword: #d32f2f;
-  --shiki-token-parameter: #ff9801;
-  --shiki-token-function: #6f42c1;
-  --shiki-token-string-expression: var(--shiki-token-string);
-  --shiki-token-punctuation: #212121;
-  --shiki-token-link: var(--shiki-token-string);
-  --shiki-color-ansi-black: #24292e;
-  --shiki-color-ansi-black-dim: rgba(36, 41, 46, 0.5);
-  --shiki-color-ansi-red: #d73a49;
-  --shiki-color-ansi-red-dim: rgba(215, 58, 73, 0.5);
-  --shiki-color-ansi-green: #28a745;
-  --shiki-color-ansi-green-dim: rgba(40, 167, 69, 0.5);
-  --shiki-color-ansi-yellow: #dbab09;
-  --shiki-color-ansi-yellow-dim: rgba(219, 171, 9, 0.5);
-  --shiki-color-ansi-blue: #0366d6;
-  --shiki-color-ansi-blue-dim: rgba(3, 102, 214, 0.5);
-  --shiki-color-ansi-magenta: #5a32a3;
-  --shiki-color-ansi-magenta-dim: rgba(90, 50, 163, 0.5);
-  --shiki-color-ansi-cyan: #1b7c83;
-  --shiki-color-ansi-cyan-dim: rgba(27, 124, 131, 0.5);
-  --shiki-color-ansi-white: #6a737d;
-  --shiki-color-ansi-white-dim: rgba(106, 115, 125, 0.5);
-  --shiki-color-ansi-bright-black: #959da5;
-  --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
-  --shiki-color-ansi-bright-red: #cb2431;
-  --shiki-color-ansi-bright-red-dim: rgba(203, 36, 49, 0.5);
-  --shiki-color-ansi-bright-green: #22863a;
-  --shiki-color-ansi-bright-green-dim: rgba(34, 134, 58, 0.5);
-  --shiki-color-ansi-bright-yellow: #b08800;
-  --shiki-color-ansi-bright-yellow-dim: rgba(176, 136, 0, 0.5);
-  --shiki-color-ansi-bright-blue: #005cc5;
-  --shiki-color-ansi-bright-blue-dim: rgba(0, 92, 197, 0.5);
-  --shiki-color-ansi-bright-magenta: #5a32a3;
-  --shiki-color-ansi-bright-magenta-dim: rgba(90, 50, 163, 0.5);
-  --shiki-color-ansi-bright-cyan: #3192aa;
-  --shiki-color-ansi-bright-cyan-dim: rgba(49, 146, 170, 0.5);
-  --shiki-color-ansi-bright-white: #d1d5da;
-  --shiki-color-ansi-bright-white-dim: rgba(209, 213, 218, 0.5);
-}
-
-[data-color-mode='dark'] {
-  --shiki-color-text: #d1d1d1;
-  --shiki-token-constant: #79b8ff;
-  --shiki-token-string: #ffab70;
-  --shiki-token-comment: #6b737c;
-  --shiki-token-keyword: #f97583;
-  --shiki-token-function: #b392f0;
-  --shiki-token-string-expression: #4bb74a;
-  --shiki-token-punctuation: #bbb;
-  --shiki-token-link: var(--shiki-token-string);
-  --shiki-color-ansi-black: #586069;
-  --shiki-color-ansi-black-dim: rgba(88, 96, 105, 0.5);
-  --shiki-color-ansi-red: #ea4a5a;
-  --shiki-color-ansi-red-dim: rgba(234, 74, 90, 0.5);
-  --shiki-color-ansi-green: #34d058;
-  --shiki-color-ansi-green-dim: rgba(52, 208, 88, 0.5);
-  --shiki-color-ansi-yellow: #ffea7f;
-  --shiki-color-ansi-yellow-dim: rgba(255, 234, 127, 0.5);
-  --shiki-color-ansi-blue: #2188ff;
-  --shiki-color-ansi-blue-dim: rgba(33, 136, 255, 0.5);
-  --shiki-color-ansi-magenta: #b392f0;
-  --shiki-color-ansi-magenta-dim: rgba(179, 146, 240, 0.5);
-  --shiki-color-ansi-cyan: #39c5cf;
-  --shiki-color-ansi-cyan-dim: rgba(57, 197, 207, 0.5);
-  --shiki-color-ansi-white: #d1d5da;
-  --shiki-color-ansi-white-dim: rgba(209, 213, 218, 0.5);
-  --shiki-color-ansi-bright-black: #959da5;
-  --shiki-color-ansi-bright-black-dim: rgba(149, 157, 165, 0.5);
-  --shiki-color-ansi-bright-red: #f97583;
-  --shiki-color-ansi-bright-red-dim: rgba(249, 117, 131, 0.5);
-  --shiki-color-ansi-bright-green: #85e89d;
-  --shiki-color-ansi-bright-green-dim: rgba(133, 232, 157, 0.5);
-  --shiki-color-ansi-bright-yellow: #ffea7f;
-  --shiki-color-ansi-bright-yellow-dim: rgba(255, 234, 127, 0.5);
-  --shiki-color-ansi-bright-blue: #79b8ff;
-  --shiki-color-ansi-bright-blue-dim: rgba(121, 184, 255, 0.5);
-  --shiki-color-ansi-bright-magenta: #b392f0;
-  --shiki-color-ansi-bright-magenta-dim: rgba(179, 146, 240, 0.5);
-  --shiki-color-ansi-bright-cyan: #56d4dd;
-  --shiki-color-ansi-bright-cyan-dim: rgba(86, 212, 221, 0.5);
-  --shiki-color-ansi-bright-white: #fafbfc;
-  --shiki-color-ansi-bright-white-dim: rgba(250, 251, 252, 0.5);
-}
-
-pre {
-  background-color: var(--brand-color-canvas-subtle);
-  border-radius: var(--brand-borderRadius-large);
-  padding-top: 1rem;
-  padding-block-end: 1rem;
-}
-
-code {
-  -webkit-box-decoration-break: slice;
-  box-decoration-break: slice;
-  font-feature-settings: 'rlig' 1, 'calt' 1, 'ss01' 1;
-}
-code[data-line-numbers] > .line {
-  padding-left: 0.5rem;
-}
-code[data-line-numbers] > .line:before {
-  counter-increment: line;
-  content: counter(line);
-  float: left;
-  text-align: right;
-  --tw-text-opacity: 1;
-  color: rgba(107, 114, 128, var(--tw-text-opacity));
-  min-width: 2.6rem;
-  height: 100%;
-  padding-right: 1rem;
-}
-code .line {
-  margin-block-start: 0 !important;
-}
-code .line.highlighted {
-  background-color: rgba(218, 221, 226, 0.5);
-  color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 45%/0.5);
-  --tw-shadow: 2px 0 currentColor inset;
-  --tw-shadow-colored: inset 2px 0 var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
-}
-code .line .highlighted {
-  --tw-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3);
-  --tw-shadow-colored: 0 0 0 2px var(--tw-shadow-color);
-  box-shadow: var(--tw-ring-offset-shadow, 0 0 transparent), var(--tw-ring-shadow, 0 0 transparent), var(--tw-shadow);
-  background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
-  --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 32%/0.1);
-  --tw-shadow: var(--tw-shadow-colored);
-  border-radius: 0.125rem;
-}
-:is(html[class~='dark'] code .line .highlighted) {
-  background-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
-  --tw-shadow-color: hsl(var(--brand-color-accent-primary) var(--brand-color-accent-primary) 77%/0.1);
-  --tw-shadow: var(--tw-shadow-colored);
-}
-pre {
-  contain: paint;
-}
-pre code {
-  color: currentColor;
-  border-style: none;
-  border-radius: 0;
-  min-width: 100%;
-  font-size: 0.875rem;
-  line-height: 1.25rem;
-  display: grid;
-  background-color: transparent !important;
-  padding: 0 !important;
-}
-:is(html[class~='dark'] pre code) {
-  background-color: transparent !important;
-}
-pre code .line,
-pre:not([data-theme]) {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}