starlight-theme-nova 0.0.2 → 0.0.4

package/lib/markdown.css

@@ -20,8 +20,18 @@
 }
 
 /* <code> inside asides */
-@supports (border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent)) {
-	.sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
-		border-color: color-mix(in srgb, var(--sl-color-asides-text-accent) 12%, transparent);
-	}
+@supports (
+  border-color: color-mix(
+      in srgb,
+      var(--sl-color-asides-text-accent) 12%,
+      transparent
+    )
+) {
+  .sl-markdown-content .starlight-aside code:not(:where(.not-content *)) {
+    border-color: color-mix(
+      in srgb,
+      var(--sl-color-asides-text-accent) 12%,
+      transparent
+    );
+  }
 }

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.2",
+  "version": "0.0.4",
   "description": "",
   "author": "ocavue <ocavue@gmail.com>",
   "license": "MIT",
@@ -18,6 +18,7 @@
   "exports": {
     ".": "./src/index.ts",
     "./*.css": "./lib/*.css",
+    "./components": "./src/components/index.ts",
     "./components/*.astro": "./src/components/*.astro"
   },
   "files": [
@@ -25,20 +26,21 @@
     "src"
   ],
   "dependencies": {
-    "@shikijs/transformers": "^1.29.0",
+    "@shikijs/transformers": "^1.29.2",
+    "@shikijs/twoslash": "^1.29.2",
     "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/astro.d.ts

@@ -0,0 +1,6 @@
+declare module '*.astro' {
+  import { type AstroComponentFactory } from 'astro/runtime/server/index.js'
+
+  const content: AstroComponentFactory
+  export default content
+}

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/components/CodePackageManagers.astro

@@ -0,0 +1,55 @@
+---
+import { CodeTabItem, CodeTabs } from 'starlight-theme-nova/components'
+
+type PackageManager = 'pnpm' | 'npm' | 'yarn' | 'bun'
+
+interface Props {
+  /**
+   * The package managers to use.
+   *
+   * @default ['pnpm', 'npm', 'yarn', 'bun']
+   */
+  packageManagers?: PackageManager[]
+
+  /**
+   * The packages to install. If you want to install multiple packages, you can pass a space-separated string.
+   */
+  packages: string
+
+  /**
+   * Whether to install the packages as dev dependencies.
+   *
+   * @default false
+   */
+  dev?: boolean
+}
+
+const props: Props = Astro.props
+
+const packageManagers = props.packageManagers ?? ['pnpm', 'npm', 'yarn', 'bun']
+
+function getCode(packageManager: PackageManager) {
+  const parts: string[] = [
+    {
+      pnpm: 'pnpm add',
+      npm: 'npm install',
+      yarn: 'yarn add',
+      bun: 'bun add',
+    }[packageManager],
+
+    props.dev ? '-D' : '',
+
+    props.packages,
+  ]
+
+  return parts.filter(Boolean).join(' ')
+}
+---
+
+<CodeTabs syncKey="code-group-installation">
+  {
+    packageManagers.map((pkg) => (
+      <CodeTabItem label={pkg} lang="shell" code={getCode(pkg)} />
+    ))
+  }
+</CodeTabs>

package/src/components/MarkdownContent.astro

@@ -9,7 +9,7 @@ import CodeCopy from './CodeCopy.astro'
 
 <style is:global>
   :root .sl-markdown-content dd:not(:where(.not-content *)) {
-  	padding-inline-start: 2rem;
+    padding-inline-start: 2rem;
   }
 </style>
 

package/src/components/SocialIcons.astro

@@ -10,14 +10,12 @@ const links = Object.entries(config.social || {}) as [Platform, SocialConfig][]
 {
   links.length > 0 && (
     <>
-      {
-        links.map(([platform, { label, url }]) => (
-          <a href={url} rel="me" class="nova-social-icons-link">
-            <span class="sr-only">{label}</span>
-            <Icon name={platform} size="1rem" color="currentColor" />
-          </a>
-        ))
-      }
+      {links.map(([platform, { label, url }]) => (
+        <a href={url} rel="me" class="nova-social-icons-link">
+          <span class="sr-only">{label}</span>
+          <Icon name={platform} size="1rem" color="currentColor" />
+        </a>
+      ))}
     </>
   )
 }

package/src/components/index.ts

@@ -0,0 +1,6 @@
+export { default as Code } from './Code.astro'
+export { default as CodePackageManagers } from './CodePackageManagers.astro'
+export { default as CodeTabs } from './CodeTabs.astro'
+export { default as CodeTabItem } from './CodeTabItem.astro'
+export { default as LinkButton } from './LinkButton.astro'
+export { default as LinkCard } from './LinkCard.astro'

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,24 @@ import {
   transformerNotationDiff,
   transformerNotationHighlight,
 } from '@shikijs/transformers'
+import { transformerTwoslash } from '@shikijs/twoslash'
 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: [
-    transformerNotationDiff(),
-    transformerNotationHighlight(),
-    transformerMetaHighlight(),
-    transformerCopyButton(),
-  ],
+export function createShikiConfig(options: { twoslash: boolean }): ShikiConfig {
+  return {
+    themes: {
+      light: 'one-light',
+      dark: 'github-dark-dimmed',
+    },
+    defaultColor: false,
+    transformers: [
+      transformerNotationDiff(),
+      transformerNotationHighlight(),
+      transformerMetaHighlight(),
+      transformerCopyButton(),
+      options.twoslash ? transformerTwoslash() : undefined,
+    ].filter((x) => !!x),
+  }
 }