starlight-theme-nova 0.0.3 → 0.0.5

package/lib/shiki.css

@@ -1,3 +1,5 @@
+@import '@shikijs/twoslash/style-rich.css';
+
 .sl-markdown-content .astro-code {
   padding: 0;
   font-size: 0.875rem;
@@ -11,7 +13,7 @@
   border-style: solid;
   border-color: var(--sl-color-gray-5);
 
-  code {
+  & > code {
     display: grid;
     align-items: stretch;
     overflow-x: hidden;
@@ -53,10 +55,12 @@
 }
 
 .astro-code {
+  --twoslash-popup-bg: var(--shiki-light-bg);
   background-color: var(--shiki-light-bg);
 }
 
 html.dark .astro-code {
+  --twoslash-popup-bg: var(--shiki-dark-bg);
   background-color: var(--shiki-dark-bg);
 }
 
@@ -75,3 +79,15 @@ html.dark .astro-code span {
   font-weight: var(--shiki-dark-font-weight);
   text-decoration: var(--shiki-dark-text-decoration);
 }
+
+.astro-code.twoslash .twoslash-popup-container {
+  transform: translateY(1.8em);
+}
+
+.astro-code.twoslash .twoslash-query-presisted .twoslash-popup-container {
+  transform: translateY(2.2em);
+}
+
+.astro-code.twoslash .twoslash-query-line .twoslash-popup-container {
+  transform: translateY(1.3em);
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "starlight-theme-nova",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -26,20 +26,22 @@
     "src"
   ],
   "dependencies": {
-    "@shikijs/transformers": "^1.29.0",
+    "@shikijs/transformers": "^3.2.1",
+    "@shikijs/twoslash": "^3.2.1",
+    "@shikijs/types": "^3.2.1",
     "astro-theme-toggle": "^0.5.1",
     "hast-util-is-element": "^3.0.0"
   },
   "devDependencies": {
     "@astrojs/starlight": "^0.32.2",
-    "@iconify-json/bxl": "^1.0.0",
+    "@iconify-json/bxl": "^1.2.2",
     "@iconify-json/logos": "^1.2.4",
-    "@iconify-json/lucide": "^1.2.22",
-    "@iconify-json/tabler": "^1.0.0",
+    "@iconify-json/lucide": "^1.2.30",
+    "@iconify-json/tabler": "^1.2.17",
     "@ocavue/tsconfig": "^0.2.0",
-    "@types/node": "^20.0.0",
+    "@types/node": "^20.17.24",
     "@unocss/cli": "^66.0.0",
-    "astro": "^5.1.5",
+    "astro": "^5.5.2",
     "typescript": "^5.7.2",
     "unocss": "^66.0.0",
     "unocss-preset-animations": "^1.1.1"

package/src/components/Code.astro

@@ -1,9 +1,12 @@
 ---
 import type { ComponentProps } from 'astro/types'
 import { Code as CodeComponent } from 'astro:components'
-import { shikiConfig } from '../shiki-config'
+import { createShikiConfig } from '../shiki-config'
 
 type Props = ComponentProps<typeof CodeComponent>
+
+// For unknown reasons, enabling twoslash breaks the build, thus twoslash is disabled here.
+const shikiConfig = createShikiConfig({ twoslash: false })
 ---
 
 <CodeComponent {...shikiConfig} {...Astro.props} />

package/src/index.ts

@@ -3,7 +3,7 @@ import type {
   StarlightUserConfig,
 } from '@astrojs/starlight/types'
 
-import { shikiConfig } from './shiki-config'
+import { createShikiConfig } from './shiki-config'
 import type { ThemeNovaOptions } from './user-options'
 import { vitePluginUserConfig } from './virtual-user-config'
 
@@ -54,7 +54,7 @@ export default function starlightThemeNova(
             'astro:config:setup': ({ updateConfig }) => {
               updateConfig({
                 markdown: {
-                  shikiConfig,
+                  shikiConfig: createShikiConfig({ twoslash: true }),
                 },
                 vite: {
                   plugins: [vitePluginUserConfig(options)],

package/src/shiki-config.ts

@@ -3,20 +3,32 @@ import {
   transformerNotationDiff,
   transformerNotationHighlight,
 } from '@shikijs/transformers'
+import { transformerTwoslash } from '@shikijs/twoslash'
+import type { ShikiTransformer } from '@shikijs/types'
 import type { ShikiConfig } from 'astro'
 
 import { transformerCopyButton } from './shiki-transformer-copy-button'
 
-export const shikiConfig: ShikiConfig = {
-  themes: {
-    light: 'one-light',
-    dark: 'github-dark-dimmed',
-  },
-  defaultColor: false,
-  transformers: [
+export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
+  const transformers: ShikiTransformer[] = [
     transformerNotationDiff(),
     transformerNotationHighlight(),
     transformerMetaHighlight(),
     transformerCopyButton(),
-  ],
+    options.twoslash
+      ? transformerTwoslash({
+          explicitTrigger: true,
+        })
+      : undefined,
+  ].filter((x) => !!x)
+
+  return {
+    themes: {
+      light: 'one-light',
+      dark: 'github-dark-dimmed',
+    },
+    defaultColor: false,
+    // @ts-expect-error: Astro is using outdated Shiki v1
+    transformers: transformers,
+  }
 }

package/src/shiki-transformer-copy-button.ts

@@ -1,8 +1,6 @@
-import type { ShikiConfig } from 'astro'
+import type { ShikiTransformer } from '@shikijs/types'
 import { isElement } from 'hast-util-is-element'
 
-type ShikiTransformer = NonNullable<ShikiConfig['transformers']>[number]
-
 const name = 'starlight-theme-nova-shiki-transformer-copy-button'
 
 /**