404lab 1.0.1 → 2.0.2

package/cli/commands/add.js

@@ -0,0 +1,71 @@
+import { installMultipleTemplates } from "../core/installer.js";
+import { templateExists, resolveTemplateName } from "../core/templates.js";
+import { getProjectInfo } from "../core/project.js";
+import { log, colors } from "../ui/colors.js";
+
+export async function addCommand(templates, flags) {
+  if (!templates.length) {
+    log.error("No template specified.");
+    log.info("Usage: 404lab add <template> [templates...]");
+    process.exit(1);
+  }
+
+  const invalidTemplates = templates.filter((t) => !templateExists(t));
+
+  if (invalidTemplates.length) {
+    log.error(`Unknown template(s): ${invalidTemplates.join(", ")}`);
+    log.info("Run '404lab list' to see available templates.");
+    process.exit(1);
+  }
+
+  const projectInfo = getProjectInfo();
+
+  if (!projectInfo.valid) {
+    log.error(projectInfo.error);
+    process.exit(1);
+  }
+
+  log.success(`Next.js project detected`);
+  log.info(`Router: ${colors.cyan(projectInfo.router.type)}`);
+
+  if (projectInfo.alias.hasAlias) {
+    log.info(`Alias: ${colors.cyan(projectInfo.alias.alias)}`);
+  }
+
+  log.blank();
+
+  const isDry = flags.dry;
+  const isForce = flags.force;
+
+  if (isDry) {
+    log.warn("Dry run mode - no files will be written\n");
+  }
+
+  const results = await installMultipleTemplates(templates, {
+    force: isForce,
+    dry: isDry,
+  });
+
+  log.blank();
+
+  const successful = results.filter((r) => r.success);
+  const failed = results.filter((r) => !r.success);
+
+  if (isDry) {
+    log.info(
+      `Dry run complete. ${successful.length} template(s) would be installed.`,
+    );
+    return;
+  }
+
+  if (successful.length) {
+    log.success(`${successful.length} template(s) installed successfully.`);
+  }
+
+  if (failed.length) {
+    log.warn(`${failed.length} template(s) failed or skipped.`);
+  }
+
+  log.blank();
+  log.plain(colors.dim("Enjoy your new 404 page!"));
+}

package/cli/commands/list.js

@@ -0,0 +1,30 @@
+import { getTemplateKeys, TEMPLATES } from "../core/templates.js";
+import { getInstalledTemplates } from "../utils/config.js";
+import { colors, log } from "../ui/colors.js";
+
+export function listCommand() {
+  const keys = getTemplateKeys();
+  const installed = getInstalledTemplates();
+
+  log.blank();
+  log.plain(colors.bold("Available Templates"));
+  log.plain(colors.dim("─".repeat(40)));
+  log.blank();
+
+  const maxKeyLen = Math.max(...keys.map((k) => k.length));
+
+  keys.forEach((key) => {
+    const componentName = TEMPLATES[key];
+    const isInstalled = installed.includes(componentName);
+    const status = isInstalled ? colors.green(" ✔ installed") : "";
+    const paddedKey = key.padEnd(maxKeyLen + 2);
+
+    log.plain(
+      `  ${colors.cyan(paddedKey)}${colors.dim(componentName)}${status}`,
+    );
+  });
+
+  log.blank();
+  log.plain(colors.dim(`Total: ${keys.length} templates`));
+  log.blank();
+}

package/cli/commands/remove.js

@@ -0,0 +1,31 @@
+import { uninstallTemplate } from "../core/installer.js";
+import { templateExists } from "../core/templates.js";
+import { log } from "../ui/colors.js";
+
+export async function removeCommand(template) {
+  if (!template) {
+    log.error("No template specified.");
+    log.info("Usage: 404lab remove <template>");
+    process.exit(1);
+  }
+
+  if (!templateExists(template)) {
+    log.error(`Unknown template: ${template}`);
+    log.info("Run '404lab list' to see available templates.");
+    process.exit(1);
+  }
+
+  const result = await uninstallTemplate(template);
+
+  if (result.cancelled) {
+    log.info("Removal cancelled.");
+    return;
+  }
+
+  if (!result.success) {
+    log.error(result.error);
+    process.exit(1);
+  }
+
+  log.success(`${result.componentName} removed.`);
+}

