404lab 1.0.0

package/bin/index.js

@@ -0,0 +1,176 @@
+#!/usr/bin/env node
+
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+/**
+ * Resolve __dirname equivalent for ES modules
+ */
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+/**
+ * Supported templates mapped to component names
+ */
+const TEMPLATES = {
+  stoneage: "StoneAge",
+  amongus: "AmongUs",
+  blueglitch: "BlueGlitch",
+  modern: "ModernPage",
+  poet: "Poet",
+  retro: "RetroTv",
+  simple: "SimplePage",
+  snow: "Snow",
+  strangethings: "StrangerThings",
+  terminal: "Terminal404",
+};
+
+/**
+ * Read template content from templates directory
+ */
+function getTemplateContent(componentName) {
+  const templatesDir = path.join(__dirname, "..", "templates");
+  const templatePath = path.join(templatesDir, `${componentName}.tsx`);
+
+  if (!fs.existsSync(templatePath)) {
+    throw new Error(`Template "${componentName}" not found`);
+  }
+
+  return fs.readFileSync(templatePath, "utf-8");
+}
+
+/**
+ * Create the 404 component file
+ */
+function createComponentFile(componentName, templateContent) {
+  const componentDir = path.join(process.cwd(), "components", "404");
+  const componentPath = path.join(componentDir, `${componentName}.tsx`);
+
+  fs.mkdirSync(componentDir, { recursive: true });
+  fs.writeFileSync(componentPath, templateContent, "utf-8");
+
+  return componentPath;
+}
+
+/**
+ * Create or overwrite app/not-found.tsx
+ */
+function createNotFoundPage(componentName) {
+  const appDir = path.join(process.cwd(), "app");
+  const notFoundPath = path.join(appDir, "not-found.tsx");
+
+  fs.mkdirSync(appDir, { recursive: true });
+
+  const content = `import ${componentName} from "@/components/404/${componentName}";
+
+export default function NotFoundPage() {
+  return <${componentName} />;
+}
+`;
+
+  fs.writeFileSync(notFoundPath, content, "utf-8");
+
+  return notFoundPath;
+}
+
+/**
+ * Display help information
+ */
+function showHelp() {
+  console.log(`
+404lab — Custom 404 Page Generator for Next.js (App Router)
+
+Usage:
+  404lab add <template>     Generate a 404 page from a template
+  404lab list              List all available templates
+  404lab --help            Show this help message
+
+Available Templates:
+${Object.keys(TEMPLATES).map(t => `  ${t}`).join("\n")}
+
+Examples:
+  404lab add stoneage
+  404lab add retro
+
+Generated Files:
+  components/404/<Template>.tsx
+  app/not-found.tsx (overwritten if it already exists)
+`);
+}
+
+/**
+ * List available templates
+ */
+function listTemplates() {
+  console.log("\nAvailable 404 Templates:\n");
+
+  Object.keys(TEMPLATES).forEach((name) => {
+    console.log(`  ${name}`);
+  });
+
+  console.log("\nUsage: 404lab add <template>\n");
+}
+
+/**
+ * Main CLI entry point
+ */
+function main() {
+  const args = process.argv.slice(2);
+
+  if (args.length === 0 || args.includes("--help") || args.includes("-h")) {
+    showHelp();
+    process.exit(0);
+  }
+
+  if (args[0] === "list" || args[0] === "ls") {
+    listTemplates();
+    process.exit(0);
+  }
+
+  if (args[0] !== "add") {
+    console.error(`Error: Unknown command "${args[0]}"`);
+    console.log('Run "404lab --help" for usage information.');
+    process.exit(1);
+  }
+
+  if (!args[1]) {
+    console.error("Error: Template name is required.");
+    console.log("Usage: 404lab add <template>");
+    console.log("Available templates:", Object.keys(TEMPLATES).join(", "));
+    process.exit(1);
+  }
+
+  const templateKey = args[1].toLowerCase();
+  const componentName = TEMPLATES[templateKey];
+
+  if (!componentName) {
+    console.error(`Error: Template "${templateKey}" does not exist.`);
+    console.log("Available templates:", Object.keys(TEMPLATES).join(", "));
+    console.log('Run "404lab list" to view all templates.');
+    process.exit(1);
+  }
+
+  try {
+    console.log(`Installing 404 template: ${componentName}`);
+
+    const templateContent = getTemplateContent(componentName);
+
+    const componentPath = createComponentFile(componentName, templateContent);
+    console.log(`Created: ${path.relative(process.cwd(), componentPath)}`);
+
+    const notFoundPath = createNotFoundPage(componentName);
+    console.log(`Created: ${path.relative(process.cwd(), notFoundPath)}`);
+
+    console.log("\n404 page successfully installed.");
+    console.log("Next steps:");
+    console.log("  1. Start your Next.js development server.");
+    console.log("  2. Visit a non-existent route to view the 404 page.");
+    console.log(`  3. Customize components/404/${componentName}.tsx as needed.\n`);
+  } catch (error) {
+    console.error("Error generating files:", error.message);
+    process.exit(1);
+  }
+}
+
+main();

