@leadertechie/create-personal-site 0.1.0-alpha.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 leadertechie
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,39 @@
+# create-personal-site
+
+A CLI to scaffold a personal website powered by [@leadertechie/personal-site-kit](https://github.com/leadertechie/personal-site-kit).
+
+## Features
+
+- Interactive CLI prompts for project setup
+- Auto-fetches GitHub profile to personalize content
+- Generates project structure with Cloudflare Workers configuration
+- Creates starter content (home page, about page, metadata)
+
+## Usage
+
+```bash
+npx @leadertechie/create-personal-site [project-name]
+```
+
+Examples:
+
+```bash
+# Interactive prompts
+npx @leadertechie/create-personal-site
+
+# Specify project name upfront
+npx @leadertechie/create-personal-site my-portfolio
+```
+
+## Requirements
+
+- Node.js 20+
+- npm
+
+## What it creates
+
+- `content/` - Your website content (pages, markdown files)
+- `api/` - Cloudflare Worker API entry point
+- `ui/` - Frontend entry point
+- `prerender/` - Static prerendering setup
+- `wrangler.toml` - Cloudflare Workers configuration

package/dist/index.js

@@ -0,0 +1,141 @@
+#!/usr/bin/env node
+import prompts from 'prompts';
+import { red, green, blue } from 'kolorist';
+import fs from 'fs-extra';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+async function fetchGithubProfile(username) {
+    if (!username)
+        return null;
+    try {
+        const res = await fetch("https://api.github.com/users/" + username);
+        if (res.ok)
+            return await res.json();
+    }
+    catch (_e) { }
+    return null;
+}
+async function init() {
+    const args = process.argv.slice(2);
+    const projectNameArg = args[0];
+    const response = await prompts([
+        {
+            type: projectNameArg ? null : 'text',
+            name: 'projectName',
+            message: 'Project name:',
+            initial: 'my-personal-site'
+        },
+        {
+            type: 'text',
+            name: 'githubUsername',
+            message: 'GitHub username: (optional, press enter to skip)',
+            initial: ''
+        },
+        {
+            type: 'text',
+            name: 'siteTitle',
+            message: 'Site title:',
+            initial: 'My Personal Website'
+        }
+    ]);
+    const projectName = projectNameArg || response.projectName;
+    const { githubUsername, siteTitle } = response;
+    if (!projectName) {
+        console.log(red('Cancelled.'));
+        return;
+    }
+    const root = path.join(process.cwd(), projectName);
+    console.log("\nCreating project in " + blue(root) + "...");
+    await fs.ensureDir(root);
+    let profile = await fetchGithubProfile(githubUsername);
+    if (profile) {
+        console.log(green("Fetched GitHub profile for " + profile.name));
+    }
+    const contentDir = path.join(root, 'content');
+    const pagesDir = path.join(contentDir, 'pages');
+    await fs.ensureDir(contentDir);
+    await fs.ensureDir(pagesDir);
+    const aboutMe = "# About Me\n\n" + (profile?.bio || "Welcome to my site!") + "\n\nFind more on my [GitHub](" + (profile?.html_url || "") + ").";
+    await fs.writeFile(path.join(contentDir, 'about-me.md'), aboutMe);
+    const homePageTitle = profile?.name || "My Personal Website";
+    const homePage = `---
+title: ${homePageTitle}
+date: ${new Date().toISOString().split('T')[0]}
+description: Welcome to my personal website.
+---
+
+# ${homePageTitle}
+
+Welcome to my site!`;
+    await fs.writeFile(path.join(pagesDir, 'home.md'), homePage);
+    const staticDetails = {
+        siteTitle: siteTitle || profile?.name || "My Personal Website",
+        siteDescription: profile?.bio || "Welcome to my professional portfolio.",
+        copyright: new Date().getFullYear() + " " + (profile?.name || "All Rights Reserved"),
+        linkedin: "",
+        github: profile?.html_url || "",
+        email: profile?.email || ""
+    };
+    await fs.writeFile(path.join(contentDir, 'static-details.json'), JSON.stringify(staticDetails, null, 2));
+    await fs.copy(path.join(__dirname, '..', 'templates'), root);
+    await fs.ensureDir(path.join(root, 'api'));
+    await fs.ensureDir(path.join(root, 'ui'));
+    await fs.ensureDir(path.join(root, 'prerender'));
+    await fs.ensureDir(path.join(root, 'scripts'));
+    // Copy seed script from dist to target
+    const seedSrc = path.join(__dirname, 'scripts/seed.js');
+    if (await fs.pathExists(seedSrc)) {
+        await fs.copy(seedSrc, path.join(root, 'scripts/seed.js'));
+    }
+    await fs.writeFile(path.join(root, 'api/index.ts'), "import { WebsiteAPI } from '@leadertechie/personal-site-kit/api';\n\nconst api = new WebsiteAPI();\nexport default api;\n");
+    // UI Entry with Hook pattern - NO local styles.css
+    await fs.writeFile(path.join(root, 'ui/index.ts'), "import '@leadertechie/personal-site-kit/styles/theme.css';\nimport { WebsiteUI } from '@leadertechie/personal-site-kit/shared';\nimport '@leadertechie/personal-site-kit/ui';\n\nWebsiteUI.getInstance({\n  // Using hooks for style overriding or custom logic\n  theme: {\n    // primaryColor: '#646cff',\n    // customCss: ':root { --nav-link-color: blue; }'\n  },\n  onBootstrap: (ui) => {\n    console.log('Site is booting up with kit!');\n  }\n}).bootstrap();\n");
+    await fs.writeFile(path.join(root, 'prerender/index.ts'), "import { WebsitePrerender } from '@leadertechie/personal-site-kit/prerender';\n\nexport default new WebsitePrerender();\n");
+    const wranglerToml = await fs.readFile(path.join(root, 'wrangler.toml'), 'utf-8');
+    const processedToml = wranglerToml
+        .replace(/\{\{name\}\}/g, projectName)
+        .replace(/\{\{siteTitle\}\}/g, siteTitle || 'My Personal Website');
+    await fs.writeFile(path.join(root, 'wrangler.toml'), processedToml);
+    const indexHtmlPath = path.join(root, 'ui/index.html');
+    if (await fs.pathExists(indexHtmlPath)) {
+        const indexHtml = await fs.readFile(indexHtmlPath, 'utf-8');
+        await fs.writeFile(indexHtmlPath, indexHtml.replace(/\{\{siteTitle\}\}/g, siteTitle || 'My Personal Website'));
+    }
+    const readme = await fs.readFile(path.join(root, 'README.md'), 'utf-8');
+    await fs.writeFile(path.join(root, 'README.md'), readme.replace(/\{\{name\}\}/g, projectName));
+    const pkg = {
+        name: projectName,
+        version: '0.1.0',
+        private: true,
+        type: 'module',
+        scripts: {
+            "dev": "concurrently \"npm run dev:api\" \"npm run dev:ui\"",
+            "dev:api": "wrangler dev",
+            "dev:ui": "vite",
+            "build": "npm run build:ui && npm run build:api",
+            "build:ui": "vite build",
+            "build:api": "wrangler deploy --dry-run --outdir dist/api",
+            "deploy": "npm run build && wrangler deploy",
+            "seed": "node scripts/seed.js"
+        },
+        dependencies: {
+            "@leadertechie/personal-site-kit": "latest",
+            "lit": "^3.2.1"
+        },
+        devDependencies: {
+            "wrangler": "^4.79.0",
+            "vite": "^7.3.1",
+            "typescript": "^5.7.3",
+            "concurrently": "^9.1.2"
+        }
+    };
+    await fs.writeFile(path.join(root, 'package.json'), JSON.stringify(pkg, null, 2));
+    console.log("\n" + green('Done!') + " Now run:\n");
+    console.log("  cd " + projectName);
+    console.log("  npm install");
+    console.log("  # Update wrangler.toml with your R2 bucket name");
+    console.log("  npm run dev");
+}
+init().catch(e => console.error(red(e)));

package/dist/scripts/seed.js

@@ -0,0 +1,97 @@
+import fs from 'fs';
+import path from 'path';
+import { fileURLToPath } from 'url';
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const ROOT = path.join(__dirname, '..');
+const CONTENT_DIR = path.join(ROOT, 'content');
+// Configuration - can be overridden by env vars
+const API_URL = process.env.API_URL || 'http://localhost:8787';
+const ADMIN_USER = process.env.ADMIN_USER || 'admin';
+const ADMIN_PASS = process.env.ADMIN_PASS || 'adminpassword123';
+async function seed() {
+    console.log(`🚀 Starting seed process for ${API_URL}...`);
+    try {
+        // 1. Check Auth Status
+        const statusRes = await fetch(`${API_URL}/api/auth/status`);
+        const status = await statusRes.json();
+        let sessionToken = '';
+        if (!status.configured) {
+            console.log('📝 Admin not configured. Performing first-time setup...');
+            const setupRes = await fetch(`${API_URL}/api/auth/setup`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username: ADMIN_USER, password: ADMIN_PASS })
+            });
+            if (!setupRes.ok) {
+                const error = await setupRes.json();
+                throw new Error(`Setup failed: ${error.error || setupRes.statusText}`);
+            }
+            sessionToken = setupRes.headers.get('X-Session-Token');
+            console.log('✅ Admin configured successfully.');
+        }
+        else {
+            console.log(`🔑 Admin already configured as "${status.username}". Logging in...`);
+            const loginRes = await fetch(`${API_URL}/api/auth/login`, {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ username: ADMIN_USER, password: ADMIN_PASS })
+            });
+            if (!loginRes.ok) {
+                throw new Error('Login failed. Please check ADMIN_USER and ADMIN_PASS env vars.');
+            }
+            sessionToken = loginRes.headers.get('X-Session-Token');
+            console.log('✅ Login successful.');
+        }
+        if (!sessionToken) {
+            throw new Error('No session token received.');
+        }
+        // 2. Upload Content
+        console.log('📂 Syncing content directory...');
+        await uploadDirectory(CONTENT_DIR, '', sessionToken);
+        console.log('\n✨ Seeding complete!');
+    }
+    catch (err) {
+        console.error(`\n❌ Seeding failed: ${err instanceof Error ? err.message : String(err)}`);
+        process.exit(1);
+    }
+}
+async function uploadDirectory(dir, subpath, token) {
+    const entries = fs.readdirSync(dir, { withFileTypes: true });
+    for (const entry of entries) {
+        const fullPath = path.join(dir, entry.name);
+        const remotePath = subpath ? `${subpath}/${entry.name}` : entry.name;
+        if (entry.isDirectory()) {
+            await uploadDirectory(fullPath, remotePath, token);
+        }
+        else {
+            process.stdout.write(`  ⬆️  Uploading ${remotePath}... `);
+            const content = fs.readFileSync(fullPath);
+            const res = await fetch(`${API_URL}/api/content/${remotePath}`, {
+                method: 'PUT',
+                headers: {
+                    'X-Session-Token': token,
+                    'Content-Type': getContentType(entry.name)
+                },
+                body: content
+            });
+            if (res.ok) {
+                console.log('Done.');
+            }
+            else {
+                console.log('Failed.');
+                const err = await res.json().catch(() => ({ error: res.statusText }));
+                console.error(`     Error: ${err.error}`);
+            }
+        }
+    }
+}
+function getContentType(filename) {
+    if (filename.endsWith('.md'))
+        return 'text/markdown';
+    if (filename.endsWith('.json'))
+        return 'application/json';
+    if (filename.endsWith('.svg'))
+        return 'image/svg+xml';
+    return 'application/octet-stream';
+}
+seed();

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@leadertechie/create-personal-site",
+  "version": "0.1.0-alpha.10",
+  "description": "Scaffold a personal website powered by Cloudflare Workers and R2. Fetches GitHub profile to auto-populate content.",
+  "bin": {
+    "create-personal-site": "./dist/index.js"
+  },
+  "type": "module",
+  "engines": {
+    "node": ">=20"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "templates",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsc && node --input-type=module -e \"import{writeFileSync,chmodSync,readFileSync}from'fs';const p='dist/index.js';let c=readFileSync(p,'utf8');if(!c.startsWith('#!')){writeFileSync(p,'#!/usr/bin/env node\\n'+c);chmodSync(p,493)}\"",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "cli",
+    "personal-site",
+    "cloudflare-workers"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/leadertechie/create-personal-site"
+  },
+  "dependencies": {
+    "execa": "^8.0.1",
+    "fs-extra": "^11.1.1",
+    "kolorist": "^1.8.0",
+    "prompts": "^2.4.2"
+  },
+  "devDependencies": {
+    "@types/fs-extra": "^11.0.4",
+    "@types/prompts": "^2.4.9",
+    "typescript": "^5.4.0"
+  }
+}

