astro-awesomeness 0.1.0 → 0.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-awesomeness",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Astro 5 blog theme with shadcn primitives and a Tailwind v4 preset.",
   "keywords": [
     "astro",
@@ -12,8 +12,7 @@
   "license": "MIT",
   "files": [
     "dist",
-    "src/astro",
-    "src/layouts"
+    "src"
   ],
   "type": "module",
   "exports": {

package/src/components/command-menu.tsx

@@ -0,0 +1,81 @@
+import { Search } from "lucide-react";
+import { useEffect, useState } from "react";
+
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from "./ui/command";
+import { Dialog, DialogContent, DialogTrigger } from "./ui/dialog";
+import { Button } from "./ui/button";
+
+type CommandMenuItem = { description?: string; title: string; url: string };
+
+type CommandMenuProps = {
+  emptyMessage?: string;
+  items: Array<CommandMenuItem>;
+  placeholder?: string;
+};
+
+const CommandMenu = ({
+  emptyMessage = "No results.",
+  items,
+  placeholder = "Search posts…",
+}: CommandMenuProps) => {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "k" && (event.metaKey || event.ctrlKey)) {
+        event.preventDefault();
+        setOpen((value) => !value);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, []);
+
+  return (
+    <Dialog onOpenChange={setOpen} open={open}>
+      <DialogTrigger asChild>
+        <Button aria-label="Open search" size="icon" variant="ghost">
+          <Search />
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="p-0">
+        <Command>
+          <CommandInput placeholder={placeholder} />
+          <CommandList>
+            <CommandEmpty>{emptyMessage}</CommandEmpty>
+            <CommandGroup heading="Posts">
+              {items.map((item) => (
+                <CommandItem
+                  key={item.url}
+                  onSelect={() => {
+                    window.location.href = item.url;
+                  }}
+                  value={item.title}
+                >
+                  <div className="flex flex-col">
+                    <span>{item.title}</span>
+                    {item.description ? (
+                      <span className="text-muted-foreground text-xs">{item.description}</span>
+                    ) : null}
+                  </div>
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+export { CommandMenu };
+export type { CommandMenuItem, CommandMenuProps };

package/src/components/index.ts

@@ -0,0 +1,22 @@
+export { Button, buttonVariants } from "./ui/button";
+export {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+  CommandSeparator,
+  CommandShortcut,
+} from "./ui/command";
+export {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "./ui/dialog";
+export { CommandMenu, type CommandMenuItem, type CommandMenuProps } from "./command-menu";
+export { ThemeToggle } from "./theme-toggle";

package/src/components/theme-toggle.tsx

@@ -0,0 +1,61 @@
+import { Moon, Sun } from "lucide-react";
+import { useEffect, useState, useSyncExternalStore } from "react";
+
+import { Button } from "./ui/button";
+
+type Theme = "light" | "dark";
+
+const getStoredTheme = (): Theme | null => {
+  if (typeof window === "undefined") {
+    return null;
+  }
+  const stored = window.localStorage.getItem("theme");
+  if (stored === "light" || stored === "dark") {
+    return stored;
+  }
+  return null;
+};
+
+const getPrefersDark = (): boolean => {
+  if (typeof window === "undefined") {
+    return false;
+  }
+  return window.matchMedia("(prefers-color-scheme: dark)").matches;
+};
+
+const subscribePrefersDark = (callback: () => void) => {
+  if (typeof window === "undefined") {
+    return () => {};
+  }
+  const media = window.matchMedia("(prefers-color-scheme: dark)");
+  media.addEventListener("change", callback);
+  return () => {
+    media.removeEventListener("change", callback);
+  };
+};
+
+const ThemeToggle = () => {
+  // useSyncExternalStore avoids hydration mismatch warnings while still letting
+  // us read the actual system preference on the client.
+  const prefersDark = useSyncExternalStore(subscribePrefersDark, getPrefersDark, () => false);
+  const [override, setOverride] = useState<Theme | null>(() => getStoredTheme());
+  const theme: Theme = override ?? (prefersDark ? "dark" : "light");
+
+  useEffect(() => {
+    document.documentElement.classList.toggle("dark", theme === "dark");
+  }, [theme]);
+
+  const handleClick = () => {
+    const next: Theme = theme === "dark" ? "light" : "dark";
+    window.localStorage.setItem("theme", next);
+    setOverride(next);
+  };
+
+  return (
+    <Button aria-label="Toggle theme" onClick={handleClick} size="icon" variant="ghost">
+      {theme === "dark" ? <Sun /> : <Moon />}
+    </Button>
+  );
+};
+
+export { ThemeToggle };

package/src/components/ui/button.tsx

@@ -0,0 +1,62 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+import { Slot } from "radix-ui";
+
+import { cn } from "../../lib/cn";
+
+const buttonVariants = cva(
+  "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    defaultVariants: {
+      size: "default",
+      variant: "default",
+    },
+    variants: {
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        icon: "size-9",
+        "icon-lg": "size-10",
+        "icon-sm": "size-8",
+        "icon-xs": "size-6 rounded-md [&_svg:not([class*='size-'])]:size-3",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        sm: "h-8 gap-1.5 rounded-md px-3 has-[>svg]:px-2.5",
+        xs: "h-6 gap-1 rounded-md px-2 text-xs has-[>svg]:px-1.5 [&_svg:not([class*='size-'])]:size-3",
+      },
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        outline:
+          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+      },
+    },
+  },
+);
+
+const Button = ({
+  asChild = false,
+  className,
+  size = "default",
+  variant = "default",
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) => {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      className={cn(buttonVariants({ className, size, variant }))}
+      data-size={size}
+      data-slot="button"
+      data-variant={variant}
+      {...props}
+    />
+  );
+};
+
+export { Button, buttonVariants };

package/src/components/ui/command.tsx

@@ -0,0 +1,156 @@
+"use client";
+
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "../../lib/cn";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from "./dialog";
+
+function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      className={cn(
+        "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
+        className,
+      )}
+      data-slot="command"
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  children,
+  className,
+  description = "Search for a command to run...",
+  showCloseButton = true,
+  title = "Command Palette",
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  className?: string;
+  description?: string;
+  showCloseButton?: boolean;
+  title?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent
+        className={cn("overflow-hidden p-0", className)}
+        showCloseButton={showCloseButton}
+      >
+        <Command className="**:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div className="flex h-9 items-center gap-2 border-b px-3" data-slot="command-input-wrapper">
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        className={cn(
+          "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        data-slot="command-input"
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      className={cn("max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto", className)}
+      data-slot="command-list"
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({ ...props }: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      className="py-6 text-center text-sm"
+      data-slot="command-empty"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      className={cn(
+        "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
+        className,
+      )}
+      data-slot="command-group"
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      className={cn("-mx-1 h-px bg-border", className)}
+      data-slot="command-separator"
+      {...props}
+    />
+  );
+}
+
+function CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      className={cn(
+        "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        className,
+      )}
+      data-slot="command-item"
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn("ml-auto text-xs tracking-widest text-muted-foreground", className)}
+      data-slot="command-shortcut"
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  // fallow-ignore-next-line unused-export
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

package/src/components/ui/dialog.tsx

@@ -0,0 +1,145 @@
+import * as React from "react";
+import { XIcon } from "lucide-react";
+import { Dialog as DialogPrimitive } from "radix-ui";
+
+import { cn } from "../../lib/cn";
+import { Button } from "./button";
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        "fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0",
+        className,
+      )}
+      data-slot="dialog-overlay"
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  children,
+  className,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal data-slot="dialog-portal">
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        className={cn(
+          "fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border bg-background p-6 shadow-lg duration-200 outline-none data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 sm:max-w-lg",
+          className,
+        )}
+        data-slot="dialog-content"
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            className="absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            data-slot="dialog-close"
+          >
+            <XIcon />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
+      data-slot="dialog-header"
+      {...props}
+    />
+  );
+}
+
+function DialogFooter({
+  children,
+  className,
+  showCloseButton = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)}
+      data-slot="dialog-footer"
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn("text-lg leading-none font-semibold", className)}
+      data-slot="dialog-title"
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn("text-sm text-muted-foreground", className)}
+      data-slot="dialog-description"
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  // fallow-ignore-next-line unused-export
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  // fallow-ignore-next-line unused-export
+  DialogOverlay,
+  // fallow-ignore-next-line unused-export
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};

