@rimelight/ui 0.0.13 → 0.0.14

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.13",
+  "version": "0.0.14",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "homepage": "https://rimelight.com/docs",

package/src/env.d.ts

@@ -12,6 +12,29 @@ declare module "virtual:rimelight-ui" {
   export function getUIConfig(): DefaultUIConfig
 }
 
+interface StarlightAddonsConfig {
+  copy?: boolean
+  share?: boolean
+}
+
+declare module "virtual:rimelight-starlight-addons-config" {
+  const config: StarlightAddonsConfig
+  export default config
+}
+
+declare module "turndown" {
+  class TurndownService {
+    constructor(options?: Record<string, unknown>)
+    turndown(html: Node | string): string
+    use(plugin: () => void): void
+  }
+  export default TurndownService
+}
+
+declare module "turndown-plugin-gfm" {
+  export function gfm(): void
+}
+
 declare namespace App {
   interface Locals {
     cfContext?: Record<string, unknown>

package/src/plugins/starlightAddons/PackageManagers.astro

@@ -0,0 +1,45 @@
+---
+import { Tabs, TabItem } from "@astrojs/starlight/components"
+import { Code as AstroCode } from "astro:components"
+
+interface Props {
+  pkg: string
+  type?: "add" | "create" | "install" | "remove" | "run"
+  dev?: boolean
+}
+
+const { pkg, type = "add", dev = false } = Astro.props
+
+const commands: Record<string, Record<string, string>> = {
+  npm: { add: "npm i", create: "npm create", install: "npm install", remove: "npm uninstall", run: "npm run", devOption: "-D" },
+  yarn: { add: "yarn add", create: "yarn create", install: "yarn install", remove: "yarn remove", run: "yarn run", devOption: "-D" },
+  pnpm: { add: "pnpm add", create: "pnpm create", install: "pnpm install", remove: "pnpm remove", run: "pnpm run", devOption: "-D" },
+  bun: { add: "bun add", create: "bun create", install: "bun install", remove: "bun remove", run: "bun run", devOption: "-d" },
+}
+
+function getCommand(manager: string, cmdType: string, pkgName: string, devFlag: boolean): string {
+  const mgrCmds = commands[manager]
+  if (!mgrCmds) return ""
+  let cmd = mgrCmds[cmdType]
+  if (!cmd) return ""
+  if (cmdType === "add" && devFlag && mgrCmds.devOption) cmd += " " + mgrCmds.devOption
+  if (pkgName && cmdType !== "install") cmd += " " + pkgName
+  return cmd
+}
+
+const managers = ["npm", "pnpm", "yarn", "bun"] as const
+const singleManager = managers[0] as string
+const command = getCommand(singleManager, type, pkg, dev)
+---
+
+{(managers.length as number) === 1 ? (
+  <AstroCode code={command} lang="sh" />
+) : (
+  <Tabs syncKey="package-managers">
+    {managers.map((manager) => (
+      <TabItem label={manager}>
+        <AstroCode code={getCommand(manager, type, pkg, dev)} lang="sh" />
+      </TabItem>
+    ))}
+  </Tabs>
+)}

package/src/plugins/starlightAddons/PageTitle.astro

@@ -1,114 +1,113 @@
----
-import DefaultPageTitle from "@astrojs/starlight/components/PageTitle.astro";
-import config from "virtual:rimelight-starlight-addons-config";
-
-const { copy = true, share = true } = config ?? {};
-
-const currentUrl = Astro.url.href;
-const currentTitle = (Astro.locals as any).starlightRoute?.entry?.data?.title || "";
----
-
-<DefaultPageTitle />
-{(copy || share) && (
-  <div class="rl-addons">
-    {copy && (
-      <button class="rl-addon-btn" id="rl-copy-markdown" title="Copy Markdown">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
-      </button>
-    )}
-    {share && (
-      <button class="rl-addon-btn" id="rl-share" title="Share">
-        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
-      </button>
-    )}
-  </div>
-)}
-
-<style>
-  .rl-addons {
-    display: flex;
-    gap: 0.5rem;
-    align-items: center;
-  }
-
-  .rl-addon-btn {
-    background-color: var(--sl-color-gray-6);
-    color: var(--sl-color-white);
-    border: 1px solid var(--sl-color-gray-5);
-    padding: 0.5rem;
-    border-radius: 0.25rem;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: background-color 0.2s ease;
-    height: 2rem;
-    width: 2rem;
-  }
-
-  .rl-addon-btn:hover {
-    background-color: var(--sl-color-gray-5);
-  }
-
-  .rl-addon-btn:disabled {
-    opacity: 0.7;
-    cursor: not-allowed;
-  }
-</style>
-
-<script>
-  import TurndownService from "turndown";
-  import { gfm } from "turndown-plugin-gfm";
-
-  const turndown = new TurndownService({
-    headingStyle: "atx",
-    codeBlockStyle: "fenced",
-    bulletListMarker: "-",
-  });
-  turndown.use(gfm);
-
-  const copyBtn = document.getElementById("rl-copy-markdown");
-  const shareBtn = document.getElementById("rl-share");
-
-  if (copyBtn) {
-    copyBtn.addEventListener("click", async () => {
-      try {
-        copyBtn.disabled = true;
-        const contentEl = document.querySelector("main .sl-markdown-content");
-        if (!contentEl) {
-          throw new Error("Content not found");
-        }
-        const clone = contentEl.cloneNode(true);
-        clone.querySelectorAll("script, style, noscript, .sl-anchor-link, [data-pagefind-ignore]").forEach(el => el.remove());
-        const markdown = turndown.turndown(clone as HTMLElement);
-        await navigator.clipboard.writeText(markdown);
-        copyBtn.classList.add("copied");
-        setTimeout(() => copyBtn.classList.remove("copied"), 2000);
-      } catch (err) {
-        console.error("Failed to copy:", err);
-      } finally {
-        copyBtn.disabled = false;
-      }
-    });
-  }
-
-  if (shareBtn) {
-    shareBtn.addEventListener("click", async () => {
-      if (navigator.share) {
-        try {
-          await navigator.share({ title: document.title, url: window.location.href });
-        } catch (err) {
-          if (err.name !== "AbortError") {
-            console.error("Share failed:", err);
-          }
-        }
-      } else {
-        try {
-          await navigator.clipboard.writeText(window.location.href);
-        } catch (err) {
-          console.error("Failed to copy link:", err);
-        }
-      }
-    });
-  }
+---
+import DefaultPageTitle from "@astrojs/starlight/components/PageTitle.astro";
+import config from "virtual:rimelight-starlight-addons-config";
+
+const { copy = true, share = true } = config ?? {};
+---
+
+<DefaultPageTitle />
+{(copy || share) && (
+  <div class="rl-addons">
+    {copy && (
+      <button class="rl-addon-btn" id="rl-copy-markdown" title="Copy Markdown">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
+      </button>
+    )}
+    {share && (
+      <button class="rl-addon-btn" id="rl-share" title="Share">
+        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="18" cy="5" r="3"/><circle cx="6" cy="12" r="3"/><circle cx="18" cy="19" r="3"/><line x1="8.59" x2="15.42" y1="13.51" y2="17.49"/><line x1="15.41" x2="8.59" y1="6.51" y2="10.49"/></svg>
+      </button>
+    )}
+  </div>
+)}
+
+<style>
+  .rl-addons {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .rl-addon-btn {
+    background-color: var(--sl-color-gray-6);
+    color: var(--sl-color-white);
+    border: 1px solid var(--sl-color-gray-5);
+    padding: 0.5rem;
+    border-radius: 0.25rem;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: background-color 0.2s ease;
+    height: 2rem;
+    width: 2rem;
+  }
+
+  .rl-addon-btn:hover {
+    background-color: var(--sl-color-gray-5);
+  }
+
+  .rl-addon-btn:disabled {
+    opacity: 0.7;
+    cursor: not-allowed;
+  }
+</style>
+
+<script>
+  import TurndownService from "turndown";
+  import { gfm } from "turndown-plugin-gfm";
+
+  const turndown = new TurndownService({
+    headingStyle: "atx",
+    codeBlockStyle: "fenced",
+    bulletListMarker: "-",
+  });
+  turndown.use(gfm);
+
+  const copyBtn = document.getElementById("rl-copy-markdown") as HTMLButtonElement | null;
+  const shareBtn = document.getElementById("rl-share");
+
+  if (copyBtn) {
+    copyBtn.addEventListener("click", async () => {
+      try {
+        copyBtn.disabled = true;
+        const contentEl = document.querySelector("main .sl-markdown-content");
+        if (!contentEl) {
+          throw new Error("Content not found");
+        }
+        const clone = contentEl.cloneNode(true) as Element;
+        clone.querySelectorAll("script, style, noscript, .sl-anchor-link, [data-pagefind-ignore]").forEach((el: Element) => el.remove());
+        const markdown = turndown.turndown(clone as HTMLElement);
+        await navigator.clipboard.writeText(markdown);
+        copyBtn.classList.add("copied");
+        setTimeout(() => copyBtn.classList.remove("copied"), 2000);
+      } catch (err) {
+        console.error("Failed to copy:", err);
+      } finally {
+        copyBtn.disabled = false;
+      }
+    });
+  }
+
+  const typedShareBtn = shareBtn as HTMLButtonElement | null;
+  if (typedShareBtn) {
+    typedShareBtn.addEventListener("click", async () => {
+      if (navigator.share) {
+        try {
+          await navigator.share({ title: document.title, url: window.location.href });
+        } catch (err) {
+          const error = err as { name?: string };
+          if (error.name !== "AbortError") {
+            console.error("Share failed:", err);
+          }
+        }
+      } else {
+        try {
+          await navigator.clipboard.writeText(window.location.href);
+        } catch (err) {
+          console.error("Failed to copy link:", err);
+        }
+      }
+    });
+  }
 </script>

package/src/plugins/starlightAddons/index.ts

@@ -8,12 +8,14 @@ const __dirname = path.dirname(fileURLToPath(import.meta.url))
 export interface StarlightAddonsConfig {
   copy?: boolean
   share?: boolean
+  packageManagers?: string[]
 }
 
 export default function starlightAddons(userConfig?: StarlightAddonsConfig): StarlightPlugin {
   const defaultConfig: StarlightAddonsConfig = {
     copy: true,
-    share: true
+    share: true,
+    packageManagers: ["npm"]
   }
 
   const config: StarlightAddonsConfig = {
@@ -25,7 +27,11 @@ export default function starlightAddons(userConfig?: StarlightAddonsConfig): Sta
     name: "rimelight-ui-starlight-addons",
     hooks: {
       "config:setup"({ addIntegration, updateConfig, logger }) {
-        if (!config.copy && !config.share) {
+        if (
+          !config.copy &&
+          !config.share &&
+          (!config.packageManagers || config.packageManagers.length === 0)
+        ) {
           logger.warn("StarlightAddons: Nothing enabled.")
         }
 

package/src/preset.ts

@@ -61,48 +61,33 @@ export default definePreset(() => {
       ],
       [
         /^([hw])-(6xs|5xs|4xs|3xs|2xs|xs|sm|md|lg|xl|2xl|3xl|4xl|5xl|6xl)$/,
-        ([, prop, s], { theme }) => {
-          if (!s) return
-          const val = (theme as { spacing?: Record<string, string> }).spacing?.[s]
-          if (!val) return
+        ([, prop, s]) => {
+          if (!s) return false
+          const spacing: Record<string, string> = {
+            "6xs": "0.125rem",
+            "5xs": "0.25rem",
+            "4xs": "0.375rem",
+            "3xs": "0.5rem",
+            "2xs": "0.625rem",
+            "xs": "0.75rem",
+            "sm": "0.875rem",
+            "md": "1rem",
+            "lg": "1.25rem",
+            "xl": "1.5rem",
+            "2xl": "2rem",
+            "3xl": "3rem",
+            "4xl": "4rem",
+            "5xl": "6rem",
+            "6xl": "8rem"
+          }
+          const val = spacing[s]
+          if (!val) return false
           return prop === "h" ? { height: val } : { width: val }
         }
       ]
     ],
 
     theme: {
-      spacing: {
-        // 2px
-        "6xs": "0.125rem",
-        // 4px
-        "5xs": "0.25rem",
-        // 6px
-        "4xs": "0.375rem",
-        // 8px
-        "3xs": "0.5rem",
-        // 10px
-        "2xs": "0.625rem",
-        // 12px
-        "xs": "0.75rem",
-        // 14px
-        "sm": "0.875rem",
-        // 16px
-        "md": "1rem",
-        // 20px
-        "lg": "1.25rem",
-        // 24px
-        "xl": "1.5rem",
-        // 32px
-        "2xl": "2rem",
-        // 48px
-        "3xl": "3rem",
-        // 64px
-        "4xl": "4rem",
-        // 96px
-        "5xl": "6rem",
-        // 128px
-        "6xl": "8rem"
-      },
       colors: {
         "background": "var(--background)",
         "foreground": "var(--foreground)",