package/cli/core/installer.js

@@ -0,0 +1,156 @@
+import path from "path";
+import { safeWrite, deleteFile, fileExists } from "../utils/fs.js";
+import {
+  addInstalledTemplate,
+  removeInstalledTemplate,
+} from "../utils/config.js";
+import { getTemplateContent, resolveTemplateName } from "./templates.js";
+import { getProjectInfo } from "./project.js";
+import { log } from "../ui/colors.js";
+import { createSpinner } from "../ui/spinner.js";
+import { confirm } from "../ui/prompt.js";
+
+function generateNotFoundContent(componentName, router, alias) {
+  const importPath = alias.hasAlias
+    ? `@/components/404/${componentName}`
+    : router.type === "app"
+      ? `../components/404/${componentName}`
+      : `../components/404/${componentName}`;
+
+  return `import ${componentName} from "${importPath}";
+
+export default function NotFoundPage() {
+  return <${componentName} />;
+}
+`;
+}
+
+function getNotFoundPath(router) {
+  if (router.type === "app") {
+    return path.join(router.path, "not-found.tsx");
+  }
+  return path.join(router.path, "404.tsx");
+}
+
+function getComponentPath(componentsDir, componentName) {
+  return path.join(componentsDir, "404", `${componentName}.tsx`);
+}
+
+export async function installTemplate(templateKey, options = {}) {
+  const { force = false, dry = false, root = process.cwd() } = options;
+
+  const componentName = resolveTemplateName(templateKey);
+
+  if (!componentName) {
+    return { success: false, error: `Unknown template: ${templateKey}` };
+  }
+
+  const projectInfo = getProjectInfo(root);
+
+  if (!projectInfo.valid) {
+    return { success: false, error: projectInfo.error };
+  }
+
+  const { router, alias, componentsDir } = projectInfo;
+
+  const spinner = createSpinner(`Installing ${componentName}...`);
+
+  if (!dry) {
+    spinner.start();
+  }
+
+  try {
+    const templateContent = getTemplateContent(componentName);
+    const componentPath = getComponentPath(componentsDir, componentName);
+    const notFoundPath = getNotFoundPath(router);
+    const notFoundContent = generateNotFoundContent(
+      componentName,
+      router,
+      alias,
+    );
+
+    if (!dry) {
+      spinner.stop();
+    }
+
+    const componentResult = await safeWrite(componentPath, templateContent, {
+      force,
+      dry,
+      root,
+    });
+
+    const notFoundResult = await safeWrite(notFoundPath, notFoundContent, {
+      force,
+      dry,
+      root,
+    });
+
+    if (!dry && (componentResult.written || notFoundResult.written)) {
+      addInstalledTemplate(componentName, root);
+    }
+
+    return {
+      success: true,
+      componentName,
+      dry,
+      files: {
+        component: componentResult,
+        notFound: notFoundResult,
+      },
+    };
+  } catch (err) {
+    if (!dry) {
+      spinner.fail(`Failed to install ${componentName}`);
+    }
+    return { success: false, error: err.message };
+  }
+}
+
+export async function installMultipleTemplates(templateKeys, options = {}) {
+  const results = [];
+
+  for (const key of templateKeys) {
+    const result = await installTemplate(key, options);
+    results.push({ key, ...result });
+
+    if (!result.success && !options.dry) {
+      log.error(result.error);
+    }
+  }
+
+  return results;
+}
+
+export async function uninstallTemplate(templateKey, options = {}) {
+  const { root = process.cwd() } = options;
+
+  const componentName = resolveTemplateName(templateKey);
+
+  if (!componentName) {
+    return { success: false, error: `Unknown template: ${templateKey}` };
+  }
+
+  const projectInfo = getProjectInfo(root);
+
+  if (!projectInfo.valid) {
+    return { success: false, error: projectInfo.error };
+  }
+
+  const { componentsDir } = projectInfo;
+  const componentPath = getComponentPath(componentsDir, componentName);
+
+  if (!fileExists(componentPath)) {
+    return { success: false, error: `${componentName} is not installed.` };
+  }
+
+  const shouldDelete = await confirm(`Remove ${componentName}?`, true);
+
+  if (!shouldDelete) {
+    return { success: false, cancelled: true };
+  }
+
+  deleteFile(componentPath);
+  removeInstalledTemplate(componentName, root);
+
+  return { success: true, componentName };
+}