package/src/content/index.test.ts

@@ -0,0 +1,74 @@
+import { describe, expect, it } from "vitest";
+
+import { authorSchema, postSchema, tagSchema } from "./index";
+
+describe("postSchema", () => {
+  it("accepts a minimal post", () => {
+    const result = postSchema.safeParse({
+      description: "World",
+      pubDate: new Date("2026-01-01"),
+      title: "Hello",
+    });
+    expect(result.success).toBe(true);
+  });
+
+  it("rejects missing title", () => {
+    const result = postSchema.safeParse({
+      description: "World",
+      pubDate: new Date(),
+    });
+    expect(result.success).toBe(false);
+  });
+
+  it("coerces ISO date string to Date", () => {
+    const result = postSchema.safeParse({
+      description: "World",
+      pubDate: "2026-01-01",
+      title: "Hello",
+    });
+    expect(result.success).toBe(true);
+    if (result.success) {
+      expect(result.data.pubDate).toBeInstanceOf(Date);
+    }
+  });
+
+  it("defaults draft to false", () => {
+    const result = postSchema.safeParse({
+      description: "World",
+      pubDate: new Date(),
+      title: "Hello",
+    });
+    if (result.success) {
+      expect(result.data.draft).toBe(false);
+    }
+  });
+
+  it("validates tags as string array", () => {
+    const result = postSchema.safeParse({
+      description: "World",
+      pubDate: new Date(),
+      tags: ["foo", "bar"],
+      title: "Hello",
+    });
+    expect(result.success).toBe(true);
+  });
+});
+
+describe("tagSchema", () => {
+  it("accepts a minimal tag", () => {
+    expect(tagSchema.safeParse({ name: "javascript" }).success).toBe(true);
+  });
+  it("rejects missing name", () => {
+    expect(tagSchema.safeParse({}).success).toBe(false);
+  });
+});
+
+describe("authorSchema", () => {
+  it("accepts a minimal author", () => {
+    expect(authorSchema.safeParse({ name: "Pedro" }).success).toBe(true);
+  });
+  it("validates url field as URL string", () => {
+    const result = authorSchema.safeParse({ name: "Pedro", url: "not-a-url" });
+    expect(result.success).toBe(false);
+  });
+});

