@rimelight/ui 0.0.19 → 0.0.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",
@@ -49,6 +49,7 @@
     "access": "public"
   },
   "dependencies": {
+    "@astrojs/prism": "^4.0.1",
     "@astrojs/vue": "6.0.1",
     "@iconify-json/lucide": "^1.2.102",
     "@nuxt/ui": "4.6.1",

package/src/plugins/starlightAddons/PackageManagers.astro

@@ -1,73 +1,73 @@
----
+---
 import { Tabs, TabItem } from "@astrojs/starlight/components"
-import { Code } from "astro:components"
-
-interface Props {
-  pkg?: string
-  type?: "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
-  dev?: boolean
-  args?: string
-  comment?: string
-  prefix?: string
-}
-
-const {
-  pkg,
-  type = "add",
-  dev = false,
-  args,
-  comment,
-  prefix,
-} = Astro.props
-
-type Manager = "npm" | "yarn" | "pnpm" | "bun"
-type CommandType = NonNullable<Props["type"]>
-
-const commands: Record<Manager, Partial<Record<CommandType, string>> & { dev: string }> = {
-  npm: { add: "npm i", create: "npm create", dlx: "npx", exec: "npx", install: "npm install", run: "npm run", remove: "npm uninstall", dev: "-D" },
-  yarn: { add: "yarn add", create: "yarn create", dlx: "yarn dlx", exec: "yarn", install: "yarn install", run: "yarn run", remove: "yarn remove", dev: "-D" },
-  pnpm: { add: "pnpm add", create: "pnpm create", dlx: "pnpx", exec: "pnpm", install: "pnpm install", run: "pnpm run", remove: "pnpm remove", dev: "-D" },
-  bun: { add: "bun add", create: "bun create", install: "bun install", run: "bun run", remove: "bun remove", dev: "-d" },
-}
-
-const managers: Manager[] = ["npm", "pnpm", "yarn", "bun"]
-
-function getCommand(mgr: Manager, cmdType: CommandType): string | undefined {
-  let cmd = commands[mgr][cmdType]
-  if (cmd === undefined) return undefined
-
-  if (prefix) cmd = `${prefix} ${cmd}`
-  if (comment) cmd = `# ${comment.replaceAll("{PKG}", mgr)}\n${cmd}`
-  if (dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
-
-  if (pkg) {
-    // Logic to strip version tags for yarn create
-    const processedPkg = (cmdType === "create" && mgr === "yarn")
-        ? pkg.replace(/@(?![^@]*\/)[^\s]*$/, "")
-        : pkg
-    cmd += ` ${processedPkg}`
-  }
-
-  if (args) {
-    const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
-    cmd += `${needsDoubleDash ? " --" : ""} ${args}`
-  }
-
-  return cmd
-}
-
-const tabs = managers
-    .map((mgr) => ({
-      mgr,
-      cmd: getCommand(mgr, type),
-    }))
-    .filter((tab) => tab.cmd !== undefined)
----
-
-<Tabs syncKey="package-managers">
-  {tabs.map((tab) => (
-      <TabItem label={tab.mgr}>
-        <Code code={tab.cmd!} lang="sh" />
-      </TabItem>
-  ))}
-</Tabs>
+import { Prism } from "@astrojs/prism"
+
+interface Props {
+  pkg?: string
+  type?: "add" | "create" | "dlx" | "exec" | "install" | "remove" | "run"
+  dev?: boolean
+  args?: string
+  comment?: string
+  prefix?: string
+}
+
+const {
+  pkg,
+  type = "add",
+  dev = false,
+  args,
+  comment,
+  prefix,
+} = Astro.props
+
+type Manager = "npm" | "yarn" | "pnpm" | "bun"
+type CommandType = NonNullable<Props["type"]>
+
+const commands: Record<Manager, Partial<Record<CommandType, string>> & { dev: string }> = {
+  npm: { add: "npm i", create: "npm create", dlx: "npx", exec: "npx", install: "npm install", run: "npm run", remove: "npm uninstall", dev: "-D" },
+  yarn: { add: "yarn add", create: "yarn create", dlx: "yarn dlx", exec: "yarn", install: "yarn install", run: "yarn run", remove: "yarn remove", dev: "-D" },
+  pnpm: { add: "pnpm add", create: "pnpm create", dlx: "pnpx", exec: "pnpm", install: "pnpm install", run: "pnpm run", remove: "pnpm remove", dev: "-D" },
+  bun: { add: "bun add", create: "bun create", install: "bun install", run: "bun run", remove: "bun remove", dev: "-d" },
+}
+
+const managers: Manager[] = ["npm", "pnpm", "yarn", "bun"]
+
+function getCommand(mgr: Manager, cmdType: CommandType): string | undefined {
+  let cmd = commands[mgr][cmdType]
+  if (cmd === undefined) return undefined
+
+  if (prefix) cmd = `${prefix} ${cmd}`
+  if (comment) cmd = `# ${comment.replaceAll("{PKG}", mgr)}\n${cmd}`
+  if (dev && cmdType === "add") cmd += ` ${commands[mgr].dev}`
+
+  if (pkg) {
+    // Logic to strip version tags for yarn create
+    const processedPkg = (cmdType === "create" && mgr === "yarn")
+        ? pkg.replace(/@(?![^@]*\/)[^\s]*$/, "")
+        : pkg
+    cmd += ` ${processedPkg}`
+  }
+
+  if (args) {
+    const needsDoubleDash = mgr === "npm" && !["dlx", "exec", "run"].includes(cmdType)
+    cmd += `${needsDoubleDash ? " --" : ""} ${args}`
+  }
+
+  return cmd
+}
+
+const tabs = managers
+    .map((mgr) => ({
+      mgr,
+      cmd: getCommand(mgr, type),
+    }))
+    .filter((tab) => tab.cmd !== undefined)
+---
+
+<Tabs syncKey="package-managers">
+  {tabs.map((tab) => (
+      <TabItem label={tab.mgr}>
+        <Prism lang="sh" code={tab.cmd!} />
+      </TabItem>
+  ))}
+</Tabs>

package/src/plugins/starlightAddons/index.ts

@@ -63,7 +63,6 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
         addIntegration,
         updateConfig,
         logger,
-        addRouteMiddleware,
         command,
         config: starlightConfig
       }) {

package/src/styles/index.css

@@ -1,2 +1,3 @@
 @import "tailwindcss";
 @import "@nuxt/ui";
+@import "./prism.css";

package/src/styles/prism.css

@@ -0,0 +1,42 @@
+/* Minimal Prism theme to be used with @astrojs/prism */
+pre[class*="language-"],
+code[class*="language-"] {
+  color: #d4e1f5;
+  background: #1e1e1e;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.95em;
+  line-height: 1.5;
+  padding: 1em;
+  border-radius: 6px;
+  overflow: auto;
+}
+.token.comment,
+.token.prolog,
+.token.doctype,
+.token.cdata {
+  color: #6a9955; /* greenish */
+  font-style: italic;
+}
+.token.punctuation {
+  color: #d4e1f5;
+}
+.token.keyword {
+  color: #569cd6;
+}
+.token.boolean {
+  color: #d19a66;
+}
+.token.number {
+  color: #b5cea8;
+}
+.token.string {
+  color: #ce9178;
+}
+.token.function {
+  color: #dcdcaa;
+}
+
+/* Basic line highlighting compatibility helpers (optional) */
+.code-line {
+  display: block;
+}