@rimelight/ui 0.0.19 → 0.0.21

package/package.json

@@ -1,24 +1,31 @@
 {
-  "name": "@rimelight/ui",
-  "version": "0.0.19",
+  "version": "0.0.21",
+  "type": "module",
   "private": false,
+  "license": "MIT",
+  "author": {
+    "name": "Daniel Marchi"
+  },
+  "name": "@rimelight/ui",
   "description": "Rimelight Entertainment UI Library.",
+  "keywords": [
+    "typescript",
+    "astro"
+  ],
   "homepage": "https://rimelight.com/docs",
-  "bugs": {
-    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
-  },
-  "license": "MIT",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
   },
+  "bugs": {
+    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
+  },
   "files": [
     "src",
     "worker-configuration.d.ts",
     "README.md",
     "LICENSE"
   ],
-  "type": "module",
   "exports": {
     ".": "./src/integrations/index.ts",
     "./styles/*": "./src/styles/*",
@@ -49,6 +56,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",
@@ -88,7 +96,6 @@
     }
   },
   "scripts": {
-    "generate:config": "vp config",
-    "dev": "astro dev"
+    "astro": "astro"
   }
 }

package/src/components/Head.astro

@@ -82,6 +82,9 @@ const finalCanonical = canonical || (!is404 ? Astro.url.href : undefined);
 <meta name="viewport" content={viewport} />
 <meta name="generator" content={Astro.generator} />
 
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap-index.xml" />
+
 <!-- SEO -->
 <title>{displayTitle}</title>
 {safeDescription && <meta name="description" content={safeDescription} />}

package/src/components/astro/RLAScrollToTop.astro