package/src/content/index.ts

@@ -0,0 +1,33 @@
+import { z } from "zod";
+
+const postSchema = z.object({
+  author: z.string().optional(),
+  cover: z.string().optional(),
+  coverAlt: z.string().optional(),
+  description: z.string().min(1),
+  draft: z.boolean().default(false),
+  pubDate: z.coerce.date(),
+  series: z.string().optional(),
+  tags: z.array(z.string()).default([]),
+  title: z.string().min(1),
+  updatedDate: z.coerce.date().optional(),
+});
+
+const tagSchema = z.object({
+  description: z.string().optional(),
+  name: z.string().min(1),
+});
+
+const authorSchema = z.object({
+  avatar: z.string().optional(),
+  bio: z.string().optional(),
+  name: z.string().min(1),
+  url: z.string().url().optional(),
+});
+
+type Post = z.infer<typeof postSchema>;
+type Tag = z.infer<typeof tagSchema>;
+type Author = z.infer<typeof authorSchema>;
+
+export { authorSchema, postSchema, tagSchema };
+export type { Author, Post, Tag };

package/src/index.ts

@@ -0,0 +1,3 @@
+export * as content from "./content/index";
+export * as lib from "./lib/index";
+export type { Author, Post, Tag } from "./content/index";

package/src/lib/cn.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from "vitest";
+
+import { cn } from "./cn";
+
+describe("cn", () => {
+  it("merges class names", () => {
+    expect(cn("a", "b")).toBe("a b");
+  });
+  it("dedupes conflicting tailwind classes (last wins)", () => {
+    expect(cn("p-2", "p-4")).toBe("p-4");
+  });
+  it("filters falsy values", () => {
+    expect(cn("a", false, undefined, null, "b")).toBe("a b");
+  });
+});

package/src/lib/cn.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+const cn = (...inputs: Array<ClassValue>) => twMerge(clsx(inputs));
+
+export { cn };

package/src/lib/format-date.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { formatDate } from "./format-date";
+
+describe("formatDate", () => {
+  it("formats a Date in en-US by default", () => {
+    expect(formatDate(new Date("2026-05-20T00:00:00Z"))).toBe("May 20, 2026");
+  });
+  it("respects locale", () => {
+    expect(formatDate(new Date("2026-05-20T00:00:00Z"), "pt-BR")).toMatch(/20 de maio de 2026/iv);
+  });
+  it("respects custom options", () => {
+    expect(
+      formatDate(new Date("2026-05-20T00:00:00Z"), "en-US", {
+        day: "2-digit",
+        month: "short",
+        year: "numeric",
+      }),
+    ).toBe("May 20, 2026");
+  });
+});

