@rimelight/ui 0.0.4 → 0.0.6

package/src/components/ExtendedCarousel.astro

@@ -0,0 +1,107 @@
+---
+import Carousel from "@rimelight/ui/components/carousel/Carousel.astro";
+import CarouselPrevious from "@rimelight/ui/components/carousel/CarouselPrevious.astro";
+import CarouselNext from "@rimelight/ui/components/carousel/CarouselNext.astro";
+import type { HTMLAttributes } from "astro/types";
+import type { EmblaOptionsType } from "embla-carousel";
+
+export interface ExtendedCarouselProps extends HTMLAttributes<"div"> {
+  opts?: EmblaOptionsType;
+  orientation?: "horizontal" | "vertical";
+  showDots?: boolean;
+}
+type Props = ExtendedCarouselProps;
+
+const { opts = {}, orientation = "horizontal", showDots = true, class: className, ...rest } = Astro.props;
+
+// Default loop to true for ExtendedCarousel
+const carouselOpts: EmblaOptionsType = {
+  loop: true,
+  ...opts
+};
+---
+
+<Carousel 
+  opts={carouselOpts} 
+  orientation={orientation} 
+  class:list={["extended-carousel group/extended-carousel", className]} 
+  {...rest} 
+  data-extended-carousel
+  autoInit={false}
+>
+  <slot />
+  
+  <div class="hidden md:block">
+    <CarouselPrevious class="-left-12 opacity-50 hover:opacity-100 transition-opacity" />
+    <CarouselNext class="-right-12 opacity-50 hover:opacity-100 transition-opacity" />
+  </div>
+  
+  {showDots && (
+    <div class="carousel-pagination absolute bottom-8 left-1/2 -translate-x-1/2 z-10 flex justify-center items-center gap-1.5" data-slot="pagination">
+      {/* Dots injected by script */}
+    </div>
+  )}
+</Carousel>
+
+<script>
+  import { initCarousel } from "@rimelight/ui/components/carousel/carousel-script.ts";
+
+  const setupExtendedCarousels = () => {
+    const extendedCarousels = document.querySelectorAll('[data-extended-carousel]') as NodeListOf<HTMLElement>;
+    
+    extendedCarousels.forEach((carousel) => {
+      // Avoid double-initialization
+      if (carousel.dataset.extendedInitialized === "true") return;
+      carousel.dataset.extendedInitialized = "true";
+
+      // Initialize the underlying Starwind carousel
+      // Passing autoInit={false} to the component means we handle init here
+      const manager = initCarousel(carousel);
+      if (!manager) return;
+
+      const api = manager.api;
+      const pagination = carousel.querySelector('[data-slot="pagination"]');
+      
+      if (pagination) {
+        const scrollSnaps = api.scrollSnapList();
+        const dots: HTMLButtonElement[] = [];
+
+        // Clear existing (useful for handle re-init cases)
+        pagination.innerHTML = '';
+
+        scrollSnaps.forEach((_: number, index: number) => {
+          const dot = document.createElement('button');
+          dot.className = 'size-4 rounded-full bg-border transition-all hover:bg-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary h-4 cursor-pointer';
+          dot.setAttribute('aria-label', `Go to slide ${index + 1}`);
+          dot.addEventListener('click', () => api.scrollTo(index));
+          pagination.appendChild(dot);
+          dots.push(dot);
+        });
+
+        const updateDots = () => {
+          const selectedIndex = api.selectedScrollSnap();
+          dots.forEach((dot, index) => {
+            if (index === selectedIndex) {
+              dot.classList.add('bg-primary'); 
+              dot.classList.remove('bg-border');
+            } else {
+              dot.classList.remove('bg-primary');
+              dot.classList.add('bg-border');
+            }
+          });
+        };
+
+        api.on('select', updateDots);
+        api.on('init', updateDots);
+        api.on('reInit', updateDots);
+        
+        updateDots();
+      }
+    });
+  };
+
+  // Run on load and after Astro page swaps
+  document.addEventListener("DOMContentLoaded", setupExtendedCarousels);
+  document.addEventListener("astro:after-swap", setupExtendedCarousels);
+</script>
+

