cistack 5.5.0 → 6.1.0

package/product-site/app/[lang]/page.tsx

@@ -0,0 +1,19 @@
+import { notFound } from "next/navigation";
+import { getDictionary, hasLocale, Locale } from "@/lib/dictionaries";
+import HomeClient from "@/components/HomeClient";
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ lang: string }>;
+}) {
+  const { lang } = await params;
+
+  if (!hasLocale(lang)) {
+    notFound();
+  }
+
+  const dict = await getDictionary(lang as Locale);
+
+  return <HomeClient dict={dict} lang={lang as Locale} />;
+}

package/product-site/app/globals.css

@@ -0,0 +1,228 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --color-background: var(--background);
+  --color-foreground: var(--foreground);
+  --font-sans: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
+  --font-mono: var(--font-fira-code), 'Fira Code', monospace;
+  --font-heading: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+html {
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+body {
+  font-family: var(--font-dm-sans), ui-sans-serif, system-ui, sans-serif;
+  min-height: 100vh;
+}
+
+.font-mono,
+code,
+kbd,
+samp,
+pre {
+  font-family: var(--font-fira-code), 'Fira Code', monospace !important;
+  font-variant-ligatures: discretionary-ligatures;
+}
+
+/* Subtle custom scrollbar */
+.custom-scrollbar::-webkit-scrollbar {
+  width: 4px;
+}
+.custom-scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb {
+  background: #e4e4e7;
+  border-radius: 999px;
+}
+.custom-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: #d4d4d8;
+}
+
+.page-root :is(.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-xs).text-zinc-200 {
+  color: var(--color-zinc-500);
+}
+
+.page-root :is(.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-xs).text-zinc-300 {
+  color: var(--color-zinc-600);
+}
+
+.page-root :is(.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-xs).text-zinc-400 {
+  color: var(--color-zinc-700);
+}
+
+.page-root :is(.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[12px\], .text-xs).text-zinc-500 {
+  color: var(--color-zinc-800);
+}
+
+@media (max-width: 767px) {
+  .page-root :is(.text-\[9px\], .text-\[10px\], .text-\[11px\], .text-\[12px\]) {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+
+  .page-root .text-xs {
+    font-size: 0.9375rem;
+    line-height: 1.5;
+  }
+}
+
+.page-root .text-zinc-300 {
+  color: var(--color-zinc-500);
+}
+
+.page-root .text-zinc-400 {
+  color: var(--color-zinc-600);
+}
+
+.page-root .text-zinc-500 {
+  color: var(--color-zinc-700);
+}
+
+.page-root .bg-zinc-950 .text-zinc-300 {
+  color: var(--color-zinc-300);
+}
+
+.page-root .bg-zinc-950 .text-zinc-200 {
+  color: var(--color-zinc-200);
+}
+
+.page-root .bg-zinc-950 .text-zinc-400 {
+  color: var(--color-zinc-300);
+}
+
+.page-root .bg-zinc-950 .text-zinc-500 {
+  color: var(--color-zinc-400);
+}
+
+.page-root .bg-zinc-950 .text-zinc-700 {
+  color: var(--color-zinc-400);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: oklch(0.205 0 0);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: oklch(0.708 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: oklch(0.205 0 0);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: oklch(0.708 0 0);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.922 0 0);
+  --primary-foreground: oklch(0.205 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: oklch(0.556 0 0);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: oklch(0.488 0.243 264.376);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: oklch(0.556 0 0);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/product-site/app/manifest.ts

@@ -0,0 +1,20 @@
+import { MetadataRoute } from 'next'
+
+export default function manifest(): MetadataRoute.Manifest {
+  return {
+    name: 'cistack | Automated GitHub Actions',
+    short_name: 'cistack',
+    description: 'Deep-scans your repository to generate production-ready GitHub Actions workflows.',
+    start_url: '/',
+    display: 'standalone',
+    background_color: '#ffffff',
+    theme_color: '#000000',
+    icons: [
+      {
+        src: '/favicon.ico',
+        sizes: 'any',
+        type: 'image/x-icon',
+      },
+    ],
+  }
+}

package/product-site/app/robots.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next'
+
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: '/private/',
+    },
+    sitemap: 'https://cistack.edwinvakayil.info/sitemap.xml',
+  }
+}

package/product-site/app/sitemap.ts

@@ -0,0 +1,12 @@
+import { MetadataRoute } from 'next'
+
+export default function sitemap(): MetadataRoute.Sitemap {
+  return [
+    {
+      url: 'https://cistack.edwinvakayil.info',
+      lastModified: new Date(),
+      changeFrequency: 'weekly',
+      priority: 1,
+    },
+  ]
+}

