@compilr-dev/factory 0.1.8 → 0.1.9

package/dist/factory/registry.js

@@ -26,5 +26,7 @@ export const defaultRegistry = new ToolkitRegistry();
 // Register built-in toolkits
 import { reactNodeToolkit } from '../toolkits/react-node/index.js';
 import { nextPrismaToolkit } from '../toolkits/next-prisma/index.js';
+import { staticLandingToolkit } from '../toolkits/static-landing/index.js';
 defaultRegistry.register(reactNodeToolkit);
 defaultRegistry.register(nextPrismaToolkit);
+defaultRegistry.register(staticLandingToolkit);

package/dist/index.d.ts

@@ -20,4 +20,5 @@ export { writeFactoryFiles } from './factory/file-writer.js';
 export type { WriteResult } from './factory/file-writer.js';
 export { reactNodeToolkit } from './toolkits/react-node/index.js';
 export { nextPrismaToolkit } from './toolkits/next-prisma/index.js';
+export { staticLandingToolkit } from './toolkits/static-landing/index.js';
 export { factoryScaffoldSkill, factorySkills } from './factory/skill.js';

package/dist/index.js

@@ -23,5 +23,7 @@ export { writeFactoryFiles } from './factory/file-writer.js';
 export { reactNodeToolkit } from './toolkits/react-node/index.js';
 // Next.js + Prisma Toolkit
 export { nextPrismaToolkit } from './toolkits/next-prisma/index.js';
+// Static Landing Page Toolkit
+export { staticLandingToolkit } from './toolkits/static-landing/index.js';
 // Factory skill (Phase 5)
 export { factoryScaffoldSkill, factorySkills } from './factory/skill.js';

