initial docs

components/changelog/change-group.tsx

@@ -0,0 +1,45 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+import { Badge } from "@/components/ui/badge";
+
+type ChangeType = "Added" | "Improved" | "Fixed" | "Deprecated" | "Removed";
+
+interface ChangeGroupProps {
+  type: ChangeType;
+  changes: string[];
+  expanded: boolean;
+}
+
+const typeColors: Record<ChangeType, string> = {
+  Added: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400",
+  Improved: "bg-blue-500/10 text-blue-600 dark:text-blue-400",
+  Fixed: "bg-amber-500/10 text-amber-600 dark:text-amber-400",
+  Deprecated: "bg-red-500/10 text-red-600 dark:text-red-400",
+  Removed: "bg-slate-500/10 text-slate-600 dark:text-slate-400"
+};
+
+export function ChangeGroup({ type, changes, expanded }: ChangeGroupProps) {
+  const visibleChanges = expanded ? changes : changes.slice(0, 5);
+  const hasMore = changes.length > 5;
+
+  return (
+    <div className="space-y-3">
+      <Badge variant="outline" className={cn("font-medium", typeColors[type])}>
+        {type}
+      </Badge>
+      <ul className="list-disc list-inside space-y-2 text-muted-foreground pl-2">
+        {visibleChanges.map((change, i) => (
+          <li key={i} id="changelog" className="text-sm leading-relaxed marker:text-muted-foreground/60">
+            {change}
+          </li>
+        ))}
+        {!expanded && hasMore && (
+          <li id="changelog-more" className="text-sm text-muted-foreground/60">
+            +{changes.length - 5} more improvements
+          </li>
+        )}
+      </ul>
+    </div>
+  );
+}

