uniweb 0.2.14 → 0.2.17

package/templates/template/README.md.hbs

@@ -0,0 +1,65 @@
+# {{templateTitle}} Template
+
+{{templateDescription}}
+
+## Development
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run the template in development mode
+pnpm dev
+
+# Build the template
+pnpm build
+```
+
+## Template Structure
+
+```
+├── template.json       # Template metadata (published)
+├── template/           # Template files (copied to user projects)
+│   ├── foundation/     # Component library
+│   ├── site/           # Content and pages
+│   └── ...
+└── package.json        # npm package config
+```
+
+## Publishing
+
+### To npm
+
+```bash
+npm publish --access public
+```
+
+Users can then use your template:
+```bash
+uniweb create myproject --template @{{scope}}/template-{{templateName}}
+```
+
+### To GitHub
+
+Push to a GitHub repository and users can use:
+```bash
+uniweb create myproject --template github:{{scope}}/template-{{templateName}}
+```
+
+## Customization
+
+### Adding Components
+
+1. Create component in `template/foundation/src/components/ComponentName/`
+2. Add `index.jsx` and `meta.js`
+3. Export from `template/foundation/src/index.js`
+
+### Adding Content
+
+1. Add pages in `template/site/pages/`
+2. Each page needs `page.yml` and section `.md` files
+3. Reference components in frontmatter with `type: ComponentName`
+
+## License
+
+MIT

package/templates/template/package.json.hbs

@@ -0,0 +1,33 @@
+{
+  "name": "@{{scope}}/template-{{templateName}}",
+  "version": "0.1.0",
+  "description": "{{templateDescription}}",
+  "type": "module",
+  "main": "template.json",
+  "files": [
+    "template.json",
+    "template/"
+  ],
+  "keywords": [
+    "uniweb",
+    "template",
+    "{{templateName}}"
+  ],
+  "scripts": {
+    "dev": "cd template && pnpm dev",
+    "build": "cd template && pnpm build",
+    "test": "node scripts/test-template.js"
+  },
+  "devDependencies": {
+    "uniweb": "{{version "uniweb"}}"
+  },
+  "workspaces": [
+    "site",
+    "foundation",
+    "sites/*",
+    "foundations/*"
+  ],
+  "pnpm": {
+    "onlyBuiltDependencies": ["esbuild", "sharp"]
+  }
+}

package/templates/template/template/CLAUDE.md.hbs

@@ -0,0 +1,70 @@
+# CLAUDE.md - AI Assistant Instructions
+
+This file provides guidance for AI assistants working with this Uniweb template project.
+
+## Project Overview
+
+This is a **Uniweb template** - a reusable project scaffold that can be published and shared.
+
+```
+{{templateName}}-template/
+├── template.json       # Template metadata
+├── template/           # Files copied to user projects
+│   ├── foundation/     # Component library
+│   └── site/           # Content site
+├── package.json        # npm package config
+└── README.md
+```
+
+## Quick Commands
+
+```bash
+# Install dependencies
+pnpm install
+
+# Run template in development
+pnpm dev
+
+# Build template
+pnpm build
+```
+
+## Creating Components
+
+1. Add component in `template/foundation/src/components/ComponentName/`
+2. Create `index.jsx` with the React component
+3. Create `meta.js` with metadata and schema
+4. Export from `template/foundation/src/index.js`
+
+## Component Interface
+
+```jsx
+function MyComponent({ content, params, block, website }) {
+  const { title } = content.main?.header || {}
+  const { paragraphs = [] } = content.main?.body || {}
+  const items = content.items || []
+  // ...
+}
+```
+
+## Publishing
+
+### To npm
+```bash
+npm publish --access public
+```
+
+### To GitHub
+Push to a GitHub repository.
+
+Users install with:
+```bash
+uniweb create myproject --template @scope/template-name
+# or
+uniweb create myproject --template github:user/repo
+```
+
+## Resources
+
+- [Uniweb Documentation](https://github.com/uniweb/uniweb)
+- [@uniweb/kit Documentation](https://www.npmjs.com/package/@uniweb/kit)

package/templates/template/template/foundation/package.json.hbs

@@ -0,0 +1,37 @@
+{
+  "name": "foundation",
+  "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/template/template/foundation/src/components/Features/index.jsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { H2, H3, P, cn } from '@uniweb/kit'
+
+/**
+ * Features Component
+ *
+ * Display a list of features in a grid. Uses items (H3 sections)
+ * from the markdown content.
+ */
+export function Features({ content, params }) {
+  const { title, subtitle } = content.main?.header || {}
+  const items = content.items || []
+
+  const {
+    columns = 3,
+    theme = 'light',
+  } = params || {}
+
+  const themes = {
+    light: 'bg-white text-gray-900',
+    gray: 'bg-gray-50 text-gray-900',
+    dark: 'bg-gray-900 text-white',
+  }
+
+  const gridCols = {
+    2: 'md:grid-cols-2',
+    3: 'md:grid-cols-3',
+    4: 'md:grid-cols-4',
+  }
+
+  return (
+    <section className={cn('py-16 px-6', themes[theme])}>
+      <div className="max-w-6xl mx-auto">
+        {(title || subtitle) && (
+          <div className="text-center mb-12">
+            {title && (
+              <H2 text={title} className="text-3xl font-bold mb-4" />
+            )}
+            {subtitle && (
+              <p className={cn(
+                'text-lg',
+                theme === 'light' || theme === 'gray' ? 'text-gray-600' : 'text-gray-300'
+              )}>
+                {subtitle}
+              </p>
+            )}
+          </div>
+        )}
+
+        <div className={cn('grid gap-8', gridCols[columns] || 'md:grid-cols-3')}>
+          {items.map((item, index) => (
+            <div key={index} className="text-center">
+              {item.header?.title && (
+                <H3
+                  text={item.header.title}
+                  className="text-xl font-semibold mb-3"
+                />
+              )}
+              {item.body?.paragraphs?.[0] && (
+                <P
+                  text={item.body.paragraphs[0]}
+                  className={cn(
+                    theme === 'light' || theme === 'gray' ? 'text-gray-600' : 'text-gray-300'
+                  )}
+                />
+              )}
+            </div>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}
+
+export default Features

package/templates/template/template/foundation/src/components/Features/meta.js

@@ -0,0 +1,41 @@
+export default {
+  title: 'Features',
+  description: 'Display a list of features in a grid',
+  category: 'Content',
+
+  elements: {
+    title: {
+      label: 'Section Title',
+    },
+    subtitle: {
+      label: 'Section Subtitle',
+    },
+    items: {
+      label: 'Features',
+      description: 'Each H3 becomes a feature item',
+    },
+  },
+
+  properties: {
+    columns: {
+      type: 'select',
+      label: 'Columns',
+      options: [
+        { value: 2, label: '2 Columns' },
+        { value: 3, label: '3 Columns' },
+        { value: 4, label: '4 Columns' },
+      ],
+      default: 3,
+    },
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'gray', label: 'Gray' },
+        { value: 'dark', label: 'Dark' },
+      ],
+      default: 'light',
+    },
+  },
+}

package/templates/template/template/foundation/src/components/Hero/index.jsx

@@ -0,0 +1,89 @@
+import React from 'react'
+import { H1, P, Link, cn } from '@uniweb/kit'
+
+/**
+ * Hero Component
+ *
+ * A hero section for landing pages. Customize this component
+ * for your template's needs.
+ */
+export function Hero({ content, params }) {
+  const { title, pretitle, subtitle } = content.main?.header || {}
+  const { paragraphs = [], links = [], imgs = [] } = content.main?.body || {}
+
+  const {
+    theme = 'light',
+    layout = 'center',
+  } = params || {}
+
+  const themes = {
+    light: 'bg-white text-gray-900',
+    dark: 'bg-gray-900 text-white',
+    gradient: 'bg-gradient-to-br from-primary to-primary-dark text-white',
+  }
+
+  const description = paragraphs[0]
+  const cta = links[0]
+  const secondaryCta = links[1]
+
+  return (
+    <section className={cn('py-20 px-6', themes[theme])}>
+      <div className={cn('max-w-4xl mx-auto', layout === 'center' && 'text-center')}>
+        {pretitle && (
+          <span className="inline-block px-4 py-1 text-sm font-medium rounded-full bg-primary/10 text-primary mb-4">
+            {pretitle}
+          </span>
+        )}
+
+        {title && (
+          <H1
+            text={title}
+            className="text-4xl sm:text-5xl font-bold mb-6 tracking-tight"
+          />
+        )}
+
+        {subtitle && (
+          <p className={cn(
+            'text-xl mb-4',
+            theme === 'light' ? 'text-gray-600' : 'text-gray-300'
+          )}>
+            {subtitle}
+          </p>
+        )}
+
+        {description && (
+          <P
+            text={description}
+            className={cn(
+              'text-lg mb-8',
+              theme === 'light' ? 'text-gray-600' : 'text-gray-300'
+            )}
+          />
+        )}
+
+        {(cta || secondaryCta) && (
+          <div className={cn('flex gap-4 flex-wrap', layout === 'center' && 'justify-center')}>
+            {cta && (
+              <Link
+                href={cta.href}
+                className="px-6 py-3 font-semibold rounded-lg bg-primary text-white hover:bg-primary-dark transition-colors"
+              >
+                {cta.label}
+              </Link>
+            )}
+            {secondaryCta && (
+              <Link
+                href={secondaryCta.href}
+                className="px-6 py-3 font-semibold rounded-lg border-2 border-current hover:bg-gray-100 transition-colors"
+              >
+                {secondaryCta.label}
+              </Link>
+            )}
+          </div>
+        )}
+      </div>
+    </section>
+  )
+}
+
+export default Hero

package/templates/template/template/foundation/src/components/Hero/meta.js

@@ -0,0 +1,47 @@
+export default {
+  title: 'Hero',
+  description: 'A hero section for landing pages',
+  category: 'Headers',
+
+  elements: {
+    pretitle: {
+      label: 'Eyebrow',
+      description: 'Small text above the title',
+    },
+    title: {
+      label: 'Headline',
+      required: true,
+    },
+    subtitle: {
+      label: 'Subtitle',
+    },
+    paragraphs: {
+      label: 'Description',
+    },
+    links: {
+      label: 'Call to Action',
+    },
+  },
+
+  properties: {
+    theme: {
+      type: 'select',
+      label: 'Theme',
+      options: [
+        { value: 'light', label: 'Light' },
+        { value: 'dark', label: 'Dark' },
+        { value: 'gradient', label: 'Gradient' },
+      ],
+      default: 'light',
+    },
+    layout: {
+      type: 'select',
+      label: 'Layout',
+      options: [
+        { value: 'center', label: 'Center' },
+        { value: 'left', label: 'Left' },
+      ],
+      default: 'center',
+    },
+  },
+}

package/templates/template/template/foundation/src/entry-runtime.js

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

package/templates/template/template/foundation/src/index.js

@@ -0,0 +1,36 @@
+/**
+ * Foundation Entry Point
+ *
+ * Export all your template's components here.
+ */
+
+import Hero from './components/Hero/index.jsx'
+import Features from './components/Features/index.jsx'
+
+const components = {
+  Hero,
+  Features,
+}
+
+export function getComponent(name) {
+  return components[name]
+}
+
+export function listComponents() {
+  return Object.keys(components)
+}
+
+export function getSchema(name) {
+  return components[name]?.schema
+}
+
+export function getAllSchemas() {
+  const schemas = {}
+  for (const [name, component] of Object.entries(components)) {
+    if (component.schema) schemas[name] = component.schema
+  }
+  return schemas
+}
+
+export { Hero, Features }
+export default { getComponent, listComponents, getSchema, getAllSchemas, components }

package/templates/template/template/foundation/src/meta.js.hbs

@@ -0,0 +1,6 @@
+export default {
+  name: 'foundation',
+  version: '0.1.0',
+  title: '{{templateTitle}}',
+  description: '{{templateDescription}}',
+}

package/templates/template/template/foundation/src/styles.css

@@ -0,0 +1,12 @@
+@import "tailwindcss";
+
+@source "./components/**/*.{js,jsx}";
+
+@theme {
+  /* Customize your template's colors */
+  --color-primary: #3b82f6;
+  --color-primary-light: #60a5fa;
+  --color-primary-dark: #2563eb;
+  --color-secondary: #64748b;
+  --color-accent: #8b5cf6;
+}

package/templates/template/template/foundation/vite.config.js

@@ -0,0 +1,3 @@
+import { defineFoundationConfig } from '@uniweb/build'
+
+export default defineFoundationConfig()

package/templates/template/template/package.json.hbs

@@ -0,0 +1,14 @@
+{
+  "name": "{{templateName}}-workspace",
+  "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"
+  }
+}

package/templates/template/template/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - foundation
+  - site

package/templates/template/template/site/index.html.hbs

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

package/templates/template/template/site/package.json.hbs

@@ -0,0 +1,27 @@
+{
+  "name": "site",
+  "version": "0.1.0",
+  "type": "module",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "dev:runtime": "VITE_FOUNDATION_MODE=runtime vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@uniweb/runtime": "{{version "@uniweb/runtime"}}",
+    "foundation": "file:../foundation"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.0.0",
+    "@uniweb/build": "{{version "@uniweb/build"}}",
+    "@vitejs/plugin-react": "^5.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^7.0.0",
+    "tailwindcss": "^4.0.0",
+    "vite": "^7.0.0",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

package/templates/template/template/site/pages/home/1-hero.md.hbs

@@ -0,0 +1,16 @@
+---
+type: Hero
+theme: gradient
+layout: center
+---
+
+### New Template
+
+# {{templateTitle}}
+
+## {{templateDescription}}
+
+Build amazing websites with Uniweb components.
+
+[Get Started](#features)
+[Learn More](https://github.com/uniweb)

package/templates/template/template/site/pages/home/2-features.md

@@ -0,0 +1,21 @@
+---
+type: Features
+columns: 3
+theme: light
+---
+
+# Features
+
+## What makes this template great
+
+### Easy to Use
+
+Simple markdown content with powerful components. No complex setup required.
+
+### Customizable
+
+Tailor every aspect of your site with Tailwind CSS and React components.
+
+### Fast
+
+Built on Vite for lightning-fast development and optimal production builds.

package/templates/template/template/site/pages/home/page.yml

@@ -0,0 +1,2 @@
+title: Home
+description: Welcome page

package/templates/template/template/site/site.yml.hbs

@@ -0,0 +1,8 @@
+name: {{templateTitle}}
+description: {{templateDescription}}
+
+theme:
+  primary: '#3b82f6'
+
+build:
+  prerender: true

package/templates/template/template/site/src/main.jsx

@@ -0,0 +1 @@
+import 'virtual:uniweb-site-entry'

package/templates/template/template/site/vite.config.js

@@ -0,0 +1,3 @@
+import { defineSiteConfig } from '@uniweb/build/site'
+
+export default defineSiteConfig()

package/templates/template/template/template.json.hbs

@@ -0,0 +1,7 @@
+{
+  "name": "{{templateTitle}}",
+  "description": "{{templateDescription}}",
+  "uniweb": ">=0.2.0",
+  "tags": ["{{templateName}}"],
+  "components": ["Hero", "Features"]
+}

package/templates/template/template.json

@@ -0,0 +1,4 @@
+{
+  "name": "Template Starter",
+  "description": "A starter for creating your own Uniweb templates. Use this to build custom templates that can be shared via npm or GitHub."
+}