package/src/components/Head.astro

@@ -0,0 +1,150 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config';
+
+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} />
+
+<!-- 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 />}
+
+<slot />

package/src/components/LanguageSwitcher.astro

@@ -0,0 +1,128 @@
+---
+/**
+ * Language Switcher Component (Extension)
+ *
+ * Variants:
+ * - 'full': Shows language icon, current flag, name, and chevron
+ * - 'label' (default): Shows language icon and current flag only
+ *
+ * Uses Starwind components for consistency.
+ * Built using native Astro i18n features.
+ */
+
+import Dropdown from "@rimelight/ui/components/dropdown/Dropdown.astro";
+import DropdownTrigger from "@rimelight/ui/components/dropdown/DropdownTrigger.astro";
+import DropdownContent from "@rimelight/ui/components/dropdown/DropdownContent.astro";
+import DropdownItem from "@rimelight/ui/components/dropdown/DropdownItem.astro";
+import Button from "@rimelight/ui/components/button/Button.astro";
+import Flag from "@rimelight/ui/components/icons/Flag.astro";
+
+import { SUPPORTED_LOCALES, LANGUAGES } from "@rimelight/ui/domain";
+import { localeToFlagCode } from "@rimelight/ui/domain";
+import { replaceLocaleInPath } from "@rimelight/ui/domain";
+import type { Locale } from "@rimelight/ui/domain";
+
+export interface LanguageSwitcherProps {
+  variant?: 'full' | 'label';
+  class?: string;
+}
+type Props = LanguageSwitcherProps;
+
+const { variant = 'label', class: className } = Astro.props;
+const { uiLocale: currentLocale } = Astro.locals;
+const currentPath = Astro.url.pathname;
+
+/**
+ * Utility to compute the target URL for a locale switch
+ * Handles standard Astro routing by replacing the locale prefix in the URL.
+ */
+function getSwitchUrl(targetLocale: string) {
+  return replaceLocaleInPath(currentPath, currentLocale as string, targetLocale);
+}
+
+const currentFlagCode = localeToFlagCode(currentLocale as Locale);
+const currentLabel = LANGUAGES[(currentLocale as Locale) as keyof typeof LANGUAGES] || currentLocale;
+---
+
+<Dropdown class={className}>
+  <DropdownTrigger asChild>
+    <Button
+      variant="outline"
+      size="sm"
+      class:list={[
+        "rounded-full border-border/50 bg-background/50 hover:bg-background transition-all h-9 shadow-none",
+        variant === 'full' ? "px-3xs" : "px-5xs",
+      ]}
+      aria-label="Select Language"
+    >
+      <div class="flex items-center gap-5xs">
+        <div class="flex items-center justify-center shrink-0 opacity-70 size-4.5">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="text-current size-4.5"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 5h7" /><path d="M9 3v2c0 4.418 -2.239 8 -5 8" /><path d="M5 9c0 2.144 2.952 3.908 6.7 4" /><path d="M12 20l4 -9l4 9" /><path d="M19.1 18h-6.2" />
+          </svg>
+        </div>
+
+        <div class="flex items-center -translate-y-[0.5px]">
+          <Flag code={currentFlagCode} size={18} class="rounded-sm shadow-sm border border-border/20" />
+        </div>
+
+        {variant === 'full' && (
+          <div class="flex items-center gap-5xs border-l border-border/30 pl-5xs ml-3xs">
+            <span class="text-xs font-medium text-muted-foreground whitespace-nowrap leading-none flex items-center translate-y-[0.5px]">
+              {currentLabel}
+            </span>
+            <div class="flex items-center justify-center opacity-50 -translate-y-[0.5px]">
+              <svg class="size-3.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          </div>
+        )}
+      </div>
+    </Button>
+  </DropdownTrigger>
+
+  <DropdownContent align="end" class="w-6xl border-border/50 bg-background/95 backdrop-blur-md p-5xs">
+    {SUPPORTED_LOCALES.map((locale) => {
+      const isActive = locale === currentLocale;
+      const href = getSwitchUrl(locale);
+      const flagCode = localeToFlagCode(locale as Locale);
+      const label = LANGUAGES[(locale as Locale) as keyof typeof LANGUAGES] || locale;
+
+      return (
+        <DropdownItem
+          as="a"
+          href={href}
+          class:list={[
+            "flex items-center h-10 px-3xs gap-3xs transition-colors rounded-lg",
+            isActive ? "bg-accent/70 text-foreground font-semibold" : "text-muted-foreground hover:text-foreground"
+          ]}
+        >
+          <div class="flex items-center shrink-0 -translate-y-[0.5px]">
+            <Flag code={flagCode} size={18} class="rounded-sm shadow-sm border border-border/20" />
+          </div>
+          <span class="text-sm leading-none flex items-center translate-y-[0.5px]">{label}</span>
+          {isActive && (
+            <div class="ml-auto flex items-center justify-center h-full text-primary">
+              <svg class="size-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
+                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clip-rule="evenodd" />
+              </svg>
+            </div>
+          )}
+        </DropdownItem>
+      );
+    })}
+
+  </DropdownContent>
+</Dropdown>
+
+