package/product-site/components/CanvasText.tsx

@@ -0,0 +1,219 @@
+"use client";
+
+import React, { useEffect, useRef, useState, useCallback } from "react";
+
+function cn(...classes: (string | undefined | null | false)[]) {
+  return classes.filter(Boolean).join(" ");
+}
+
+interface CanvasTextProps {
+  text: string;
+  className?: string;
+  backgroundClassName?: string;
+  colors?: string[];
+  animationDuration?: number;
+  lineWidth?: number;
+  lineGap?: number;
+  curveIntensity?: number;
+  overlay?: boolean;
+}
+
+function resolveColor(color: string): string {
+  if (color.startsWith("var(")) {
+    const varName = color.slice(4, -1).trim();
+    const resolved = getComputedStyle(document.documentElement)
+      .getPropertyValue(varName)
+      .trim();
+    return resolved || color;
+  }
+  return color;
+}
+
+export function CanvasText({
+  text,
+  className = "",
+  backgroundClassName = "bg-white dark:bg-neutral-950",
+  colors = ["#ff6b6b", "#4ecdc4", "#45b7d1", "#96ceb4", "#ffeaa7", "#dfe6e9"],
+  animationDuration = 5,
+  lineWidth = 1.5,
+  lineGap = 10,
+  curveIntensity = 60,
+  overlay = false,
+}: CanvasTextProps) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const textRef = useRef<HTMLSpanElement>(null);
+  const bgRef = useRef<HTMLSpanElement>(null);
+  const animationRef = useRef<number>(0);
+  const startTimeRef = useRef<number>(0);
+  const [bgColor, setBgColor] = useState("#0a0a0a");
+  const [resolvedColors, setResolvedColors] = useState<string[]>([]);
+  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
+  const [font, setFont] = useState("");
+
+  const updateColors = useCallback(() => {
+    if (bgRef.current) {
+      const computed = window.getComputedStyle(bgRef.current);
+      setBgColor(computed.backgroundColor);
+    }
+    const resolved = colors.map(resolveColor);
+    setResolvedColors(resolved);
+  }, [colors]);
+
+  useEffect(() => {
+    updateColors();
+
+    const observer = new MutationObserver(updateColors);
+    observer.observe(document.documentElement, {
+      attributes: true,
+      attributeFilter: ["class"],
+    });
+
+    return () => observer.disconnect();
+  }, [updateColors]);
+
+  useEffect(() => {
+    const textEl = textRef.current;
+    if (!textEl) return;
+
+    const updateDimensions = () => {
+      const rect = textEl.getBoundingClientRect();
+      const computed = window.getComputedStyle(textEl);
+      setDimensions({
+        width: Math.ceil(rect.width) + 8 || 400,
+        height: Math.ceil(rect.height) || 200,
+      });
+      setFont(
+        `${computed.fontWeight} ${computed.fontSize} ${computed.fontFamily}`,
+      );
+    };
+
+    updateDimensions();
+
+    const resizeObserver = new ResizeObserver(updateDimensions);
+    resizeObserver.observe(textEl);
+
+    return () => resizeObserver.disconnect();
+  }, [text, className]);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (
+      !canvas ||
+      resolvedColors.length === 0 ||
+      dimensions.width === 0 ||
+      !font
+    )
+      return;
+
+    const ctx = canvas.getContext("2d", { alpha: true });
+    if (!ctx) return;
+
+    const { width, height } = dimensions;
+    const dpr = window.devicePixelRatio || 1;
+
+    canvas.width = width * dpr;
+    canvas.height = height * dpr;
+
+    ctx.font = font;
+    const paddingMetrics = ctx.measureText("My");
+    const ascent = paddingMetrics.fontBoundingBoxAscent ?? paddingMetrics.actualBoundingBoxAscent;
+    const descent = paddingMetrics.fontBoundingBoxDescent ?? paddingMetrics.actualBoundingBoxDescent;
+    const baselineY = (height + ascent - descent) / 2;
+
+    const numLines = Math.floor(height / lineGap) + 10;
+    startTimeRef.current = performance.now();
+
+    const animate = (currentTime: number) => {
+      const elapsed = (currentTime - startTimeRef.current) / 1000;
+      const phase = (elapsed / animationDuration) * Math.PI * 2;
+
+      ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+      ctx.clearRect(0, 0, width, height);
+
+      ctx.globalCompositeOperation = "source-over";
+      ctx.font = font;
+      ctx.textBaseline = "alphabetic";
+      ctx.textAlign = "left";
+      ctx.fillStyle = "#000";
+      ctx.fillText(text, 0, baselineY);
+
+      ctx.globalCompositeOperation = "source-in";
+      ctx.fillStyle = bgColor;
+      ctx.fillRect(0, 0, width, height);
+
+      ctx.globalCompositeOperation = "source-atop";
+      for (let i = 0; i < numLines; i++) {
+        const y = i * lineGap;
+
+        const curve1 = Math.sin(phase) * curveIntensity;
+        const curve2 = Math.sin(phase + 0.5) * curveIntensity * 0.6;
+
+        const colorIndex = i % resolvedColors.length;
+        ctx.strokeStyle = resolvedColors[colorIndex];
+        ctx.lineWidth = lineWidth;
+
+        ctx.beginPath();
+        ctx.moveTo(0, y);
+        ctx.bezierCurveTo(
+          width * 0.33,
+          y + curve1,
+          width * 0.66,
+          y + curve2,
+          width,
+          y,
+        );
+        ctx.stroke();
+      }
+
+      animationRef.current = requestAnimationFrame(animate);
+    };
+
+    animationRef.current = requestAnimationFrame(animate);
+
+    return () => {
+      cancelAnimationFrame(animationRef.current);
+    };
+  }, [
+    text,
+    font,
+    bgColor,
+    resolvedColors,
+    animationDuration,
+    lineWidth,
+    lineGap,
+    curveIntensity,
+    dimensions,
+  ]);
+
+  return (
+    <span
+      className={cn(
+        "relative inline-block",
+        overlay && "absolute inset-0",
+        className,
+      )}
+    >
+      <span
+        ref={bgRef}
+        className={cn(
+          "pointer-events-none absolute h-0 w-0 opacity-0",
+          backgroundClassName,
+        )}
+        aria-hidden="true"
+      />
+      <span ref={textRef} className="invisible inline-block whitespace-nowrap" aria-hidden="true">
+        {text}
+      </span>
+      <canvas
+        ref={canvasRef}
+        className="pointer-events-none absolute top-0 left-0"
+        style={{
+          width: dimensions.width || "auto",
+          height: dimensions.height || "auto",
+        }}
+        aria-label={text}
+        role="img"
+      />
+    </span>
+  );
+}

