dockerize, add category pages, and footer

Dockerfile

@@ -0,0 +1,49 @@
+# syntax=docker/dockerfile:1.4
+
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+WORKDIR /app
+
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+# Next.js collects completely anonymous telemetry data about general usage.
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN npm run build
+
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+
+RUN \
+    addgroup --system --gid 1001 nodejs; \
+    adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+
+# Automatically leverage output traces to reduce image size
+COPY --from=builder --chown=1001:1001 /app/.next/standalone ./
+COPY --from=builder --chown=1001:1001 /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 3000
+
+ENV PORT 3000
+ENV HOSTNAME 0.0.0.0
+CMD ["node", "server.js"]

app/category/[slug]/page.tsx

@@ -0,0 +1,9 @@
+import CategoryContent from '@/components/category/CategoryContent';
+
+export default function CategoryPage({ params }: { params: { slug: string } }) {
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <CategoryContent slug={params.slug} />
+    </div>
+  );
+}

app/page.tsx

@@ -1,6 +1,8 @@
 "use client"
 import PillLink from '@/components/PillLink';
-import CategoryRow from '@/components/CategoryRow';
+import CategoryRow from '@/components/category/CategoryRow';
+import InstallLine from '@/components/InstallLine';
+import Footer from '@/components/Footer';
 import { categories } from "@/lib/categories";
 
 export default function Home() {
@@ -10,12 +12,18 @@ export default function Home() {
       <h1 className="text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tighter mb-4">
         Playground
       </h1>
-      <p className="font-bold text-slate-700 font-mono italic text-lg mb-10">
+      <p className="font-bold text-slate-700 font-mono italic text-lg mb-6">
         The fastest way to get started with Transformers.js.
       </p>
+      <div className="mx-auto mb-12">
+        <InstallLine packageName="@huggingface/transformers" />
+      </div>
       <div className="mt-24">
         <CategoryRow categories={categories} />
       </div>
+      <div className="mt-64">
+        <Footer />
+      </div>
     </div>
   );
 }

components/Footer.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Link from 'next/link';
+import { categories } from '../lib/categories';
+
+const Footer: React.FC = () => {
+  return (
+    <footer className="bg-emerald-400/80 p-20 relative overflow-hidden rounded-xl">
+      <div className="max-w-7xl mx-auto relative z-10">
+        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-8 mb-12">
+          {categories.map((category) => (
+            <div key={category.slug} className="text-center sm:text-left">
+              <Link 
+                href={`/category/${category.slug}`}
+                className="text-lg font-bold text-emerald-800 hover:text-emerald-900 transition-colors duration-300 ease-in-out relative group"
+              >
+                {category.title}
+                <span className="absolute left-0 right-0 bottom-0 h-0.5 bg-emerald-800 transform scale-x-0 group-hover:scale-x-100 transition-transform duration-300 ease-in-out"></span>
+              </Link>
+            </div>
+          ))}
+        </div>
+      </div>
+      
+      <div className="absolute inset-x-0 bottom-0 text-center py-4">
+        <h1 className="text-6xl md:text-8xl font-black text-red-500 tracking-tighter transform -skew-x-6">
+          TRANSFORMERS.JS
+        </h1>
+      </div>
+      
+      <div className="absolute inset-0 flex items-center justify-center opacity-5">
+        <div className="w-96 h-96 bg-black rounded-full"></div>
+      </div>
+    </footer>
+  );
+};
+
+export default Footer;

components/InstallLine.tsx