package/cli/core/project.js

@@ -0,0 +1,115 @@
+import fs from "fs";
+import path from "path";
+
+export function validateNextProject(root = process.cwd()) {
+  const pkgPath = path.join(root, "package.json");
+
+  if (!fs.existsSync(pkgPath)) {
+    return {
+      valid: false,
+      error: "No package.json found. Are you in a project directory?",
+    };
+  }
+
+  let pkg;
+  try {
+    pkg = JSON.parse(fs.readFileSync(pkgPath, "utf8"));
+  } catch {
+    return {
+      valid: false,
+      error: "Invalid package.json file.",
+    };
+  }
+
+  const hasNext = pkg.dependencies?.next || pkg.devDependencies?.next;
+
+  if (!hasNext) {
+    return {
+      valid: false,
+      error: "Next.js not found in dependencies. Is this a Next.js project?",
+    };
+  }
+
+  return { valid: true };
+}
+
+export function detectRouter(root = process.cwd()) {
+  const appDir = path.join(root, "app");
+  const srcAppDir = path.join(root, "src", "app");
+  const pagesDir = path.join(root, "pages");
+  const srcPagesDir = path.join(root, "src", "pages");
+
+  if (fs.existsSync(appDir)) return { type: "app", path: appDir };
+  if (fs.existsSync(srcAppDir)) return { type: "app", path: srcAppDir };
+  if (fs.existsSync(pagesDir)) return { type: "pages", path: pagesDir };
+  if (fs.existsSync(srcPagesDir)) return { type: "pages", path: srcPagesDir };
+
+  return null;
+}
+
+export function detectAlias(root = process.cwd()) {
+  const tsconfigPath = path.join(root, "tsconfig.json");
+  const jsconfigPath = path.join(root, "jsconfig.json");
+
+  const configPath = fs.existsSync(tsconfigPath)
+    ? tsconfigPath
+    : fs.existsSync(jsconfigPath)
+      ? jsconfigPath
+      : null;
+
+  if (!configPath) {
+    return { hasAlias: false, alias: null };
+  }
+
+  try {
+    const config = JSON.parse(fs.readFileSync(configPath, "utf8"));
+    const paths = config.compilerOptions?.paths;
+
+    if (paths?.["@/*"]) {
+      return { hasAlias: true, alias: "@" };
+    }
+
+    return { hasAlias: false, alias: null };
+  } catch {
+    return { hasAlias: false, alias: null };
+  }
+}
+
+export function getComponentsDir(root = process.cwd()) {
+  const srcComponents = path.join(root, "src", "components");
+  const rootComponents = path.join(root, "components");
+
+  if (fs.existsSync(path.join(root, "src"))) {
+    return srcComponents;
+  }
+
+  return rootComponents;
+}
+
+export function getProjectInfo(root = process.cwd()) {
+  const validation = validateNextProject(root);
+
+  if (!validation.valid) {
+    return { valid: false, error: validation.error };
+  }
+
+  const router = detectRouter(root);
+
+  if (!router) {
+    return {
+      valid: false,
+      error: "No app/ or pages/ directory found. Create one first.",
+    };
+  }
+
+  const alias = detectAlias(root);
+  const componentsDir = getComponentsDir(root);
+
+  return {
+    valid: true,
+    router,
+    alias,
+    componentsDir,
+    root,
+  };
+}

package/cli/core/templates.js

