@rimelight/ui 0.0.1

package/src/components/tooltip/Tooltip.astro

@@ -0,0 +1,422 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export interface TooltipProps extends HTMLAttributes<"div"> {
+  /**
+   * Time in milliseconds to wait before showing the tooltip
+   */
+  openDelay?: number;
+  /**
+   * Time in milliseconds to wait before hiding the tooltip
+   */
+  closeDelay?: number;
+  /**
+   * When true, prevents the tooltip from staying open when hovering over its content
+   */
+  disableHoverableContent?: boolean;
+}
+
+type Props = TooltipProps;
+
+export const tooltip = cv({ base: "starwind-tooltip relative i-block" });
+
+const {
+  openDelay = 200,
+  closeDelay = 200,
+  disableHoverableContent = false,
+  class: className,
+} = Astro.props;
+---
+
+<div
+  class:list={[tooltip(), className]}
+  data-state="closed"
+  data-open-delay={openDelay}
+  data-close-delay={closeDelay}
+  {...!disableHoverableContent && { "data-content-hoverable": "" }}
+  data-slot="tooltip"
+>
+  <slot />
+</div>
+
+<script>
+  import {
+    type FloatingAlign,
+    type FloatingSide,
+    getTransformOrigin,
+    resolvePlacement,
+  } from "../../lib/utils/starwind/positioning";
+
+  class TooltipHandler {
+    private tooltip: HTMLElement;
+    private trigger: HTMLElement | null;
+    private content: HTMLElement | null;
+    private openTimerRef: number | null = null;
+    private closeTimerRef: number | null = null;
+    private hideAnimationTimerRef: number | null = null;
+    private contentId: string;
+    private animationDuration = 150;
+    private side: FloatingSide = "top";
+    private align: FloatingAlign = "center";
+    private sideOffset = 8;
+    private avoidCollisions = true;
+    private isOpen = false;
+    private contentPlaceholder: Comment | null = null;
+    private cleanupAutoUpdate: (() => void) | null = null;
+    private abortController: AbortController;
+
+    constructor(tooltip: HTMLElement, idx: number) {
+      this.contentId = `starwind-tooltip${idx}`;
+      this.tooltip = tooltip;
+      this.abortController = new AbortController();
+      this.content = tooltip.querySelector(".starwind-tooltip-content");
+
+      // if tooltip.firstElementChild is this.content, then get the next element
+      this.trigger = tooltip.firstElementChild as HTMLElement;
+      if (this.trigger === this.content) {
+        this.trigger = this.trigger.nextElementSibling as HTMLElement;
+      }
+
+      if (!this.trigger || !this.content) return;
+
+      this.trigger.classList.add("starwind-tooltip-trigger");
+
+      // animationDuration is set with inline styles through passed prop to TooltipContent
+      const animationDurationString = this.content.style.animationDuration;
+      if (animationDurationString.endsWith("ms")) {
+        this.animationDuration = parseFloat(animationDurationString);
+      } else if (animationDurationString.endsWith("s")) {
+        // using something like @playform/compress might optimize to use "s" instead of "ms"
+        this.animationDuration = parseFloat(animationDurationString) * 1000;
+      }
+
+      const contentSide = this.content.getAttribute("data-side");
+      if (
+        contentSide === "top" ||
+        contentSide === "bottom" ||
+        contentSide === "left" ||
+        contentSide === "right"
+      ) {
+        this.side = contentSide;
+      }
+
+      const contentAlign = this.content.getAttribute("data-align");
+      if (contentAlign === "start" || contentAlign === "center" || contentAlign === "end") {
+        this.align = contentAlign;
+      }
+
+      const contentSideOffset = parseFloat(this.content.getAttribute("data-side-offset") || "8");
+      if (Number.isFinite(contentSideOffset)) {
+        this.sideOffset = contentSideOffset;
+      }
+
+      this.avoidCollisions = this.content.hasAttribute("data-avoid-collisions");
+      this.isOpen = this.tooltip.getAttribute("data-state") === "open";
+
+      this.init();
+    }
+
+    private init() {
+      this.setupAccessibility();
+      this.setupEvents();
+      this.setInitialState();
+    }
+
+    private setupAccessibility() {
+      if (!this.trigger || !this.content) return;
+      this.trigger.setAttribute("aria-describedby", this.contentId);
+      this.content.id = this.contentId;
+    }
+
+    private setInitialState() {
+      if (!this.content || !this.trigger) return;
+
+      if (this.isOpen) {
+        this.tooltip.setAttribute("data-state", "open");
+        this.trigger.setAttribute("data-state", "open");
+        this.content.setAttribute("data-state", "open");
+        this.content.classList.remove("hidden");
+        this.portalContent();
+        this.positionTooltip();
+        requestAnimationFrame(() => this.positionTooltip());
+      } else {
+        this.tooltip.setAttribute("data-state", "closed");
+        this.trigger.setAttribute("data-state", "closed");
+        this.content.setAttribute("data-state", "closed");
+        this.content.classList.add("hidden");
+      }
+    }
+
+    private setupEvents() {
+      if (!this.trigger || !this.content) return;
+
+      // Trigger events
+      this.trigger.addEventListener("mouseenter", () => this.show(), {
+        signal: this.abortController.signal,
+      });
+      this.trigger.addEventListener("mouseleave", () => this.hide(), {
+        signal: this.abortController.signal,
+      });
+      this.trigger.addEventListener("focus", () => this.show(true), {
+        signal: this.abortController.signal,
+      });
+      this.trigger.addEventListener("blur", () => this.hide(true), {
+        signal: this.abortController.signal,
+      });
+
+      // Content events
+      if (this.tooltip.hasAttribute("data-content-hoverable")) {
+        this.content.addEventListener("mouseenter", () => this.show(), {
+          signal: this.abortController.signal,
+        });
+        this.content.addEventListener("mouseleave", () => this.hide(), {
+          signal: this.abortController.signal,
+        });
+      }
+
+      // Document events
+      document.addEventListener(
+        "keydown",
+        (e) => {
+          if (e.key === "Escape" && this.isOpen) {
+            this.hide(true);
+          }
+        },
+        { signal: this.abortController.signal },
+      );
+
+      document.addEventListener(
+        "pointerdown",
+        (e) => {
+          if (
+            this.isOpen &&
+            !this.tooltip.contains(e.target as Node) &&
+            !this.content?.contains(e.target as Node)
+          ) {
+            this.hide(true);
+          }
+        },
+        { signal: this.abortController.signal },
+      );
+    }
+
+    private portalContent() {
+      if (!this.content) return;
+      if (this.contentPlaceholder || this.content.parentElement === document.body) return;
+
+      this.contentPlaceholder = document.createComment("tooltip-content-placeholder");
+      this.content.parentNode?.insertBefore(this.contentPlaceholder, this.content);
+
+      document.body.appendChild(this.content);
+
+      this.content.style.position = "fixed";
+      this.content.style.zIndex = "50";
+
+      const updatePosition = () => this.positionTooltip();
+      window.addEventListener("scroll", updatePosition, true);
+      window.addEventListener("resize", updatePosition);
+
+      const resizeObserver = new ResizeObserver(() => this.positionTooltip());
+      resizeObserver.observe(this.content);
+      if (this.trigger) {
+        resizeObserver.observe(this.trigger);
+      }
+
+      this.cleanupAutoUpdate = () => {
+        window.removeEventListener("scroll", updatePosition, true);
+        window.removeEventListener("resize", updatePosition);
+        resizeObserver.disconnect();
+      };
+    }
+
+    private unportalContent() {
+      if (!this.content) return;
+
+      this.cleanupAutoUpdate?.();
+      this.cleanupAutoUpdate = null;
+
+      if (this.contentPlaceholder) {
+        this.contentPlaceholder.parentNode?.insertBefore(this.content, this.contentPlaceholder);
+        this.contentPlaceholder.remove();
+        this.contentPlaceholder = null;
+      }
+
+      this.content.style.removeProperty("position");
+      this.content.style.removeProperty("z-index");
+      this.content.style.removeProperty("top");
+      this.content.style.removeProperty("left");
+      this.content.style.removeProperty("transform-origin");
+    }
+
+    private openNow() {
+      if (!this.content || !this.trigger) return;
+      if (this.abortController.signal.aborted) return;
+
+      this.clearHideAnimationTimer();
+      this.isOpen = true;
+      this.tooltip.setAttribute("data-state", "open");
+      this.trigger.setAttribute("data-state", "open");
+      this.content.setAttribute("data-state", "open");
+      this.content.classList.remove("hidden");
+      this.portalContent();
+      this.positionTooltip();
+      requestAnimationFrame(() => this.positionTooltip());
+    }
+
+    private show(immediate: boolean = false) {
+      if (!this.content || !this.trigger) return;
+
+      this.clearCloseTimer();
+      this.clearHideAnimationTimer();
+      this.clearOpenTimer();
+
+      if (immediate) {
+        this.openNow();
+        this.clearOpenTimer();
+        return;
+      }
+
+      const delay = parseInt(this.tooltip.getAttribute("data-open-delay") || "200");
+      this.openTimerRef = window.setTimeout(() => {
+        if (this.abortController.signal.aborted) return;
+        this.openNow();
+        this.openTimerRef = null;
+      }, delay);
+    }
+
+    private positionTooltip() {
+      if (!this.content || !this.trigger || !this.isOpen) return;
+
+      const triggerRect = this.trigger.getBoundingClientRect();
+      const contentWidth = this.content.offsetWidth;
+      const contentHeight = this.content.offsetHeight;
+      if (contentWidth === 0 || contentHeight === 0) return;
+
+      const resolvedPlacement = resolvePlacement({
+        side: this.side,
+        align: this.align,
+        sideOffset: this.sideOffset,
+        triggerRect,
+        contentWidth,
+        contentHeight,
+        viewportWidth: window.innerWidth,
+        viewportHeight: window.innerHeight,
+        viewportPadding: 8,
+        avoidCollisions: this.avoidCollisions,
+      });
+
+      this.content.style.left = `${Math.round(resolvedPlacement.left)}px`;
+      this.content.style.top = `${Math.round(resolvedPlacement.top)}px`;
+      this.content.style.transformOrigin = getTransformOrigin(
+        resolvedPlacement.side,
+        resolvedPlacement.align,
+      );
+      this.content.setAttribute("data-side", resolvedPlacement.side);
+      this.content.setAttribute("data-align", resolvedPlacement.align);
+    }
+
+    private closeNow() {
+      if (!this.content || !this.trigger) return;
+      this.isOpen = false;
+      this.tooltip.setAttribute("data-state", "closed");
+      this.trigger.setAttribute("data-state", "closed");
+      this.content.setAttribute("data-state", "closed");
+
+      this.clearHideAnimationTimer();
+      this.hideAnimationTimerRef = window.setTimeout(() => {
+        if (this.abortController.signal.aborted) return;
+        if (!this.content) return;
+        this.content.classList.add("hidden");
+        this.unportalContent();
+      }, this.animationDuration);
+    }
+
+    private hide(immediate: boolean = false) {
+      if (!this.content || !this.trigger) return;
+      this.clearOpenTimer();
+      this.clearCloseTimer();
+
+      if (immediate) {
+        this.closeNow();
+        return;
+      }
+
+      this.closeTimerRef = window.setTimeout(
+        () => {
+          if (this.abortController.signal.aborted) return;
+          this.closeNow();
+          this.closeTimerRef = null;
+        },
+        parseInt(this.tooltip.getAttribute("data-close-delay") || "200"),
+      );
+    }
+
+    destroy() {
+      if (this.abortController.signal.aborted) return;
+
+      this.abortController.abort();
+      this.clearOpenTimer();
+      this.clearCloseTimer();
+      this.clearHideAnimationTimer();
+      this.unportalContent();
+      this.isOpen = false;
+    }
+
+    private clearOpenTimer() {
+      if (this.openTimerRef) {
+        window.clearTimeout(this.openTimerRef);
+        this.openTimerRef = null;
+      }
+    }
+
+    private clearCloseTimer() {
+      if (this.closeTimerRef) {
+        window.clearTimeout(this.closeTimerRef);
+        this.closeTimerRef = null;
+      }
+    }
+
+    private clearHideAnimationTimer() {
+      if (this.hideAnimationTimerRef) {
+        window.clearTimeout(this.hideAnimationTimerRef);
+        this.hideAnimationTimerRef = null;
+      }
+    }
+  }
+
+  const tooltipInstances = new Map<HTMLElement, TooltipHandler>();
+  let tooltipCounter = 0;
+
+  const cleanupStaleTooltips = () => {
+    for (const [tooltipEl, tooltipHandler] of tooltipInstances.entries()) {
+      if (!document.contains(tooltipEl)) {
+        tooltipHandler.destroy();
+        tooltipInstances.delete(tooltipEl);
+      }
+    }
+  };
+
+  const destroyAllTooltips = () => {
+    for (const tooltipHandler of tooltipInstances.values()) {
+      tooltipHandler.destroy();
+    }
+
+    tooltipInstances.clear();
+  };
+
+  const setupTooltips = () => {
+    cleanupStaleTooltips();
+
+    document.querySelectorAll<HTMLElement>(".starwind-tooltip").forEach((tooltip) => {
+      if (!tooltipInstances.has(tooltip)) {
+        tooltipInstances.set(tooltip, new TooltipHandler(tooltip, tooltipCounter++));
+      }
+    });
+  };
+
+  setupTooltips();
+  document.addEventListener("astro:before-swap", destroyAllTooltips);
+  document.addEventListener("astro:after-swap", setupTooltips);
+  document.addEventListener("starwind:init", setupTooltips);
+</script>