package/product-site/components/CopyButton.tsx

@@ -0,0 +1,85 @@
+"use client";
+
+import { useEffect, useRef, useState } from "react";
+
+type CopyButtonVariant = "hero" | "terminal";
+
+interface CopyButtonProps {
+  text: string;
+  variant?: CopyButtonVariant;
+  className?: string;
+}
+
+const copyLabels: Record<CopyButtonVariant, { idle: string; success: string }> = {
+  hero: {
+    idle: "COPY",
+    success: "COPIED",
+  },
+  terminal: {
+    idle: "Copy",
+    success: "Copied",
+  },
+};
+
+export default function CopyButton({
+  text,
+  variant = "hero",
+  className = "",
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false);
+  const timeoutRef = useRef<number | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+    };
+  }, []);
+
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(text);
+      setCopied(true);
+
+      if (timeoutRef.current !== null) {
+        window.clearTimeout(timeoutRef.current);
+      }
+
+      timeoutRef.current = window.setTimeout(() => {
+        setCopied(false);
+      }, 2000);
+    } catch (error) {
+      console.error("Unable to copy command", error);
+    }
+  };
+
+  if (variant === "terminal") {
+    return (
+      <button
+        type="button"
+        onClick={handleCopy}
+        className={`text-[12px] font-semibold text-zinc-600 transition-colors hover:text-zinc-900 ${className}`}
+        aria-label="Copy command"
+      >
+        {copied ? copyLabels.terminal.success : copyLabels.terminal.idle}
+      </button>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={handleCopy}
+      className={`flex h-auto items-center justify-between gap-6 rounded-sm border border-zinc-800 bg-zinc-950 px-6 py-3.5 text-[14px] text-white shadow-[0_8px_30px_rgb(0,0,0,0.12)] transition-all hover:bg-black hover:shadow-zinc-300/50 ${className}`}
+      aria-label="Copy install command"
+    >
+      <span className="font-mono font-bold tracking-tight text-emerald-400 transition-colors">
+        {text}
+      </span>
+      <span className="ml-2 border-l border-zinc-800 pl-6 text-[12px] font-black uppercase tracking-[0.18em] text-zinc-300">
+        {copied ? copyLabels.hero.success : copyLabels.hero.idle}
+      </span>
+    </button>
+  );
+}