@rimelight/ui 0.0.1

package/src/i18n.generated.d.ts

@@ -0,0 +1,202 @@
+// Auto-generated by scripts/bundle-translations.ts
+// Do not edit manually.
+
+declare global {
+  namespace I18n {
+    export interface Schema {
+      "blog": {
+            "meta_title": string;
+            "hero_title": string;
+            "hero_description": string;
+            "latest_article": string;
+            "latest": string;
+            "read_article": string;
+            "all_posts": string;
+          };
+      "chat": {
+            "title": string;
+            "description": string;
+            "heading": string;
+            "intro": string;
+            "label": string;
+            "placeholder": string;
+            "button": string;
+            "room": {
+              "title": string;
+              "connecting": string;
+              "connected": string;
+              "disconnected": string;
+              "placeholder": string;
+              "send": string;
+              "system": {
+                "joining": string;
+                "error": string;
+                "joined": string;
+                "left": string;
+                "reconnecting": string;
+                "fail_reconnect": string;
+                "no_connect": string;
+                "prompt_user": string;
+                "you": string;
+                "online_users": string;
+              };
+            };
+          };
+      "common": {
+            "seo": {
+              "title": string;
+              "description": string;
+            };
+            "nav": {
+              "home": string;
+              "blog": string;
+              "mobileButton": string;
+            };
+            "footer": {
+              "license": string;
+            };
+            "notFound": {
+              "title": string;
+              "message": string;
+              "backToHome": string;
+            };
+          };
+      "cookie_notice": {
+            "title": string;
+            "description": string;
+            "privacy_policy": string;
+            "reject_all": string;
+            "accept_all": string;
+            "accepted_toast": string;
+            "accepted_description": string;
+            "rejected_toast": string;
+            "rejected_description": string;
+          };
+      "editor": {
+            "title": string;
+            "description": string;
+            "collaborative_editor": string;
+            "status": {
+              "connecting": string;
+              "connected": string;
+              "disconnected": string;
+            };
+            "history": string;
+            "version_history": string;
+            "no_versions": string;
+            "placeholder": string;
+            "word_count": {
+              "word": string;
+              "words": string;
+              "character": string;
+              "characters": string;
+            };
+            "save": {
+              "saved": string;
+            };
+            "restore_confirm": string;
+          };
+      "errors": {
+            "404_title": string;
+            "404_description": string;
+            "500_title": string;
+            "500_description": string;
+          };
+      "home": {
+            "meta_title": string;
+            "meta_description": string;
+            "hero_title": string;
+            "hero_description": string;
+            "hero_view_components": string;
+            "hero_contact_me": string;
+            "stack_title": string;
+            "stack_description": string;
+            "stack_view_services": string;
+            "stack_resume": string;
+            "marquee_title": string;
+            "projects_title": string;
+            "projects_description": string;
+            "projects_view_all": string;
+            "cta_title": string;
+            "cta_description": string;
+            "cta_contact": string;
+            "cta_resume": string;
+          };
+      "messages": {
+            "errors": {
+              "ui": {
+                "MISSING_TRANSLATED_UI": string;
+                "MISSING_TRANSLATED_CONTENT": string;
+              };
+            };
+          };
+      "nav": {
+            "home": string;
+            "projects": string;
+            "blog": string;
+            "about": string;
+            "services": string;
+            "resume": string;
+            "contact": string;
+            "components": string;
+            "privacy_policy": string;
+            "terms_of_service": string;
+            "cookie_policy": string;
+          };
+      "projects": {
+            "meta_title": string;
+            "hero_title": string;
+            "hero_description": string;
+            "latest": string;
+            "latest_badge": string;
+            "view_project": string;
+            "all": string;
+          };
+      "services": {
+            "meta_title": string;
+            "hero_title": string;
+            "hero_description": string;
+            "capabilities_title": string;
+            "capabilities_description": string;
+            "web_dev_title": string;
+            "web_dev_description": string;
+            "ui_ux_title": string;
+            "ui_ux_description": string;
+            "perf_title": string;
+            "perf_description": string;
+            "perf_security_title": string;
+            "perf_security_description": string;
+            "testimonials_title": string;
+            "testimonials_description": string;
+            "faq_title": string;
+            "faq_description": string;
+            "cta_title": string;
+            "cta_description": string;
+            "cta_contact": string;
+            "cta_portfolio": string;
+            "badge_ceo": string;
+            "badge_founder": string;
+            "badge_cto": string;
+            "badge_senior_ui": string;
+            "badge_chef": string;
+            "badge_product_designer": string;
+            "testimonial_1": string;
+            "testimonial_2": string;
+            "testimonial_3": string;
+            "testimonial_4": string;
+            "testimonial_5": string;
+            "testimonial_6": string;
+            "faq_category_general": string;
+            "faq_q1": string;
+            "faq_a1": string;
+            "faq_q2": string;
+            "faq_a2": string;
+            "faq_category_technical": string;
+            "faq_q3": string;
+            "faq_a3": string;
+          };
+    }
+  }
+}
+
+export {}