package/src/components/tooltip/TooltipContent.astro

@@ -0,0 +1,83 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+import IconCaretUp from "~icons/lucide/caret-up";
+
+export interface TooltipContentProps extends HTMLAttributes<"div"> {
+  /**
+   * Side of the tooltip
+   * @default top
+   */
+  side?: "top" | "right" | "bottom" | "left";
+  /**
+   * Alignment of the tooltip
+   * @default center
+   */
+  align?: "start" | "center" | "end";
+  /**
+   * Offset distance in pixels
+   * @default 8
+   */
+  sideOffset?: number;
+  /**
+   * Prevent the tooltip from colliding with other elements
+   * @default true
+   */
+  avoidCollisions?: boolean;
+  /**
+   * Open and close animation duration in milliseconds
+   * @default 150
+   */
+  animationDuration?: number;
+}
+
+type Props = TooltipContentProps;
+
+export const tooltipContent = cv({
+  base: [
+    "starwind-tooltip-content",
+    "group fixed z-50 hidden w-fit px-xs py-5xs",
+    "bg-foreground text-background rounded-md",
+    "animate-in fade-in zoom-in-95",
+    "data-[state=closed]:animate-out data-[state=closed]:fill-mode-forwards fade-out zoom-out-95",
+    "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+    "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+  ],
+});
+
+export const tooltipCaret = cv({
+  base: [
+    "text-foreground absolute z-50 size-4",
+    "group-data-[side=top]:bottom-0 group-data-[side=top]:left-1/2 group-data-[side=top]:-translate-x-1/2 group-data-[side=top]:translate-y-[calc(50%+1px)] group-data-[side=top]:rotate-180",
+    "group-data-[side=bottom]:top-0 group-data-[side=bottom]:left-1/2 group-data-[side=bottom]:-translate-x-1/2 group-data-[side=bottom]:-translate-y-[calc(50%+1px)]",
+    "group-data-[side=left]:top-1/2 group-data-[side=left]:right-0 group-data-[side=left]:translate-x-[calc(50%+1px)] group-data-[side=left]:-translate-y-1/2 group-data-[side=left]:rotate-90",
+    "group-data-[side=right]:top-1/2 group-data-[side=right]:left-0 group-data-[side=right]:-translate-x-[calc(50%+1px)] group-data-[side=right]:-translate-y-1/2 group-data-[side=right]:-rotate-90",
+  ],
+});
+
+const {
+  side = "top",
+  align = "center",
+  sideOffset = 8,
+  avoidCollisions = true,
+  animationDuration = 150,
+  class: className,
+} = Astro.props;
+---
+
+<div
+  class:list={[tooltipContent(), className]}
+  data-state="closed"
+  data-side={side}
+  data-align={align}
+  data-side-offset={sideOffset}
+  {...avoidCollisions && { "data-avoid-collisions": "" }}
+  role="tooltip"
+  style={{ animationDuration: `${animationDuration}ms` }}
+  data-slot="tooltip-content"
+>
+  <slot> My tooltip! </slot>
+  <span class={tooltipCaret()}>
+    <IconCaretUp />
+  </span>
+</div>

