clovie 0.1.6 → 0.1.7

package/bin/cli.js

@@ -12,11 +12,31 @@ import { createClovie } from "../lib/createClovie.js";
 
 // Check for create command first (before any argument parsing)
 if (process.argv.includes('create') && process.argv.length > 2) {
-  const projectName = process.argv[3]; // The name after 'create'
+  const createArgIndex = process.argv.indexOf('create');
+  const projectName = process.argv[createArgIndex + 1];
   
   if (!projectName) {
     console.error('Error: Please provide a project name');
-    console.error('Usage: clovie create <project-name>');
+    console.error('Usage: clovie create <project-name> [--template <template-type>]');
+    console.error('Available templates: default, static, server');
+    process.exit(1);
+  }
+  
+  // Parse arguments to get template option
+  const createArgs = process.argv.slice(createArgIndex + 2);
+  let templateType = 'default';
+  
+  // Look for --template or -t flag
+  const templateIndex = createArgs.findIndex(arg => arg === '--template' || arg === '-t');
+  if (templateIndex !== -1 && createArgs[templateIndex + 1]) {
+    templateType = createArgs[templateIndex + 1];
+  }
+  
+  // Validate template type
+  const validTemplates = ['default', 'static', 'server'];
+  if (!validTemplates.includes(templateType)) {
+    console.error(`Error: Invalid template type '${templateType}'`);
+    console.error(`Available templates: ${validTemplates.join(', ')}`);
     process.exit(1);
   }
   
@@ -28,8 +48,8 @@ if (process.argv.includes('create') && process.argv.length > 2) {
     process.exit(1);
   }
   
-  // Copy template files
-  const templateDir = path.join(__dirname, '../templates/default');
+  // Copy template files from the specified template
+  const templateDir = path.join(__dirname, `../templates/${templateType}`);
   
   // Create project directory first
   fs.mkdirSync(projectPath, { recursive: true });
@@ -54,12 +74,37 @@ if (process.argv.includes('create') && process.argv.length > 2) {
   };
   
   try {
+    // Check if template directory exists
+    if (!fs.existsSync(templateDir)) {
+      console.error(`Error: Template '${templateType}' not found at ${templateDir}`);
+      console.error(`Available templates: ${validTemplates.join(', ')}`);
+      process.exit(1);
+    }
+    
     await copyDir(templateDir, projectPath);
-    console.log(`✅ Clovie project created successfully at ${projectPath}`);
+    console.log(`✅ Clovie ${templateType} project created successfully!`);
+    console.log(`📁 Project location: ${projectPath}`);
+    console.log(`🎨 Template: ${templateType}`);
     console.log('\nNext steps:');
     console.log(`  cd ${projectName}`);
     console.log('  npm install');
     console.log('  npm run dev');
+    
+    // Show template-specific next steps
+    if (templateType === 'server') {
+      console.log('\n🌐 Server template features:');
+      console.log('  • API endpoints ready at /api/*');
+      console.log('  • Admin dashboard at /dashboard.html');
+      console.log('  • User profiles at /user/:id');
+      console.log('  • Use "npm run start" for production server');
+    } else if (templateType === 'static') {
+      console.log('\n📄 Static template features:');
+      console.log('  • SEO optimized pages');
+      console.log('  • Modern responsive design');
+      console.log('  • Ready for JAMstack deployment');
+      console.log('  • Use "npm run build" to generate static files');
+    }
+    
     process.exit(0);
   } catch (err) {
     console.error('Error creating project:', err);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "clovie",
-  "version": "0.1.6",
+  "version": "0.1.7",
   "description": "Vintage web dev tooling with modern quality of life",
   "keywords": [
     "static-site-generator",

package/templates/server/README.md

@@ -0,0 +1,111 @@
+# {{projectName}}
+
+A server-side web application built with [Clovie](https://github.com/adrianjonmiller/clovie).
+
+## Features
+
+- 🌐 Express.js server with Clovie integration
+- 🔌 API routes with state management  
+- 📄 Server-side rendered views
+- 🎨 Modern responsive UI
+- 🔄 Live reload in development
+- 📊 Built-in dashboard and user management
+- ⚡ Real-time WebSocket support
+
+## Getting Started
+
+```bash
+# Install dependencies
+npm install
+
+# Start development server (with live reload)
+npm run dev
+
+# Start production server  
+npm start
+```
+
+## Project Structure
+
+```
+├── views/              # Server-rendered templates
+│   ├── index.html      # Homepage
+│   ├── dashboard.html  # Admin dashboard
+│   ├── login.html      # Login page
+│   └── profile.html    # User profile page
+├── scripts/            # Client-side JavaScript
+│   └── app.js          # Main application logic
+├── styles/             # SCSS stylesheets
+│   └── main.scss       # Main styles with dashboard UI
+├── partials/           # Reusable template components
+│   ├── header.html     # Site header with user menu
+│   ├── nav.html        # Sidebar navigation
+│   └── footer.html     # Site footer
+└── clovie.config.js    # Server configuration
+```
+
+## Available API Endpoints
+
+This template includes these working API endpoints:
+
+- `GET /api/status` - Server status and uptime
+- `GET /api/users` - List all users with total count
+- `POST /api/users` - Create a new user (requires name, email in body)
+- `GET /api/users/:id` - Get specific user by ID
+
+## Server Routes
+
+- `/` - Homepage
+- `/dashboard.html` - Admin dashboard  
+- `/login.html` - Login page
+- `/user/:id` - Dynamic user profile page (server-rendered)
+
+## Configuration
+
+The `clovie.config.js` file shows how to:
+
+- Set up API routes with `action` functions
+- Configure middleware with Express functions
+- Create dynamic routes with templates and data functions
+- Use Clovie's state management system
+
+## State Management
+
+Clovie provides a state system accessible in API actions and route data functions:
+
+```javascript
+// In API actions and route data functions:
+const users = state.get('users') || [];
+state.set('users', newUsersArray);
+```
+
+## Development
+
+```bash
+# Start with live reload
+npm run dev
+# Server runs at http://localhost:3000
+# Live reload via WebSocket
+```
+
+## API Usage Examples
+
+```javascript
+// Get server status
+fetch('/api/status')
+
+// Create a user
+fetch('/api/users', {
+  method: 'POST',
+  headers: { 'Content-Type': 'application/json' },
+  body: JSON.stringify({ name: 'John', email: 'john@example.com' })
+})
+
+// Get user by ID  
+fetch('/api/users/123')
+```
+
+## Learn More
+
+- [Clovie Documentation](https://github.com/adrianjonmiller/clovie)
+- [Express.js Guide](https://expressjs.com/)

package/templates/server/clovie.config.js

@@ -0,0 +1,107 @@
+import express from 'express';
+
+export default {
+  // Server-side application configuration  
+  type: 'server',
+  port: 3000,
+  
+  data: {
+    title: '{{projectName}}',
+    description: 'Full-stack web application built with Clovie',
+    author: 'Your Name',
+    version: '1.0.0'
+  },
+
+  // Middleware configuration (functions that run before routes)
+  middleware: [
+    express.json(),
+    express.urlencoded({ extended: true })
+  ],
+
+  // API routes configuration
+  api: [
+    {
+      name: 'API Status',
+      path: '/api/status',
+      method: 'GET',
+      action: async (state, event) => {
+        return {
+          status: 'ok',
+          timestamp: new Date().toISOString(),
+          uptime: process.uptime()
+        };
+      }
+    },
+    {
+      name: 'Get Users',
+      path: '/api/users',
+      method: 'GET', 
+      action: async (state, event) => {
+        // Get users from state or return mock data
+        const users = state.get ? state.get('users') || [] : [];
+        return {
+          users,
+          total: users.length
+        };
+      }
+    },
+    {
+      name: 'Create User',
+      path: '/api/users',
+      method: 'POST',
+      action: async (state, event) => {
+        const { name, email } = event.body;
+        const newUser = {
+          id: Date.now(),
+          name,
+          email,
+          createdAt: new Date().toISOString()
+        };
+        
+        // Add user to state if available
+        if (state.set) {
+          const users = state.get('users') || [];
+          users.push(newUser);
+          state.set('users', users);
+        }
+        
+        return { success: true, user: newUser };
+      }
+    },
+    {
+      name: 'Get User by ID',
+      path: '/api/users/:id',
+      method: 'GET',
+      action: async (state, event) => {
+        const userId = parseInt(event.params.id);
+        const users = state.get ? state.get('users') || [] : [];
+        const user = users.find(u => u.id === userId);
+        
+        if (!user) {
+          return { error: 'User not found', status: 404 };
+        }
+        
+        return { user };
+      }
+    }
+  ],
+
+  // Configured routes (server-rendered pages with templates)
+  routes: [
+    {
+      name: 'User Profile',
+      path: '/user/:id',
+      template: './views/profile.html',
+      data: async (state, params) => {
+        const userId = parseInt(params.id);
+        const users = state.get ? state.get('users') || [] : [];
+        const user = users.find(u => u.id === userId);
+        
+        return {
+          user: user || { name: 'Unknown User', email: 'unknown@example.com' },
+          title: `User Profile - ${user?.name || 'Unknown'}`
+        };
+      }
+    }
+  ]
+};

package/templates/server/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "{{projectName}}",
+  "version": "1.0.0",
+  "description": "Server-side web application built with Clovie",
+  "main": "server.js",
+  "type": "module",
+  "scripts": {
+    "dev": "clovie watch",
+    "start": "clovie server", 
+    "build": "clovie build"
+  },
+  "dependencies": {
+    "@brickworks/clovie": "^0.1.5",
+    "express": "^4.18.2"
+  },
+  "keywords": [
+    "server",
+    "web-app",
+    "clovie",
+    "full-stack",
+    "api"
+  ],
+  "license": "MIT"
+}

package/templates/server/partials/footer.html

@@ -0,0 +1,16 @@
+<footer class="footer">
+  <div class="container">
+    <div class="footer__content">
+      <div class="footer__section">
+        <p>&copy; 2024 {{title}}. Built with <a href="https://github.com/adrianjonmiller/clovie" target="_blank">Clovie</a></p>
+      </div>
+      <div class="footer__section">
+        <div class="footer__links">
+          <a href="/api/status">API Status</a>
+          <a href="/docs">Documentation</a>
+          <a href="/support">Support</a>
+        </div>
+      </div>
+    </div>
+  </div>
+</footer>

package/templates/server/partials/header.html

@@ -0,0 +1,26 @@
+<header class="header">
+  <div class="container">
+    <div class="header__content">
+      <a href="/" class="header__brand">
+        <span class="brand-icon">⚡</span>
+        {{title}}
+      </a>
+      
+      <div class="header__actions">
+        <button class="btn btn--small btn--outline" onclick="toggleTheme()">🌙</button>
+        <div class="user-menu" id="user-menu">
+          <button class="user-avatar" onclick="toggleUserMenu()">
+            <img src="https://ui-avatars.com/api/?name=User&background=2563eb&color=fff" alt="User Avatar">
+          </button>
+          <div class="user-dropdown" id="user-dropdown">
+            <a href="/dashboard.html">Dashboard</a>
+            <a href="/profile">Profile</a>
+            <a href="/settings">Settings</a>
+            <hr>
+            <a href="#" onclick="logout()">Sign Out</a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</header>

package/templates/server/partials/nav.html

@@ -0,0 +1,49 @@
+<nav class="sidebar" id="sidebar">
+  <div class="sidebar__content">
+    <ul class="nav-menu">
+      <li class="nav-item">
+        <a href="/dashboard.html" class="nav-link" data-page="dashboard">
+          <span class="nav-icon">📊</span>
+          Dashboard
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="/users" class="nav-link" data-page="users">
+          <span class="nav-icon">👥</span>
+          Users
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="/posts" class="nav-link" data-page="posts">
+          <span class="nav-icon">📝</span>
+          Posts
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="/analytics" class="nav-link" data-page="analytics">
+          <span class="nav-icon">📈</span>
+          Analytics
+        </a>
+      </li>
+      <li class="nav-item">
+        <a href="/settings" class="nav-link" data-page="settings">
+          <span class="nav-icon">⚙️</span>
+          Settings
+        </a>
+      </li>
+    </ul>
+
+    <div class="sidebar__footer">
+      <div class="server-status">
+        <span class="status-dot status-dot--online"></span>
+        <span class="status-text">Server Online</span>
+      </div>
+    </div>
+  </div>
+  
+  <button class="sidebar-toggle" onclick="toggleSidebar()">
+    <span></span>
+    <span></span>
+    <span></span>
+  </button>
+</nav>

package/templates/server/scripts/app.js

@@ -0,0 +1,213 @@
+// Server Application JavaScript
+
+// API helper functions
+const api = {
+  async get(url) {
+    const response = await fetch(url);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+  },
+
+  async post(url, data) {
+    const response = await fetch(url, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data)
+    });
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    return response.json();
+  }
+};
+
+// Dashboard functionality
+async function loadDashboardData() {
+  try {
+    // Load API status
+    const status = await api.get('/api/status');
+    document.getElementById('server-uptime').textContent = `${Math.floor(status.uptime / 60)}m`;
+    
+    // Load users
+    const usersData = await api.get('/api/users');
+    document.getElementById('user-count').textContent = usersData.total;
+    
+    // Update recent activity
+    updateActivity(`System status: ${status.status}`);
+    updateActivity(`${usersData.total} users registered`);
+    
+  } catch (error) {
+    console.error('Error loading dashboard data:', error);
+    document.getElementById('user-count').textContent = 'Error';
+    document.getElementById('server-uptime').textContent = 'Error';
+    updateActivity('Failed to load data');
+  }
+}
+
+// User management functions
+async function createUser() {
+  const name = prompt('Enter user name:');
+  const email = prompt('Enter user email:');
+  
+  if (name && email) {
+    try {
+      const result = await api.post('/api/users', { name, email });
+      if (result.success) {
+        updateActivity(`Created user: ${name}`);
+        loadDashboardData(); // Refresh data
+        alert('User created successfully!');
+      }
+    } catch (error) {
+      console.error('Error creating user:', error);
+      alert('Failed to create user');
+    }
+  }
+}
+
+async function refreshData() {
+  updateActivity('Refreshing data...');
+  await loadDashboardData();
+  updateActivity('Data refreshed');
+}
+
+async function checkApiStatus() {
+  try {
+    const status = await api.get('/api/status');
+    alert(`API Status: ${status.status}\nUptime: ${Math.floor(status.uptime / 60)} minutes`);
+  } catch (error) {
+    alert('API is not responding');
+  }
+}
+
+// Utility functions
+function updateActivity(message) {
+  const activityList = document.getElementById('recent-activity');
+  if (activityList) {
+    // Remove loading message if present
+    const loading = activityList.querySelector('.loading');
+    if (loading) loading.remove();
+    
+    // Add new activity
+    const li = document.createElement('li');
+    li.className = 'activity-item';
+    li.innerHTML = `
+      <span class="activity-time">${new Date().toLocaleTimeString()}</span>
+      <span class="activity-message">${message}</span>
+    `;
+    activityList.insertBefore(li, activityList.firstChild);
+    
+    // Keep only last 5 items
+    while (activityList.children.length > 5) {
+      activityList.removeChild(activityList.lastChild);
+    }
+  }
+}
+
+// User menu functionality
+function toggleUserMenu() {
+  const dropdown = document.getElementById('user-dropdown');
+  dropdown.style.display = dropdown.style.display === 'block' ? 'none' : 'block';
+}
+
+// Close dropdown when clicking outside
+document.addEventListener('click', (e) => {
+  const userMenu = document.getElementById('user-menu');
+  const dropdown = document.getElementById('user-dropdown');
+  if (userMenu && !userMenu.contains(e.target)) {
+    dropdown.style.display = 'none';
+  }
+});
+
+// Sidebar functionality
+function toggleSidebar() {
+  const sidebar = document.getElementById('sidebar');
+  sidebar.classList.toggle('sidebar--collapsed');
+}
+
+// Theme toggle
+function toggleTheme() {
+  document.body.classList.toggle('dark-theme');
+  const isDark = document.body.classList.contains('dark-theme');
+  localStorage.setItem('theme', isDark ? 'dark' : 'light');
+}
+
+// Load saved theme
+if (localStorage.getItem('theme') === 'dark') {
+  document.body.classList.add('dark-theme');
+}
+
+// Login form handling
+async function handleLogin(e) {
+  e.preventDefault();
+  const formData = new FormData(e.target);
+  const email = formData.get('email');
+  const password = formData.get('password');
+  
+  // Show loading state
+  const button = e.target.querySelector('button[type="submit"]');
+  const buttonText = button.querySelector('.btn__text');
+  const buttonLoading = button.querySelector('.btn__loading');
+  
+  buttonText.style.display = 'none';
+  buttonLoading.style.display = 'inline';
+  button.disabled = true;
+  
+  try {
+    // In a real app, you'd call your login API
+    // const result = await api.post('/api/auth/login', { email, password });
+    
+    // For demo, simulate login
+    await new Promise(resolve => setTimeout(resolve, 1000));
+    
+    // Redirect to dashboard
+    window.location.href = '/dashboard.html';
+    
+  } catch (error) {
+    // Show error
+    const errorDiv = document.getElementById('auth-error');
+    const errorMessage = document.getElementById('error-message');
+    errorMessage.textContent = 'Login failed. Please try again.';
+    errorDiv.style.display = 'block';
+    
+    // Reset button
+    buttonText.style.display = 'inline';
+    buttonLoading.style.display = 'none';
+    button.disabled = false;
+  }
+}
+
+// Profile functions
+function editProfile() {
+  alert('Edit profile functionality would go here');
+}
+
+function viewActivity() {
+  alert('User activity view would go here');
+}
+
+function downloadData() {
+  alert('Data download functionality would go here');
+}
+
+function loadUserActivity(userId) {
+  // Load user-specific activity
+  updateActivity(`Viewing profile for user ${userId}`);
+}
+
+// Initialize based on current page
+document.addEventListener('DOMContentLoaded', () => {
+  const currentPath = window.location.pathname;
+  
+  // Update active navigation
+  document.querySelectorAll('.nav-link').forEach(link => {
+    if (link.getAttribute('href') === currentPath) {
+      link.classList.add('nav-link--active');
+    }
+  });
+  
+  console.log('🚀 Server app initialized');
+});