@@ -0,0 +1,66 @@
+import fs from "fs";
+import path from "path";
+import { fileURLToPath } from "url";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const TEMPLATES_DIR = path.join(__dirname, "..", "..", "templates");
+
+export const TEMPLATES = {
+  stoneage: "StoneAge",
+  amongus: "AmongUs",
+  blueglitch: "BlueGlitch",
+  geeksforgeeks: "GeeksforGeeks",
+  google: "Google",
+  macos: "MacOs",
+  modern: "ModernPage",
+  particles: "Particles",
+  poet: "Poet",
+  retro: "RetroTv",
+  simple: "SimplePage",
+  snow: "Snow",
+  strangethings: "StrangerThings",
+  terminal: "Terminal404",
+  vercel: "Vercel"
+};
+
+export function getTemplateKeys() {
+  return Object.keys(TEMPLATES).sort();
+}
+
+export function resolveTemplateName(key) {
+  const normalized = key.toLowerCase();
+  return TEMPLATES[normalized] || null;
+}
+
+export function templateExists(key) {
+  return resolveTemplateName(key) !== null;
+}
+
+export function getTemplateContent(componentName) {
+  const templatePath = path.join(TEMPLATES_DIR, `${componentName}.tsx`);
+
+  if (!fs.existsSync(templatePath)) {
+    throw new Error(`Template file not found: ${componentName}.tsx`);
+  }
+
+  return fs.readFileSync(templatePath, "utf8");
+}
+
+export function getTemplateInfo(key) {
+  const componentName = resolveTemplateName(key);
+
+  if (!componentName) {
+    return null;
+  }
+
+  return {
+    key,
+    componentName,
+    filename: `${componentName}.tsx`,
+  };
+}
+
+export function getAllTemplateInfo() {
+  return getTemplateKeys().map((key) => getTemplateInfo(key));
+}

package/cli/index.js

@@ -0,0 +1,119 @@
+#!/usr/bin/env node
+
+import { addCommand } from "./commands/add.js";
+import { removeCommand } from "./commands/remove.js";
+import { listCommand } from "./commands/list.js";
+import { colors, log } from "./ui/colors.js";
+
+const VERSION = "2.0.0";
+
+function parseArgs(argv) {
+  const args = argv.slice(2);
+  const command = args[0];
+  const positional = [];
+  const flags = {
+    help: false,
+    version: false,
+    force: false,
+    dry: false,
+  };
+
+  for (let i = 1; i < args.length; i++) {
+    const arg = args[i];
+
+    if (arg === "--help" || arg === "-h") {
+      flags.help = true;
+    } else if (arg === "--version" || arg === "-v") {
+      flags.version = true;
+    } else if (arg === "--force" || arg === "-f") {
+      flags.force = true;
+    } else if (arg === "--dry" || arg === "-d") {
+      flags.dry = true;
+    } else if (!arg.startsWith("-")) {
+      positional.push(arg.toLowerCase());
+    }
+  }
+
+  if (args.includes("--help") || args.includes("-h")) {
+    flags.help = true;
+  }
+
+  if (args.includes("--version") || args.includes("-v")) {
+    flags.version = true;
+  }
+
+  return { command, positional, flags };
+}
+
+function showHelp() {
+  console.log(`
+${colors.bold("404lab")} ${colors.dim(`v${VERSION}`)}
+${colors.cyan("Generate beautiful 404 pages for Next.js")}
+
+${colors.bold("Usage:")}
+  404lab ${colors.cyan("<command>")} [options]
+
+${colors.bold("Commands:")}
+  ${colors.cyan("add")} <templates...>    Install one or more templates
+  ${colors.cyan("remove")} <template>     Remove an installed template
+  ${colors.cyan("list")}                  Show all available templates
+
+${colors.bold("Options:")}
+  ${colors.cyan("--force")}, ${colors.cyan("-f")}           Overwrite existing files without asking
+  ${colors.cyan("--dry")}, ${colors.cyan("-d")}             Simulate install (no files written)
+  ${colors.cyan("--help")}, ${colors.cyan("-h")}            Show this help message
+  ${colors.cyan("--version")}, ${colors.cyan("-v")}         Show version number
+
+${colors.bold("Examples:")}
+  ${colors.dim("$")} 404lab add macos
+  ${colors.dim("$")} 404lab add snow retro terminal
+  ${colors.dim("$")} 404lab add macos --dry
+  ${colors.dim("$")} 404lab add macos --force
+  ${colors.dim("$")} 404lab remove macos
+  ${colors.dim("$")} 404lab list
+
+${colors.dim("Documentation: https://github.com/yourusername/404lab")}
+`);
+}
+
+function showVersion() {
+  console.log(`404lab v${VERSION}`);
+}
+
+async function main() {
+  const { command, positional, flags } = parseArgs(process.argv);
+
+  if (flags.version) {
+    showVersion();
+    return;
+  }
+
+  if (!command || flags.help) {
+    showHelp();
+    return;
+  }
+
+  switch (command) {
+    case "add":
+      await addCommand(positional, flags);
+      break;
+
+    case "remove":
+      await removeCommand(positional[0]);
+      break;
+
+    case "list":
+      listCommand();
+      break;
+
+    default:
+      log.error(`Unknown command: ${command}`);
+      log.info("Run '404lab --help' for usage information.");
+      process.exit(1);
+  }
+}
+
+main().catch((err) => {
+  log.error(err.message);
+  process.exit(1);
+});