package/src/lib/format-date.ts

@@ -0,0 +1,14 @@
+const defaultOptions: Intl.DateTimeFormatOptions = {
+  day: "numeric",
+  month: "long",
+  timeZone: "UTC",
+  year: "numeric",
+};
+
+const formatDate = (
+  date: Date,
+  locale: string = "en-US",
+  options: Intl.DateTimeFormatOptions = defaultOptions,
+) => new Intl.DateTimeFormat(locale, { ...defaultOptions, ...options }).format(date);
+
+export { formatDate };

package/src/lib/get-related-posts.test.ts

@@ -0,0 +1,31 @@
+import { describe, expect, it } from "vitest";
+
+import { getRelatedPosts } from "./get-related-posts";
+
+type TestPost = { data: { tags: Array<string> }; slug: string };
+
+const a: TestPost = { data: { tags: ["x", "y"] }, slug: "a" };
+const b: TestPost = { data: { tags: ["x"] }, slug: "b" };
+const c: TestPost = { data: { tags: ["z"] }, slug: "c" };
+const d: TestPost = { data: { tags: ["x", "y", "z"] }, slug: "d" };
+
+describe("getRelatedPosts", () => {
+  it("excludes the current post", () => {
+    const related = getRelatedPosts(a, [a, b, c, d], 3);
+    expect(related.find((p) => p.slug === "a")).toBeUndefined();
+  });
+  it("ranks by shared tag count (desc)", () => {
+    const related = getRelatedPosts(a, [a, b, c, d], 3);
+    expect(related.map((p) => p.slug)).toEqual(["d", "b", "c"]);
+  });
+  it("limits to n", () => {
+    const related = getRelatedPosts(a, [a, b, c, d], 1);
+    expect(related).toHaveLength(1);
+    expect(related[0].slug).toBe("d");
+  });
+  it("falls back to other posts when no overlap exists", () => {
+    const lonely: TestPost = { data: { tags: ["nothing"] }, slug: "lonely" };
+    const related = getRelatedPosts(lonely, [lonely, b, c], 2);
+    expect(related).toHaveLength(2);
+  });
+});

package/src/lib/get-related-posts.ts

@@ -0,0 +1,19 @@
+type HasTags = { data: { tags: Array<string> }; slug: string };
+
+const countShared = (a: Array<string>, b: Array<string>) => {
+  const setB = new Set(b);
+  return a.filter((tag) => setB.has(tag)).length;
+};
+
+const getRelatedPosts = <T extends HasTags>(current: T, all: Array<T>, n: number) =>
+  all
+    .filter((post) => post.slug !== current.slug)
+    .map((post) => ({
+      post,
+      score: countShared(current.data.tags, post.data.tags),
+    }))
+    .toSorted((x, y) => y.score - x.score)
+    .slice(0, n)
+    .map(({ post }) => post);
+
+export { getRelatedPosts };

package/src/lib/index.ts

@@ -0,0 +1,5 @@
+export { cn } from "./cn";
+export { formatDate } from "./format-date";
+export { getRelatedPosts } from "./get-related-posts";
+export { readingTime } from "./reading-time";
+export { slugify } from "./slugify";

package/src/lib/reading-time.test.ts

@@ -0,0 +1,25 @@
+import { describe, expect, it } from "vitest";
+
+import { readingTime } from "./reading-time";
+
+describe("readingTime", () => {
+  it("returns 1 minute for short text", () => {
+    expect(readingTime("Hello world.")).toEqual({ minutes: 1, words: 2 });
+  });
+  it("scales by words at 200 wpm", () => {
+    const text = "word ".repeat(400).trim();
+    expect(readingTime(text)).toEqual({ minutes: 2, words: 400 });
+  });
+  it("strips HTML tags before counting", () => {
+    expect(readingTime("<p>Hello <strong>world</strong>.</p>")).toEqual({
+      minutes: 1,
+      words: 2,
+    });
+  });
+  it("counts markdown text", () => {
+    expect(readingTime("# Title\n\nSome body **text** here.")).toEqual({
+      minutes: 1,
+      words: 5,
+    });
+  });
+});

