@rimelight/ui 0.0.24 → 0.0.26

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "private": false,
   "description": "Rimelight Entertainment UI Library.",
   "keywords": [
@@ -67,7 +67,6 @@
     "defu": "6.1.6",
     "embla-carousel": "8.6.0",
     "picomatch": "^4.0.4",
-    "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.2.3",
     "turndown": "^7.2.4",
     "turndown-plugin-gfm": "^1.0.2",
@@ -82,6 +81,9 @@
     "@unocss/eslint-plugin": "66.6.8",
     "astro": "6.1.8",
     "eslint-plugin-regexp": "3.1.0",
+    "knip": "6.12.2",
+    "tsx": "4.21.0",
+    "typescript": "6.0.3",
     "unocss": "66.6.8",
     "vite-plus": "0.1.19"
   },
@@ -96,6 +98,8 @@
     }
   },
   "scripts": {
-    "astro": "astro"
+    "knip": "knip",
+    "astro": "astro",
+    "docs:meta": "tsx scripts/extract-meta.ts"
   }
 }

package/src/components/Head.astro

@@ -1,156 +1,199 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/config';
-import { App } from '../nuxt.ts';
-
-export interface HeadProps {
-  /** Page title */
-  title?: string;
-  /** Page description */
-  description?: string;
-  /** Open Graph image URL */
-  ogImage?: string;
-  /** Whether to prevent indexing */
-  noindex?: boolean;
-  /** Whether this is a 404 page */
-  is404?: boolean;
-  /** Robots metadata (overrides noindex/is404 logic if provided) */
-  robots?: string;
-  /** Canonical URL */
-  canonical?: string;
-  /** Language alternates for i18n */
-  languageAlternates?: Array<{ hreflang: string; href: string }>;
-  /** Site configuration for defaults */
-  config?: SiteConfig;
-  /** Whether to enable View Transitions (ClientRouter) */
-  transitions?: boolean;
-  /** Meta charset */
-  charset?: string;
-  /** Meta viewport */
-  viewport?: string;
-}
-
-const {
-  title,
-  description,
-  ogImage,
-  noindex = false,
-  is404 = false,
-  robots,
-  canonical,
-  languageAlternates = [],
-  config,
-  transitions = true,
-  charset = "utf-8",
-  viewport = "width=device-width,initial-scale=1",
-} = Astro.props as HeadProps
-
-// Resolve defaults from config if available
-const siteName = config?.name || "Rimelight";
-const siteUrl = config?.url || "";
-const siteDescription = config?.description || "";
-const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || "";
-const themeColor = config?.branding?.colors?.themeColor;
-const favicon = config?.branding?.favicon?.svg || "/favicon.svg";
-const twitterHandle = config?.seo?.authorHandle;
-const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
-
-// Calculated Values
-const displayTitle = is404 
-  ? `404 - Not Found | ${siteName}` 
-  : title 
-    ? titleTemplate.replace('%s', title) 
-    : siteName;
-
-const finalDescription = description || siteDescription;
-const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
-  ? (finalDescription.length > config.seo.maxDescriptionLength 
-      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + "..." 
-      : finalDescription)
-  : finalDescription;
-
-const finalOgImage = ogImage || ogImageFallback;
-const absoluteOgImage = finalOgImage 
-  ? (finalOgImage.startsWith('http') ? finalOgImage : `${siteUrl}${finalOgImage}`)
-  : undefined;
-
-const finalCanonical = canonical || (!is404 ? Astro.url.href : undefined);
----
-
-<!-- Basic Metadata -->
-<meta charset={charset} />
-<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} />}
-{robots ? <meta name="robots" content={robots} /> : (noindex || is404) && <meta name="robots" content="noindex, nofollow" />}
-{finalCanonical && <link rel="canonical" href={finalCanonical} />}
-
-<!-- i18n Alternates -->
-{languageAlternates.map((alt) => (
-  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
-))}
-
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content="website" />
-<meta property="og:url" content={Astro.url.href} />
-<meta property="og:title" content={title || siteName} />
-{safeDescription && <meta property="og:description" content={safeDescription} />}
-{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
-<meta property="og:site_name" content={siteName} />
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url.href} />
-<meta property="twitter:title" content={title || siteName} />
-{safeDescription && <meta property="twitter:description" content={safeDescription} />}
-{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
-{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
-{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
-
-<!-- Icons -->
-<link rel="icon" type="image/svg+xml" href={favicon} />
-
-<!-- Theme -->
-{themeColor && <meta name="theme-color" content={themeColor} />}
-
-<script is:inline>
-  const theme = (() => {
-    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
-      return localStorage.getItem('theme');
-    }
-    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-      return 'dark';
-    }
-    return 'light';
-  })();
-
-  if (theme === 'dark') {
-    document.documentElement.classList.add('dark');
-  } else {
-    document.documentElement.classList.remove('dark');
-  }
-
-  window.localStorage.setItem('theme', theme);
-</script>
-
-<script>
-  document.addEventListener('astro:after-swap', () => {
-    if (localStorage.getItem('theme') === 'dark') {
-      document.documentElement.classList.add('dark');
-    } else {
-      document.documentElement.classList.remove('dark');
-    }
-  });
-</script>
-
-{transitions && <ClientRouter />}
-
-<App client:load>
-  <slot />
-</App>
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config';
+import { App } from '../nuxt.ts';
+
+export interface OGImage {
+  /** Image URL (relative or absolute) */
+  src: string;
+  /** Alt text for the image */
+  alt: string;
+}
+
+export interface RSSFeed {
+  /** RSS feed URL */
+  href: string;
+  /** Feed title (defaults to "RSS") */
+  title?: string;
+}
+
+export interface HeadProps {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Open Graph image with alt text */
+  ogImage?: OGImage;
+  /** Open Graph type (e.g., "website", "article") */
+  ogType?: string;
+  /** Open Graph locale (defaults to "en_US") */
+  ogLocale?: string;
+  /** Whether to prevent indexing */
+  noindex?: boolean;
+  /** Whether this is a 404 page */
+  is404?: boolean;
+  /** Robots metadata (overrides noindex/is404 logic if provided) */
+  robots?: string;
+  /** Canonical URL */
+  canonical?: string;
+  /** Language alternates for i18n */
+  languageAlternates?: Array<{ hreflang: string; href: string }>;
+  /** Site configuration for defaults */
+  config?: SiteConfig;
+  /** Whether to enable View Transitions (ClientRouter) */
+  transitions?: boolean;
+  /** Meta charset */
+  charset?: string;
+  /** Meta viewport */
+  viewport?: string;
+  /** RSS feed configuration */
+  rssFeed?: RSSFeed;
+}
+
+const {
+  title,
+  description,
+  ogImage,
+  ogType = 'website',
+  ogLocale = 'en_US',
+  noindex = false,
+  is404 = false,
+  robots,
+  canonical,
+  languageAlternates = [],
+  config,
+  transitions = true,
+  charset = 'utf-8',
+  viewport = 'width=device-width,initial-scale=1',
+  rssFeed,
+} = Astro.props as HeadProps;
+
+// Resolve defaults from config if available
+const siteName = config?.name || 'Rimelight';
+const siteDescription = config?.description || '';
+const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || '';
+const themeColor = config?.branding?.colors?.themeColor;
+const favicon = config?.branding?.favicon?.svg || '/favicon.svg';
+const twitterHandle = config?.seo?.authorHandle;
+const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
+
+// Calculated Values
+const displayTitle = is404
+  ? `404 - Not Found | ${siteName}`
+  : title
+    ? titleTemplate.replace('%s', title)
+    : siteName;
+
+const finalDescription = description || siteDescription;
+const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
+  ? (finalDescription.length > config.seo.maxDescriptionLength
+      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + '...'
+      : finalDescription)
+  : finalDescription;
+
+const finalOgImage = ogImage || (ogImageFallback ? { src: ogImageFallback, alt: siteName } : undefined);
+const absoluteOgImage = finalOgImage
+  ? new URL(finalOgImage.src, Astro.site).toString()
+  : undefined;
+
+function formatCanonicalURL(url: string | URL) {
+  const resolved = new URL(url, Astro.site);
+  const path = resolved.toString();
+  const hasQueryParams = path.includes('?');
+  if (hasQueryParams) {
+    return path.replace(/\/?$/, '');
+  }
+  return path.replace(/\/?$/, '/');
+}
+
+const finalCanonical = canonical
+  ? formatCanonicalURL(canonical)
+  : (!is404 ? formatCanonicalURL(Astro.url) : undefined);
+
+const isIndexable = !noindex && !is404;
+const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : 'noindex, nofollow';
+---
+
+<!-- Basic Metadata -->
+<meta charset={charset} />
+<meta name="viewport" content={viewport} />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<!-- RSS Feed -->
+{rssFeed && <link rel="alternate" type="application/rss+xml" href={rssFeed.href} title={rssFeed.title || 'RSS'} />}
+
+<!-- SEO -->
+<title>{displayTitle}</title>
+{safeDescription && <meta name="description" content={safeDescription} />}
+<meta name="robots" content={robots || defaultRobots} />
+{finalCanonical && <link rel="canonical" href={finalCanonical} />}
+
+<!-- i18n Alternates -->
+{languageAlternates.map((alt) => (
+  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
+))}
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={ogType} />
+<meta property="og:locale" content={ogLocale} />
+<meta property="og:url" content={Astro.url.href} />
+<meta property="og:title" content={title || siteName} />
+{safeDescription && <meta property="og:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="og:image:alt" content={finalOgImage.alt} />}
+<meta property="og:site_name" content={siteName} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url.href} />
+<meta property="twitter:title" content={title || siteName} />
+{safeDescription && <meta property="twitter:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="twitter:image:alt" content={finalOgImage.alt} />}
+{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
+{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
+
+<!-- Icons -->
+<link rel="icon" type="image/svg+xml" href={favicon} />
+
+<!-- Theme -->
+{themeColor && <meta name="theme-color" content={themeColor} />}
+
+<script is:inline>
+  const theme = (() => {
+    if (typeof localStorage !== 'undefined' && localStorage.getItem('theme')) {
+      return localStorage.getItem('theme');
+    }
+    if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+      return 'dark';
+    }
+    return 'light';
+  })();
+
+  if (theme === 'dark') {
+    document.documentElement.classList.add('dark');
+  } else {
+    document.documentElement.classList.remove('dark');
+  }
+
+  window.localStorage.setItem('theme', theme);
+</script>
+
+<script>
+  document.addEventListener('astro:after-swap', () => {
+    if (localStorage.getItem('theme') === 'dark') {
+      document.documentElement.classList.add('dark');
+    } else {
+      document.documentElement.classList.remove('dark');
+    }
+  });
+</script>
+
+{transitions && <ClientRouter />}
+
+<App client:load>
+  <slot />
+</App>

package/src/components/ThemeToggle.astro

@@ -2,13 +2,13 @@
 import RLAButton from "./astro/RLAButton.astro";
 
 export interface ThemeToggleProps {
-  class?: string;
   size?: "sm" | "md" | "lg";
+  class?: any;
 }
 
 type Props = ThemeToggleProps;
 
-const { class: className, size = "md" } = Astro.props as Props
+const { size = "md", class: className } = Astro.props as Props
 ---
 
 <RLAButton

package/src/components/astro/RLAAccordion.astro

@@ -0,0 +1,22 @@
+---
+import type { HTMLAttributes } from 'astro/types';
+
+export type Props = HTMLAttributes<'details'> & {
+    summary: string;
+};
+
+const { summary, class: className, ...attrs } = Astro.props;
+---
+
+<details class:list={['group', className]} {...attrs}>
+    <summary
+            class="accordion code flex cursor-pointer list-none items-center justify-between text-astro-gray-200"
+    >
+        <span>{summary}</span>
+        <span class="i-lucide-chevron s-4 rotate-0 transition-transform duration-300 ease-in-out group-open:-rotate-180" />
+    </summary>
+
+    <div class="pt-4">
+        <slot />
+    </div>
+</details>