package/cli/ui/colors.js

@@ -0,0 +1,38 @@
+const codes = {
+  reset: "\x1b[0m",
+  bold: "\x1b[1m",
+  dim: "\x1b[2m",
+
+  red: "\x1b[31m",
+  green: "\x1b[32m",
+  yellow: "\x1b[33m",
+  blue: "\x1b[34m",
+  magenta: "\x1b[35m",
+  cyan: "\x1b[36m",
+  white: "\x1b[37m",
+  gray: "\x1b[90m",
+};
+
+const wrap = (code) => (text) => `${code}${text}${codes.reset}`;
+
+export const colors = {
+  red: wrap(codes.red),
+  green: wrap(codes.green),
+  yellow: wrap(codes.yellow),
+  blue: wrap(codes.blue),
+  magenta: wrap(codes.magenta),
+  cyan: wrap(codes.cyan),
+  white: wrap(codes.white),
+  gray: wrap(codes.gray),
+  bold: wrap(codes.bold),
+  dim: wrap(codes.dim),
+};
+
+export const log = {
+  info: (msg) => console.log(`${codes.cyan}ℹ${codes.reset} ${msg}`),
+  success: (msg) => console.log(`${codes.green}✔${codes.reset} ${msg}`),
+  warn: (msg) => console.log(`${codes.yellow}⚠${codes.reset} ${msg}`),
+  error: (msg) => console.error(`${codes.red}✖${codes.reset} ${msg}`),
+  plain: (msg) => console.log(msg),
+  blank: () => console.log(""),
+};

package/cli/ui/prompt.js

@@ -0,0 +1,50 @@
+import readline from "readline";
+import { colors } from "./colors.js";
+
+export function prompt(question, defaultValue = "") {
+  const rl = readline.createInterface({
+    input: process.stdin,
+    output: process.stdout,
+  });
+
+  return new Promise((resolve) => {
+    rl.question(question, (answer) => {
+      rl.close();
+      const trimmed = answer.trim();
+      resolve(trimmed || defaultValue);
+    });
+  });
+}
+
+export async function confirm(message, defaultNo = true) {
+  const hint = defaultNo ? "y/N" : "Y/n";
+  const question = `${colors.cyan("?")} ${message} ${colors.dim(`(${hint})`)} `;
+
+  const answer = await prompt(question);
+  const lower = answer.toLowerCase();
+
+  if (defaultNo) {
+    return lower === "y" || lower === "yes";
+  }
+
+  return lower !== "n" && lower !== "no";
+}
+
+export async function select(message, options) {
+  console.log(`\n${colors.cyan("?")} ${message}\n`);
+
+  options.forEach((opt, i) => {
+    console.log(`  ${colors.cyan(`${i + 1}.`)} ${opt}`);
+  });
+
+  console.log("");
+
+  const answer = await prompt(`${colors.dim("Enter number:")} `);
+  const index = parseInt(answer, 10) - 1;
+
+  if (index >= 0 && index < options.length) {
+    return options[index];
+  }
+
+  return null;
+}