package/templates/README.md

@@ -0,0 +1,16 @@
+# {{name}}
+
+A personal website powered by [@leadertechie/personal-site-kit](https://github.com/leadertechie/personal-site-kit).
+
+## Getting Started
+
+1. Add your content in the `content/` directory
+2. Configure `wrangler.toml` with your R2 bucket details
+3. Run `npm run dev` to test locally
+4. Run `npm run deploy` to publish
+
+## Content Structure
+
+- `content/pages/home.md` - Your home page content
+- `content/about-me.md` - Your about page content
+- `content/static-details.json` - Site metadata (title, social links, etc.)

package/templates/public/assets/logo-placeholder.svg

@@ -0,0 +1,21 @@
+<svg width="600" height="320" viewBox="0 0 600 320" xmlns="http://www.w3.org/2000/svg">
+  <style>
+    .text-main { 
+      fill: light-dark(#4A5568, #E2E8F0);
+      font-family: 'Segoe UI', 'Arial Black', sans-serif; 
+      font-weight: 900; 
+      font-size: 46px; 
+      letter-spacing: -0.01em; 
+      text-anchor: middle; 
+    }
+  </style>
+
+  <!-- Big circle placeholder -->
+  <circle cx="300" cy="160" r="100" fill="none" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" stroke-dasharray="8 4" opacity="0.5" />
+  
+  <!-- Plus sign in circle -->
+  <line x1="300" y1="100" x2="300" y2="220" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" opacity="0.3" />
+  <line x1="240" y1="160" x2="360" y2="160" stroke="light-dark(#A0AEC0, #718096)" stroke-width="2" opacity="0.3" />
+
+  <text x="300" y="290" class="text-main">YOUR LOGO</text>
+</svg>

package/templates/tsconfig.json

@@ -0,0 +1,15 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "lib": ["ESNext", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "resolveJsonModule": true,
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["api/**/*.ts", "ui/**/*.ts", "prerender/**/*.ts"]
+}

package/templates/ui/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>{{siteTitle}}</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/index.ts"></script>
+  </body>
+</html>

package/templates/vite.config.ts

@@ -0,0 +1,20 @@
+import { defineConfig } from 'vite';
+import { resolve } from 'path';
+
+export default defineConfig({
+  root: 'ui',
+  build: {
+    outDir: '../dist/ui',
+    emptyOutDir: true,
+  },
+  server: {
+    port: 5173,
+    proxy: {
+      '/api': {
+        target: 'http://localhost:8787',
+        changeOrigin: true,
+        rewrite: (path) => path.replace(/^\/api/, ''),
+      },
+    },
+  },
+});

package/templates/wrangler.toml

@@ -0,0 +1,10 @@
+name = "{{name}}"
+main = "api/index.ts"
+compatibility_date = "2024-01-01"
+
+[vars]
+SITE_TITLE = "{{siteTitle}}"
+
+[[r2_buckets]]
+binding = "CONTENT_BUCKET"
+bucket_name = "your-content-bucket"