package/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "404lab", 
+  "version": "1.0.0",
+  "description": "A CLI tool for generating beautiful custom 404 pages in Next.js projects",
+  "type": "module",
+  "bin": {
+    "404lab": "./bin/index.js" 
+  },
+  "files": [
+    "bin",
+    "templates",
+    "README.md"
+  ],
+  "keywords": [
+    "nextjs",
+    "404",
+    "not-found",
+    "cli",
+    "generator",
+    "templates"
+  ],
+  "author": "Your Name <your.email@example.com>",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/yourusername/404lab.git"
+  }
+}

package/templates/AmongUs.tsx

@@ -0,0 +1,111 @@
+"use client";
+
+import { useEffect } from "react";
+import Image from "next/image";
+
+export default function AmongUs() {
+  useEffect(() => {
+    const body = document.body;
+
+    const createStar = () => {
+      let right = Math.random() * 500;
+      const top = Math.random() * window.innerHeight;
+
+      const star = document.createElement("div");
+      star.className =
+        "star absolute w-[2px] h-[2px] bg-white animate-starTwinkle";
+      star.style.top = `${top}px`;
+      star.style.right = `${right}px`;
+
+      body.appendChild(star);
+
+      const runStar = setInterval(() => {
+        if (right >= window.innerWidth) {
+          star.remove();
+          clearInterval(runStar);
+        }
+        right += 3;
+        star.style.right = `${right}px`;
+      }, 10);
+    };
+
+    const starInterval = setInterval(createStar, 100);
+
+    return () => {
+      clearInterval(starInterval);
+      document.querySelectorAll(".star").forEach((s) => s.remove());
+    };
+  }, []);
+
+  return (
+    <div className="relative flex h-screen w-full items-center justify-center overflow-hidden bg-linear-to-t from-[#2e1753] via-[#1f1746] to-[#050819] font-['Tomorrow']">
+      <div className="absolute top-[10%] text-center text-white">
+        <div className="text-lg tracking-widest">ERROR</div>
+        <h1 className="text-6xl font-bold">404</h1>
+        <hr className="my-2 w-32 mx-auto opacity-40" />
+        <div className="tracking-widest">Page Not Found</div>
+      </div>
+
+      <div className="astronaut">
+        <Image
+          src="https://images.vexels.com/media/users/3/152639/isolated/preview/506b575739e90613428cdb399175e2c8-space-astronaut-cartoon-by-vexels.png"
+          alt="astronaut"
+          width={96}
+          height={96}
+          unoptimized
+          className="absolute top-[55%] w-24 h-auto animate-astronautFly"
+        />
+      </div>
+
+      <style jsx global>{`
+        @keyframes astronautFly {
+          0% {
+            left: -100px;
+          }
+          25% {
+            top: 50%;
+            transform: rotate(30deg);
+          }
+          50% {
+            top: 55%;
+            transform: rotate(45deg);
+          }
+          75% {
+            top: 60%;
+            transform: rotate(30deg);
+          }
+          100% {
+            left: 110%;
+            transform: rotate(45deg);
+          }
+        }
+
+        @keyframes starTwinkle {
+          0% {
+            background: rgba(255, 255, 255, 0.4);
+          }
+          25% {
+            background: rgba(255, 255, 255, 0.8);
+          }
+          50% {
+            background: rgba(255, 255, 255, 1);
+          }
+          75% {
+            background: rgba(255, 255, 255, 0.8);
+          }
+          100% {
+            background: rgba(255, 255, 255, 0.4);
+          }
+        }
+
+        .animate-astronautFly {
+          animation: astronautFly 6s linear infinite;
+        }
+
+        .animate-starTwinkle {
+          animation: starTwinkle 3s linear infinite;
+        }
+      `}</style>
+    </div>
+  );
+}

package/templates/BlueGlitch.tsx