package/dist/toolkits/static-landing/config.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Static Landing Page Toolkit — Configuration Files Generator
+ *
+ * Generates: package.json, tailwind.config.js, postcss.config.js
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateConfigFiles(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/static-landing/config.js

@@ -0,0 +1,63 @@
+/**
+ * Static Landing Page Toolkit — Configuration Files Generator
+ *
+ * Generates: package.json, tailwind.config.js, postcss.config.js
+ */
+import { toKebabCase } from '../../model/naming.js';
+import { generateColorShades } from '../shared/color-utils.js';
+export function generateConfigFiles(model) {
+    const appSlug = toKebabCase(model.identity.name);
+    return [generatePackageJson(appSlug), generateTailwindConfig(model), generatePostCssConfig()];
+}
+function generatePackageJson(appSlug) {
+    const pkg = {
+        name: appSlug,
+        version: '0.1.0',
+        private: true,
+        scripts: {
+            dev: 'concurrently "npx tailwindcss -i ./src/input.css -o ./dist/style.css --watch" "npx serve . -l 3000"',
+            build: 'npx tailwindcss -i ./src/input.css -o ./dist/style.css --minify',
+            preview: 'npx serve . -l 3000',
+        },
+        devDependencies: {
+            autoprefixer: '^10.4.20',
+            concurrently: '^9.1.0',
+            postcss: '^8.4.49',
+            serve: '^14.2.4',
+            tailwindcss: '^3.4.15',
+        },
+    };
+    return { path: 'package.json', content: JSON.stringify(pkg, null, 2) + '\n' };
+}
+function generateTailwindConfig(model) {
+    const darkLine = model.features.darkMode ? `  darkMode: 'class',\n` : '';
+    const shades = generateColorShades(model.theme.primaryColor);
+    return {
+        path: 'tailwind.config.js',
+        content: `/** @type {import('tailwindcss').Config} */
+export default {
+${darkLine}  content: ['./*.html'],
+  theme: {
+    extend: {
+      colors: {
+        primary: ${shades},
+      },
+    },
+  },
+  plugins: [],
+};
+`,
+    };
+}
+function generatePostCssConfig() {
+    return {
+        path: 'postcss.config.js',
+        content: `export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+`,
+    };
+}

package/dist/toolkits/static-landing/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Static Landing Page Toolkit
+ *
+ * Generates a responsive landing page: HTML + Tailwind CSS + minimal JavaScript.
+ * Deterministic: same ApplicationModel → same output files.
+ */
+import type { FactoryToolkit } from '../types.js';
+export declare const staticLandingToolkit: FactoryToolkit;

package/dist/toolkits/static-landing/index.js

@@ -0,0 +1,35 @@
+/**
+ * Static Landing Page Toolkit
+ *
+ * Generates a responsive landing page: HTML + Tailwind CSS + minimal JavaScript.
+ * Deterministic: same ApplicationModel → same output files.
+ */
+import { generateConfigFiles } from './config.js';
+import { generateStaticFiles } from './static.js';
+import { generatePages } from './pages.js';
+export const staticLandingToolkit = {
+    id: 'static-landing',
+    name: 'Static Landing Page',
+    description: 'HTML + Tailwind CSS — responsive marketing/landing page with minimal JavaScript',
+    requiredSections: ['identity', 'theme'],
+    generate(model) {
+        const warnings = [];
+        const allFiles = [];
+        const generators = [
+            generateConfigFiles(model),
+            generateStaticFiles(model),
+            generatePages(model),
+        ];
+        for (const files of generators) {
+            allFiles.push(...files);
+        }
+        if (model.entities.length === 0) {
+            warnings.push('No entities defined — features section will use placeholder content.');
+        }
+        return {
+            files: allFiles,
+            toolkit: 'static-landing',
+            warnings,
+        };
+    },
+};

package/dist/toolkits/static-landing/pages.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Static Landing Page Toolkit — Page Files Generator
+ *
+ * Generates: index.html, 404.html
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generatePages(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/static-landing/pages.js

@@ -0,0 +1,191 @@
+/**
+ * Static Landing Page Toolkit — Page Files Generator
+ *
+ * Generates: index.html, 404.html
+ */
+export function generatePages(model) {
+    return [generateIndexHtml(model), generate404Html(model)];
+}
+function generateFeatureCards(model) {
+    if (model.entities.length > 0) {
+        return model.entities
+            .map((entity) => `        <div class="bg-white p-6 shadow-sm dark:bg-gray-800">
+          <div class="mb-4 text-4xl">${entity.icon}</div>
+          <h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">${entity.name}</h3>
+          <p class="text-gray-600 dark:text-gray-300">${entity.description ?? `Manage your ${entity.pluralName.toLowerCase()} efficiently.`}</p>
+        </div>`)
+            .join('\n');
+    }
+    const placeholders = [
+        {
+            icon: '⚡',
+            title: 'Fast & Reliable',
+            desc: 'Built for speed with optimized performance out of the box.',
+        },
+        {
+            icon: '🔒',
+            title: 'Secure by Default',
+            desc: 'Security best practices baked in from the start.',
+        },
+        {
+            icon: '🎯',
+            title: 'Easy to Use',
+            desc: 'Intuitive interface designed for the best user experience.',
+        },
+    ];
+    return placeholders
+        .map((p) => `        <div class="bg-white p-6 shadow-sm dark:bg-gray-800">
+          <div class="mb-4 text-4xl">${p.icon}</div>
+          <h3 class="mb-2 text-xl font-bold text-gray-900 dark:text-white">${p.title}</h3>
+          <p class="text-gray-600 dark:text-gray-300">${p.desc}</p>
+        </div>`)
+        .join('\n');
+}
+function generateDarkModeToggle() {
+    return `
+      <button id="dark-toggle" class="text-gray-600 hover:text-gray-900 dark:text-gray-300 dark:hover:text-white">
+        <span id="dark-icon">🌙</span>
+      </button>`;
+}
+function generateDarkModeScript() {
+    return `
+    // Dark mode toggle
+    const toggle = document.getElementById('dark-toggle');
+    const icon = document.getElementById('dark-icon');
+    if (localStorage.getItem('theme') === 'dark') {
+      document.documentElement.classList.add('dark');
+      icon.textContent = '☀️';
+    }
+    toggle.addEventListener('click', () => {
+      document.documentElement.classList.toggle('dark');
+      const isDark = document.documentElement.classList.contains('dark');
+      icon.textContent = isDark ? '☀️' : '🌙';
+      localStorage.setItem('theme', isDark ? 'dark' : 'light');
+    });`;
+}
+function generateCtaSection(model) {
+    return `
+    <!-- CTA -->
+    <section id="cta" class="bg-primary px-6 py-20 text-center text-white">
+      <div class="mx-auto max-w-2xl">
+        <h2 class="mb-4 text-3xl font-bold">Ready to get started?</h2>
+        <p class="mb-8 text-lg opacity-90">Join us and experience ${model.identity.name} today.</p>
+        <form class="mx-auto flex max-w-md gap-2">
+          <input
+            type="email"
+            placeholder="Enter your email"
+            class="flex-1 px-4 py-3 text-gray-900 placeholder-gray-500 focus:outline-none"
+          />
+          <button type="submit" class="bg-gray-900 px-6 py-3 font-semibold text-white transition-colors hover:bg-gray-800">
+            Sign Up
+          </button>
+        </form>
+      </div>
+    </section>
+`;
+}
+function generateIndexHtml(model) {
+    const { name, description } = model.identity;
+    const hasDarkMode = model.features.darkMode;
+    const hasAuth = model.features.auth;
+    const darkBg = hasDarkMode ? ' dark:bg-gray-900' : '';
+    const darkText = hasDarkMode ? ' dark:text-white' : '';
+    const darkNavBg = hasDarkMode ? ' dark:bg-gray-800' : '';
+    const navSignUp = hasAuth
+        ? `\n      <a href="#cta" class="bg-primary px-4 py-2 text-sm font-semibold text-white transition-colors hover:bg-primary-700">Sign Up</a>`
+        : '';
+    const darkToggle = hasDarkMode ? generateDarkModeToggle() : '';
+    const ctaSection = hasAuth ? generateCtaSection(model) : '';
+    const featureCards = generateFeatureCards(model);
+    const scriptParts = [];
+    if (hasDarkMode) {
+        scriptParts.push(generateDarkModeScript());
+    }
+    scriptParts.push(`
+    // Smooth scroll for anchor links
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', (e) => {
+        e.preventDefault();
+        const target = document.querySelector(anchor.getAttribute('href'));
+        if (target) target.scrollIntoView({ behavior: 'smooth' });
+      });
+    });`);
+    const scriptTag = `\n    <script>${scriptParts.join('\n')}\n    </script>`;
+    return {
+        path: 'index.html',
+        content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="${description}" />
+    <title>${name}</title>
+    <link rel="stylesheet" href="./dist/style.css" />
+  </head>
+  <body class="bg-white text-gray-900${darkBg}${darkText}">
+    <!-- Nav -->
+    <nav class="sticky top-0 z-50 bg-white px-6 py-4 shadow-sm${darkNavBg}">
+      <div class="mx-auto flex max-w-6xl items-center justify-between">
+        <a href="#" class="text-xl font-bold text-primary">${name}</a>
+        <div class="flex items-center gap-4">
+          <a href="#features" class="text-sm text-gray-600 hover:text-gray-900${hasDarkMode ? ' dark:text-gray-300 dark:hover:text-white' : ''}"
+            >Features</a
+          >${darkToggle}${navSignUp}
+        </div>
+      </div>
+    </nav>
+
+    <!-- Hero -->
+    <section id="hero" class="px-6 py-24 text-center">
+      <div class="mx-auto max-w-3xl">
+        <h1 class="mb-6 text-5xl font-bold tracking-tight">${name}</h1>
+        <p class="mb-8 text-xl text-gray-600${hasDarkMode ? ' dark:text-gray-300' : ''}">${description}</p>
+        <a href="#features" class="btn-primary">Get Started</a>
+      </div>
+    </section>
+
+    <!-- Features -->
+    <section id="features" class="bg-gray-50 px-6 py-20${hasDarkMode ? ' dark:bg-gray-800/50' : ''}">
+      <div class="mx-auto max-w-6xl">
+        <h2 class="mb-12 text-center text-3xl font-bold">Features</h2>
+        <div class="grid gap-8 sm:grid-cols-2 lg:grid-cols-3">
+${featureCards}
+        </div>
+      </div>
+    </section>
+${ctaSection}
+    <!-- Footer -->
+    <footer class="border-t border-gray-200 px-6 py-8${hasDarkMode ? ' dark:border-gray-700' : ''}">
+      <div class="mx-auto max-w-6xl text-center text-sm text-gray-500${hasDarkMode ? ' dark:text-gray-400' : ''}">
+        &copy; ${String(new Date().getFullYear())} ${name}. All rights reserved.
+      </div>
+    </footer>
+${scriptTag}
+  </body>
+</html>
+`,
+    };
+}
+function generate404Html(model) {
+    const { name } = model.identity;
+    return {
+        path: '404.html',
+        content: `<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Page Not Found — ${name}</title>
+    <link rel="stylesheet" href="./dist/style.css" />
+  </head>
+  <body class="flex min-h-screen items-center justify-center bg-white text-gray-900">
+    <div class="text-center">
+      <h1 class="mb-4 text-6xl font-bold text-primary">404</h1>
+      <p class="mb-8 text-xl text-gray-600">Page not found</p>
+      <a href="/" class="btn-primary">Go back home</a>
+    </div>
+  </body>
+</html>
+`,
+    };
+}

package/dist/toolkits/static-landing/static.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Static Landing Page Toolkit — Static Files Generator
+ *
+ * Generates: .gitignore, README.md, src/input.css, dist/.gitkeep
+ */
+import type { ApplicationModel } from '../../model/types.js';
+import type { FactoryFile } from '../types.js';
+export declare function generateStaticFiles(model: ApplicationModel): FactoryFile[];

package/dist/toolkits/static-landing/static.js

@@ -0,0 +1,65 @@
+/**
+ * Static Landing Page Toolkit — Static Files Generator
+ *
+ * Generates: .gitignore, README.md, src/input.css, dist/.gitkeep
+ */
+export function generateStaticFiles(model) {
+    return [generateGitignore(), generateReadme(model), generateInputCss(), generateDistGitkeep()];
+}
+function generateGitignore() {
+    return {
+        path: '.gitignore',
+        content: `node_modules
+dist/style.css
+`,
+    };
+}
+function generateReadme(model) {
+    return {
+        path: 'README.md',
+        content: `# ${model.identity.name}
+
+${model.identity.description}
+
+## Getting Started
+
+\`\`\`bash
+npm install
+npm run dev
+\`\`\`
+
+## Build
+
+\`\`\`bash
+npm run build
+\`\`\`
+
+## Tech Stack
+
+- HTML
+- Tailwind CSS
+- PostCSS + Autoprefixer
+`,
+    };
+}
+function generateInputCss() {
+    return {
+        path: 'src/input.css',
+        content: `@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer components {
+  .btn-primary {
+    @apply inline-block rounded-none bg-primary px-6 py-3 font-semibold text-white transition-colors hover:bg-primary-700;
+  }
+}
+`,
+    };
+}
+function generateDistGitkeep() {
+    return {
+        path: 'dist/.gitkeep',
+        content: '',
+    };
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compilr-dev/factory",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "description": "AI-driven application scaffolder for the compilr-dev ecosystem",
   "type": "module",
   "main": "dist/index.js",