@rimelight/ui 0.0.5 → 0.0.7

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/FormattedDate.astro

@@ -1,17 +1,21 @@
 ---
 export interface FormattedDateProps {
 	date?: Date | undefined;
+	locale?: string;
 }
 type Props = FormattedDateProps;
 
-const { date } = Astro.props;
+const { 
+	date,
+	locale = Astro.locals.astroI18n?.locale || "en-US"
+} = Astro.props;
 ---
 
 {
 	date && (
 		<time datetime={date.toISOString()}>
 			{
-				date.toLocaleDateString('en-us', {
+				date.toLocaleDateString(locale, {
 					year: 'numeric',
 					month: 'short',
 					day: 'numeric',

package/src/components/Head.astro

@@ -0,0 +1,153 @@
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config';
+import UApp from './nuxt/App.vue';
+
+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 />}
+
+<UApp client:load>
+  <slot />
+</UApp>

package/src/components/ProjectPost.astro

@@ -0,0 +1,197 @@
+---
+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";
+
+// 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;
+  /** Translations for the component */
+  t?: {
+    latest_badge?: string;
+    view_project?: string;
+  };
+  /** The current locale for formatting and links */
+  locale?: string;
+}
+
+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,
+  t: tProp,
+  locale = Astro.locals.astroI18n?.locale || "en"
+} = Astro.props;
+
+const t = {
+  latest_badge: tProp?.latest_badge || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("projects.latest_badge") : "Latest"),
+  view_project: tProp?.view_project || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("projects.view_project") : "View Project"),
+};
+
+// 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 as CollectionEntry<"projects">).data.title;
+const projectDescription = isCMSDocument ? project.description : (project as CollectionEntry<"projects">).data.description;
+const projectImage = isCMSDocument ? project.heroImage : (project as CollectionEntry<"projects">).data.heroImage;
+const projectFeatured = isCMSDocument ? (project.featured ?? false) : (project as CollectionEntry<"projects">).data.featured;
+const projectTags = isCMSDocument ? (project.tags || []) : ((project as CollectionEntry<"projects">).data.tags || []);
+
+// Handle date formatting
+const rawDate = isCMSDocument ? (project.publishedDate || project._createdAt) : (project as CollectionEntry<"projects">).data.publishedDate;
+const d = rawDate ? new Date(rawDate) : null;
+const formattedDate = d && !isNaN(d.getTime())
+  ? new Intl.DateTimeFormat(locale, {
+      dateStyle: "medium",
+    }).format(d)
+  : "";
+
+// Get slug from CMS or Astro content
+const projectSlug = isCMSDocument 
+  ? (project.slug || "")
+  : (project as CollectionEntry<"projects">).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={Astro.locals.astroI18n ? Astro.locals.astroI18n.l(`/projects/${projectSlug}`) : `/${locale}/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>