uniweb 0.2.14 → 0.2.17

package/src/templates/processor.js

@@ -153,11 +153,17 @@ async function processFile(sourcePath, targetPath, data, options = {}) {
  * @param {Object} data - Template variables
  * @param {Object} options - Processing options
  * @param {string|null} options.variant - Template variant to use
+ * @param {string|null} options.basePath - Base template to merge with (files copied first)
  * @param {Function} options.onWarning - Warning callback
  * @param {Function} options.onProgress - Progress callback
  */
 export async function copyTemplateDirectory(sourcePath, targetPath, data, options = {}) {
-  const { variant = null, onWarning, onProgress } = options
+  const { variant = null, basePath = null, onWarning, onProgress } = options
+
+  // If a base template is specified, copy it first (without the basePath option to avoid recursion)
+  if (basePath && existsSync(basePath)) {
+    await copyTemplateDirectory(basePath, targetPath, data, { variant, onWarning, onProgress })
+  }
 
   await fs.mkdir(targetPath, { recursive: true })
   const entries = await fs.readdir(sourcePath, { withFileTypes: true })
@@ -173,6 +179,9 @@ export async function copyTemplateDirectory(sourcePath, targetPath, data, option
     }
   }
 
+  // Options for recursive calls (without basePath to avoid re-copying base at each level)
+  const recursionOptions = { variant, onWarning, onProgress }
+
   for (const entry of entries) {
     const sourceName = entry.name
 
@@ -199,7 +208,7 @@ export async function copyTemplateDirectory(sourcePath, targetPath, data, option
         const sourceFullPath = path.join(sourcePath, sourceName)
         const targetFullPath = path.join(targetPath, baseName)
 
-        await copyTemplateDirectory(sourceFullPath, targetFullPath, data, options)
+        await copyTemplateDirectory(sourceFullPath, targetFullPath, data, recursionOptions)
       } else {
         // Regular directory - skip if a variant override exists and we're using that variant
         if (variant && variantBases.has(sourceName)) {
@@ -210,10 +219,15 @@ export async function copyTemplateDirectory(sourcePath, targetPath, data, option
         const sourceFullPath = path.join(sourcePath, sourceName)
         const targetFullPath = path.join(targetPath, sourceName)
 
-        await copyTemplateDirectory(sourceFullPath, targetFullPath, data, options)
+        await copyTemplateDirectory(sourceFullPath, targetFullPath, data, recursionOptions)
       }
     } else {
       // File processing
+      // Skip template.json as it's metadata for the template, not for the output
+      if (sourceName === 'template.json') {
+        continue
+      }
+
       // Remove .hbs extension for target filename
       const targetName = sourceName.endsWith('.hbs')
         ? sourceName.slice(0, -4)

package/src/templates/resolver.js

@@ -2,8 +2,8 @@
  * Template resolver - parses template identifiers and determines source type
  */
 
-// Built-in templates that are generated programmatically
-export const BUILTIN_TEMPLATES = ['single', 'multi']
+// Built-in templates (file-based in cli/templates/)
+export const BUILTIN_TEMPLATES = ['single', 'multi', 'template']
 
 // Official templates from @uniweb/templates package
 export const OFFICIAL_TEMPLATES = ['marketing', 'docs', 'learning']

package/templates/_shared/CLAUDE.md.hbs

@@ -0,0 +1,146 @@
+# CLAUDE.md - AI Assistant Instructions
+
+This file provides guidance for AI assistants working with this Uniweb project.
+
+## Project Overview
+
+This is a **Uniweb** project - a component web platform that separates content from code.
+
+```
+{{projectName}}/
+├── foundation/     # React component library (code)
+├── site/           # Content and pages (markdown)
+├── package.json    # Root workspace config
+└── pnpm-workspace.yaml
+```
+
+## Quick Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start development server (site with foundation)
+pnpm dev
+
+# Build foundation (generates dist/foundation.js and schema.json)
+cd foundation && pnpm build
+
+# Build site for production (outputs to site/dist/)
+cd site && pnpm build
+```
+
+## Key Files
+
+**Site:**
+- `site/vite.config.js` - 3-line config using `defineSiteConfig()` from `@uniweb/build/site`
+- `site/src/main.jsx` - 1-line entry: `import 'virtual:uniweb-site-entry'`
+- `site/site.yml` - Site configuration (foundation path, title, i18n)
+- `site/pages/` - Content pages (file-based routing)
+
+**Foundation:**
+- `foundation/vite.config.js` - 3-line config using `defineFoundationConfig()` from `@uniweb/build`
+- `foundation/src/entry-runtime.js` - Runtime entry point (imports styles + components)
+- `foundation/src/index.js` - Component exports
+- `foundation/src/styles.css` - Tailwind CSS v4 theme
+- `foundation/src/components/*/meta.js` - Component metadata and schema
+
+## Architecture
+
+### Foundation Package (`/foundation`)
+
+The **foundation** is a React component library. Each component:
+
+1. Receives structured content parsed from markdown
+2. Has configurable parameters (theme, layout, etc.)
+3. Renders the content according to its design
+
+**Key directories:**
+- `src/components/*/` - Component implementations
+- `src/components/*/meta.js` - Component metadata and schema
+- `src/styles.css` - Global Tailwind styles
+
+### Site Package (`/site`)
+
+The **site** contains content written in markdown. The runtime loads the foundation and renders content based on component selections.
+
+**Key directories:**
+- `pages/` - Content pages organized in folders
+- `pages/[page-name]/page.yml` - Page metadata
+- `pages/[page-name]/*.md` - Content sections
+
+## Content Authoring
+
+### Section File Format
+
+```markdown
+---
+type: ComponentName
+theme: dark
+layout: center
+---
+
+# Main Headline
+
+Description paragraph.
+
+[Call to Action](#link)
+```
+
+### Content Structure
+
+The semantic parser extracts content into:
+
+- **`content.main.header`**: title, pretitle, subtitle
+- **`content.main.body`**: paragraphs, links, imgs, lists
+- **`content.items`**: Content groups from H3 headings
+
+## Component Development
+
+### Component Interface
+
+```jsx
+function MyComponent({ content, params, block, website }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [] } = content.main?.body || {}
+  // ...
+}
+```
+
+### Using @uniweb/kit
+
+```jsx
+import { H1, P, Link, cn } from '@uniweb/kit'
+```
+
+### Component Metadata (`meta.js`)
+
+```javascript
+export default {
+  title: 'Component Name',
+  description: 'What the component does',
+  category: 'Content',
+  elements: { /* content elements */ },
+  properties: { /* configurable params */ },
+}
+```
+
+## Tailwind CSS v4
+
+This project uses Tailwind CSS v4 with the Vite plugin.
+
+**Theme customization** (`foundation/src/styles.css`):
+
+```css
+@import "tailwindcss";
+@source "./components/**/*.{js,jsx}";
+@theme {
+  --color-primary: #3b82f6;
+}
+```
+
+## Resources
+
+- [Uniweb Documentation](https://github.com/uniweb/uniweb)
+- [@uniweb/kit Documentation](https://www.npmjs.com/package/@uniweb/kit)
+- [Tailwind CSS v4](https://tailwindcss.com/docs)

package/templates/_shared/package.json.hbs

@@ -0,0 +1,23 @@
+{
+  "name": "{{projectName}}",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module",
+  "scripts": {
+    "dev": "pnpm --filter site dev",
+    "build": "pnpm --filter foundation build && pnpm --filter site build",
+    "preview": "pnpm --filter site preview"
+  },
+  "devDependencies": {
+    "@types/node": "^22.0.0"
+  },
+  "workspaces": [
+    "site",
+    "foundation",
+    "sites/*",
+    "foundations/*"
+  ],
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild", "sharp"]
+  }
+}

package/templates/_shared/pnpm-workspace.yaml

@@ -0,0 +1,5 @@
+packages:
+  - foundation
+  - site
+  - foundations/*
+  - sites/*

package/templates/multi/CLAUDE.md.hbs

@@ -0,0 +1,100 @@
+# CLAUDE.md - AI Assistant Instructions
+
+This file provides guidance for AI assistants working with this Uniweb multi-site workspace.
+
+## Project Overview
+
+This is a **Uniweb multi-site workspace** - supporting multiple sites and foundations.
+
+```
+{{projectName}}/
+├── foundations/        # Shared component libraries
+│   └── default/        # Default foundation
+├── sites/              # Content sites
+│   └── main/           # Main site
+├── package.json        # Root workspace config
+└── pnpm-workspace.yaml
+```
+
+## Quick Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Start main site development
+pnpm dev
+
+# Start all sites in parallel
+pnpm dev:all
+
+# Build main site
+pnpm build
+
+# Build all sites
+pnpm build:all
+```
+
+## Adding New Sites
+
+1. Copy an existing site directory:
+   ```bash
+   cp -r sites/main sites/newsite
+   ```
+
+2. Update `sites/newsite/package.json` with a unique name
+
+3. Update `sites/newsite/site.yml` with site configuration
+
+4. Run `pnpm install` to link the new site
+
+## Adding New Foundations
+
+1. Copy an existing foundation:
+   ```bash
+   cp -r foundations/default foundations/newfoundation
+   ```
+
+2. Update `foundations/newfoundation/package.json` with a unique name
+
+3. In your site's `site.yml`, reference the foundation:
+   ```yaml
+   foundation: newfoundation
+   ```
+
+4. In your site's `package.json`, add the dependency:
+   ```json
+   "dependencies": {
+     "newfoundation": "file:../../foundations/newfoundation"
+   }
+   ```
+
+## Key Files
+
+**Sites:**
+- `sites/*/vite.config.js` - 3-line config using `defineSiteConfig()` from `@uniweb/build/site`
+- `sites/*/src/main.jsx` - 1-line entry: `import 'virtual:uniweb-site-entry'`
+- `sites/*/site.yml` - Site configuration (foundation reference, title, i18n)
+- `sites/*/pages/` - Content pages (file-based routing)
+
+**Foundations:**
+- `foundations/*/vite.config.js` - 3-line config using `defineFoundationConfig()` from `@uniweb/build`
+- `foundations/*/src/entry-runtime.js` - Runtime entry point
+- `foundations/*/src/styles.css` - Tailwind CSS v4 theme
+- `foundations/*/src/components/*/meta.js` - Component metadata
+
+## Architecture
+
+### Foundations (`/foundations/*`)
+
+Each foundation is a React component library. Sites can share foundations or have their own.
+
+### Sites (`/sites/*`)
+
+Each site contains content in markdown. A site references one foundation for its components.
+
+## Resources
+
+- [Uniweb Documentation](https://github.com/uniweb/uniweb)
+- [@uniweb/kit Documentation](https://www.npmjs.com/package/@uniweb/kit)
+- [Tailwind CSS v4](https://tailwindcss.com/docs)

package/templates/multi/README.md.hbs

@@ -0,0 +1,96 @@
+# {{projectName}}
+
+A multi-site workspace built with [Uniweb](https://github.com/uniweb/uniweb) — a component web platform that separates content from code.
+
+## Quick Start
+
+```bash
+pnpm install    # Install dependencies
+pnpm dev        # Start main site development
+```
+
+Visit `http://localhost:5173` to see your site.
+
+## Project Structure
+
+```
+{{projectName}}/
+├── foundations/         # Shared component libraries
+│   └── default/         # Default foundation
+│       ├── src/
+│       │   ├── components/
+│       │   └── styles.css
+│       └── vite.config.js
+│
+├── sites/               # Content sites
+│   └── main/            # Main site
+│       ├── pages/
+│       ├── site.yml
+│       ├── src/main.jsx
+│       └── vite.config.js
+│
+├── CLAUDE.md            # AI assistant instructions
+└── README.md            # This file
+```
+
+## Commands
+
+```bash
+pnpm dev           # Start main site
+pnpm dev:all       # Start all sites in parallel
+pnpm build         # Build main site
+pnpm build:all     # Build all sites
+```
+
+## Adding a New Site
+
+1. Copy an existing site:
+   ```bash
+   cp -r sites/main sites/newsite
+   ```
+
+2. Update `sites/newsite/package.json` with a unique name
+
+3. Update `sites/newsite/site.yml` with site configuration
+
+4. Run `pnpm install` to link the new site
+
+## Adding a New Foundation
+
+1. Copy an existing foundation:
+   ```bash
+   cp -r foundations/default foundations/newfoundation
+   ```
+
+2. Update the package.json with a unique name
+
+3. In your site's `site.yml`, reference the foundation:
+   ```yaml
+   foundation: newfoundation
+   ```
+
+4. In your site's `package.json`, add the dependency:
+   ```json
+   "dependencies": {
+     "newfoundation": "file:../../foundations/newfoundation"
+   }
+   ```
+
+## Sharing Foundations
+
+Multiple sites can use the same foundation. Each site references the foundation in its `site.yml` and `package.json`.
+
+This allows:
+- Consistent components across sites
+- Single source of truth for design
+- Foundation updates propagate to all sites
+
+## AI Assistance
+
+See [CLAUDE.md](./CLAUDE.md) for detailed instructions that AI assistants can use.
+
+## Learn More
+
+- [Uniweb Documentation](https://github.com/uniweb/uniweb)
+- [@uniweb/kit Components](https://www.npmjs.com/package/@uniweb/kit)
+- [Tailwind CSS v4](https://tailwindcss.com)

package/templates/multi/foundations/default/package.json.hbs

@@ -0,0 +1,37 @@
+{
+  "name": "default",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./src/index.js",
+  "exports": {
+    ".": "./src/index.js",
+    "./styles": "./src/styles.css",
+    "./dist": "./dist/foundation.js",
+    "./dist/styles": "./dist/assets/style.css"
+  },
+  "files": ["dist", "src"],
+  "scripts": {
+    "dev": "vite",
+    "build": "uniweb build",
+    "build:vite": "vite build",
+    "preview": "vite preview"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@uniweb/core": "{{version "@uniweb/core"}}",
+    "@uniweb/kit": "{{version "@uniweb/kit"}}"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwindcss": "^4.0.0",
+    "uniweb": "{{version "uniweb"}}",
+    "vite": "^7.0.0",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

package/templates/multi/foundations/default/src/components/Section/index.jsx

@@ -0,0 +1,121 @@
+import React from 'react'
+import { H1, H2, P, Link, cn } from '@uniweb/kit'
+
+/**
+ * Section Component
+ *
+ * A versatile content section that handles headings, text, and links.
+ * This is the default component for rendering markdown content.
+ */
+export function Section({ content, params }) {
+  const { title, pretitle, subtitle } = content.main?.header || {}
+  const { paragraphs = [], links = [], imgs = [] } = content.main?.body || {}
+
+  const {
+    theme = 'light',
+    align = 'center',
+    width = 'default',
+  } = params || {}
+
+  // Theme styles
+  const themes = {
+    light: 'bg-white text-gray-900',
+    dark: 'bg-gray-900 text-white',
+    primary: 'bg-primary text-white',
+  }
+
+  // Alignment styles
+  const alignments = {
+    left: 'text-left',
+    center: 'text-center',
+    right: 'text-right',
+  }
+
+  // Width styles
+  const widths = {
+    narrow: 'max-w-2xl',
+    default: 'max-w-4xl',
+    wide: 'max-w-6xl',
+    full: 'max-w-none',
+  }
+
+  return (
+    <section className={cn('py-16 px-6', themes[theme])}>
+      <div className={cn('mx-auto', widths[width], alignments[align])}>
+        {/* Pretitle / Eyebrow */}
+        {pretitle && (
+          <p className="text-sm font-medium text-primary mb-4 uppercase tracking-wide">
+            {pretitle}
+          </p>
+        )}
+
+        {/* Title */}
+        {title && (
+          <H1
+            text={title}
+            className="text-3xl sm:text-4xl font-bold mb-4"
+          />
+        )}
+
+        {/* Subtitle */}
+        {subtitle && (
+          <H2
+            text={subtitle}
+            className={cn(
+              'text-xl mb-6',
+              theme === 'light' ? 'text-gray-600' : 'text-gray-300'
+            )}
+          />
+        )}
+
+        {/* Paragraphs */}
+        {paragraphs.map((para, index) => (
+          <P
+            key={index}
+            text={para}
+            className={cn(
+              'text-lg mb-4 leading-relaxed',
+              theme === 'light' ? 'text-gray-700' : 'text-gray-300'
+            )}
+          />
+        ))}
+
+        {/* Links */}
+        {links.length > 0 && (
+          <div className={cn('mt-8 flex gap-4 flex-wrap', alignments[align] === 'text-center' && 'justify-center')}>
+            {links.map((link, index) => (
+              <Link
+                key={index}
+                href={link.href}
+                className={cn(
+                  'inline-flex items-center px-6 py-3 font-medium rounded-lg transition-colors',
+                  index === 0
+                    ? 'bg-primary text-white hover:bg-primary-dark'
+                    : 'border border-current hover:bg-gray-100'
+                )}
+              >
+                {link.label}
+              </Link>
+            ))}
+          </div>
+        )}
+
+        {/* Images */}
+        {imgs.length > 0 && (
+          <div className="mt-8">
+            {imgs.map((img, index) => (
+              <img
+                key={index}
+                src={img.url || img.src}
+                alt={img.alt || ''}
+                className="rounded-lg shadow-lg mx-auto"
+              />
+            ))}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Section

package/templates/multi/foundations/default/src/components/Section/meta.js

@@ -0,0 +1,66 @@
+export default {
+  title: 'Section',
+  description: 'A versatile content section for headings, text, and links',
+  category: 'Content',
+
+  elements: {
+    pretitle: {
+      label: 'Eyebrow',
+      description: 'Small text above the title (H3 before H1)',
+    },
+    title: {
+      label: 'Title',
+      description: 'Main heading (H1)',
+    },
+    subtitle: {
+      label: 'Subtitle',
+      description: 'Secondary heading (H2 after H1)',
+    },
+    paragraphs: {
+      label: 'Content',
+      description: 'Body text paragraphs',
+    },
+    links: {
+      label: 'Links',
+      description: 'Call-to-action buttons',
+    },
+    imgs: {
+      label: 'Images',
+      description: 'Section images',
+    },
+  },
+
+  properties: {
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+        { value: 'primary', label: 'Primary' },
+      ],
+      default: 'light',
+    },
+    align: {
+      type: 'select',
+      label: 'Alignment',
+      options: [
+        { value: 'left', label: 'Left' },
+        { value: 'center', label: 'Center' },
+        { value: 'right', label: 'Right' },
+      ],
+      default: 'center',
+    },
+    width: {
+      type: 'select',
+      label: 'Width',
+      options: [
+        { value: 'narrow', label: 'Narrow' },
+        { value: 'default', label: 'Default' },
+        { value: 'wide', label: 'Wide' },
+        { value: 'full', label: 'Full Width' },
+      ],
+      default: 'default',
+    },
+  },
+}

package/templates/multi/foundations/default/src/entry-runtime.js

@@ -0,0 +1,3 @@
+import './styles.css'
+export * from './index.js'
+export { default } from './index.js'