create-campsitejs 0.0.1 → 0.0.3

package/index.js

@@ -11,6 +11,17 @@ const __dirname = dirname(fileURLToPath(import.meta.url));
 const templateDir = join(__dirname, "template");
 // Variant pages live under the template folder
 const variantDir = join(templateDir, "variants");
+const pkgJsonPath = join(__dirname, "package.json");
+
+async function getCliVersion() {
+  try {
+    const raw = await readFile(pkgJsonPath, "utf8");
+    const pkg = JSON.parse(raw);
+    return pkg.version || "0.0.0";
+  } catch {
+    return "0.0.0";
+  }
+}
 
 function formatPackageName(name) {
   return name
@@ -71,11 +82,13 @@ async function writeConfig(targetDir, answers) {
   outDir: "dist",
   templateEngine: "${primaryEngine}",
   markdown: ${answers.markdown},
+  minifyCSS: false,
+  minifyHTML: false,
   integrations: {
     nunjucks: ${answers.templateEngines.includes("nunjucks")},
     liquid: ${answers.templateEngines.includes("liquid")},
-    vue: ${answers.templateEngines.includes("vue")},
-    alpine: ${answers.templateEngines.includes("alpine")}
+    vue: ${answers.jsFrameworks.includes("vue")},
+    alpine: ${answers.jsFrameworks.includes("alpine")}
   }
 };
 `;
@@ -90,19 +103,60 @@ async function updatePackageJson(targetDir, answers) {
   pkg.devDependencies = pkg.devDependencies || {};
   const deps = pkg.dependencies;
   const devDeps = pkg.devDependencies;
+  pkg.scripts = pkg.scripts || {};
   const localCoreDir = resolve(__dirname, "../basecampjs");
   if (existsSync(localCoreDir)) {
     const relCore = relative(targetDir, localCoreDir) || ".";
-    deps["basecampjs"] = `file:${relCore}`;
+    devDeps["basecampjs"] = `file:${relCore}`;
+  } else {
+    devDeps["basecampjs"] = "^0.0.1";
+  }
+  if (answers.markdown) devDeps["markdown-it"] = "^14.1.0";
+  if (answers.templateEngines.includes("nunjucks")) devDeps["nunjucks"] = "^3.2.4";
+  if (answers.templateEngines.includes("liquid")) devDeps["liquidjs"] = "^10.12.0";
+  if (answers.jsFrameworks.includes("vue")) deps["vue"] = "^3.4.0";
+  if (answers.jsFrameworks.includes("alpine")) deps["alpinejs"] = "^3.13.0";
+
+  // CSS framework selection
+  const cssFramework = answers.cssFramework || "tailwind";
+  const cssDeps = {
+    bootstrap: ["bootstrap", "^5.3.3"],
+    foundation: ["foundation-sites", "^6.8.1"],
+    bulma: ["bulma", "^0.9.4"]
+  };
+
+  // Reset CSS-related scripts before applying framework-specific ones
+  ["build:css", "dev:css", "dev:site", "prebuild", "postinstall"].forEach((script) => {
+    delete pkg.scripts[script];
+  });
+
+  if (cssFramework === "tailwind") {
+    devDeps["tailwindcss"] = "^3.4.13";
+    devDeps["npm-run-all"] = "^4.1.5";
+    pkg.scripts["build:css"] = "tailwindcss -c tailwind.config.cjs -i ./src/styles/tailwind.css -o ./public/style.css --minify";
+    pkg.scripts["dev:css"] = "tailwindcss -c tailwind.config.cjs -i ./src/styles/tailwind.css -o ./public/style.css --watch";
+    pkg.scripts["dev:site"] = "campsite dev";
+    pkg.scripts["dev"] = "npm-run-all -p dev:css dev:site";
+    pkg.scripts["prebuild"] = "npm run build:css";
+    pkg.scripts["build"] = "campsite build";
+    pkg.scripts["serve"] = "campsite serve";
+    pkg.scripts["postinstall"] = "npm run build:css";
   } else {
-    deps["basecampjs"] = "^0.0.1";
+    delete devDeps["tailwindcss"];
+    delete devDeps["npm-run-all"];
+    Object.entries(cssDeps).forEach(([key, [name]]) => {
+      if (key !== cssFramework) delete deps[name];
+    });
+    const selected = cssDeps[cssFramework];
+    if (selected) {
+      const [name, version] = selected;
+      deps[name] = version;
+    }
+    pkg.scripts["dev"] = "campsite dev";
+    pkg.scripts["build"] = "campsite build";
+    pkg.scripts["serve"] = "campsite serve";
   }
-  if (answers.markdown) deps["markdown-it"] = "^14.1.0";
-  if (answers.templateEngines.includes("nunjucks")) deps["nunjucks"] = "^3.2.4";
-  if (answers.templateEngines.includes("liquid")) deps["liquidjs"] = "^10.12.0";
-  if (answers.templateEngines.includes("vue")) deps["vue"] = "^3.4.0";
-  if (answers.templateEngines.includes("alpine")) deps["alpinejs"] = "^3.13.0";
-  devDeps["tailwindcss"] = "^3.4.13";
+
   await writeFile(pkgPath, JSON.stringify(pkg, null, 2), "utf8");
 }
 
@@ -119,14 +173,23 @@ async function swapPageTemplates(targetDir, answers) {
 
 async function pruneComponents(targetDir, answers) {
   const componentDir = join(targetDir, "src", "components");
-  if (!answers.templateEngines.includes("vue")) {
+  if (!answers.jsFrameworks.includes("vue")) {
     await rm(join(componentDir, "HelloCampsite.vue")).catch(() => {});
   }
-  if (!answers.templateEngines.includes("alpine")) {
+  if (!answers.jsFrameworks.includes("alpine")) {
     await rm(join(componentDir, "alpine-card.html")).catch(() => {});
   }
 }
 
+async function pruneCssFramework(targetDir, answers) {
+  if (answers.cssFramework === "tailwind") return;
+  const tailwindFiles = [
+    join(targetDir, "tailwind.config.cjs"),
+    join(targetDir, "src", "styles", "tailwind.css")
+  ];
+  await Promise.all(tailwindFiles.map((file) => rm(file).catch(() => {})));
+}
+
 async function installDependencies(targetDir, packageManager) {
   return new Promise((resolve, reject) => {
     const child = spawn(packageManager, ["install"], {
@@ -142,8 +205,9 @@ async function installDependencies(targetDir, packageManager) {
 }
 
 async function main() {
-  console.log(kleur.bold().cyan("\n🏕️ Welcome to Campsite"));
-  console.log(kleur.dim("Scaffold a cozy static site in seconds.\n"));
+  const version = await getCliVersion();
+  console.log(kleur.bold().cyan(`\n🏕️  Welcome to CampSiteJS v${version}`));
+  console.log(kleur.dim("Build a cozy static campsite in seconds.\n"));
 
   const argProjectName = process.argv[2];
   const defaultProjectName = argProjectName || nextCampsiteName(process.cwd());
@@ -165,15 +229,37 @@ async function main() {
     {
       type: "multiselect",
       name: "templateEngines",
-      message: "Choose templating and UI options",
+      message: "Choose templating engines",
       hint: "Use space to toggle, enter to confirm",
       instructions: false,
       min: 1,
       choices: [
         { title: "Nunjucks", value: "nunjucks", selected: true },
-        { title: "Liquid", value: "liquid", selected: true },
-        { title: "Vue components", value: "vue" },
-        { title: "AlpineJS sprinkles", value: "alpine" }
+        { title: "Liquid", value: "liquid" }
+      ]
+    },
+    {
+      type: "multiselect",
+      name: "jsFrameworks",
+      message: "Sprinkle in JS frameworks?",
+      hint: "Use space to toggle, enter to confirm",
+      instructions: false,
+      min: 0,
+      choices: [
+        { title: "Alpine.js", value: "alpine", selected: true },
+        { title: "Vue.js", value: "vue" }
+      ]
+    },
+    {
+      type: "select",
+      name: "cssFramework",
+      message: "CSS framework",
+      initial: 0,
+      choices: [
+        { title: "Tailwind CSS", value: "tailwind" },
+        { title: "Bootstrap", value: "bootstrap" },
+        { title: "Foundation", value: "foundation" },
+        { title: "Bulma", value: "bulma" }
       ]
     },
     {
@@ -208,6 +294,7 @@ async function main() {
   await copyBaseTemplate(targetDir);
   await swapPageTemplates(targetDir, answers);
   await pruneComponents(targetDir, answers);
+  await pruneCssFramework(targetDir, answers);
   await writeConfig(targetDir, answers);
   await updatePackageJson(targetDir, answers);
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "create-campsitejs",
-  "version": "0.0.1",
+  "version": "0.0.3",
   "type": "module",
   "description": "Create a new Campsite static site (create-campsitejs alias).",
   "bin": {

package/template/campsite.config.js

@@ -4,6 +4,8 @@ export default {
   outDir: "dist",
   templateEngine: "nunjucks",
   markdown: true,
+  minifyCSS: false,
+  minifyHTML: false,
   integrations: {
     nunjucks: true,
     liquid: false,

package/template/src/layouts/base.njk

@@ -1,35 +1,26 @@
-<!doctype html>
+{% set meta_title = frontmatter.title or title or site.name %}{% set meta_description = frontmatter.description or page.description or "A cozy Campsite starter." %}{% set meta_url = frontmatter.canonical or frontmatter.url %}<!doctype html>
 <html lang="en" class="min-h-screen bg-radial bg-gradient-to-br from-campfire-900 from-10% to-black to-90%">
-
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  {% set meta_title = frontmatter.title or title or site.name %}
-  {% set meta_description = frontmatter.description or page.description or "A cozy Campsite starter." %}
-  {% set meta_url = frontmatter.canonical or frontmatter.url %}
   <title>{{ meta_title }}</title>
-  <meta name="description" content="{{ meta_description }}">
-  {% if frontmatter.robots %}
-  <meta name="robots" content="{{ frontmatter.robots }}">{% endif %}
-  {% if meta_url %}
+  <meta name="description" content="{{ meta_description }}">{% if frontmatter.robots %}
+  <meta name="robots" content="{{ frontmatter.robots }}">{% endif %}{% if meta_url %}
   <link rel="canonical" href="{{ meta_url }}">{% endif %}
   <meta property="og:title" content="{{ meta_title }}">
-  <meta property="og:description" content="{{ meta_description }}">
-  {% if meta_url %}
+  <meta property="og:description" content="{{ meta_description }}">{% if meta_url %}
   <meta property="og:url" content="{{ meta_url }}">{% endif %}
   <meta property="og:type" content="{{ frontmatter.og_type or " website" }}">
   <meta property="og:site_name" content="{{ site.name }}">
   <meta name="twitter:card" content="{{ frontmatter.twitter_card or " summary_large_image" }}">
   <meta name="twitter:title" content="{{ meta_title }}">
-  <meta name="twitter:description" content="{{ meta_description }}">
-  {% if meta_url %}
+  <meta name="twitter:description" content="{{ meta_description }}">{% if meta_url %}
   <meta name="twitter:url" content="{{ meta_url }}">{% endif %}
   <link rel="stylesheet" href="/style.css">
   <link rel="preconnect" href="https://fonts.googleapis.com">
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=Caprasimo&display=swap" rel="stylesheet">
 </head>
-
 <body class="space-y-12 font-serif">
   <header class="bg-stone-950 flex items-stretch justify-between py-2 px-6">
     <a href="/" class="inline-flex items-center text-amber-50 font-bold text-lg tracking-wide py-3">
@@ -37,7 +28,7 @@
     </a>
     <nav class="flex items-center gap-2">
       <a href="/" class="px-2">Home</a>
-      <a href="https://github.com/FoxGroveMedia/campsite" target="_blank" rel="noreferrer" class="px-2">Docs</a>
+      <a href="https://campsite.foxgrovemedia.com/docs/overview" target="_blank" rel="noreferrer" class="px-2">Docs</a>
       <a href="https://github.com/FoxGroveMedia" target="_blank" rel="noreferrer">
         <svg class="size-7" fill="currentColor" xmlns="http://www.w3.org/2000/svg"
           viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.-->
@@ -57,24 +48,17 @@
   <main class="mx-auto max-w-5xl px-4 sm:px-6 lg:px-8">
     <div
       class="rounded-lg bg-white/5 shadow dark:bg-gray-800/50 dark:shadow-none dark:outline dark:outline-1 dark:-outline-offset-1 dark:outline-white/10 text-white">
-      <div class="px-4 py-5 sm:p-6">
-        {% block content %}
-        {% if content %}
-        {{ content | safe }}
-        {% else %}
+      <div class="px-4 py-5 sm:p-6">{% block content %}{% if content %}
+        {{ content | safe }}{% else %}
         <section class="hero">
           <p class="eyebrow">Campfire ready</p>
           <h1>Welcome to Campsite</h1>
           <p>Edit <code>src/pages/index.md</code> to get started.</p>
-        </section>
-        {% endif %}
-        {% endblock %}
-      </div>
+        </section>{% endif %}{% endblock %}</div>
     </div>
   </main>
   <footer class="text-xs text-amber-50/40 text-center">
     <p>Built with <span class="font-semibold text-amber-50/60">Campsite</span>.</p>
   </footer>
 </body>
-
 </html>

package/template/src/pages/404.njk

@@ -0,0 +1,13 @@
+---
+title: Error 404 - Page Not Found
+layout: base.njk
+description: The page you are looking for does not exist.
+---
+
+<div class="flex min-h-96 flex-col items-center justify-center bg-stone-900 px-4 text-center">
+   <h1 class="text-6xl font-display font-bold text-amber-500 mb-4">404</h1>
+   <p class="text-xl text-stone-400 mb-8">Oops! The page you're looking for can't be found.</p>
+   <a href="/" class="inline-block rounded bg-amber-500 px-6 py-3 font-semibold text-white hover:bg-amber-600 transition">
+      Go Back Home
+   </a>
+</div>