package/src/components/tooltip/TooltipTrigger.astro

@@ -0,0 +1,13 @@
+---
+/**
+ * This component is used to trigger the tooltip
+ * All it does is require a slot
+ */
+
+export interface TooltipTriggerProps {
+  children: any;
+}
+type Props = TooltipTriggerProps;
+---
+
+<slot />

package/src/components/video/Video.astro

@@ -0,0 +1,121 @@
+---
+import type { HTMLAttributes } from "astro/types";
+import { cv } from "css-variants";
+
+export const video = cv({
+  base: "starwind-video aspect-video h-auto w-full",
+});
+
+export interface VideoProps extends HTMLAttributes<"video">, HTMLAttributes<"iframe"> {
+  src: string;
+  title?: string;
+  autoplay?: boolean;
+  muted?: boolean;
+  loop?: boolean;
+  controls?: boolean;
+  poster?: string;
+}
+
+type Props = VideoProps;
+
+const {
+  class: className,
+  src,
+  title = "Video",
+  autoplay = false,
+  muted = false,
+  loop = false,
+  controls = true,
+  poster,
+  ...rest
+} = Astro.props;
+
+/**
+ * Detects the video type from the src URL
+ */
+function getVideoType(url: string): "youtube" | "youtube-shorts" | "native" {
+  if (url.includes("youtube.com/shorts/") || url.includes("youtu.be/shorts/")) {
+    return "youtube-shorts";
+  }
+  if (
+    url.includes("youtube.com") ||
+    url.includes("youtu.be") ||
+    url.includes("youtube-nocookie.com")
+  ) {
+    return "youtube";
+  }
+  return "native";
+}
+
+/**
+ * Extracts YouTube video ID from various URL formats
+ */
+function getYouTubeId(url: string): string | null {
+  const patterns = [
+    /youtube\.com\/shorts\/([^?&]+)/,
+    /youtube\.com\/watch\?v=([^&]+)/,
+    /youtube\.com\/embed\/([^?&]+)/,
+    /youtu\.be\/([^?&]+)/,
+    /youtube-nocookie\.com\/embed\/([^?&]+)/,
+  ];
+
+  for (const pattern of patterns) {
+    const match = url.match(pattern);
+    if (match) return match[1] || null;
+  }
+  return null;
+}
+
+/**
+ * Builds YouTube embed URL with parameters
+ */
+function buildYouTubeEmbedUrl(videoId: string, _isShort: boolean): string {
+  const params = new URLSearchParams();
+  if (autoplay) params.set("autoplay", "1");
+  if (muted) params.set("mute", "1");
+  if (loop) {
+    params.set("loop", "1");
+    params.set("playlist", videoId);
+  }
+  if (!controls) params.set("controls", "0");
+
+  const baseUrl = `https://www.youtube-nocookie.com/embed/${videoId}`;
+  const queryString = params.toString();
+  return queryString ? `${baseUrl}?${queryString}` : baseUrl;
+}
+
+const videoType = getVideoType(src);
+const youtubeId = videoType !== "native" ? getYouTubeId(src) : null;
+const isShort = videoType === "youtube-shorts";
+const embedUrl = youtubeId ? buildYouTubeEmbedUrl(youtubeId, isShort) : null;
+---
+
+{
+  videoType === "native" || !embedUrl ? (
+    <video
+      class:list={[video(), className]}
+      src={src}
+      autoplay={autoplay}
+      muted={muted}
+      loop={loop}
+      controls={controls}
+      poster={poster}
+      {...rest}
+      data-slot="video"
+    >
+      <track kind="captions" />
+    </video>
+  ) : (
+    <iframe
+      class:list={[video(), className]}
+      src={embedUrl}
+      title={title}
+      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+      referrerpolicy="strict-origin-when-cross-origin"
+      allowfullscreen
+      data-video-type={isShort ? "youtube-shorts" : "youtube"}
+      {...rest}
+      data-slot="video"
+    />
+  )
+}

