@navneet_25/tempjs 1.0.3 → 1.0.4

package/README.md

@@ -34,7 +34,10 @@ tempjs list
 
 ```bash
 tempjs list                  # show available templates
-tempjs hotel                 # create project from hotel template
+tempjs hotel                 # create project from hotel template using default theme
+tempjs hotel config          # create project and run interactive theme/font setup
+tempjs theme                 # change/reset the theme of an initialized project
+tempjs font                  # change/reset the font pairing of an initialized project
 tempjs real-estate --force   # overwrite existing files
 tempjs --help                # show help
 ```
@@ -43,6 +46,7 @@ tempjs --help                # show help
 
 | Option        | Description |
 |---------------|-------------|
+| `--config`    | Prompt for theme and font pairings during template initialization |
 | `--force`     | Overwrite files in the current directory without prompting |
 | `--remote`    | Fetch from GitHub even when a local template copy exists |
 | `--init-git`  | Run `git init` after copying (optional) |

package/cli/index.js

@@ -4,6 +4,12 @@ import { execSync } from "node:child_process";
 import { createInterface } from "node:readline/promises";
 import { stdin as input, stdout as output } from "node:process";
 import { loadManifest, getPackageRoot, resolveRepositoryConfig } from "./config.js";
+import {
+  promptTheme,
+  promptFont,
+  applyThemeAndFont,
+  getSavedConfig,
+} from "./theme-manager.js";
 import {
   copyTemplate,
   findConflictingPaths,
@@ -20,9 +26,13 @@ tempjs — instantiate project templates from GitHub
 USAGE
   tempjs list
   tempjs <template-id> [options]
+  tempjs <template-id> config     Initialize with interactive theme & typography setup
+  tempjs theme                    Change the project's theme in an initialized directory
+  tempjs font                     Change the project's font styling in an initialized directory
   tempjs --help
 
 OPTIONS
+  --config      Prompt for theme and font pairings during initialization
   --force       Overwrite existing files in the current directory
   --remote      Fetch from GitHub even if a local template copy exists
   --init-git    Run git init after copying the template
@@ -30,8 +40,8 @@ OPTIONS
 
 EXAMPLES
   mkdir hotel-client && cd hotel-client
-  tempjs hotel
-  git init
+  tempjs hotel config
+  tempjs theme
 
 ENVIRONMENT
   TEMPLATES_REPO_URL       GitHub repo URL or owner/repo (overrides templates.json)
@@ -72,6 +82,7 @@ function parseArgs(argv) {
     remote: false,
     initGit: false,
     help: false,
+    config: false,
   };
   const positionals = [];
 
@@ -80,6 +91,7 @@ function parseArgs(argv) {
     else if (arg === "--remote") flags.remote = true;
     else if (arg === "--init-git") flags.initGit = true;
     else if (arg === "--help" || arg === "-h") flags.help = true;
+    else if (arg === "--config") flags.config = true;
     else if (arg.startsWith("-")) {
       throw new Error(`Unknown option: ${arg}`);
     } else {
@@ -124,8 +136,9 @@ async function confirmOverwrite(force) {
  * @param {string} targetDir
  * @param {string} templateId
  * @param {{ force: boolean, remote: boolean, initGit: boolean }} flags
+ * @param {boolean} runWithConfig
  */
-async function runTemplate(targetDir, templateId, flags) {
+async function runTemplate(targetDir, templateId, flags, runWithConfig = false) {
   const manifest = loadManifest();
   const entry = manifest.templates[templateId];
 
@@ -198,6 +211,13 @@ async function runTemplate(targetDir, templateId, flags) {
       execSync("git init", { cwd: targetDir, stdio: "inherit" });
     }
 
+    if (runWithConfig) {
+      console.log("\nConfiguring project theme and typography...");
+      const selectedTheme = await promptTheme("theme1");
+      const selectedFont = await promptFont("default");
+      await applyThemeAndFont(targetDir, selectedTheme, selectedFont);
+    }
+
     console.log(`\nTemplate "${entry.name}" created successfully in ${targetDir}`);
     console.log("\nNext steps:");
     console.log("  pnpm install   # or npm install");
@@ -227,22 +247,37 @@ async function runTemplate(targetDir, templateId, flags) {
  */
 async function main(argv) {
   const { flags, positionals } = parseArgs(argv);
-  const command = positionals[0];
+  let command = positionals[0];
 
   if (flags.help || command === "help" || (!command && argv.length === 0)) {
     console.log(HELP_TEXT.trim());
     return;
   }
 
-  const manifest = loadManifest();
+  if (command === "theme" || command === "font") {
+    const targetDir = process.cwd();
+    const currentConfig = getSavedConfig(targetDir);
 
-  if (command === "list") {
-    printTemplateList(manifest.templates);
+    if (command === "theme") {
+      const selectedTheme = await promptTheme(currentConfig.theme || "theme1");
+      await applyThemeAndFont(targetDir, selectedTheme, currentConfig.font || "default");
+    } else {
+      const selectedFont = await promptFont(currentConfig.font || "default");
+      await applyThemeAndFont(targetDir, currentConfig.theme || "theme1", selectedFont);
+    }
     return;
   }
 
+  const manifest = loadManifest();
+
+  let runWithConfig = flags.config;
+  if (positionals.length >= 2 && positionals[1] === "config") {
+    runWithConfig = true;
+    positionals.splice(1, 1);
+  }
+
   const targetDir = process.cwd();
-  await runTemplate(targetDir, command, flags);
+  await runTemplate(targetDir, command, flags, runWithConfig);
 }
 
 main(process.argv.slice(2)).catch((error) => {

package/cli/theme-manager.js

@@ -0,0 +1,352 @@
+import { createInterface } from "node:readline/promises";
+import { stdin as input, stdout as output } from "node:process";
+import { readdir, readFile, writeFile } from "node:fs/promises";
+import { existsSync, readFileSync } from "node:fs";
+import { join } from "node:path";
+
+export const THEMES = [
+  {
+    id: "theme1",
+    name: "Theme 1 (Slate / Blue)",
+    colors: {
+      primary: "#2563EB",
+      primaryHover: "#1D4ED8",
+      accent: "#38BDF8",
+      accentDark: "#0284C7",
+      accentLight: "#EFF6FF",
+      textMain: "#0F172A",
+      textMuted: "#64748B",
+      bgMain: "#F8FAFC",
+      bgLight: "#EFF6FF",
+      bgCard: "#FFFFFF",
+      footerBg: "#E2E8F0",
+      ctaPrimary: "#2563EB",
+      ctaPrimaryHover: "#1D4ED8",
+    }
+  },
+  {
+    id: "theme2",
+    name: "Theme 2 (Forest / Green)",
+    colors: {
+      primary: "#58812F",
+      primaryHover: "#466725",
+      accent: "#8BC34A",
+      accentDark: "#689F38",
+      accentLight: "#F1F5EA",
+      textMain: "#1D3108",
+      textMuted: "#4A5441",
+      bgMain: "#F9FAF7",
+      bgLight: "#F1F5EA",
+      bgCard: "#FFFFFF",
+      footerBg: "#E6EBDC",
+      ctaPrimary: "#58812F",
+      ctaPrimaryHover: "#466725",
+    }
+  },
+  {
+    id: "theme3",
+    name: "Theme 3 (Purple / Violet)",
+    colors: {
+      primary: "#7C3AED",
+      primaryHover: "#6D28D9",
+      accent: "#A78BFA",
+      accentDark: "#8B5CF6",
+      accentLight: "#F5F3FF",
+      textMain: "#2E1065",
+      textMuted: "#6B6382",
+      bgMain: "#FAF9FF",
+      bgLight: "#F5F3FF",
+      bgCard: "#FFFFFF",
+      footerBg: "#E9E3FF",
+      ctaPrimary: "#7C3AED",
+      ctaPrimaryHover: "#6D28D9",
+    }
+  },
+  {
+    id: "theme4",
+    name: "Theme 4 (Red / Crimson)",
+    colors: {
+      primary: "#DC2626",
+      primaryHover: "#B91C1C",
+      accent: "#F87171",
+      accentDark: "#EF4444",
+      accentLight: "#FEF2F2",
+      textMain: "#450A0A",
+      textMuted: "#7F1D1D",
+      bgMain: "#FFFBFB",
+      bgLight: "#FEF2F2",
+      bgCard: "#FFFFFF",
+      footerBg: "#FEE2E2",
+      ctaPrimary: "#DC2626",
+      ctaPrimaryHover: "#B91C1C",
+    }
+  },
+  {
+    id: "theme5",
+    name: "Theme 5 (Amber / Gold)",
+    colors: {
+      primary: "#D97706",
+      primaryHover: "#B45309",
+      accent: "#FBBF24",
+      accentDark: "#F59E0B",
+      accentLight: "#FFFBEB",
+      textMain: "#1C1917",
+      textMuted: "#78350F",
+      bgMain: "#FFFCF5",
+      bgLight: "#FFFBEB",
+      bgCard: "#FFFFFF",
+      footerBg: "#FEF3C7",
+      ctaPrimary: "#D97706",
+      ctaPrimaryHover: "#B45309",
+    }
+  }
+];
+
+export const FONTS = [
+  {
+    id: "default",
+    name: "Playfair Display (Serif) + Outfit (Sans-serif) [Default]",
+    serif: "'Playfair Display', Georgia, serif",
+    sans: "'Outfit', system-ui, sans-serif",
+    importUrl: "https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap"
+  },
+  {
+    id: "inter",
+    name: "Inter (Sans-serif) + Inter (Sans-serif)",
+    serif: "'Inter', system-ui, sans-serif",
+    sans: "'Inter', system-ui, sans-serif",
+    importUrl: "https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap"
+  },
+  {
+    id: "lora-montserrat",
+    name: "Lora (Serif) + Montserrat (Sans-serif)",
+    serif: "'Lora', Georgia, serif",
+    sans: "'Montserrat', system-ui, sans-serif",
+    importUrl: "https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@300;400;500;600;700&display=swap"
+  },
+  {
+    id: "merriweather-open-sans",
+    name: "Merriweather (Serif) + Open Sans (Sans-serif)",
+    serif: "'Merriweather', Georgia, serif",
+    sans: "'Open Sans', system-ui, sans-serif",
+    importUrl: "https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;1,300&family=Open+Sans:wght@300;400;500;600;700&display=swap"
+  },
+  {
+    id: "cinzel-montserrat",
+    name: "Cinzel (Serif) + Montserrat (Sans-serif)",
+    serif: "'Cinzel', serif",
+    sans: "'Montserrat', system-ui, sans-serif",
+    importUrl: "https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Montserrat:wght@300;400;500;600;700&display=swap"
+  }
+];
+
+export function getSavedConfig(targetDir) {
+  const configPath = join(targetDir, ".tempjsrc");
+  if (existsSync(configPath)) {
+    try {
+      return JSON.parse(readFileSync(configPath, "utf8"));
+    } catch {
+      return {};
+    }
+  }
+  return {};
+}
+
+async function promptSelection(options, promptText, defaultValue) {
+  const rl = createInterface({ input, output });
+  try {
+    console.log(`\n${promptText}`);
+    for (let i = 0; i < options.length; i++) {
+      const isDefault = options[i].id === defaultValue ? " (current default)" : "";
+      console.log(`  [${i + 1}] ${options[i].name}${isDefault}`);
+    }
+    const defaultIndex = options.findIndex(o => o.id === defaultValue) + 1;
+    const placeholder = defaultIndex > 0 ? defaultIndex : 1;
+    const actualDefault = defaultIndex > 0 ? defaultValue : options[0].id;
+
+    while (true) {
+      const answer = await rl.question(`Choose an option (1-${options.length}) [${placeholder}]: `);
+      const trimmed = answer.trim();
+      if (trimmed === "") return actualDefault;
+      const num = parseInt(trimmed, 10);
+      if (num >= 1 && num <= options.length) {
+        return options[num - 1].id;
+      }
+      console.log("Invalid option. Please try again.");
+    }
+  } finally {
+    rl.close();
+  }
+}
+
+export async function promptTheme(currentThemeId = "theme1") {
+  return promptSelection(THEMES, "Available Themes:", currentThemeId);
+}
+
+export async function promptFont(currentFontId = "default") {
+  return promptSelection(FONTS, "Available Font combinations:", currentFontId);
+}
+
+export async function findGlobalsCss(dir) {
+  const commonPaths = [
+    join(dir, "app/globals.css"),
+    join(dir, "src/app/globals.css"),
+    join(dir, "src/globals.css"),
+    join(dir, "globals.css"),
+  ];
+  for (const p of commonPaths) {
+    if (existsSync(p)) return p;
+  }
+
+  async function search(currentDir) {
+    let entries;
+    try {
+      entries = await readdir(currentDir, { withFileTypes: true });
+    } catch {
+      return null;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (
+          entry.name === "node_modules" ||
+          entry.name === ".next" ||
+          entry.name === ".git" ||
+          entry.name === "dist" ||
+          entry.name === "build"
+        ) {
+          continue;
+        }
+        const found = await search(join(currentDir, entry.name));
+        if (found) return found;
+      } else if (entry.name === "globals.css") {
+        return join(currentDir, entry.name);
+      }
+    }
+    return null;
+  }
+  return search(dir);
+}
+
+export async function findSiteTs(dir) {
+  const commonPaths = [
+    join(dir, "constants/site.ts"),
+    join(dir, "src/constants/site.ts"),
+    join(dir, "constants/site.js"),
+    join(dir, "src/constants/site.js"),
+  ];
+  for (const p of commonPaths) {
+    if (existsSync(p)) return p;
+  }
+
+  async function search(currentDir) {
+    let entries;
+    try {
+      entries = await readdir(currentDir, { withFileTypes: true });
+    } catch {
+      return null;
+    }
+    for (const entry of entries) {
+      if (entry.isDirectory()) {
+        if (
+          entry.name === "node_modules" ||
+          entry.name === ".next" ||
+          entry.name === ".git" ||
+          entry.name === "dist" ||
+          entry.name === "build"
+        ) {
+          continue;
+        }
+        const found = await search(join(currentDir, entry.name));
+        if (found) return found;
+      } else if (entry.name === "site.ts" || entry.name === "site.js") {
+        return join(currentDir, entry.name);
+      }
+    }
+    return null;
+  }
+  return search(dir);
+}
+
+export async function applyThemeAndFont(targetDir, themeId, fontId) {
+  const theme = THEMES.find(t => t.id === themeId) || THEMES[0];
+  const font = FONTS.find(f => f.id === fontId) || FONTS[0];
+
+  // 1. Write metadata config file .tempjsrc
+  const configPath = join(targetDir, ".tempjsrc");
+  const config = {
+    theme: theme.id,
+    font: font.id,
+    updatedAt: new Date().toISOString()
+  };
+  await writeFile(configPath, JSON.stringify(config, null, 2), "utf8");
+
+  // 2. Find and update globals.css
+  const globalsPath = await findGlobalsCss(targetDir);
+  if (globalsPath) {
+    const cssDir = join(globalsPath, "..");
+    const themeCssPath = join(cssDir, "tempjs-theme.css");
+
+    // Construct the theme css content
+    const cssContent = `/* tempjs generated theme settings */
+@import url('${font.importUrl}');
+
+:root {
+  --primary: ${theme.colors.primary} !important;
+  --primary-hover: ${theme.colors.primaryHover} !important;
+  --accent-gold: ${theme.colors.accent} !important;
+  --accent-gold-dark: ${theme.colors.accentDark} !important;
+  --accent-gold-light: ${theme.colors.accentLight} !important;
+  --text-main: ${theme.colors.textMain} !important;
+  --text-muted: ${theme.colors.textMuted} !important;
+  --bg-tan: ${theme.colors.bgMain} !important;
+  --bg-light: ${theme.colors.bgLight} !important;
+  --bg-card: ${theme.colors.bgCard} !important;
+  --footer-bg: ${theme.colors.footerBg} !important;
+  --cta-primary: ${theme.colors.ctaPrimary} !important;
+  --cta-primary-hover: ${theme.colors.ctaPrimaryHover} !important;
+
+  --font-serif: ${font.serif} !important;
+  --font-sans: ${font.sans} !important;
+}
+`;
+    await writeFile(themeCssPath, cssContent, "utf8");
+
+    // Ensure it's imported in globals.css
+    let globalsContent = await readFile(globalsPath, "utf8");
+    if (!globalsContent.includes("tempjs-theme.css")) {
+      // Prepend import at the top of the file
+      globalsContent = `@import "./tempjs-theme.css";\n` + globalsContent;
+      await writeFile(globalsPath, globalsContent, "utf8");
+    }
+  } else {
+    console.warn("Could not locate globals.css file in the project. CSS variables and font imports were not applied.");
+  }
+
+  // 3. Find and update site.ts
+  const siteTsPath = await findSiteTs(targetDir);
+  if (siteTsPath) {
+    let siteContent = await readFile(siteTsPath, "utf8");
+    const colorsRegex = /colors:\s*\{[\s\S]*?\}/;
+    const replacement = `colors: {
+      primary: "${theme.colors.primary}",
+      primaryHover: "${theme.colors.primaryHover}",
+      accent: "${theme.colors.accent}",
+      accentDark: "${theme.colors.accentDark}",
+      accentLight: "${theme.colors.accentLight}",
+      textMain: "${theme.colors.textMain}",
+      textMuted: "${theme.colors.textMuted}",
+      bgMain: "${theme.colors.bgMain}",
+      bgLight: "${theme.colors.bgLight}",
+      bgCard: "${theme.colors.bgCard}",
+      footerBg: "${theme.colors.footerBg}",
+      ctaPrimary: "${theme.colors.ctaPrimary}",
+      ctaPrimaryHover: "${theme.colors.ctaPrimaryHover}",
+    }`;
+    if (colorsRegex.test(siteContent)) {
+      siteContent = siteContent.replace(colorsRegex, replacement);
+      await writeFile(siteTsPath, siteContent, "utf8");
+    }
+  }
+
+  console.log(`\nSuccessfully applied theme "${theme.name}" and font pairing "${font.name}".`);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navneet_25/tempjs",
-  "version": "1.0.3",
+  "version": "1.0.4",
   "description": "CLI to instantiate website project templates from a single GitHub repository",
   "type": "module",
   "bin": {