@rimelight/ui 0.0.5 → 0.0.7

package/LICENSE

@@ -1,21 +1,21 @@
-MIT License
-
-Copyright (c) 2026 Daniel Marchi
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+MIT License
+
+Copyright (c) 2026 Daniel Marchi
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,12 +1,19 @@
 {
   "name": "@rimelight/ui",
-  "version": "0.0.5",
-  "description": "Rimelight UI Library.",
+  "version": "0.0.7",
+  "private": false,
+  "description": "Rimelight Entertainment UI Library.",
+  "homepage": "https://rimelight.com/docs",
+  "bugs": {
+    "url": "https://github.com/Rimelight-Entertainment/rimelight/issues"
+  },
   "license": "MIT",
-  "author": "Daniel Marchi",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Rimelight-Entertainment/rimelight.git"
+  },
   "files": [
     "src",
-    "i18n-data.json",
     "worker-configuration.d.ts",
     "README.md",
     "LICENSE"
@@ -14,19 +21,17 @@
   "type": "module",
   "exports": {
     ".": "./src/integrations/index.ts",
+    "./styles/*": "./src/styles/*",
     "./components/*": "./src/components/*",
     "./components/astro/*": "./src/components/astro/*",
     "./components/vue/*": "./src/components/vue/*",
+    "./components/nuxt/*": "./src/components/nuxt/*",
     "./themes": "./src/themes/index.ts",
     "./themes/*": "./src/themes/*",
     "./composables": "./src/composables/index.ts",
     "./composables/*": "./src/composables/*",
     "./config": "./src/config/index.ts",
     "./config/*": "./src/config/*",
-    "./domain": "./src/domain/index.ts",
-    "./domain/*": "./src/domain/*",
-    "./lib": "./src/lib/index.ts",
-    "./lib/*": "./src/lib/*",
     "./utils": "./src/utils/index.ts",
     "./utils/*": "./src/utils/*",
     "./integrations": "./src/integrations/index.ts",
@@ -39,23 +44,26 @@
     "access": "public"
   },
   "dependencies": {
+    "@astrojs/vue": "6.0.1",
+    "@iconify-json/lucide": "^1.2.102",
+    "@nuxt/ui": "4.6.1",
     "css-variants": "2.3.5",
     "defu": "6.1.6",
     "embla-carousel": "8.6.0",
-    "tailwind-merge": "^3.3.1"
+    "tailwind-merge": "^3.3.1",
+    "tailwindcss": "4.2.2",
+    "unplugin-icons": "23.0.1"
   },
   "devDependencies": {
     "@astrojs/check": "0.9.8",
     "@astrojs/ts-plugin": "1.10.7",
     "@e18e/eslint-plugin": "0.3.0",
     "@types/node": "25.5.2",
-    "@unocss/eslint-plugin": "66.6.7",
+    "@unocss/eslint-plugin": "66.6.8",
     "astro": "6.1.4",
     "eslint-plugin-regexp": "3.1.0",
-    "typescript": "6.0.2",
-    "unocss": "66.6.7",
-    "unplugin-icons": "23.0.1",
-    "vite-plus": "0.1.15"
+    "unocss": "66.6.8",
+    "vite-plus": "0.1.18"
   },
   "peerDependencies": {
     "astro": ">=6.0.0",

package/src/components/BlogPost.astro

@@ -0,0 +1,195 @@
+---
+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 CMSPostDocument = {
+  _id: string;
+  slug?: string;
+  title: string;
+  excerpt?: string;
+  description?: string;
+  image?: string;
+  publishedDate?: string | Date | null;
+  featured?: boolean;
+  _updatedAt?: string;
+  _createdAt?: string;
+};
+
+export interface BlogPostProps extends NonNullable<Parameters<typeof blogPostVariants>[0]> {
+  post: CollectionEntry<"blog"> | CMSPostDocument;
+  class?: string;
+  showImage?: boolean;
+  separator?: boolean;
+  /** Translations for the component */
+  t?: {
+    latest?: string;
+    read_article?: string;
+  };
+  /** The current locale for formatting and links */
+  locale?: string;
+}
+
+type Props = BlogPostProps;
+
+const blogPostVariants = 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 { 
+  post, 
+  variant, 
+  class: className, 
+  showImage = true, 
+  separator = false,
+  t: tProp,
+  locale = Astro.locals.astroI18n?.locale || "en"
+} = Astro.props;
+
+const t = {
+  latest: tProp?.latest || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("blog.latest") : "Latest"),
+  read_article: tProp?.read_article || (Astro.locals.astroI18n ? Astro.locals.astroI18n.t("blog.read_article") : "Read Article"),
+};
+
+// Detect if this is a CMS document or Astro content entry
+const isCMSDocument = "_id" in post && !("id" in post);
+
+// Extract fields based on source type
+const postTitle = isCMSDocument ? post.title : (post as CollectionEntry<"blog">).data.title;
+const postDescription = isCMSDocument ? (post.description || post.excerpt) : (post as CollectionEntry<"blog">).data.description;
+const postImage = isCMSDocument ? post.image : (post as CollectionEntry<"blog">).data.heroImage;
+const postFeatured = isCMSDocument ? (post.featured ?? false) : (post as CollectionEntry<"blog">).data.featured;
+
+// Handle date formatting
+const rawDate = isCMSDocument ? (post.publishedDate || post._createdAt) : (post as CollectionEntry<"blog">).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 postSlug = isCMSDocument 
+  ? (post.slug || "")
+  : (post as CollectionEntry<"blog">).id.replace(/^(en|pt|de|es|ja)\//, "");
+
+const { root, imageWrapper, image, content, title, description, footer, authorGroup, author, link, badge, featuredBadge } = blogPostVariants({ variant });
+---
+
+<div class="flex flex-col w-full">
+  <a href={Astro.locals.astroI18n ? Astro.locals.astroI18n.l(`/blog/${postSlug}`) : `/${locale}/blog/${postSlug}`} class:list={[root, className]}>
+    {showImage && (
+      <div class={imageWrapper}>
+        {postFeatured && (
+          <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}
+          </div>
+        )}
+        {postImage && (
+          <Image
+            src={postImage as any}
+            alt={postTitle}
+            width={800}
+            height={450}
+            class={image}
+            loading="lazy"
+            decoding="async"
+          />
+        )}
+      </div>
+    )}
+
+    <div class={content}>
+      <h3 class={title}>
+        {postTitle}
+      </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">
+              <span class={badge}>Engineering</span>
+              <span class={badge}>Astro</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <p class={description}>
+        {postDescription}
+      </p>
+
+      <div class={footer}>
+        <span class={link}>
+          {t.read_article}
+          <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>