uniweb 0.1.4 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uniweb",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "CLI for the Uniweb Component Web Platform",
   "type": "module",
   "bin": {

package/src/index.js

@@ -261,6 +261,119 @@ async function createWorkspace(projectDir, projectName) {
 dist
 .DS_Store
 *.local
+`)
+
+  // README.md
+  writeFile(join(projectDir, 'README.md'), `# ${projectName}
+
+A Uniweb workspace with a site and foundation for co-development.
+
+## Quick Start
+
+\`\`\`bash
+pnpm install
+pnpm dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000) to see your site.
+
+## Project Structure
+
+\`\`\`
+${projectName}/
+├── packages/
+│   ├── site/           # Your website
+│   │   ├── pages/      # Content pages (markdown + YAML)
+│   │   ├── src/        # Site entry point
+│   │   └── vite.config.js
+│   └── foundation/     # Your component library
+│       └── src/
+│           ├── components/   # React components
+│           ├── meta.js       # Foundation metadata
+│           └── styles.css    # Tailwind styles
+├── package.json
+└── pnpm-workspace.yaml
+\`\`\`
+
+## Development
+
+### Standard Mode (recommended)
+
+\`\`\`bash
+pnpm dev
+\`\`\`
+
+Edit components in \`packages/foundation/src/components/\` and see changes instantly via HMR.
+Edit content in \`packages/site/pages/\` to add or modify pages.
+
+### Runtime Loading Mode
+
+\`\`\`bash
+pnpm dev:runtime
+\`\`\`
+
+Tests production behavior where the foundation is loaded as a separate module.
+Use this to debug issues that only appear in production.
+
+## Building for Production
+
+\`\`\`bash
+# Build both foundation and site
+pnpm build
+\`\`\`
+
+Output:
+- \`packages/foundation/dist/\` — Bundled foundation (JS + CSS + schema)
+- \`packages/site/dist/\` — Production-ready site
+
+## Adding Components
+
+1. Create a new folder in \`packages/foundation/src/components/YourComponent/\`
+2. Add \`index.jsx\` with your React component
+3. Add \`meta.js\` describing the component's content slots and options
+4. Export from \`packages/foundation/src/index.js\`
+
+## Adding Pages
+
+1. Create a folder in \`packages/site/pages/your-page/\`
+2. Add \`page.yml\` with page metadata
+3. Add markdown files (\`1-section.md\`, \`2-section.md\`, etc.) for each section
+
+Each markdown file specifies which component to use:
+
+\`\`\`markdown
+---
+component: Hero
+title: Your Title
+subtitle: Your subtitle
+---
+
+Optional body content here.
+\`\`\`
+
+## Configuration
+
+Each site has a \`site.yml\` that configures which foundation it uses:
+
+\`\`\`yaml
+name: site
+defaultLanguage: en
+foundation: foundation    # References packages/foundation
+\`\`\`
+
+To add multiple sites or foundations, create new packages and update each site's \`site.yml\`.
+
+## What is Uniweb?
+
+Uniweb is a **Component Web Platform** that bridges content and components.
+Foundations define the vocabulary (available components, options, design rules).
+Sites provide content that flows through Foundations.
+
+Learn more:
+- [Uniweb on GitHub](https://github.com/uniweb)
+- [CLI Documentation](https://github.com/uniweb/cli)
+- [uniweb.app](https://uniweb.app) — Full publishing platform
+
 `)
 
   // Create site package
@@ -301,6 +414,7 @@ async function createSite(projectDir, projectName, isWorkspace = false) {
     devDependencies: {
       '@vitejs/plugin-react': '^4.2.1',
       autoprefixer: '^10.4.18',
+      'js-yaml': '^4.1.0',
       postcss: '^8.4.35',
       react: '^18.2.0',
       'react-dom': '^18.2.0',
@@ -311,13 +425,24 @@ async function createSite(projectDir, projectName, isWorkspace = false) {
     },
   })
 
-  // Foundation import name
+  // Foundation import name (used for initial site.yml)
   const foundationImport = isWorkspace ? 'foundation' : 'foundation-example'
 
-  // tailwind.config.js - scan foundation components
-  const foundationPath = isWorkspace ? '../foundation' : `./node_modules/${foundationImport}`
-  writeFile(join(projectDir, 'tailwind.config.js'), `export default {
-  content: ['${foundationPath}/src/**/*.{js,jsx,ts,tsx}'],
+  // tailwind.config.js - reads foundation from site.yml
+  writeFile(join(projectDir, 'tailwind.config.js'), `import { readFileSync, existsSync } from 'fs'
+import yaml from 'js-yaml'
+
+// Read foundation from site.yml
+const siteConfig = yaml.load(readFileSync('./site.yml', 'utf8'))
+const foundation = siteConfig.foundation || 'foundation'
+
+// Resolve foundation path (workspace sibling or node_modules)
+const workspacePath = \`../\${foundation}/src/**/*.{js,jsx,ts,tsx}\`
+const npmPath = \`./node_modules/\${foundation}/src/**/*.{js,jsx,ts,tsx}\`
+const contentPath = existsSync(\`../\${foundation}\`) ? workspacePath : npmPath
+
+export default {
+  content: [contentPath],
   theme: {
     extend: {
       colors: {
@@ -339,15 +464,31 @@ async function createSite(projectDir, projectName, isWorkspace = false) {
 }
 `)
 
-  // vite.config.js
+  // vite.config.js - reads foundation from site.yml
   writeFile(join(projectDir, 'vite.config.js'), `import { defineConfig } from 'vite'
+import { readFileSync, existsSync } from 'fs'
+import yaml from 'js-yaml'
 import react from '@vitejs/plugin-react'
 import svgr from 'vite-plugin-svgr'
 import { siteContentPlugin, foundationPlugin } from '@uniweb/runtime/vite'
 
+// Read foundation from site.yml
+const siteConfig = yaml.load(readFileSync('./site.yml', 'utf8'))
+const foundation = siteConfig.foundation || 'foundation'
+
+// Check if foundation is a workspace sibling or npm package
+const isWorkspaceFoundation = existsSync(\`../\${foundation}\`)
+const foundationPath = isWorkspaceFoundation ? \`../\${foundation}\` : \`./node_modules/\${foundation}\`
+
 const useRuntimeLoading = process.env.VITE_FOUNDATION_MODE === 'runtime'
 
 export default defineConfig({
+  resolve: {
+    alias: {
+      // Alias #foundation to the actual foundation package
+      '#foundation': foundation,
+    },
+  },
   plugins: [
     react(),
     svgr(),
@@ -356,8 +497,8 @@ export default defineConfig({
       inject: true,
     }),
     useRuntimeLoading && foundationPlugin({
-      name: '${foundationImport}',
-      path: ${isWorkspace ? "'../foundation'" : "require.resolve('" + foundationImport + "').replace('/src/index.js', '')"},
+      name: foundation,
+      path: foundationPath,
       serve: '/foundation',
       watch: true,
     }),
@@ -390,7 +531,7 @@ export default defineConfig({
 </html>
 `)
 
-  // main.jsx
+  // main.jsx - uses #foundation alias (configured in vite.config.js from site.yml)
   writeFile(join(projectDir, 'src/main.jsx'), `import { initRuntime } from '@uniweb/runtime'
 
 const useRuntimeLoading = import.meta.env.VITE_FOUNDATION_MODE === 'runtime'
@@ -402,8 +543,9 @@ async function start() {
       cssUrl: '/foundation/assets/style.css'
     })
   } else {
-    const foundation = await import('${foundationImport}')
-    await import('${foundationImport}/styles')
+    // #foundation alias is resolved by Vite based on site.yml config
+    const foundation = await import('#foundation')
+    await import('#foundation/styles')
     initRuntime(foundation)
   }
 }
@@ -414,6 +556,9 @@ start().catch(console.error)
   // site.yml
   writeFile(join(projectDir, 'site.yml'), `name: ${projectName}
 defaultLanguage: en
+
+# Foundation to use for this site
+foundation: ${foundationImport}
 `)
 
   // pages/home/page.yml
@@ -433,6 +578,93 @@ ctaUrl: "#"
 Your content goes here.
 `)
 
+  // README.md (only for standalone site, not workspace)
+  if (!isWorkspace) {
+    writeFile(join(projectDir, 'README.md'), `# ${projectName}
+
+A Uniweb site — a content-driven website powered by a Foundation component library.
+
+## Quick Start
+
+\`\`\`bash
+pnpm install
+pnpm dev
+\`\`\`
+
+Open [http://localhost:3000](http://localhost:3000) to see your site.
+
+## Project Structure
+
+\`\`\`
+${projectName}/
+├── pages/              # Your content
+│   └── home/
+│       ├── page.yml    # Page metadata
+│       └── 1-hero.md   # Section content
+├── src/
+│   └── main.jsx        # Site entry point
+├── site.yml            # Site configuration
+├── vite.config.js
+└── package.json
+\`\`\`
+
+## Adding Pages
+
+1. Create a folder in \`pages/your-page/\`
+2. Add \`page.yml\`:
+
+\`\`\`yaml
+title: Your Page Title
+order: 2
+\`\`\`
+
+3. Add section files (\`1-hero.md\`, \`2-features.md\`, etc.):
+
+\`\`\`markdown
+---
+component: Hero
+title: Section Title
+subtitle: Section subtitle
+---
+
+Optional markdown content here.
+\`\`\`
+
+## How It Works
+
+- Each folder in \`pages/\` becomes a route (\`/home\`, \`/about\`, etc.)
+- Section files are numbered to control order (\`1-*.md\`, \`2-*.md\`)
+- The \`component\` field specifies which Foundation component renders the section
+- Other frontmatter fields become the component's content
+
+## Configuration
+
+The \`site.yml\` file configures your site:
+
+\`\`\`yaml
+name: ${projectName}
+defaultLanguage: en
+foundation: ${foundationImport}    # Which foundation to use
+\`\`\`
+
+To use a different foundation, update the \`foundation\` field and install the package.
+
+## Building for Production
+
+\`\`\`bash
+pnpm build
+\`\`\`
+
+Output is in \`dist/\` — ready to deploy to any static host.
+
+## Learn More
+
+- [Uniweb on GitHub](https://github.com/uniweb)
+- [uniweb.app](https://uniweb.app)
+
+`)
+  }
+
   success(`Created site: ${projectName}`)
 }
 
