@karaoke-cms/create 0.9.0 → 0.9.2

package/karaoke-create-vault/.obsidian/workspace.json

@@ -27,12 +27,12 @@
             "state": {
               "type": "markdown",
               "state": {
-                "file": "karaoke-cms/templates/docs-header.md",
+                "file": "karaoke-cms/manual/configuration.md",
                 "mode": "source",
                 "source": false
               },
               "icon": "lucide-file",
-              "title": "docs-header"
+              "title": "configuration"
             }
           }
         ],
@@ -183,10 +183,10 @@
             "state": {
               "type": "file-properties",
               "state": {
-                "file": "karaoke-cms/templates/docs-header.md"
+                "file": "karaoke-cms/manual/configuration.md"
               },
               "icon": "lucide-info",
-              "title": "File properties for docs-header"
+              "title": "File properties for configuration"
             }
           }
         ],
@@ -210,8 +210,10 @@
   },
   "active": "52e565c48d7a7c39",
   "lastOpenFiles": [
-    "karaoke-cms/templates/blog-header.md",
+    "karaoke-cms/templates/index.md",
+    "karaoke-cms/config/index.md",
     "karaoke-cms/templates/docs-header.md",
+    "karaoke-cms/templates/blog-header.md",
     "karaoke-cms/templates/index-by-foldernote.md",
     "karaoke-cms/manual/content.md",
     "karaoke-cms/manual/configuration.md",

package/karaoke-create-vault/karaoke-cms/config/index.md

@@ -0,0 +1,14 @@
+---
+title: "Config"
+---
+
+# Config
+
+Configuration files for your karaoke-cms vault.
+
+| File | Purpose |
+|------|---------|
+| `collections.yaml` | Which collections are visible in dev vs production |
+| `menus.yaml` | Site navigation: header menu, footer columns, and their entries |
+
+Edit these files to change what appears on your site and in the navigation. Changes take effect on the next dev server restart or build.

package/karaoke-create-vault/karaoke-cms/config/menus.yaml

@@ -24,9 +24,34 @@ menus:
       - text: Tags
         href: /tags
         weight: 30
+      - text: karaoke-cms
+        href: /karaoke-cms
+        weight: 40
+        when: collection:karaoke-cms
+
+  footer-2:
+    orientation: vertical
+    entries:
+      - text: karaoke-cms
+        href: /karaoke-cms/manual/index
+        weight: 10
+        when: collection:karaoke-cms
+        entries:
+          - text: Manual
+            href: /karaoke-cms/manual/index
+            weight: 10
+            when: collection:karaoke-cms
+          - text: Config
+            href: /karaoke-cms/config/index
+            weight: 20
+            when: collection:karaoke-cms
+          - text: Templates
+            href: /karaoke-cms/templates/index
+            weight: 30
+            when: collection:karaoke-cms
 
   footer:
-    orientation: horizontal
+    orientation: vertical
     entries:
       - text: RSS
         href: /rss.xml

package/karaoke-create-vault/karaoke-cms/templates/index.md

@@ -0,0 +1,15 @@
+---
+title: "Templates"
+---
+
+# Templates
+
+Obsidian templates for common note types. Use with the [Templater](https://github.com/SilentVoid13/Templater) plugin.
+
+| Template | Use for |
+|----------|---------|
+| `blog-header.md` | New blog posts — sets `title`, `date`, `publish: false` |
+| `docs-header.md` | New documentation pages |
+| `index-by-foldernote.md` | Folder index notes (requires the folder-notes Obsidian plugin) |
+
+In Templater settings, set the template folder to `karaoke-cms/templates`.

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@karaoke-cms/create",
   "type": "module",
-  "version": "0.9.0",
+  "version": "0.9.2",
   "description": "Scaffold a new karaoke-cms project",
   "bin": {
     "create-karaoke-cms": "./src/index.js"
@@ -24,6 +24,6 @@
     "vitest": "^4.1.1"
   },
   "scripts": {
-    "test": "vitest run test/templates.test.js"
+    "test": "vitest run test/templates.test.js test/index.test.js"
   }
 }

package/src/index.js

@@ -13,7 +13,7 @@ import { fileURLToPath } from 'url';
 import { spawnSync } from 'child_process';
 import {
   packageJson, astroConfig, karaokeConfig, contentConfig,
-  envDts, tsConfig, gitignore, envDefault, cloudflareRedirects,
+  envDts, tsConfig, gitignore, envDefault, cloudflareRedirects, slugify,
 } from './templates.js';
 
 // ── ANSI helpers ─────────────────────────────────────────────────────────────
@@ -108,7 +108,6 @@ async function main() {
     .replace(/\b\w/g, c => c.toUpperCase());
 
   const title = await ask('Site title', defaultTitle);
-  const siteUrl = await ask('Site URL', 'https://my-site.pages.dev');
   const description = await ask('Description', 'Our team knowledge base.');
   const themeChoice = await askChoice('Theme', ['default', 'minimal', 'blog'], 0);
   const theme = themeChoice === 'default' || themeChoice === 'minimal'
@@ -127,14 +126,15 @@ async function main() {
     comments = { repo, repoId, category, categoryId };
   }
 
-  rl.close();
-
   // ── Scaffold ────────────────────────────────────────────────────────────────
   console.log(`\n  Scaffolding ${BOLD}${dir}${R}...\n`);
 
   mkdirSync(join(targetDir, 'src'), { recursive: true });
   mkdirSync(join(targetDir, 'public'), { recursive: true });
 
+  // siteUrl placeholder — replaced with the real *.pages.dev URL after deploy
+  const siteUrl = 'https://your-site.pages.dev';
+
   // Config and project files from templates
   const files = {
     'package.json':           packageJson({ name: dir, astroVersion, theme }),
@@ -175,12 +175,36 @@ async function main() {
     console.log(`  ${GRAY}  (git init skipped — install git and run it manually)${R}`);
   }
 
-  // ── Done ────────────────────────────────────────────────────────────────────
+  // ── npm install ──────────────────────────────────────────────────────────────
+  console.log(`\n  Installing dependencies...\n`);
+  const installResult = spawnSync('npm', ['install'], { cwd: targetDir, stdio: 'inherit' });
+  if (installResult.status !== 0) {
+    console.log(`  ${GRAY}(install failed — run npm install manually)${R}`);
+  }
+
+  // ── Deploy prompt ────────────────────────────────────────────────────────────
+  const deployNow = await askYesNo('Publish a live preview to Cloudflare Pages now?', false);
+
+  rl.close();
+
+  let liveUrl = null;
+  if (deployNow) {
+    const projectName = `${slugify(dir)}-preview`;
+    liveUrl = await deployToCloudflare(targetDir, projectName);
+  }
+
+  // ── Success screen ───────────────────────────────────────────────────────────
   console.log(`\n${GREEN}✓${R} Done! Created ${BOLD}${dir}/${R}\n`);
-  console.log(`  Next steps:\n`);
-  console.log(`  ${CYAN}cd ${dir}${R}`);
-  console.log(`  ${CYAN}npm install${R}`);
-  console.log(`  ${CYAN}npm run dev${R}    ${GRAY}→ http://localhost:4321${R}\n`);
+  if (liveUrl) {
+    console.log(`  ${BOLD}🎤 Live:${R}      ${liveUrl}`);
+    console.log(`  ${BOLD}💻 Dev:${R}       ${CYAN}cd ${dir} && npm run dev${R}`);
+    console.log(`  ${BOLD}🔄 Redeploy:${R}  ${CYAN}npm run deploy${R}\n`);
+  } else {
+    console.log(`  Next steps:\n`);
+    console.log(`  ${CYAN}cd ${dir}${R}`);
+    console.log(`  ${CYAN}npm run dev${R}    ${GRAY}→ http://localhost:4321${R}`);
+    console.log(`  ${CYAN}npm run deploy${R} ${GRAY}→ publish to Cloudflare Pages${R}\n`);
+  }
   console.log(`  ${GRAY}Open ${BOLD}${dir}/vault/${R}${GRAY} in Obsidian to write content.${R}\n`);
 }
 
@@ -188,3 +212,60 @@ main().catch(err => {
   console.error(`\n${RED}✗${R} ${err.message}`);
   process.exit(1);
 });
+
+// ── Cloudflare Pages deploy ───────────────────────────────────────────────────
+export async function deployToCloudflare(targetDir, projectName) {
+  console.log(`\n  ${BOLD}Deploying to Cloudflare Pages...${R}\n`);
+
+  // 1. Check if logged in
+  const whoami = spawnSync('npx', ['wrangler', 'whoami', '--json'],
+    { cwd: targetDir, encoding: 'utf8' });
+
+  if (whoami.status !== 0 || whoami.stdout.includes('You are not authenticated')) {
+    console.log(`  ${CYAN}Opening Cloudflare login...${R}`);
+    const login = spawnSync('npx', ['wrangler', 'login'],
+      { cwd: targetDir, stdio: 'inherit' });
+    if (login.status !== 0) {
+      console.log(`  ${GRAY}Login cancelled — run 'npm run deploy' when ready.${R}`);
+      return null;
+    }
+  }
+
+  // 2. Build
+  console.log(`  ${CYAN}Building...${R}`);
+  const build = spawnSync('npm', ['run', 'build'],
+    { cwd: targetDir, stdio: 'inherit' });
+  if (build.status !== 0) {
+    console.log(`  ${RED}Build failed — run 'npm run deploy' when ready.${R}`);
+    return null;
+  }
+
+  // 3. Create Pages project — best-effort, ignore failure (project may already exist on re-run)
+  const accountId = process.env.CLOUDFLARE_ACCOUNT_ID;
+  const createArgs = ['wrangler', 'pages', 'project', 'create', projectName,
+    '--production-branch', 'main'];
+  if (accountId) createArgs.push('--account-id', accountId);
+  spawnSync('npx', createArgs, { cwd: targetDir, stdio: 'pipe' });
+
+  // 4. Deploy — stdio: inherit so wrangler output + interactive prompts (e.g. account picker) are visible
+  console.log(`  ${CYAN}Uploading...${R}`);
+  const deployArgs = ['wrangler', 'pages', 'deploy', 'dist',
+    `--project-name=${projectName}`];
+  if (accountId) deployArgs.push('--account-id', accountId);
+  const deploy = spawnSync('npx', deployArgs, { cwd: targetDir, stdio: 'inherit' });
+
+  if (deploy.status !== 0) {
+    console.log(`  ${RED}Deploy failed — run 'npm run deploy' when ready.${R}`);
+    return null;
+  }
+
+  // 5. URL is deterministic — no need to parse wrangler stdout
+  const liveUrl = `https://${projectName}.pages.dev`;
+
+  // 6. Write real URL back to astro.config.mjs (replaces placeholder set during scaffold)
+  const configPath = join(targetDir, 'astro.config.mjs');
+  const configSrc = readFileSync(configPath, 'utf8');
+  writeFileSync(configPath, configSrc.replace('https://your-site.pages.dev', liveUrl));
+
+  return liveUrl;
+}

package/src/templates.js

@@ -4,10 +4,25 @@
  * Exported separately so they're independently testable.
  */
 
+/**
+ * Compute a Cloudflare-safe project slug from a directory name.
+ * Rules: lowercase, spaces/underscores → hyphens, non-alphanumeric stripped,
+ * truncated to 24 chars (leaves room for the -preview suffix within CF's 28-char limit).
+ * @param {string} dir
+ */
+export function slugify(dir) {
+  return dir
+    .toLowerCase()
+    .replace(/[\s_]+/g, '-')
+    .replace(/[^a-z0-9-]/g, '')
+    .slice(0, 24);
+}
+
 /**
  * @param {{ name: string, astroVersion: string, theme?: string }} opts
  */
 export function packageJson({ name, astroVersion, theme }) {
+  const projectSlug = slugify(name);
   const dependencies = {
     '@karaoke-cms/astro': `^${astroVersion}`,
     astro: '^6.0.0',
@@ -24,8 +39,12 @@ export function packageJson({ name, astroVersion, theme }) {
       dev: 'astro dev',
       build: 'astro build',
       preview: 'astro preview',
+      deploy: `astro build && npx wrangler pages deploy dist --project-name=${projectSlug}-preview`,
     },
     dependencies,
+    devDependencies: {
+      wrangler: '^3',
+    },
   }, null, 2) + '\n';
 }