components/changelog/floating-version.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import { useState, useEffect } from "react";
+import { History } from "lucide-react";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Separator } from "@/components/ui/separator";
+
+interface FloatingVersionTocProps {
+  versions: { version: string; date: string }[];
+}
+
+export function FloatingVersionToc({ versions }: FloatingVersionTocProps) {
+  const [open, setOpen] = useState(false);
+  const [activeVersion, setActiveVersion] = useState(versions[0]?.version || "");
+
+  useEffect(() => {
+    const handleIntersection = (entries: IntersectionObserverEntry[]) => {
+      entries.forEach((entry) => {
+        if (entry.isIntersecting) {
+          setActiveVersion(entry.target.id.replace("version-", ""));
+        }
+      });
+    };
+
+    const observer = new IntersectionObserver(handleIntersection, {
+      root: null,
+      rootMargin: "-64px 0px -50% 0px",
+      threshold: 0.25,
+    });
+
+    versions.forEach(({ version }) => {
+      const section = document.getElementById(`version-${version}`);
+      if (section) observer.observe(section);
+    });
+
+    return () => observer.disconnect();
+  }, [versions]);
+
+  const handleScrollToVersion = (version: string) => {
+    const element = document.getElementById(`version-${version}`);
+    if (element) {
+      setTimeout(() => {
+        element.scrollIntoView({ behavior: "smooth", block: "start" });
+      }, 100);
+      setActiveVersion(version);
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div className="fixed bottom-4 right-4 lg:hidden z-50">
+      <Popover open={open} onOpenChange={setOpen}>
+        <PopoverTrigger asChild>
+          <Button variant="outline" className="rounded-full shadow-lg px-4 py-2 flex items-center gap-2">
+            <History className="w-5 h-5" />
+                Version - {activeVersion}
+          </Button>
+        </PopoverTrigger>
+        <PopoverContent className="w-56 p-2 bg-background shadow-md rounded-lg">
+            <ScrollArea className="h-72">
+            <h2 className="px-4 py-2 font-semibold">Version History</h2>
+            <ul className="space-y-1">
+                {versions.map(({ version }) => (
+                <li key={version}>
+                    <Separator />
+                    <Button
+                    variant="ghost"
+                    className={cn("w-full justify-start text-sm", {
+                        "text-primary font-bold": activeVersion === version,
+                    })}
+                    onClick={() => handleScrollToVersion(version)}
+                    >
+                    v.{version}
+                    </Button>
+                </li>
+                ))}
+            </ul>
+            </ScrollArea>
+        </PopoverContent>
+      </Popover>
+    </div>
+  );
+}

components/changelog/version-entry.tsx

@@ -0,0 +1,113 @@
+"use client";
+
+import { useState } from "react";
+import { VersionTag } from "./version-tag";
+import { ChangeGroup } from "./change-group";
+import { formatDate2 } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import Image from "next/image";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import { Separator } from "@/components/ui/separator";
+
+interface VersionEntryProps {
+  version: string;
+  date: string;
+  description?: string;
+  image?: string;
+  changes: {
+    Added?: string[];
+    Improved?: string[];
+    Fixed?: string[];
+    Deprecated?: string[];
+    Removed?: string[];
+  };
+  isLast?: boolean;
+}
+
+export function VersionEntry({ 
+  version, 
+  date, 
+  description,
+  image, 
+  changes,
+  isLast 
+}: VersionEntryProps) {
+  const [expanded, setExpanded] = useState(false);
+
+  return (
+    <div id={`v${version}`} className="relative scroll-mt-24">
+      <div className="relative pb-12">
+        {/* Version header */}
+        <div className="flex flex-col gap-4 mb-6">
+          <div className="flex items-center gap-3">
+            <VersionTag version={version} />
+            <time className="text-sm text-muted-foreground">
+              {formatDate2(date)}
+            </time>
+          </div>
+          
+          {description && (
+            <p className="text-dark text-xl">{description}</p>
+          )}
+
+            {image && (
+            <div className="relative w-full h-0 pb-[56.25%] rounded-lg overflow-hidden border">
+              <Image
+              src={image}
+              alt={`Version ${version} preview`}
+              fill
+              className="object-cover"
+              priority
+              quality={90}
+              sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
+              />
+            </div>
+            )}
+        </div>
+
+        {/* Changes */}
+        <div className="space-y-6">
+          {Object.entries(changes).map(([type, items]) => (
+            items && items.length > 0 && (
+              <ChangeGroup 
+                key={type} 
+                type={type as keyof typeof changes}
+                changes={items}
+                expanded={expanded}
+              />
+            )
+          ))}
+        </div>
+
+        {/* Show more/less button */}
+        {Object.values(changes).some(items => items && items.length > 5) && (
+          <Button
+            variant="ghost"
+            size="sm"
+            onClick={() => setExpanded(!expanded)}
+            className="mt-4 text-muted-foreground hover:text-foreground"
+          >
+            {expanded ? (
+              <>
+                Show less
+                <ChevronUpIcon className="ml-2 h-4 w-4" />
+              </>
+            ) : (
+              <>
+                Show more
+                <ChevronDownIcon className="ml-2 h-4 w-4" />
+              </>
+            )}
+          </Button>
+        )}
+      </div>
+
+      {/* Version divider */}
+      {!isLast && (
+        <div className="absolute left-0 bottom-0 w-full">
+          <Separator className="my-8" />
+        </div>
+      )}
+    </div>
+  );
+}

components/changelog/version-tag.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import { cn } from "@/lib/utils";
+
+export function VersionTag({ version }: { version: string }) {
+  return (
+    <span className={cn(
+      "inline-flex items-center rounded-full px-2.5 py-0.5 text-sm font-medium",
+      "bg-primary/10 text-primary"
+    )}>
+      v{version}
+    </span>
+  );
+}

components/changelog/version-toc.tsx

@@ -0,0 +1,90 @@
+"use client";
+
+import { useEffect, useState } from "react";
+import { cn, formatDate2 } from "@/lib/utils";
+import { History } from "lucide-react";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+interface VersionTocProps {
+  versions: Array<{
+    version: string;
+    date: string;
+  }>;
+}
+
+export function VersionToc({ versions }: VersionTocProps) {
+  const [activeId, setActiveId] = useState<string | null>(null);
+
+  useEffect(() => {
+    // Handle initial hash
+    const hash = window.location.hash.slice(1);
+    if (hash) {
+      setActiveId(hash);
+    }
+
+    // Set up intersection observer
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            setActiveId(id);
+            // Use pushState instead of replaceState to maintain history
+            window.history.pushState(null, '', `#${id}`);
+          }
+        });
+      },
+      {
+        threshold: 0.2,
+        rootMargin: '-20% 0px -60% 0px'
+      }
+    );
+
+    // Observe version elements
+    versions.forEach(({ version }) => {
+      const element = document.getElementById(`v${version}`);
+      if (element) observer.observe(element);
+    });
+
+    return () => observer.disconnect();
+  }, [versions]);
+
+  return (
+    <aside className="lg:flex hidden toc flex-[1.5] min-w-[238px] pt-8 sticky top-16 h-[calc(100vh-4rem)]">
+      <div className="flex flex-col gap-2 w-full">
+        <div className="flex items-center gap-2 mb-2">
+          <History className="w-4 h-4" />
+          <h3 className="font-medium text-sm">Version History</h3>
+        </div>
+        <ScrollArea className="h-full">
+          <div className="flex flex-col gap-1.5 text-sm dark:text-stone-300/85 text-stone-800 pr-4">
+            {versions.map(({ version, date }) => (
+              <a
+                key={version}
+                href={`#v${version}`}
+                className={cn(
+                  "hover:text-foreground transition-colors py-1",
+                  activeId === `v${version}` && "font-medium text-primary"
+                )}
+                onClick={(e) => {
+                  e.preventDefault();
+                  const element = document.getElementById(`v${version}`);
+                  if (element) {
+                    element.scrollIntoView({ behavior: 'smooth' });
+                    setActiveId(`v${version}`);
+                    window.history.pushState(null, '', `#v${version}`);
+                  }
+                }}
+              >
+                v{version}
+                <span className="text-xs text-muted-foreground ml-2">
+                  {formatDate2(date)}
+                </span>
+              </a>
+            ))}
+          </div>
+        </ScrollArea>
+      </div>
+    </aside>
+  );
+}