package/src/components/ProjectPost.astro

@@ -0,0 +1,183 @@
+---
+import { Image } from "astro:assets";
+import { scv } from "css-variants";
+import type { CollectionEntry } from "astro:content";
+import Separator from "@rimelight/ui/components/separator/Separator.astro";
+import Avatar from "@rimelight/ui/components/avatar/Avatar.astro";
+import AvatarImage from "@rimelight/ui/components/avatar/AvatarImage.astro";
+import avatarAsset from "../assets/team/Daniel-Marchi_0000_00.webp";
+import { fetchTranslations } from "@rimelight/ui/domain";
+
+const { translationLocale, cfContext } = Astro.locals;
+const runtime = { cf: Astro.request.cf, cfContext };
+const { projects: t } = await fetchTranslations(runtime, translationLocale, ["projects"]);
+
+// Support both Astro content collections and CMS documents
+export type CMSProjectDocument = {
+  _id: string;
+  slug?: string;
+  title: string;
+  description?: string;
+  heroImage?: string;
+  publishedDate?: string | Date | null;
+  featured?: boolean;
+  tags?: string[] | Record<string, unknown> | null;
+  _updatedAt?: string;
+  _createdAt?: string;
+};
+
+export interface ProjectPostProps extends NonNullable<Parameters<typeof projectPostVariants>[0]> {
+  project: CollectionEntry<"projects"> | CMSProjectDocument;
+  class?: string;
+  showImage?: boolean;
+  separator?: boolean;
+}
+
+type Props = ProjectPostProps;
+
+const projectPostVariants = scv({
+  slots: [
+    "root",
+    "imageWrapper",
+    "image",
+    "content",
+    "title",
+    "description",
+    "footer",
+    "authorGroup",
+    "author",
+    "link",
+    "badge",
+    "featuredBadge"
+  ],
+  base: {
+    root: "group flex transition-all duration-300 w-full",
+    imageWrapper: "relative overflow-hidden ring-1 ring-border shadow-sm shrink-0 bg-muted isolate",
+    image: "absolute inset-0 h-full w-full !object-cover transition-transform duration-500 group-hover:scale-105 block",
+    content: "flex flex-col flex-1",
+    title: "font-heading font-bold tracking-tight text-pretty group-hover:text-primary transition-colors",
+    description: "text-muted-foreground line-clamp-2 text-base text-pretty",
+    footer: "mt-auto flex items-end justify-end w-full",
+    authorGroup: "flex flex-col gap-5xs text-xs font-medium text-muted-foreground",
+    author: "font-bold text-foreground",
+    link: "inline-flex items-center gap-5xs text-sm font-semibold hover:underline decoration-primary underline-offset-4",
+    badge: "px-2xs py-6xs rounded-full bg-muted text-muted-foreground text-[10px] font-bold uppercase tracking-wider",
+    featuredBadge: "absolute top-3 left-3 z-20 flex items-center gap-5xs px-3xs py-5xs rounded-full bg-primary text-primary-foreground text-[10px] font-bold uppercase tracking-wider shadow-lg ring-1 ring-white/20",
+  },
+  variants: {
+    variant: {
+      flat: {
+        root: "flex-col md:flex-row gap-3xl md:gap-4xl items-stretch py-4xl first:pt-0 last:pb-0 text-left",
+        imageWrapper: "w-full md:w-5/12 aspect-video self-stretch rounded-3xl shrink-0 shadow-none ring-0",
+        content: "gap-2xl justify-center items-start text-left",
+        title: "text-xl",
+        description: "text-base",
+      },
+      card: {
+        root: "flex-col bg-muted/20 p-2xl rounded-3xl border border-border/50 hover:bg-muted/40 hover:shadow-2xl hover:-translate-y-1 gap-2xl text-left items-stretch",
+        imageWrapper: "w-full aspect-video rounded-2xl shadow-lg",
+        title: "text-xl",
+        content: "gap-2xl text-left items-start",
+      },
+    },
+  },
+  defaultVariants: {
+    variant: "flat",
+  },
+});
+
+const { project, variant, class: className, showImage = true, separator = false } = Astro.props;
+
+// Detect if this is a CMS document or Astro content entry
+const isCMSDocument = "_id" in project && !("id" in project);
+
+// Extract fields based on source type
+const projectTitle = isCMSDocument ? project.title : project.data.title;
+const projectDescription = isCMSDocument ? project.description : project.data.description;
+const projectImage = isCMSDocument ? project.heroImage : project.data.heroImage;
+const projectFeatured = isCMSDocument ? (project.featured ?? false) : project.data.featured;
+const projectTags = isCMSDocument ? (project.tags || []) : (project.data.tags || []);
+
+// Handle date formatting
+const rawDate = isCMSDocument ? (project.publishedDate || project._createdAt) : project.data.publishedDate;
+const d = rawDate ? new Date(rawDate) : null;
+const formattedDate = d && !isNaN(d.getTime())
+  ? new Intl.DateTimeFormat(translationLocale, {
+      dateStyle: "medium",
+    }).format(d)
+  : "";
+
+// Get slug from CMS or Astro content
+const projectSlug = isCMSDocument 
+  ? (project.slug || "")
+  : project.id.replace(/^(en|pt|de|es|ja)\//, "");
+
+const { root, imageWrapper, image, content, title, description, footer, authorGroup, author, link, badge, featuredBadge } = projectPostVariants({ variant });
+---
+
+<div class="flex flex-col w-full">
+  <a href={`/${translationLocale}/projects/${projectSlug}`} class:list={[root, className]}>
+    {showImage && (
+      <div class={imageWrapper}>
+        {projectFeatured && (
+          <div class={featuredBadge}>
+            <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 24 24" fill="currentColor" stroke="none"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"></path></svg>
+            {t.latest_badge}
+          </div>
+        )}
+        {projectImage && (
+          <Image
+            src={projectImage as any}
+            alt={projectTitle}
+            width={800}
+            height={450}
+            class={image}
+            loading="lazy"
+            decoding="async"
+          />
+        )}
+      </div>
+    )}
+
+    <div class={content}>
+      <h3 class={title}>
+        {projectTitle}
+      </h3>
+
+      <div class="flex items-center gap-3xs mt-3xs">
+        <Avatar size="sm" variant="primary">
+          <AvatarImage image={avatarAsset} alt="Daniel Marchi" />
+        </Avatar>
+        <div class={authorGroup}>
+          <span class={author}>Daniel Marchi</span>
+          <div class="flex items-center gap-3xs">
+            <span>{formattedDate}</span>
+            <div class="flex flex-wrap gap-5xs ml-3xs">
+              {Array.isArray(projectTags) && projectTags.map((tag: string) => (
+                <span class={badge}>{tag}</span>
+              ))}
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class={description}>
+        {projectDescription}
+      </p>
+
+      <div class={footer}>
+        <span class={link}>
+          {t.view_project}
+          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" class="transition-transform group-hover:translate-x-1"><path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path></svg>
+        </span>
+      </div>
+    </div>
+  </a>
+
+  {separator && (
+    <div class="py-4xl last:hidden">
+      <Separator />
+    </div>
+  )}
+</div>
+

package/src/components/RLHead.astro

@@ -0,0 +1,3 @@
+---
+
+---

package/src/components/ThemeToggle.astro

@@ -1,71 +1,59 @@
 ---
+import RLAButton from "./astro/RLAButton.astro";
 import IconSun from "~icons/lucide/sun"
 import IconMoon from "~icons/lucide/moon"
-import Toggle from "./toggle/Toggle.astro";
 
 export interface ThemeToggleProps {
   class?: string;
   size?: "sm" | "md" | "lg";
 }
+
 type Props = ThemeToggleProps;
 
-const { class: className, size = "md" } = Astro.props as Props;
+const { class: className, size = "md" } = Astro.props as Props
 ---
 
-<Toggle
-  id="theme-toggle"
+<RLAButton
   size={size}
   class:list={[
+    "theme-toggle-button",
     "group text-muted-foreground hover:text-foreground rounded-full hover:bg-transparent",
     className,
   ]}
   variant="ghost"
-  className={className}
   aria-label="Toggle theme"
 >
-    <IconSun class="sun-wrapper" />
-    <IconMoon class="moon-wrapper" />
-</Toggle>
-
-<style>
-  #theme-toggle[data-state="on"] .sun-wrapper {
-    display: none;
-  }
-  #theme-toggle[data-state="off"] .sun-wrapper {
-    display: flex;
-  }
-  #theme-toggle[data-state="on"] .moon-wrapper {
-    display: flex;
-  }
-  #theme-toggle[data-state="off"] .moon-wrapper {
-    display: none;
-  }
-</style>
+    <IconSun class="sun-wrapper block dark:hidden" />
+    <IconMoon class="moon-wrapper hidden dark:block" />
+</RLAButton>
 
 <script>
   function setupThemeToggle() {
-    const button = document.getElementById('theme-toggle');
-    if (!button) return;
-
-    // Use current document class to set initial button state
-    const isDark = document.documentElement.classList.contains('dark');
-    button.setAttribute('data-state', isDark ? 'on' : 'off');
-    button.setAttribute('aria-pressed', isDark.toString());
-
-    button.addEventListener('click', () => {
-      // Toggle the class on the <html> tag
-      const newDark = document.documentElement.classList.toggle('dark');
-      
-      // Update button state visually
-      button.setAttribute('data-state', newDark ? 'on' : 'off');
-      button.setAttribute('aria-pressed', newDark.toString());
-      
-      // Save the user's choice
-      localStorage.setItem('theme', newDark ? 'dark' : 'light');
+    const buttons = document.querySelectorAll('.theme-toggle-button');
+    
+    const updateButtons = (isDark: boolean) => {
+      buttons.forEach(btn => {
+        btn.setAttribute('data-state', isDark ? 'on' : 'off');
+        btn.setAttribute('aria-pressed', isDark.toString());
+      });
+    };
+
+    // Set initial state
+    const currentIsDark = document.documentElement.classList.contains('dark');
+    updateButtons(currentIsDark);
+
+    buttons.forEach(button => {
+      button.addEventListener('click', () => {
+        const isDark = document.documentElement.classList.toggle('dark');
+        localStorage.setItem('theme', isDark ? 'dark' : 'light');
+        updateButtons(isDark);
+      });
     });
   }
 
-  // Runs on initial load AND after each navigation (View Transitions)
+  // Initial setup
+  setupThemeToggle();
+  // Re-run on View Transitions
   document.addEventListener('astro:page-load', setupThemeToggle);
 </script>