@@ -677,6 +909,99 @@ export default {
 }
 `)
 
+  // README.md (only for standalone foundation, not workspace)
+  if (!isWorkspace) {
+    writeFile(join(projectDir, 'README.md'), `# ${projectName}
+
+A Uniweb Foundation — a React component library for content-driven websites.
+
+## Quick Start
+
+\`\`\`bash
+pnpm install
+pnpm dev      # Start Vite dev server for component development
+pnpm build    # Build for production
+\`\`\`
+
+## Project Structure
+
+\`\`\`
+${projectName}/
+├── src/
+│   ├── components/       # Your components
+│   │   └── Hero/
+│   │       ├── index.jsx # React component
+│   │       └── meta.js   # Component metadata
+│   ├── meta.js           # Foundation metadata
+│   ├── index.js          # Exports
+│   └── styles.css        # Tailwind styles
+├── package.json
+├── vite.config.js
+└── tailwind.config.js
+\`\`\`
+
+## Adding Components
+
+1. Create \`src/components/YourComponent/index.jsx\`:
+
+\`\`\`jsx
+export function YourComponent({ content }) {
+  const { title, description } = content
+  return (
+    <section className="py-12 px-6">
+      <h2>{title}</h2>
+      <p>{description}</p>
+    </section>
+  )
+}
+
+export default YourComponent
+\`\`\`
+
+2. Create \`src/components/YourComponent/meta.js\`:
+
+\`\`\`js
+export default {
+  title: 'Your Component',
+  description: 'What this component does',
+  category: 'Content',
+  elements: {
+    title: { label: 'Title', required: true },
+    description: { label: 'Description' },
+  },
+}
+\`\`\`
+
+3. Export from \`src/index.js\`:
+
+\`\`\`js
+export { YourComponent } from './components/YourComponent/index.jsx'
+\`\`\`
+
+## Build Output
+
+After \`pnpm build\`:
+
+\`\`\`
+dist/
+├── foundation.js      # Bundled components
+├── assets/style.css   # Compiled Tailwind CSS
+└── schema.json        # Component metadata for editors
+\`\`\`
+
+## What is a Foundation?
+
+A Foundation defines the vocabulary for Uniweb sites:
+- **Components** — The building blocks creators can use
+- **Elements** — Content slots (title, description, images, etc.)
+- **Properties** — Configuration options exposed to creators
+- **Presets** — Pre-configured variations of components
+
+Learn more at [github.com/uniweb](https://github.com/uniweb)
+
+`)
+  }
+
   success(`Created foundation: ${projectName}`)
 }