package/src/config/cookies.ts

@@ -0,0 +1,5 @@
+// Cookies / runtime-policy
+
+export const COOKIE_TTL = {
+  oneYear: 60 * 60 * 24 * 365
+} as const

package/src/config/index.ts

@@ -0,0 +1,3 @@
+export * from "./site.config"
+export * from "./links"
+export * from "./cookies"

package/src/config/links.ts

@@ -0,0 +1,4 @@
+export const LINKS = {
+  edgeKitsSite: "https://edgekits.dev",
+  twitter: `https://x.com/GaryEdgeKits`
+} as const

package/src/config/site.config.ts

@@ -0,0 +1,45 @@
+export interface SiteConfig {
+  id: string
+  name: string
+  description: string
+  url: string
+  ogImage: string
+  author: string
+  email: string
+  branding: {
+    logo: {
+      alt: string
+    }
+    favicon: {
+      svg: string
+    }
+    colors: {
+      themeColor: string
+      backgroundColor: string
+    }
+  }
+}
+
+export const SITE_CONFIG: SiteConfig = {
+  id: "danielmarchi.dev",
+  name: "Daniel Marchi",
+  description: "A portfolio website built with Astro.",
+  url: "https://danielmarchi.dev",
+  ogImage: "/og-default.png",
+  author: "Daniel Marchi",
+  email: "hello@danielmarchi.dev",
+  branding: {
+    logo: {
+      alt: "Daniel Marchi"
+    },
+    favicon: {
+      svg: "/favicon.svg"
+    },
+    colors: {
+      themeColor: "#F94C10",
+      backgroundColor: "#ffffff"
+    }
+  }
+}
+
+export default SITE_CONFIG

package/src/domain/cms/index.ts

@@ -0,0 +1 @@
+export * from "./types"