package/src/lib/component-preview.ts

@@ -0,0 +1,73 @@
+/**
+ * Component Preview Renderer
+ *
+ * A simple registry-based system for rendering component previews with dynamic props. Import this
+ * module in your page to register component renderers.
+ */
+
+export type RendererFunction = (props: Record<string, any>, container: HTMLElement) => void
+
+const renderers = new Map<string, RendererFunction>()
+
+/**
+ * Register a component renderer
+ *
+ * @param componentName - The component name (e.g., 'hero', 'button')
+ * @param renderFn - Function that renders the component with given props
+ */
+export function registerRenderer(componentName: string, renderFn: RendererFunction) {
+  renderers.set(componentName, renderFn)
+}
+
+/**
+ * Get a registered renderer
+ */
+export function getRenderer(componentName: string): RendererFunction | undefined {
+  return renderers.get(componentName)
+}
+
+/**
+ * Update a preview container with new props
+ */
+export function renderPreview(
+  container: HTMLElement,
+  componentName: string,
+  props: Record<string, any>
+) {
+  const renderer = renderers.get(componentName)
+  if (renderer) {
+    renderer(props, container)
+  }
+}
+
+/**
+ * Helper to create a simple attribute-based renderer For components that can update via data
+ * attributes and CSS
+ */
+export function createAttributeRenderer(
+  attributeMap: Record<string, string>,
+  classUpdater?: (props: Record<string, any>, element: HTMLElement) => void
+): RendererFunction {
+  return (props, container) => {
+    // Update data attributes
+    Object.entries(props).forEach(([key, value]) => {
+      const attrName = attributeMap[key] || key
+      if (value === undefined || value === null) {
+        container.removeAttribute(`data-${attrName}`)
+      } else if (typeof value === "boolean") {
+        if (value) {
+          container.setAttribute(`data-${attrName}`, "true")
+        } else {
+          container.removeAttribute(`data-${attrName}`)
+        }
+      } else {
+        container.setAttribute(`data-${attrName}`, String(value))
+      }
+    })
+
+    // Call custom class updater if provided
+    if (classUpdater) {
+      classUpdater(props, container)
+    }
+  }
+}

package/src/lib/index.ts

@@ -0,0 +1,6 @@
+export * from "./turnstile"
+export * from "./component-preview"
+export * from "./showcase-preview-elements"
+export * from "./showcase-renderer"
+export * from "./showcase-utils"
+export * from "./remark/remark-modified-time.ts"

package/src/lib/remark/remark-modified-time.ts

@@ -0,0 +1,13 @@
+import { execSync } from "child_process"
+
+export function remarkModifiedTime() {
+  return function (_tree: any, file: any) {
+    try {
+      const filepath = file.history[0]
+      const result = execSync(`git log -1 --pretty="format:%cI" "${filepath}"`)
+      file.data.astro.frontmatter.lastModified = result.toString()
+    } catch {
+      file.data.astro.frontmatter.lastModified = new Date().toISOString()
+    }
+  }
+}

package/src/lib/showcase-preview-elements.ts