@@ -0,0 +1,118 @@
+"use client";
+
+export default function BlueGlitch() {
+  return (
+    <main className="min-h-screen flex items-center justify-center bg-[#000084] text-[#bbb]">
+      <div className="notfound">
+        <div className="centered">
+          <span className="inverted">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        </div>
+
+        <div className="centered">
+          <span className="inverted">&nbsp;4&nbsp;0&nbsp;4&nbsp;</span>
+          <span className="shadow">&nbsp;</span>
+        </div>
+
+        <div className="centered">
+          <span className="inverted">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+          <span className="shadow">&nbsp;</span>
+        </div>
+
+        <div className="centered">
+          &nbsp;<span className="shadow">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
+        </div>
+
+        <div className="row">&nbsp;</div>
+        <div className="row">
+          A fatal exception 404 has occurred at C0DE:ABAD1DEA in 0xC0DEBA5E.
+        </div>
+        <div className="row">The current request will be terminated.</div>
+        <div className="row">&nbsp;</div>
+        <div className="row">* Press any key to return to the previous page.</div>
+        <div className="row">
+          * Press CTRL+R to restart your server. You will
+        </div>
+        <div className="row">
+          &nbsp;&nbsp;lose any unsaved information in all applications.
+        </div>
+        <div className="row">&nbsp;</div>
+
+        <div className="centered">
+          Please refresh the page...Or Return to safety&nbsp;
+          <span className="blink">█</span>
+        </div>
+      </div>
+
+      {/* ALL CSS INLINE */}
+      <style jsx>{`
+        * {
+          box-sizing: border-box;
+        }
+
+        .notfound {
+          width: 70ch;
+          height: 25ch;
+          background-color: #000084;
+          font-family: "more_perfect_dos_vgaregular", "Courier New", monospace;
+          font-size: 10px;
+        }
+
+        @media (min-width: 600px) {
+          .notfound {
+            font-size: 16px;
+          }
+        }
+
+        @media (min-width: 900px) {
+          .notfound {
+            font-size: 24px;
+            font-weight: 400;
+          }
+        }
+
+        .row {
+          text-align: left;
+        }
+
+        .centered {
+          text-align: center;
+        }
+
+        .inverted {
+          background-color: #bbb;
+          color: #000084;
+        }
+
+        .shadow {
+          background-color: #000;
+          color: #000084;
+        }
+
+        .blink {
+          animation: blink 0.8s infinite;
+        }
+
+        @keyframes blink {
+          0% {
+            opacity: 0;
+          }
+          49% {
+            opacity: 0;
+          }
+          50% {
+            opacity: 1;
+          }
+        }
+
+        /* DOS VGA FONT */
+        @font-face {
+          font-family: "more_perfect_dos_vgaregular";
+          src: url("https://fonts.cdnfonts.com/s/17263/Perfect%20DOS%20VGA%20437.woff")
+            format("woff");
+          font-weight: normal;
+          font-style: normal;
+        }
+      `}</style>
+    </main>
+  );
+}

package/templates/ModernPage.tsx

@@ -0,0 +1,20 @@
+import Link from "next/link";
+
+export default function ModernPage() {
+  return (
+    <div className="flex min-h-screen items-center justify-center bg-background">
+      <div className="surface rounded-2xl p-8 text-center">
+        <h1 className="text-7xl font-extrabold tracking-tight">404</h1>
+        <p className="mt-2 text-muted">
+          This page could not be found.
+        </p>
+        <Link
+          href="/"
+          className="mt-6 inline-block rounded-lg bg-foreground px-4 py-2 text-background"
+        >
+          Back to home
+        </Link>
+      </div>
+    </div>
+  );
+}

package/templates/Poet.tsx

@@ -0,0 +1,70 @@
+"use client";
+
+import Link from "next/link";
+import Image from "next/image";
+
+export default function Poet() {
+  return (
+    <main className="min-h-screen bg-[#777] flex items-center justify-center p-4">
+      <div className="max-w-5xl w-full border-2 border-black bg-black text-white">
+        <div className="bg-[#d0d0d0] text-black px-4 py-3 border-b-2 border-black font-mono">
+          <div className="text-xl font-bold">
+            404 &raquo; Document Not Found
+          </div>
+          <div className="text-sm mt-1">
+            The requested document{' '}
+            <span className="font-semibold">&quot;/missing.pdf&quot;</span> does not exist.
+          </div>
+          <div className="mt-2 text-sm">
+            <Link href="/" className="underline font-semibold">
+              GO Back
+            </Link>{" "}
+            - or -{" "}
+            <Link href="/" className="underline font-semibold">
+              GO Home
+            </Link>
+          </div>
+        </div>
+
+        <div className="flex flex-col md:flex-row">
+          <div className="flex-1 p-6 font-serif leading-snug text-lg">
+            <p>Once upon a midnight dreary,</p>
+            <p>While I web surfed, weak and weary,</p>
+            <p>For pages long forgotten yore.</p>
+            <p>When I clicked my fav&apos;rite href,</p>
+            <p>Suddenly there came a warning,</p>
+            <p>and my heart was filled with mourning,</p>
+
+            <p className="mt-4 text-2xl">
+              Mourning for my dear{" "}
+              <span className="italic">&quot;/missing.pdf&quot;</span>,
+            </p>
+
+            <p className="mt-4">
+              &quot;Tis not possible!&quot; I muttered,
+            </p>
+
+            <p className="text-3xl mt-2">
+              &quot;Give thine pages, I implore!&quot;
+            </p>
+
+            <p className="text-4xl mt-6">
+              Quoth the server, <span className="font-bold">404</span>.
+            </p>
+          </div>
+
+          <div className="w-full md:w-[320px] bg-black flex items-center justify-center p-4">
+            <Image
+              src="/raven.png"
+              alt="Raven"
+              width={320}
+              height={420}
+              className="max-h-105 object-contain opacity-90"
+              priority
+            />
+          </div>
+        </div>
+      </div>
+    </main>
+  );
+}

