domma-js 0.9.6-alpha → 0.9.7-alpha

package/public/dist/elements.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Elements CSS v0.9.5-alpha
+ * Domma Elements CSS v0.9.6-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-16T09:03:57.627Z
- * Commit: 72d7b45
+ * Built: 2026-01-16T11:23:01.077Z
+ * Commit: 90ec825
  */
 
 /**

package/public/dist/grid.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Grid CSS v0.9.5-alpha
+ * Domma Grid CSS v0.9.6-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-16T09:03:57.619Z
- * Commit: 72d7b45
+ * Built: 2026-01-16T11:23:01.066Z
+ * Commit: 90ec825
  */
 
 /**

package/public/dist/syntax.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Syntax Highlighting CSS v0.9.5-alpha
+ * Domma Syntax Highlighting CSS v0.9.6-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-16T09:03:57.638Z
- * Commit: 72d7b45
+ * Built: 2026-01-16T11:23:01.085Z
+ * Commit: 90ec825
  */
 
 /**

package/public/dist/themes/domma-themes.css

@@ -1,9 +1,9 @@
 /*!
- * Domma Themes v0.9.5-alpha
+ * Domma Themes v0.9.6-alpha
  * Dynamic Object Manipulation & Modeling API
  * (c) 2026 Darryl Waterhouse & DCBW-IT
- * Built: 2026-01-16T09:03:57.587Z
- * Commit: 72d7b45
+ * Built: 2026-01-16T11:23:01.020Z
+ * Commit: 90ec825
  */
 
 /**

package/templates/kickstart/README.md

@@ -0,0 +1,139 @@
+# {{projectName}}
+
+A modern web project powered by Domma - the lightweight JavaScript framework with zero dependencies.
+
+## Project Structure
+
+```
+{{projectName}}/
+├── frontend/
+│   ├── dist/                    # Domma distribution files
+│   ├── pages/                   # All application pages
+│   │   ├── index.html + index.js
+│   │   ├── about/
+│   │   ├── blog/
+│   │   ├── contact/
+│   │   └── docs/
+│   ├── assets/                  # Images, logos, etc.
+│   ├── css/custom.css           # Your custom styles
+│   └── js/app.js                # Global initialization
+├── backend/                     # Backend implementation (future)
+├── domma.config.json            # Project configuration
+└── README.md                    # This file
+```
+
+## Getting Started
+
+### 1. View Your Project
+
+Open `frontend/pages/index.html` in your browser, or use a development server:
+
+```bash
+# Using Python
+python3 -m http.server 8000
+
+# Using Node.js (http-server)
+npx http-server
+```
+
+Then visit `http://localhost:8000/frontend/pages/`
+
+### 2. Customize Your Project
+
+Edit `domma.config.json` to configure:
+
+- **Theme**: Choose from 16+ built-in themes
+- **Navbar**: Brand, menu items, styling
+- **Footer**: Copyright, links
+- **Features**: Icons, back-to-top, code copy, smooth scroll
+
+### 3. Add New Pages
+
+Use the Domma CLI to generate new pages:
+
+```bash
+# Interactive mode (prompts for page name)
+npx domma-js add page
+
+# Quick mode (direct creation)
+npx domma-js add page dashboard --quick
+```
+
+This creates:
+- `frontend/pages/dashboard/index.html`
+- `frontend/pages/dashboard/dashboard.js`
+
+Don't forget to add the new page to your navbar in `domma.config.json`!
+
+### 4. Add a Backend
+
+When ready, follow the instructions in `backend/README.md` to set up a Fastify server with authentication and CORS support.
+
+## Configuration
+
+### Theme
+
+Change your theme by editing `domma.config.json`:
+
+```json
+{
+  "theme": {
+    "default": "ocean-dark",
+    "persist": true
+  }
+}
+```
+
+Available themes: charcoal-dark, ocean-dark, forest-dark, sunset-light, silver-light, ocean-light, forest-light, sunset-dark, royal-dark, lemon-light, and more.
+
+### Navbar
+
+Customize your navigation:
+
+```json
+{
+  "navbar": {
+    "brand": {
+      "text": "My App",
+      "logo": "frontend/assets/logo/placeholder.svg"
+    },
+    "items": [
+      { "text": "Home", "url": "/frontend/pages/" },
+      { "text": "About", "url": "/frontend/pages/about/" }
+    ]
+  }
+}
+```
+
+## Page-Specific JavaScript
+
+Each page has its own initialization file:
+
+- `frontend/pages/index.js` - Home page logic
+- `frontend/pages/about/about.js` - About page logic
+- `frontend/pages/contact/contact.js` - Contact form handling
+- `frontend/pages/docs/docs.js` - Documentation tabs/navigation
+
+Example page initialization:
+
+```javascript
+$(() => {
+  // Your page-specific code here
+  console.log('Page initialized');
+});
+```
+
+## Resources
+
+- [Domma Documentation](https://github.com/dcbw-it/domma)
+- [Domma API Reference](https://github.com/dcbw-it/domma/blob/main/docs/API.md)
+- [Domma Showcase](https://dcbw-it.github.io/domma/showcase/)
+
+## License
+
+This project was generated with Domma CLI.
+Domma is ISC licensed.
+
+---
+
+**Built with** [Domma](https://github.com/dcbw-it/domma) • The lightweight JavaScript framework

package/templates/kickstart/backend/README.md

@@ -0,0 +1,160 @@
+# Backend Directory
+
+This directory is a placeholder for your backend implementation.
+
+## Future Implementation
+
+When you're ready to add a backend, we recommend using **Fastify** with authentication and CORS support.
+
+### Quick Start with Fastify
+
+```bash
+cd backend
+npm init -y
+npm install fastify @fastify/cors @fastify/jwt @fastify/static
+```
+
+### Basic Server Setup
+
+Create `server.js`:
+
+```javascript
+import Fastify from 'fastify';
+import cors from '@fastify/cors';
+import jwt from '@fastify/jwt';
+import staticFiles from '@fastify/static';
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const fastify = Fastify({ logger: true });
+
+// JWT Authentication
+await fastify.register(jwt, {
+  secret: process.env.JWT_SECRET || 'supersecret-change-in-production'
+});
+
+// CORS configuration
+await fastify.register(cors, {
+  origin: process.env.CORS_ORIGIN || 'http://localhost:3000',
+  credentials: true
+});
+
+// Serve frontend files
+await fastify.register(staticFiles, {
+  root: join(__dirname, '..', 'frontend'),
+  prefix: '/frontend/'
+});
+
+// Health check
+fastify.get('/api/health', async () => ({
+  status: 'ok',
+  timestamp: new Date().toISOString()
+}));
+
+// Protected route example
+fastify.get('/api/protected', {
+  onRequest: [fastify.authenticate]
+}, async (request, reply) => {
+  return { user: request.user };
+});
+
+// Authentication middleware
+fastify.decorate('authenticate', async function(request, reply) {
+  try {
+    await request.jwtVerify();
+  } catch (err) {
+    reply.send(err);
+  }
+});
+
+// Start server
+const start = async () => {
+  try {
+    await fastify.listen({
+      port: parseInt(process.env.PORT || '3000'),
+      host: '0.0.0.0'
+    });
+    console.log(`Server running on http://localhost:${fastify.server.address().port}`);
+  } catch (err) {
+    fastify.log.error(err);
+    process.exit(1);
+  }
+};
+
+start();
+```
+
+### Authentication
+
+For JWT-based authentication:
+
+```javascript
+// Login route
+fastify.post('/api/login', async (request, reply) => {
+  const { username, password } = request.body;
+
+  // Verify credentials (replace with your logic)
+  if (username === 'admin' && password === 'password') {
+    const token = fastify.jwt.sign({
+      id: 1,
+      username: 'admin'
+    });
+
+    return { token };
+  }
+
+  reply.code(401).send({ error: 'Invalid credentials' });
+});
+```
+
+### CORS Configuration
+
+The `@fastify/cors` plugin is recommended for handling cross-origin requests:
+
+```javascript
+await fastify.register(cors, {
+  origin: [
+    'http://localhost:3000',
+    'https://yourdomain.com'
+  ],
+  credentials: true,
+  methods: ['GET', 'POST', 'PUT', 'DELETE', 'PATCH']
+});
+```
+
+## Recommended Directory Structure
+
+```
+backend/
+├── server.js           # Entry point
+├── routes/
+│   ├── api.js          # API routes
+│   ├── auth.js         # Authentication routes
+│   └── users.js        # User management
+├── middleware/
+│   └── auth.js         # Auth middleware
+├── models/
+│   └── user.js         # Data models
+├── utils/
+│   └── db.js           # Database connection
+├── .env                # Environment variables (don't commit!)
+└── package.json
+```
+
+## Environment Variables
+
+Create a `.env` file:
+
+```env
+PORT=3000
+JWT_SECRET=your-secret-key-here
+CORS_ORIGIN=http://localhost:3000
+DATABASE_URL=your-database-url
+```
+
+## Resources
+
+- [Fastify Documentation](https://www.fastify.io/docs/latest/)
+- [@fastify/cors](https://github.com/fastify/fastify-cors)
+- [@fastify/jwt](https://github.com/fastify/fastify-jwt)

package/templates/kickstart/domma.config.json

@@ -13,30 +13,30 @@
   "navbar": {
     "brand": {
       "text": "{{projectName}}",
-      "logo": "assets/logo/placeholder.svg",
-      "url": "/"
+      "logo": "frontend/assets/logo/placeholder.svg",
+      "url": "/frontend/pages/"
     },
     "items": [
       {
         "text": "Home",
-        "url": "/",
+        "url": "/frontend/pages/",
         "active": true
       },
       {
         "text": "About",
-        "url": "/about/"
+        "url": "/frontend/pages/about/"
       },
       {
         "text": "Contact",
-        "url": "/contact/"
+        "url": "/frontend/pages/contact/"
       },
       {
         "text": "Blog",
-        "url": "/blog/"
+        "url": "/frontend/pages/blog/"
       },
       {
         "text": "Docs",
-        "url": "/docs/"
+        "url": "/frontend/pages/docs/"
       },
       {
         "text": "QuickStart",
@@ -53,15 +53,19 @@
     "links": [
       {
         "text": "Privacy Policy",
-        "url": "#privacy"
+        "url": "/frontend/pages/privacy/"
+      },
+      {
+        "text": "Cookie Policy",
+        "url": "/frontend/pages/cookies/"
       },
       {
         "text": "Terms of Service",
-        "url": "#terms"
+        "url": "/frontend/pages/terms/"
       },
       {
         "text": "Contact Us",
-        "url": "/contact/"
+        "url": "/frontend/pages/contact/"
       }
     ]
   },

package/templates/kickstart/frontend/assets/logo/placeholder.svg

@@ -0,0 +1,6 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect width="40" height="40" rx="8" fill="#3b82f6"/>
+    <path d="M12 20L18 14L24 20L30 14" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 28L18 22L24 28L30 22" stroke="white" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"
+          opacity="0.6"/>
+</svg>

package/templates/kickstart/frontend/css/custom.css

@@ -0,0 +1,121 @@
+/**
+ * Custom Styles for {{projectName}}
+ * ════════════════════════════════════════════════════════════════
+ *
+ * This file is loaded after all Domma CSS, allowing you to override
+ * theme variables and component styles.
+ */
+
+/* ────────────────────────────────────────────────────────────────
+ * Theme Overrides
+ * ────────────────────────────────────────────────────────────────
+ * Override any theme variable to customize your brand colors.
+ * Full list of variables: https://github.com/dcbw-it/domma
+ *
+ * Example: Customize primary color
+ */
+:root {
+    /* Uncomment to override:
+    --dm-primary: #3b82f6;
+    --dm-primary-hover: #2563eb;
+    --dm-primary-text: #ffffff;
+    */
+}
+
+/* ────────────────────────────────────────────────────────────────
+ * Component Overrides
+ * ────────────────────────────────────────────────────────────────
+ * Override component styles after Domma loads.
+ */
+
+/* Example: Custom button styles */
+/*
+.btn-custom {
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  border: none;
+  color: white;
+}
+
+.btn-custom:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+}
+*/
+
+/* ────────────────────────────────────────────────────────────────
+ * Layout Customizations
+ * ────────────────────────────────────────────────────────────────
+ */
+
+/* Footer styling */
+.page-footer {
+    background-color: var(--dm-surface);
+    border-top: 1px solid var(--dm-border);
+    padding: var(--dm-space-6) 0;
+    margin-top: var(--dm-space-8);
+}
+
+.footer-content {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 0 var(--dm-space-4);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: var(--dm-space-4);
+}
+
+.footer-content p {
+    margin: 0;
+    color: var(--dm-text-secondary);
+}
+
+.footer-nav {
+    display: flex;
+    gap: var(--dm-space-6);
+}
+
+.footer-nav a {
+    color: var(--dm-text-secondary);
+    text-decoration: none;
+    transition: color 0.2s ease;
+}
+
+.footer-nav a:hover {
+    color: var(--dm-primary);
+}
+
+/* Code copy button styling */
+.code-copy-btn {
+    position: absolute;
+    top: var(--dm-space-2);
+    right: var(--dm-space-2);
+    opacity: 0.7;
+}
+
+.code-copy-btn:hover {
+    opacity: 1;
+}
+
+/* ────────────────────────────────────────────────────────────────
+ * Responsive Adjustments
+ * ────────────────────────────────────────────────────────────────
+ */
+@media (max-width: 768px) {
+    .footer-content {
+        flex-direction: column;
+        text-align: center;
+    }
+
+    .footer-nav {
+        flex-direction: column;
+        gap: var(--dm-space-2);
+    }
+}
+
+/* ────────────────────────────────────────────────────────────────
+ * Your Custom Styles
+ * ────────────────────────────────────────────────────────────────
+ * Add your project-specific styles below this line.
+ */