package/src/lib/reading-time.ts

@@ -0,0 +1,14 @@
+const WORDS_PER_MINUTE = 200;
+
+const readingTime = (input: string) => {
+  const stripped = input
+    .replaceAll(/<[^>]*>/gv, "")
+    .replaceAll(/[#*_`>\-]/gv, " ")
+    .replaceAll(/\s+/gv, " ")
+    .trim();
+  const words = stripped.length === 0 ? 0 : stripped.split(" ").length;
+  const minutes = Math.max(1, Math.ceil(words / WORDS_PER_MINUTE));
+  return { minutes, words };
+};
+
+export { readingTime };

package/src/lib/slugify.test.ts

@@ -0,0 +1,21 @@
+import { describe, expect, it } from "vitest";
+
+import { slugify } from "./slugify";
+
+describe("slugify", () => {
+  it("lowercases and hyphenates", () => {
+    expect(slugify("Hello World")).toBe("hello-world");
+  });
+  it("strips diacritics", () => {
+    expect(slugify("São Paulo")).toBe("sao-paulo");
+  });
+  it("strips punctuation", () => {
+    expect(slugify("It's a Test!")).toBe("its-a-test");
+  });
+  it("collapses repeated hyphens", () => {
+    expect(slugify("foo  --  bar")).toBe("foo-bar");
+  });
+  it("trims leading/trailing hyphens", () => {
+    expect(slugify("-foo-")).toBe("foo");
+  });
+});

package/src/lib/slugify.ts

@@ -0,0 +1,11 @@
+const slugify = (input: string) =>
+  input
+    .normalize("NFD")
+    .replaceAll(/[̀-ͯ]/gv, "")
+    .toLowerCase()
+    .replaceAll(/[^a-z0-9\s\-]/gv, "")
+    .trim()
+    .replaceAll(/[\s\-]+/gv, "-")
+    .replaceAll(/^-+|-+$/gv, "");
+
+export { slugify };

package/src/styles/globals.css

@@ -0,0 +1,209 @@
+/* This stylesheet is consumed AFTER `@import "tailwindcss"` in the host app.
+   It contributes tokens, base styles, prose, and the dark variant. */
+
+@import "tw-animate-css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme {
+  --color-background: oklch(1 0 0);
+  --color-foreground: oklch(0.145 0 0);
+  --color-card: oklch(1 0 0);
+  --color-card-foreground: oklch(0.145 0 0);
+  --color-popover: oklch(1 0 0);
+  --color-popover-foreground: oklch(0.145 0 0);
+  --color-primary: oklch(0.205 0 0);
+  --color-primary-foreground: oklch(0.985 0 0);
+  --color-secondary: oklch(0.97 0 0);
+  --color-secondary-foreground: oklch(0.205 0 0);
+  --color-muted: oklch(0.97 0 0);
+  --color-muted-foreground: oklch(0.556 0 0);
+  --color-accent: oklch(0.97 0 0);
+  --color-accent-foreground: oklch(0.205 0 0);
+  --color-destructive: oklch(0.577 0.245 27.325);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.922 0 0);
+  --color-input: oklch(0.922 0 0);
+  --color-ring: oklch(0.708 0 0);
+
+  --radius-sm: 0.25rem;
+  --radius-md: 0.5rem;
+  --radius-lg: 0.75rem;
+  --radius-xl: 1rem;
+
+  --font-sans:
+    ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
+  --font-mono:
+    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
+}
+
+.dark {
+  --color-background: oklch(0.145 0 0);
+  --color-foreground: oklch(0.985 0 0);
+  --color-card: oklch(0.145 0 0);
+  --color-card-foreground: oklch(0.985 0 0);
+  --color-popover: oklch(0.145 0 0);
+  --color-popover-foreground: oklch(0.985 0 0);
+  --color-primary: oklch(0.985 0 0);
+  --color-primary-foreground: oklch(0.205 0 0);
+  --color-secondary: oklch(0.269 0 0);
+  --color-secondary-foreground: oklch(0.985 0 0);
+  --color-muted: oklch(0.269 0 0);
+  --color-muted-foreground: oklch(0.708 0 0);
+  --color-accent: oklch(0.269 0 0);
+  --color-accent-foreground: oklch(0.985 0 0);
+  --color-destructive: oklch(0.704 0.191 22.216);
+  --color-destructive-foreground: oklch(0.985 0 0);
+  --color-border: oklch(0.269 0 0);
+  --color-input: oklch(0.269 0 0);
+  --color-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+  }
+  html {
+    -webkit-text-size-adjust: 100%;
+  }
+  body {
+    background-color: var(--color-background);
+    color: var(--color-foreground);
+    font-family: var(--font-sans);
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+    line-height: 1.6;
+  }
+
+  :focus-visible {
+    outline: 2px solid var(--color-ring);
+    outline-offset: 2px;
+  }
+
+  button:not(:disabled),
+  [role="button"]:not(:disabled) {
+    cursor: pointer;
+  }
+
+  ::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+  }
+  ::-webkit-scrollbar-track {
+    background: transparent;
+  }
+  ::-webkit-scrollbar-thumb {
+    background: var(--color-border);
+    border-radius: 6px;
+  }
+  * {
+    scrollbar-width: thin;
+    scrollbar-color: var(--color-border) transparent;
+  }
+}
+
+@layer components {
+  .prose {
+    max-width: 65ch;
+    color: var(--color-foreground);
+    font-size: 1rem;
+    line-height: 1.75;
+  }
+  .prose :where(h1, h2, h3, h4, h5, h6) {
+    color: var(--color-foreground);
+    font-weight: 700;
+    line-height: 1.25;
+    margin-top: 2em;
+    margin-bottom: 0.75em;
+    scroll-margin-top: 4rem;
+  }
+  .prose h1 {
+    font-size: 2.25rem;
+  }
+  .prose h2 {
+    font-size: 1.75rem;
+  }
+  .prose h3 {
+    font-size: 1.375rem;
+  }
+  .prose p {
+    margin-top: 1em;
+    margin-bottom: 1em;
+  }
+  .prose a {
+    color: var(--color-accent-foreground);
+    text-decoration: underline;
+    text-underline-offset: 0.2em;
+    text-decoration-color: var(--color-border);
+    transition: text-decoration-color 0.15s;
+  }
+  .prose a:hover {
+    text-decoration-color: var(--color-accent-foreground);
+  }
+  .prose blockquote {
+    margin: 1.5em 0;
+    padding-left: 1em;
+    border-left: 3px solid var(--color-border);
+    color: var(--color-muted-foreground);
+    font-style: italic;
+  }
+  .prose code {
+    font-family: var(--font-mono);
+    font-size: 0.875em;
+    background-color: var(--color-muted);
+    padding: 0.125em 0.375em;
+    border-radius: var(--radius-sm);
+  }
+  .prose pre {
+    margin: 1.5em 0;
+    padding: 1em 1.25em;
+    background-color: var(--color-muted);
+    border-radius: var(--radius-md);
+    overflow-x: auto;
+    font-size: 0.875rem;
+    line-height: 1.6;
+  }
+  .prose pre code {
+    background: none;
+    padding: 0;
+    font-size: inherit;
+  }
+  .prose ul,
+  .prose ol {
+    margin: 1em 0;
+    padding-left: 1.5em;
+  }
+  .prose li {
+    margin: 0.25em 0;
+  }
+  .prose ul {
+    list-style-type: disc;
+  }
+  .prose ol {
+    list-style-type: decimal;
+  }
+  .prose img {
+    border-radius: var(--radius-md);
+    margin: 1.5em 0;
+  }
+  .prose hr {
+    margin: 2em 0;
+    border: 0;
+    border-top: 1px solid var(--color-border);
+  }
+  .prose table {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 1.5em 0;
+  }
+  .prose th,
+  .prose td {
+    padding: 0.5em 0.75em;
+    border-bottom: 1px solid var(--color-border);
+    text-align: left;
+  }
+}

package/src/tailwind-preset.ts

@@ -0,0 +1,12 @@
+import plugin from "tailwindcss/plugin";
+
+const awesomenessPreset = plugin(({ addUtilities, addVariant }) => {
+  addVariant("dark", "&:is(.dark *)");
+
+  addUtilities({
+    ".icon-inline-end": { marginInlineStart: "0.375rem" },
+    ".icon-inline-start": { marginInlineEnd: "0.375rem" },
+  });
+});
+
+export default awesomenessPreset;