@@ -0,0 +1,408 @@
+/**
+ * Showcase Preview Custom Elements
+ *
+ * This module defines all the custom elements used in the component showcase. It must be imported
+ * client-side before the showcase renderers run.
+ */
+
+// Register all custom elements
+export function registerShowcasePreviewElements() {
+  if (typeof HTMLElement === "undefined" || typeof customElements === "undefined") return
+
+  // Hero Preview Custom Element
+  class HeroPreviewElement extends HTMLElement {
+    innerEl: HTMLElement | null = null
+    contentWrapper: HTMLElement | null = null
+    titleEl: HTMLElement | null = null
+    descEl: HTMLElement | null = null
+
+    static get observedAttributes() {
+      return ["data-orientation", "data-alignment", "data-inverted"]
+    }
+
+    connectedCallback() {
+      this.innerEl = this.querySelector<HTMLElement>(".hero-preview-inner")
+      this.contentWrapper = this.querySelector<HTMLElement>(".hero-content-wrapper")
+      this.titleEl = this.querySelector<HTMLElement>("[data-hero-title]")
+      this.descEl = this.querySelector<HTMLElement>("[data-hero-description]")
+      if (!this.innerEl || !this.contentWrapper) return
+      this.updateClasses()
+    }
+
+    attributeChangedCallback(_name: string, _oldValue: string, newValue: string) {
+      if (_oldValue !== newValue) {
+        this.updateClasses()
+      }
+    }
+
+    updateClasses() {
+      if (!this.innerEl || !this.contentWrapper) return
+
+      const orientation = this.dataset.orientation || "vertical"
+      const alignment = this.dataset.alignment || "center"
+      const inverted = this.dataset.inverted === "true"
+
+      const effectiveAlignment = orientation === "horizontal" ? "left" : alignment
+
+      // Reset inner container classes
+      this.innerEl.className = "hero-preview-inner w-full"
+
+      // Apply orientation classes
+      if (orientation === "horizontal") {
+        this.innerEl.classList.add(
+          "flex",
+          "flex-col",
+          "gap-8",
+          "items-center",
+          "lg:grid",
+          "lg:grid-cols-2",
+          "lg:items-center",
+          "lg:gap-16"
+        )
+      } else {
+        this.innerEl.classList.add("flex", "flex-col", "gap-8", "items-center")
+        if (!inverted) {
+          this.innerEl.classList.add("flex-col-reverse")
+        }
+      }
+
+      // Apply alignment classes
+      this.innerEl.classList.remove(
+        "text-start",
+        "text-center",
+        "text-end",
+        "items-start",
+        "items-end"
+      )
+      if (effectiveAlignment === "left") {
+        this.innerEl.classList.add("text-start", "items-start")
+      } else if (effectiveAlignment === "right") {
+        this.innerEl.classList.add("text-end", "items-end")
+      } else {
+        this.innerEl.classList.add("text-center", "items-center")
+      }
+
+      // Update content wrapper
+      this.contentWrapper.classList.remove(
+        "text-center",
+        "items-center",
+        "text-start",
+        "items-start",
+        "text-end",
+        "items-end"
+      )
+      if (effectiveAlignment === "left") {
+        this.contentWrapper.classList.add("text-start", "items-start")
+      } else if (effectiveAlignment === "right") {
+        this.contentWrapper.classList.add("text-end", "items-end")
+      } else {
+        this.contentWrapper.classList.add("text-center", "items-center")
+      }
+    }
+  }
+
+  // Section Preview Custom Element
+  class SectionPreviewElement extends HTMLElement {
+    innerEl: HTMLElement | null = null
+    contentEl: HTMLElement | null = null
+    titleEl: HTMLElement | null = null
+    descEl: HTMLElement | null = null
+
+    static get observedAttributes() {
+      return ["data-orientation", "data-alignment", "data-inverted"]
+    }
+
+    connectedCallback() {
+      this.innerEl = this.querySelector<HTMLElement>(".section-preview-inner")
+      this.contentEl = this.querySelector<HTMLElement>(".section-content")
+      this.titleEl = this.querySelector<HTMLElement>("[data-section-title]")
+      this.descEl = this.querySelector<HTMLElement>("[data-section-description]")
+      if (!this.innerEl || !this.contentEl) return
+      this.updateClasses()
+    }
+
+    attributeChangedCallback(_name: string, _oldValue: string, newValue: string) {
+      if (_oldValue !== newValue) {
+        this.updateClasses()
+      }
+    }
+
+    updateClasses() {
+      if (!this.innerEl || !this.contentEl) return
+
+      const orientation = this.dataset.orientation || "vertical"
+      const alignment = this.dataset.alignment || "center"
+      const inverted = this.dataset.inverted === "true"
+
+      const effectiveAlignment = orientation === "horizontal" ? "left" : alignment
+
+      // Reset inner container classes
+      this.innerEl.className = "section-preview-inner w-full"
+      this.innerEl.classList.add("container", "py-24")
+
+      // Apply orientation classes
+      if (orientation === "horizontal") {
+        this.innerEl.classList.add("lg:grid", "lg:grid-cols-2", "lg:items-center", "lg:gap-16")
+      } else {
+        this.innerEl.classList.add("flex", "flex-col", "gap-12")
+        if (inverted) {
+          this.innerEl.classList.add("flex-col-reverse")
+        }
+      }
+
+      // Apply alignment classes
+      this.innerEl.classList.remove(
+        "text-start",
+        "text-center",
+        "text-end",
+        "items-start",
+        "items-end"
+      )
+      if (effectiveAlignment === "left") {
+        this.innerEl.classList.add("text-start", "items-start")
+      } else if (effectiveAlignment === "right") {
+        this.innerEl.classList.add("text-end", "items-end")
+      } else {
+        this.innerEl.classList.add("text-center", "items-center")
+      }
+
+      // Update content element
+      this.contentEl.classList.remove(
+        "text-center",
+        "items-center",
+        "text-start",
+        "items-start",
+        "text-end",
+        "items-end"
+      )
+      if (effectiveAlignment === "left") {
+        this.contentEl.classList.add("text-start", "items-start")
+      } else if (effectiveAlignment === "right") {
+        this.contentEl.classList.add("text-end", "items-end")
+      } else {
+        this.contentEl.classList.add("text-center", "items-center")
+      }
+    }
+  }
+
+  // Button Preview Custom Element
+  class ButtonPreviewElement extends HTMLElement {
+    button: HTMLElement | null = null
+
+    static get observedAttributes() {
+      return ["data-variant", "data-size", "data-children"]
+    }
+
+    connectedCallback() {
+      this.button = this.querySelector<HTMLElement>("[data-preview-button]")
+      if (!this.button) return
+      this.updateButton()
+    }
+
+    attributeChangedCallback(_name: string, oldValue: string, newValue: string) {
+      if (oldValue !== newValue && this.button) {
+        this.updateButton()
+      }
+    }
+
+    updateButton() {
+      if (!this.button) return
+
+      const variant = this.dataset.variant || "default"
+      const size = this.dataset.size || "md"
+      const children = this.dataset.children || "Button"
+
+      // Remove all variant classes
+      this.button.classList.remove(
+        "bg-input",
+        "hover:bg-input/90",
+        "text-foreground",
+        "bg-primary",
+        "text-primary-foreground",
+        "hover:bg-primary/90",
+        "bg-secondary",
+        "text-secondary-foreground",
+        "hover:bg-secondary/90",
+        "border",
+        "border-input",
+        "bg-background",
+        "hover:bg-accent",
+        "hover:text-accent-foreground",
+        "bg-info",
+        "text-info-foreground",
+        "hover:bg-info/90",
+        "bg-success",
+        "text-success-foreground",
+        "hover:bg-success/90",
+        "bg-warning",
+        "text-warning-foreground",
+        "hover:bg-warning/90",
+        "bg-error",
+        "text-error-foreground",
+        "hover:bg-error/90"
+      )
+
+      // Add new variant classes
+      const variantClasses: Record<string, string[]> = {
+        default: ["bg-input", "hover:bg-input/90", "text-foreground"],
+        primary: ["bg-primary", "text-primary-foreground", "hover:bg-primary/90"],
+        secondary: ["bg-secondary", "text-secondary-foreground", "hover:bg-secondary/90"],
+        outline: [
+          "border",
+          "border-input",
+          "bg-background",
+          "hover:bg-accent",
+          "hover:text-accent-foreground"
+        ],
+        ghost: ["hover:bg-accent", "hover:text-accent-foreground"],
+        info: ["bg-info", "text-info-foreground", "hover:bg-info/90"],
+        success: ["bg-success", "text-success-foreground", "hover:bg-success/90"],
+        warning: ["bg-warning", "text-warning-foreground", "hover:bg-warning/90"],
+        error: ["bg-error", "text-error-foreground", "hover:bg-error/90"]
+      }
+
+      variantClasses[variant]?.forEach((cls: string) => this.button?.classList.add(cls))
+
+      // Remove all size classes
+      this.button.classList.remove(
+        "h-9",
+        "px-3",
+        "text-sm",
+        "h-11",
+        "px-4",
+        "text-base",
+        "h-12",
+        "px-6",
+        "text-lg"
+      )
+
+      // Add new size classes
+      const sizeClasses: Record<string, string[]> = {
+        sm: ["h-9", "px-3", "text-sm"],
+        md: ["h-11", "px-4", "text-base"],
+        lg: ["h-12", "px-6", "text-lg"]
+      }
+
+      sizeClasses[size]?.forEach((cls: string) => this.button?.classList.add(cls))
+
+      // Update text
+      this.button.textContent = children
+    }
+  }
+
+  // Testimonials Preview Custom Element
+  class TestimonialsPreviewElement extends HTMLElement {
+    card: HTMLElement | null = null
+    quoteEl: HTMLElement | null = null
+    personEl: HTMLElement | null = null
+    metaEl: HTMLElement | null = null
+
+    static get observedAttributes() {
+      return ["data-alignment"]
+    }
+
+    connectedCallback() {
+      this.card = this.querySelector<HTMLElement>(".testimonial-card")
+      this.quoteEl = this.querySelector<HTMLElement>("[data-testimonials-quote]")
+      this.personEl = this.querySelector<HTMLElement>(".testimonial-person")
+      this.metaEl = this.querySelector<HTMLElement>(".testimonial-meta")
+      if (!this.card || !this.quoteEl || !this.personEl || !this.metaEl) return
+      this.updateClasses()
+    }
+
+    attributeChangedCallback(_name: string, oldValue: string, newValue: string) {
+      if (oldValue !== newValue) {
+        this.updateClasses()
+      }
+    }
+
+    updateClasses() {
+      if (!this.card || !this.quoteEl || !this.personEl || !this.metaEl) return
+
+      const alignment = this.dataset.alignment || "center"
+
+      // Reset all alignment classes
+      this.quoteEl.classList.remove("text-left", "text-center", "text-right")
+      this.personEl.classList.remove(
+        "flex-row",
+        "flex-row-reverse",
+        "items-center",
+        "justify-start",
+        "justify-end",
+        "flex-col",
+        "text-center"
+      )
+      this.metaEl.classList.remove(
+        "text-left",
+        "text-right",
+        "items-start",
+        "items-end",
+        "items-center"
+      )
+
+      if (alignment === "left") {
+        this.quoteEl.classList.add("text-left")
+        this.personEl.classList.add("flex-row", "items-center", "justify-start")
+        this.metaEl.classList.add("text-left", "items-start")
+      } else if (alignment === "right") {
+        this.quoteEl.classList.add("text-right")
+        this.personEl.classList.add("flex-row-reverse", "items-center", "justify-end")
+        this.metaEl.classList.add("text-right", "items-end")
+      } else {
+        // center
+        this.quoteEl.classList.add("text-center")
+        this.personEl.classList.add("flex-col", "items-center", "justify-center", "text-center")
+        this.metaEl.classList.add("items-center")
+      }
+    }
+  }
+
+  // Language Switcher Preview Custom Element
+  class LanguageSwitcherPreviewElement extends HTMLElement {
+    static get observedAttributes() {
+      return ["data-variant"]
+    }
+
+    connectedCallback() {
+      this.updateVariant()
+    }
+
+    attributeChangedCallback(_name: string, oldValue: string, newValue: string) {
+      if (oldValue !== newValue) {
+        this.updateVariant()
+      }
+    }
+
+    updateVariant() {
+      // Dispatch event for the actual component to handle
+      this.dispatchEvent(
+        new CustomEvent("language-switcher:variant-change", {
+          detail: { variant: this.dataset.variant },
+          bubbles: true
+        })
+      )
+    }
+  }
+
+  // Register all custom elements
+  if (!customElements.get("hero-preview")) {
+    customElements.define("hero-preview", HeroPreviewElement)
+  }
+  if (!customElements.get("section-preview")) {
+    customElements.define("section-preview", SectionPreviewElement)
+  }
+  if (!customElements.get("button-preview")) {
+    customElements.define("button-preview", ButtonPreviewElement)
+  }
+  if (!customElements.get("testimonials-preview")) {
+    customElements.define("testimonials-preview", TestimonialsPreviewElement)
+  }
+  if (!customElements.get("language-switcher-preview")) {
+    customElements.define("language-switcher-preview", LanguageSwitcherPreviewElement)
+  }
+}
+
+// Auto-register when module is imported
+if (typeof window !== "undefined") {
+  registerShowcasePreviewElements()
+}