@@ -0,0 +1,41 @@
+import React, { useState } from 'react';
+import { Clipboard, Check } from 'lucide-react';
+
+const InstallLine: React.FC<{ packageName: string }> = ({ packageName }) => {
+  const [hasCopied, setHasCopied] = useState(false);
+  const command = `npm i ${packageName}`;
+
+  const copyToClipboard = () => {
+    navigator.clipboard.writeText(command);
+    setHasCopied(true);
+    setTimeout(() => setHasCopied(false), 2000);
+  };
+
+  return (
+    <div className="flex items-center justify-center p-2">
+      <div 
+        className="flex max-w-sm w-full items-center justify-between bg-white border border-gray-200 rounded-md py-1.5 px-2 font-mono text-xs shadow-sm hover:shadow transition-all duration-200 ease-in-out cursor-pointer"
+        onClick={copyToClipboard}
+        role="button"
+        tabIndex={0}
+        aria-label="Copy npm install command"
+      >
+        <div className="flex items-center font-bold space-x-2 overflow-x-auto">
+          <span className="text-gray-400 select-none">$</span>
+          <span className="text-blue-500 font-semibold">npm</span>
+          <span className="text-green-600">i</span>
+          <span className="text-pink-500">{packageName}</span>
+        </div>
+        <div className="p-1 flex-shrink-0" aria-hidden="true">
+          {hasCopied ? (
+            <Check className="size-4 text-emerald-500" />
+          ) : (
+            <Clipboard className="size-4 text-gray-400 hover:text-gray-600" />
+          )}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default InstallLine;

components/Navbar.tsx

@@ -5,19 +5,24 @@ import { FileText, Github } from "lucide-react"
 export default function Navbar() {
   return (
     <nav className="border-b">
-      <div className="container flex justify-end items-center py-4">
-        <Button variant="ghost" asChild className="p-2 sm:p-4 mr-2">
-          <Link href="https://huggingface.co/docs/transformers.js/en/index" target="_blank" rel="noopener noreferrer" className="flex items-center">
-            <FileText className="h-4 w-4 mr-2" />
-            <span className="font-medium">Docs</span>
-          </Link>
-        </Button>
-        <Button variant="ghost" asChild className="p-2 sm:p-4">
-          <Link href="https://github.com/cfahlgren1/transformersjs-playground" target="_blank" rel="noopener noreferrer" className="flex items-center">
-            <Github className="h-4 w-4 mr-2" />
-            <span className="font-medium hidden sm:inline">Star on GitHub</span>
-          </Link>
-        </Button>
+      <div className="container mx-auto flex items-center justify-between py-4 px-4 sm:px-8">
+        <Link href="/" className="text-lg font-bold">
+          Playground
+        </Link>
+        <div className="flex items-center">
+          <Button variant="ghost" asChild className="p-2 sm:p-4 mr-2">
+            <Link href="https://huggingface.co/docs/transformers.js/en/index" target="_blank" rel="noopener noreferrer" className="flex items-center">
+              <FileText className="h-4 w-4 mr-2" />
+              <span className="font-medium">Docs</span>
+            </Link>
+          </Button>
+          <Button variant="ghost" asChild className="p-2 sm:p-4">
+            <Link href="https://github.com/cfahlgren1/transformersjs-playground" target="_blank" rel="noopener noreferrer" className="flex items-center">
+              <Github className="h-4 w-4 mr-2" />
+              <span className="font-medium hidden sm:inline">Star on GitHub</span>
+            </Link>
+          </Button>
+        </div>
       </div>
     </nav>
   )

components/PillLink.tsx

@@ -1,5 +1,4 @@
 import Link from 'next/link';
-import { Badge } from '@/components/ui/badge';
 
 interface PillLinkProps {
   text: string;
@@ -8,32 +7,21 @@ interface PillLinkProps {
   newText?: string;
 }
 
-const PillLink: React.FC<PillLinkProps> = ({ text, link, isNew = false, newText = 'NEW' }) => {
-  return (
-    <Link target="_blank" href={link}>
-      <Badge 
-        className="
-          mb-4 bg-gray-900 px-3 py-1.5 text-xs font-medium text-white
-          shadow-md transition-all duration-200 
-          hover:bg-gray-800 hover:shadow-lg
-          transform hover:scale-105
-          rounded-full relative
-          overflow-hidden
-          group
-        "
-      >
-        <span className="relative z-10">
-          {(isNew || newText) && (
-            <span className="mr-2 rounded-full bg-white px-1.5 py-0.5 text-[10px] font-bold text-gray-900">
-              {newText}
-            </span>
-          )}
-          {text}
+const PillLink: React.FC<PillLinkProps> = ({ text, link, isNew = false, newText = 'NEW' }) => (
+  <Link 
+    href={link} 
+    target="_blank" 
+    className="inline-flex items-center bg-white border border-gray-200 rounded-full py-1 px-2.5 mb-3 shadow-sm hover:shadow transition-all duration-200 ease-in-out cursor-pointer"
+  >
+    <span className="font-mono text-xs flex items-center">
+      {(isNew || newText) && (
+        <span className="mr-1.5 rounded-full bg-red-500 px-2 py-0.5 text-[8px] font-bold text-white">
+          {newText}
         </span>
-        <span className="absolute inset-0 bg-gradient-to-r from-white to-gray-300 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
-      </Badge>
-    </Link>
-  );
-};
+      )}
+      <span className="text-gray-800 text-[11px]">{text}</span>
+    </span>
+  </Link>
+);
 
 export default PillLink;

components/{CategoryCard.tsx → category/CategoryCard.tsx}

@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'next/link';
-import type { Category } from '../types/categories';
-import { getColorConfig } from '../lib/utils';
+import type { Category } from '../../types/categories';
+import { getColorConfig } from '../../lib/utils';
 
 type CategoryCardProps = Category;
 

components/category/CategoryContent.tsx

@@ -0,0 +1,99 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+import Link from 'next/link';
+import { notFound } from 'next/navigation';
+import { categories } from '@/lib/categories';
+import type { Category } from '@/types/categories';
+import { getColorConfig, cn } from '@/lib/utils';
+
+export default function CategoryContent({ slug }: { slug: string }) {
+  const [category, setCategory] = useState<Category | null>(null);
+  const [isLoading, setIsLoading] = useState(true);
+
+  useEffect(() => {
+    const foundCategory = categories.find((cat) => cat.slug === slug);
+    setCategory(foundCategory || null);
+    setIsLoading(false);
+  }, [slug]);
+
+  if (isLoading) {
+    return <div className="flex justify-center items-center h-screen">Loading...</div>;
+  }
+
+  if (!category) {
+    notFound();
+  }
+
+  const colorConfig = getColorConfig(category.colorName);
+
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <Breadcrumb category={category} colorConfig={colorConfig} />
+      <Header category={category} colorConfig={colorConfig} />
+      <div className="mt-12">
+        <DemoCards category={category} colorConfig={colorConfig} />
+      </div>
+    </div>
+  );
+}
+
+
+function Breadcrumb({ category, colorConfig }: { category: Category; colorConfig: ReturnType<typeof getColorConfig> }) {
+  return (
+    <nav className="text-sm mb-4">
+      <ol className="list-none p-0 inline-flex">
+        <li className="flex items-center">
+          <Link href="/" className="text-slate-600 hover:underline">
+            Home
+          </Link>
+          <span className="mx-2 text-slate-400">/</span>
+        </li>
+        <li className={cn("text-opacity-80", colorConfig.text)}>{category.title}</li>
+      </ol>
+    </nav>
+  );
+}
+
+function Header({ category, colorConfig }: { category: Category; colorConfig: ReturnType<typeof getColorConfig> }) {
+  return (
+    <header className="text-center">
+      <h1 className={cn("text-4xl sm:text-5xl md:text-6xl font-extrabold tracking-tighter mb-4", colorConfig.text)}>
+        {category.title}
+      </h1>
+      <p className="font-bold text-slate-700 font-mono italic text-lg mb-10">
+        {category.description}
+      </p>
+    </header>
+  );
+}
+
+function DemoCards({ category, colorConfig }: { category: Category; colorConfig: ReturnType<typeof getColorConfig> }) {
+  if (!category.demos || category.demos.length === 0) {
+    return (
+      <div className="flex flex-col items-center justify-center h-64 md:h-96 px-4 py-8 bg-gray-50 rounded-lg shadow-inner">
+        <div className={cn("text-6xl mb-4", colorConfig.text)}>
+          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="black" className="w-16 h-16">
+            <path fillRule="evenodd" d="M12 2.25c-5.385 0-9.75 4.365-9.75 9.75s4.365 9.75 9.75 9.75 9.75-4.365 9.75-9.75S17.385 2.25 12 2.25zm-2.625 6c-.54 0-.828.419-.936.634a1.96 1.96 0 00-.189.866c0 .298.059.605.189.866.108.215.395.634.936.634.54 0 .828-.419.936-.634.13-.26.189-.568.189-.866 0-.298-.059-.605-.189-.866-.108-.215-.395-.634-.936-.634zm4.314.634c.108-.215.395-.634.936-.634.54 0 .828.419.936.634.13.26.189.568.189.866 0 .298-.059.605-.189.866-.108.215-.395.634-.936.634-.54 0-.828-.419-.936-.634a1.96 1.96 0 01-.189-.866c0-.298.059-.605.189-.866zm-4.34 7.964a.75.75 0 01-1.061-1.06 5.236 5.236 0 013.73-1.538 5.236 5.236 0 013.695 1.538.75.75 0 11-1.061 1.06 3.736 3.736 0 00-2.639-1.098 3.736 3.736 0 00-2.664 1.098z" clipRule="evenodd" />
+          </svg>
+        </div>
+        <h2 className={cn("text-2xl md:text-3xl font-bold text-center mb-2")}>
+          No demos available yet
+        </h2>
+        <p className="text-base md:text-lg text-gray-600 text-center max-w-md">
+          We&apos;re working on exciting demos for this category. Check back soon to see what&apos;s new!
+        </p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+      {category.demos.map((Demo, index) => (
+        <div key={index} className={cn("rounded-lg shadow-md p-6", colorConfig.bg)}>
+          <Demo />
+        </div>
+      ))}
+    </div>
+  );
+}

components/{CategoryRow.tsx → category/CategoryRow.tsx}

@@ -1,5 +1,5 @@
 import { motion } from 'framer-motion';
-import CategoryCard from '@/components/CategoryCard';
+import CategoryCard from '@/components/category/CategoryCard';
 import { Category } from '@/types/categories';
 
 interface CategoryRowProps {

lib/icons/ClassificationIcon.tsx

@@ -23,17 +23,20 @@ const ClassificationIcon: React.FC<ClassificationIconProps> = ({ className = ''
       <text x="130" y="25" fill="#7e22ce" fontSize="12" fontWeight="bold">Output</text>
       
       {/* Classification bars */}
+      {/* Sport */}
       <rect x="130" y="35" width="65" height="14" fill="#d8b4fe" rx="3" ry="3" />
       <text x="135" y="45" fill="#6b21a8" fontSize="10" fontWeight="bold">Sport</text>
-      <text x="188" y="45" fill="#6b21a8" fontSize="10" textAnchor="end">0.800</text>
+      <text x="200" y="45" fill="#6b21a8" fontSize="10" textAnchor="end">0.800</text>
       
+      {/* Food */}
       <rect x="130" y="53" width="26" height="14" fill="#d8b4fe" rx="3" ry="3" />
       <text x="135" y="63" fill="#6b21a8" fontSize="10" fontWeight="bold">Food</text>
-      <text x="188" y="63" fill="#6b21a8" fontSize="10" textAnchor="end">0.150</text>
+      <text x="200" y="63" fill="#6b21a8" fontSize="10" textAnchor="end">0.150</text>
       
+      {/* Music */}
       <rect x="130" y="71" width="9" height="14" fill="#d8b4fe" rx="3" ry="3" />
       <text x="135" y="81" fill="#6b21a8" fontSize="10" fontWeight="bold">Music</text>
-      <text x="188" y="81" fill="#6b21a8" fontSize="10" textAnchor="end">0.050</text>
+      <text x="200" y="81" fill="#6b21a8" fontSize="10" textAnchor="end">0.050</text>
     </svg>
   );
 };

next.config.mjs

@@ -1,7 +1,7 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
-    output: 'export',
-    distDir: 'dist',
+    output: "standalone",
+    reactStrictMode: true,
 };
 
 export default nextConfig;

types/categories.ts

@@ -10,4 +10,5 @@ export interface Category {
   status: CategoryStatus;
   colorName: string;
   graphic: React.ComponentType<React.SVGProps<SVGSVGElement>>; 
+  demos?: React.ComponentType[];
 }