@rimelight/ui 0.0.20 → 0.0.22

package/src/plugins/starlightAddons/PageTitle.astro

@@ -1,113 +1,113 @@
----
-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);
-        }
-      }
-    });
-  }
+---
+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/components/Gamepad.astro

@@ -0,0 +1,180 @@
+---
+
+interface HighlightGroup {
+  label: string
+  buttons: string[]
+  color: string
+}
+
+interface Props {
+  highlightedButtons?: string[]
+  groups?: HighlightGroup[]
+  highlightColor?: string
+  backgroundColor?: string
+}
+
+const {
+  highlightedButtons = [],
+  groups = [],
+  highlightColor = 'var(--ui-color-primary-500, #00c16a)',
+  backgroundColor = 'transparent'
+} = Astro.props
+
+function getButtonHighlight(buttonId: string) {
+  if (highlightedButtons.includes(buttonId)) {
+    return { active: true, color: highlightColor }
+  }
+  for (const group of groups) {
+    if (group.buttons.includes(buttonId)) {
+      return { active: true, color: group.color }
+    }
+  }
+  return { active: false, color: undefined }
+}
+
+interface Button {
+  id: string
+  label?: string
+  x: number
+  y: number
+  r?: number
+  w?: number
+  h?: number
+  type?: string
+}
+
+const shoulderButtons: Button[] = [
+  { id: 'L2', label: 'LT', x: 65, y: 10, w: 80, h: 22 },
+  { id: 'L1', label: 'LB', x: 65, y: 42, w: 80, h: 22 },
+  { id: 'R2', label: 'RT', x: 255, y: 10, w: 80, h: 22 },
+  { id: 'R1', label: 'RB', x: 255, y: 42, w: 80, h: 22 },
+]
+
+const mainButtons: Button[] = [
+  // Face Buttons (Smaller, tighter)
+  { id: 'Y', label: 'Y', x: 315, y: 125, r: 12 },
+  { id: 'X', label: 'X', x: 288, y: 152, r: 12 },
+  { id: 'B', label: 'B', x: 342, y: 152, r: 12 },
+  { id: 'A', label: 'A', x: 315, y: 179, r: 12 },
+
+  // D-Pad (Refined)
+  { id: 'DPadUp', x: 85, y: 130, w: 20, h: 20, type: 'dpad' },
+  { id: 'DPadDown', x: 85, y: 174, w: 20, h: 20, type: 'dpad' },
+  { id: 'DPadLeft', x: 63, y: 152, w: 20, h: 20, type: 'dpad' },
+  { id: 'DPadRight', x: 107, y: 152, w: 20, h: 20, type: 'dpad' },
+
+  // Sticks (Smaller, proportional)
+  { id: 'LS', x: 155, y: 215, r: 24 },
+  { id: 'RS', x: 245, y: 215, r: 24 },
+
+  // Menu Buttons
+  { id: 'View', label: '⧉', x: 145, y: 105, w: 16, h: 10 },
+  { id: 'Menu', label: '≡', x: 239, y: 105, w: 16, h: 10 },
+]
+---
+
+<div class="gamepad-wrapper">
+  <div class="gamepad-container">
+    <svg viewBox="-20 -20 440 380" class="gamepad-svg">
+      <defs>
+        <linearGradient id="bodyGrad" x1="0%" y1="0%" x2="0%" y2="100%">
+          <stop offset="0%" stop-color="#2a2a40" stop-opacity="1" />
+          <stop offset="100%" stop-color="#1a1a2e" stop-opacity="1" />
+        </linearGradient>
+      </defs>
+
+      {backgroundColor && backgroundColor !== 'transparent' && (
+          <rect x="-20" y="-20" width="440" height="360" fill={backgroundColor} rx="24" />
+      )}
+
+      <!-- Shoulder Buttons -->
+      {shoulderButtons.map(btn => {
+        const highlight = getButtonHighlight(btn.id);
+        const w = btn.w || 0;
+        const h = btn.h || 0;
+        const color = highlight.active ? (highlight.color || highlightColor) : '#1e1e30';
+
+        return (
+            <g class={`gp-btn shoulder ${highlight.active ? 'active' : ''}`}>
+              <rect
+                  x={btn.x}
+                  y={btn.y}
+                  width={w}
+                  height={h}
+                  rx="5"
+                  fill={color}
+                  stroke={highlight.active ? "#ffffff33" : "#33334d"}
+                  stroke-width={highlight.active ? "1.5" : "1"}
+              />
+              <text x={btn.x + w/2} y={btn.y + h/2} text-anchor="middle" dominant-baseline="central" class="btn-label" fill={highlight.active ? "#fff" : "#555570"}>{btn.label}</text>
+            </g>
+        )
+      })}
+
+      <!-- Controller Body -->
+      <path
+          d="M120,85 L280,85 C320,85 340,95 350,115 C370,145 390,215 390,245 C390,285 360,315 320,315 C290,315 260,285 240,255 C220,245 180,245 160,255 C140,285 110,315 80,315 C40,315 10,285 10,245 C10,215 30,145 50,115 C60,95 80,85 120,85 Z"
+          fill="url(#bodyGrad)"
+          stroke="#33334d"
+          stroke-width="1"
+      />
+
+      <!-- Touchpad -->
+      <path d="M145,90 L255,90 L262,150 L138,150 Z" fill="#151525" stroke="#33334d" stroke-width="0.5" />
+
+      {mainButtons.map(btn => {
+        const highlight = getButtonHighlight(btn.id);
+        const color = highlight.active ? (highlight.color || highlightColor) : '#1e1e30';
+
+        if (btn.r) {
+          return (
+              <g class={`gp-btn ${highlight.active ? 'active' : ''}`}>
+                <circle
+                    cx={btn.x}
+                    cy={btn.y}
+                    r={btn.r}
+                    fill={color}
+                    stroke={highlight.active ? "#ffffff33" : "#33334d"}
+                    stroke-width={highlight.active ? "1.5" : "1"}
+                />
+                {btn.label && <text x={btn.x} y={btn.y} text-anchor="middle" dominant-baseline="central" class="btn-label" fill={highlight.active ? "#fff" : "#555570"}>{btn.label}</text>}
+              </g>
+          )
+        }
+
+        const w = btn.w || 0;
+        const h = btn.h || 0;
+        return (
+            <g class={`gp-btn ${highlight.active ? 'active' : ''}`}>
+              <rect
+                  x={btn.x}
+                  y={btn.y}
+                  width={w}
+                  height={h}
+                  rx="3"
+                  fill={color}
+                  stroke={highlight.active ? "#ffffff33" : "#33334d"}
+                  stroke-width={highlight.active ? "1.5" : "1"}
+              />
+              {btn.label && <text x={btn.x + w/2} y={btn.y + h/2} text-anchor="middle" dominant-baseline="central" class="btn-label" fill={highlight.active ? "#fff" : "#555570"}>{btn.label}</text>}
+            </g>
+        )
+      })}
+
+    </svg>
+  </div>
+
+  {groups.some(g => g.label) && (
+      <div class="flex flex-wrap justify-center gap-x-6 gap-y-3 mt-10 w-full">
+        {groups.filter(g => g.label).map(group => (
+            <div class="flex items-center gap-2 m-0 p-0 h-[10px] text-[10px] text-[#777790] uppercase tracking-[0.1em] font-bold leading-[10px]">
+              <svg width="8" height="8" class="flex-shrink-0 block">
+                <rect width="8" height="8" rx="2" fill={group.color} />
+              </svg>
+              <span class="inline-block h-[10px] leading-[10px] m-0 p-0">{group.label}</span>
+            </div>
+        ))}
+      </div>
+  )}
+</div>
+