package/templates/RetroTv.tsx

@@ -0,0 +1,162 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import Image from "next/image";
+
+export default function RetroTv() {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+
+    const WIDTH = 700;
+    const HEIGHT = 500;
+
+    canvas.width = WIDTH;
+    canvas.height = HEIGHT;
+
+    ctx.fillStyle = "white";
+    ctx.fillRect(0, 0, WIDTH, HEIGHT);
+
+    const imgData = ctx.getImageData(0, 0, WIDTH, HEIGHT);
+    const pix = imgData.data;
+
+    const flicker = setInterval(() => {
+      for (let i = 0; i < pix.length; i += 4) {
+        const color = Math.random() * 255 + 50;
+        pix[i] = color;
+        pix[i + 1] = color;
+        pix[i + 2] = color;
+      }
+      ctx.putImageData(imgData, 0, 0);
+    }, 30);
+
+    return () => clearInterval(flicker);
+  }, []);
+
+  return (
+    <div className="relative h-screen w-screen overflow-hidden bg-black">
+      <h1 className="absolute left-1/2 top-1/2 z-3 -translate-x-1/2 -translate-y-1/2 text-[200px] font-bold text-transparent glitch-text">
+        404
+      </h1>
+
+      <div className="absolute inset-0 z-3 frame">
+        <div />
+        <div />
+        <div />
+      </div>
+
+      <div className="absolute inset-0 z-2 opacity-0 caps">
+        <Image
+          src="http://ademilter.com/caps.png"
+          alt="caps"
+          className="h-full w-full"
+          fill
+        />
+      </div>
+
+      <canvas
+        ref={canvasRef}
+        className="absolute left-0 top-0 z-1 h-full w-full"
+      />
+
+      <style jsx>{`
+        .glitch-text {
+          animation: glitch 2s linear infinite;
+          text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+        }
+
+        @keyframes glitch {
+          0% {
+            text-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+          }
+          33% {
+            text-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
+          }
+          66% {
+            text-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
+          }
+          100% {
+            text-shadow: 0 0 40px rgba(0, 0, 0, 0.8);
+          }
+        }
+
+        .caps {
+          animation: capsFlicker 8s linear infinite;
+        }
+
+        @keyframes capsFlicker {
+          0% {
+            opacity: 0;
+          }
+          10% {
+            opacity: 0.3;
+          }
+          20% {
+            opacity: 0.1;
+          }
+          30% {
+            opacity: 0.5;
+          }
+          40% {
+            opacity: 0;
+          }
+          50% {
+            opacity: 0.8;
+          }
+          55% {
+            opacity: 0;
+          }
+          100% {
+            opacity: 0;
+          }
+        }
+
+        .frame {
+          background: radial-gradient(
+            ellipse at center,
+            rgba(0, 0, 0, 0) 0%,
+            rgba(0, 0, 0, 0) 19%,
+            rgba(0, 0, 0, 0.9) 100%
+          );
+        }
+
+        .frame div {
+          position: absolute;
+          left: 0;
+          top: -20%;
+          width: 100%;
+          height: 20%;
+          background-color: rgba(0, 0, 0, 0.12);
+          box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+          animation: scanline 12s linear infinite;
+        }
+
+        .frame div:nth-child(1) {
+          animation-delay: 0s;
+        }
+
+        .frame div:nth-child(2) {
+          animation-delay: 4s;
+        }
+
+        .frame div:nth-child(3) {
+          animation-delay: 8s;
+        }
+
+        @keyframes scanline {
+          0% {
+            top: -20%;
+          }
+          100% {
+            top: 100%;
+          }
+        }
+      `}</style>
+    </div>
+  );
+}