@@ -0,0 +1,175 @@
+---
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { scrollToTopTheme } from "../../themes/scroll-to-top.theme.ts"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+export interface RLAScrollToTopProps {
+  color?: keyof typeof scrollToTopTheme.variants.color
+  circleStrokeWidth?: number
+  duration?: number
+  threshold?: number
+  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
+  class?: string
+  [key: string]: unknown
+}
+
+const scrollToTop = scv({
+  slots: [...scrollToTopTheme.slots],
+  base: scrollToTopTheme.base,
+  variants: scrollToTopTheme.variants,
+  compoundVariants: [...scrollToTopTheme.compoundVariants],
+  defaultVariants: scrollToTopTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+const {
+  color = "primary",
+  circleStrokeWidth = 4,
+  duration = 0.1,
+  threshold = 200,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as RLAScrollToTopProps
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+  uiProp ?? {},
+  (globalConfig["scroll-to-top"] as Record<string, unknown>) ?? {}
+) as Record<keyof typeof scrollToTopTheme.base, string | undefined>
+
+const { root, button, progressBase, svg: svgClass, iconContainer, icon } = scrollToTop({
+  color
+})
+
+const circumference = 2 * Math.PI * 45
+const percentPx = circumference / 100
+---
+
+<div
+  class:list={["rla-scroll-to-top", "fixed bottom-6 right-6 z-50", twMerge(root, mergedUI.root, className)]}
+  data-threshold={threshold}
+  data-duration={duration}
+  data-circle-stroke-width={circleStrokeWidth}
+  {...rest}
+>
+  <button
+    type="button"
+    class={twMerge(button, mergedUI.button)}
+    aria-label="Scroll to top"
+    data-scroll-to-top-button
+  >
+    <div class={twMerge(progressBase, mergedUI.progressBase)}>
+      <svg class={twMerge(svgClass, mergedUI.svg)} viewBox="0 0 100 100">
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="var(--color-primary-950)"
+          stroke-width={circleStrokeWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-secondary-stroke opacity-100"
+        />
+        <circle
+          cx="50"
+          cy="50"
+          r="45"
+          fill="transparent"
+          stroke-width={circleStrokeWidth}
+          stroke-dashoffset="0"
+          stroke-linecap="round"
+          class="gauge-primary-stroke opacity-100"
+          data-progress-circle
+        />
+      </svg>
+      <div class={twMerge(iconContainer, mergedUI.iconContainer)}>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="24"
+          height="24"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          class={twMerge(icon, mergedUI.icon)}
+        >
+          <path d="m5 12 7-7 7 7" />
+          <path d="M12 19V5" />
+        </svg>
+      </div>
+    </div>
+  </button>
+</div>
+
+<script>
+  document.querySelectorAll('.rla-scroll-to-top').forEach((el) => {
+    const element = el
+    const button = element.querySelector('[data-scroll-to-top-button]')
+    const progressCircle = element.querySelector('[data-progress-circle]')
+
+    if (!button || !progressCircle) return
+
+    const threshold = Number(element.dataset.threshold) || 200
+
+    function updateScrollState() {
+      const scrollTop = window.scrollY || document.documentElement.scrollTop
+      const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+      const scrollPercentage = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+
+      if (scrollTop > threshold) {
+        element.classList.add('visible')
+      } else {
+        element.classList.remove('visible')
+      }
+
+      const circumference = 2 * Math.PI * 45
+      const percentPx = circumference / 100
+      const strokeDasharray = `${(scrollPercentage * percentPx)} ${circumference}`
+      progressCircle.setAttribute('stroke-dasharray', strokeDasharray)
+    }
+
+    button.addEventListener('click', () => {
+      window.scrollTo({ top: 0, behavior: 'smooth' })
+    })
+
+    window.addEventListener('scroll', updateScrollState, { passive: true })
+    updateScrollState()
+  })
+</script>
+
+<style>
+  .rla-scroll-to-top {
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.3s ease-in-out;
+  }
+
+  .rla-scroll-to-top.visible {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .progress-circle-base {
+    transform: translateZ(0);
+  }
+
+  .gauge-primary-stroke {
+    stroke: var(--color-primary-500);
+    transition: stroke-dasharray 0.1s ease, stroke 0.1s ease;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+
+  .gauge-secondary-stroke {
+    stroke: var(--color-primary-900);
+    stroke-dasharray: 282.6;
+    transform: rotate(-90deg);
+    transform-origin: center;
+  }
+</style>

package/src/components/vue/RLVScrollToTop.vue

@@ -0,0 +1,154 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import { scv, cx } from "css-variants"
+import { twMerge } from "tailwind-merge"
+import defu from "defu"
+import { scrollToTopTheme } from "../../themes/scroll-to-top.theme.ts"
+import { useScrollToTop } from "../../composables/useScrollToTop"
+import { getUIConfig } from "virtual:rimelight-ui"
+
+export interface RLVScrollToTopProps {
+  color?: keyof typeof scrollToTopTheme.variants.color
+  circleStrokeWidth?: number
+  duration?: number
+  threshold?: number
+  ui?: Partial<Record<keyof typeof scrollToTopTheme.base, string>>
+  class?: string
+  [key: string]: unknown
+}
+
+const scrollToTop = scv({
+  slots: [...scrollToTopTheme.slots],
+  base: scrollToTopTheme.base,
+  variants: scrollToTopTheme.variants,
+  compoundVariants: [...scrollToTopTheme.compoundVariants],
+  defaultVariants: scrollToTopTheme.defaultVariants,
+  classNameResolver: (...args) => twMerge(cx(...args))
+})
+
+const {
+  color = "primary",
+  circleStrokeWidth = 4,
+  duration = 0.1,
+  threshold = 200,
+  ui: uiProp,
+  class: className,
+} = defineProps<RLVScrollToTopProps>()
+
+const globalConfig = getUIConfig()
+
+const mergedUI = defu(
+    uiProp ?? {},
+    (globalConfig["scroll-to-top"] as Record<string, unknown>) ?? {}
+) as Record<keyof typeof scrollToTopTheme.base, string | undefined>
+
+defineSlots<{
+  default(props: {}): any
+}>()
+
+const { root, button, progressBase, svg: svgClass, iconContainer, icon } = scrollToTop({
+  color
+})
+
+const { isVisible, scrollPercentage, scrollToTop: scrollToTopFn } = useScrollToTop({
+  threshold
+})
+
+const circumference = 2 * Math.PI * 45
+const percentPx = circumference / 100
+
+const currentPercent = computed(() => scrollPercentage.value)
+const percentageInPx = computed(() => `${percentPx}px`)
+const durationInSeconds = computed(() => `${duration}s`)
+</script>
+
+<template>
+  <div
+      :class="[
+      'rla-scroll-to-top fixed bottom-6 right-6 z-50',
+      { 'visible': isVisible },
+      twMerge(root, mergedUI.root, className)
+    ]"
+      v-bind="$attrs"
+  >
+    <button
+        type="button"
+        :class="twMerge(button, mergedUI.button)"
+        aria-label="Scroll to top"
+        @click="scrollToTopFn"
+    >
+      <div :class="twMerge(progressBase, mergedUI.progressBase)">
+        <svg :class="twMerge(svgClass, mergedUI.svg)" viewBox="0 0 100 100">
+          <circle
+              cx="50"
+              cy="50"
+              r="45"
+              fill="var(--color-primary-950)"
+              :stroke-width="circleStrokeWidth"
+              stroke-dashoffset="0"
+              stroke-linecap="round"
+              class="gauge-secondary-stroke opacity-100"
+          />
+          <circle
+              cx="50"
+              cy="50"
+              r="45"
+              fill="transparent"
+              :stroke-width="circleStrokeWidth"
+              stroke-linecap="round"
+              class="gauge-primary-stroke opacity-100"
+              :style="{ strokeDasharray: `${(currentPercent / 100) * circumference} ${circumference}` }"
+          />
+        </svg>
+        <div :class="twMerge(iconContainer, mergedUI.iconContainer)">
+          <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              :class="twMerge(icon, mergedUI.icon)"
+          >
+            <path d="m5 12 7-7 7 7" />
+            <path d="M12 19V5" />
+          </svg>
+        </div>
+      </div>
+    </button>
+  </div>
+</template>
+
+<style scoped>
+.rla-scroll-to-top {
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 0.3s ease-in-out;
+}
+
+.rla-scroll-to-top.visible {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.progress-circle-base {
+  transform: translateZ(0);
+}
+
+.gauge-primary-stroke {
+  stroke: var(--color-primary-500);
+  transition: stroke-dasharray 0.1s ease, stroke 0.1s ease;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+
+.gauge-secondary-stroke {
+  stroke: var(--color-primary-900);
+  stroke-dasharray: 282.6;
+  transform: rotate(-90deg);
+  transform-origin: center;
+}
+</style>

package/src/composables/index.ts

@@ -1 +1,2 @@
 export { useUi } from "./useUi"
+export { useScrollToTop } from "./useScrollToTop"

package/src/composables/useScrollToTop.ts

@@ -0,0 +1,62 @@
+import { ref, onMounted, onUnmounted, type Ref } from "vue"
+
+export interface UseScrollToTopOptions {
+  /**
+   * The scroll threshold (in pixels) before the button becomes visible.
+   *
+   * @default 200
+   */
+  threshold?: number
+}
+
+export interface UseScrollToTopReturn {
+  /**
+   * Whether the scroll-to-top button should be visible.
+   */
+  isVisible: Ref<boolean>
+  /**
+   * The current scroll percentage (0-100).
+   */
+  scrollPercentage: Ref<number>
+  /**
+   * Scrolls the window to the top with a smooth animation.
+   */
+  scrollToTop: () => void
+}
+
+export function useScrollToTop(options: UseScrollToTopOptions = {}): UseScrollToTopReturn {
+  const { threshold = 200 } = options
+
+  const isVisible = ref(false)
+  const scrollPercentage = ref(0)
+
+  function updateScrollState() {
+    const scrollTop = window.scrollY || document.documentElement.scrollTop
+    const scrollHeight = document.documentElement.scrollHeight - window.innerHeight
+
+    isVisible.value = scrollTop > threshold
+    scrollPercentage.value = scrollHeight > 0 ? (scrollTop / scrollHeight) * 100 : 0
+  }
+
+  function scrollToTop() {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    })
+  }
+
+  onMounted(() => {
+    window.addEventListener("scroll", updateScrollState, { passive: true })
+    updateScrollState()
+  })
+
+  onUnmounted(() => {
+    window.removeEventListener("scroll", updateScrollState)
+  })
+
+  return {
+    isVisible,
+    scrollPercentage,
+    scrollToTop
+  }
+}

package/src/integrations/ui.ts

@@ -13,6 +13,7 @@ import { defaultUIConfig } from "../themes"
 export type UIConfigOverrides = {
   button?: Partial<(typeof defaultUIConfig)["button"]>
   header?: Partial<(typeof defaultUIConfig)["header"]>
+  "scroll-to-top"?: Partial<(typeof defaultUIConfig)["scroll-to-top"]>
 }
 
 export interface UIOptions {

package/src/plugins/index.ts

@@ -1,2 +1,2 @@
-export { default as starlightAddons } from "../plugins/starlightAddons"
-export type { StarlightAddonsConfig } from "../plugins/starlightAddons"
+export { default as starlightAddons } from "../plugins/starlightAddons"
+export type { StarlightAddonsConfig } from "../plugins/starlightAddons"

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 { Tabs, TabItem } from "@astrojs/starlight/components"
+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>