domma-js 0.9.5-alpha → 0.9.7-alpha

package/templates/kickstart/frontend/js/app.js

@@ -0,0 +1,166 @@
+/**
+ * Domma Kickstart Application
+ *
+ * This file initialises your Domma project based on domma.config.json.
+ * Customise the config file to change navbar, footer, theme, and features.
+ */
+
+$(() => {
+  // Determine config path based on page depth
+  // Root pages (pages/index.html) need ../domma.config.json
+  // Sub-pages (pages/about/index.html) need ../../domma.config.json
+  const pathDepth = window.location.pathname.split('/').filter(Boolean).length;
+  const configPath = pathDepth > 2 ? '../../domma.config.json' : '../domma.config.json';
+
+  // Load configuration
+  Domma.http.get(configPath).then(config => {
+    // Initialise theme
+    if (config.theme) {
+      Domma.theme.init({
+        theme: config.theme.default || 'charcoal-dark',
+        persist: config.theme.persist !== false,
+        autoDetect: config.theme.autoDetect === true
+      });
+
+      // Add theme selector if enabled
+      if (config.theme.selector) {
+        addThemeSelector();
+      }
+    }
+
+    // Initialise navbar
+    if (config.navbar) {
+      Domma.elements.navbar('#main-navbar', {
+        brand: config.navbar.brand,
+        items: config.navbar.items,
+        variant: config.navbar.variant || 'dark',
+        position: config.navbar.position || 'sticky',
+        collapsible: config.navbar.collapsible !== false
+      });
+    }
+
+    // Initialise footer
+    if (config.footer) {
+      const $footer = $('.page-footer');
+      if ($footer.length) {
+        const $footerContent = $('<div class="footer-content"></div>');
+
+        const $copyright = $('<p></p>').text(config.footer.copyright);
+        $footerContent.append($copyright);
+
+        const $nav = $('<nav class="footer-nav"></nav>');
+        _.each(config.footer.links, link => {
+          const $link = $('<a></a>')
+            .attr('href', link.url)
+            .text(link.text);
+          $nav.append($link);
+        });
+        $footerContent.append($nav);
+
+        $footer.append($footerContent);
+      }
+    }
+
+    // Initialise features
+    if (config.features) {
+      // Icon scanning
+      if (config.features.icons) {
+        Domma.icons.scan();
+      }
+
+      // Back to top button
+      if (config.features.backToTop) {
+        Domma.elements.backToTop({
+          scrollThreshold: 300,
+          position: 'bottom-right'
+        });
+      }
+
+      // Smooth scroll
+      if (config.features.smoothScroll) {
+        $('a[href^="#"]').on('click', function (e) {
+          e.preventDefault();
+          const targetId = $(this).attr('href');
+          const $target = $(targetId);
+
+          if ($target.length) {
+            $target[0].scrollIntoView({behavior: 'smooth'});
+          }
+        });
+      }
+
+      // Code copy buttons
+      if (config.features.codeCopy) {
+        $('pre code').each((codeBlock) => {
+          const $code = $(codeBlock);
+          const $pre = $code.parent();
+
+          const $button = $('<button class="btn btn-sm code-copy-btn">Copy</button>');
+
+          $button.on('click', () => {
+            _.copyToClipboard($code.text());
+            $button.text('Copied!');
+            setTimeout(() => $button.text('Copy'), 2000);
+          });
+
+          $pre.css('position', 'relative');
+          $pre.prepend($button);
+        });
+      }
+    }
+
+    console.log(`✓ Domma initialised with theme: ${config.theme.default}`);
+  }).catch(err => {
+    console.warn('Could not load domma.config.json:', err.message);
+  });
+});
+
+/**
+ * Add floating theme selector
+ */
+function addThemeSelector() {
+  const themes = Domma.theme.listThemes();
+  const currentTheme = Domma.theme.get();
+
+  const $selector = $('<div class="theme-selector"></div>');
+  const $select = $('<select id="theme-select" class="form-select"></select>');
+
+  _.each(themes, theme => {
+    const $option = $('<option></option>')
+      .attr('value', theme)
+      .text(theme);
+
+    if (theme === currentTheme) {
+      $option.attr('selected', 'selected');
+    }
+
+    $select.append($option);
+  });
+
+  $selector.append($select);
+
+  // Add styles
+  const $style = $(`<style>
+        .theme-selector {
+            position: fixed;
+            bottom: 80px;
+            right: 20px;
+            z-index: 1000;
+            background: var(--dm-surface);
+            padding: var(--dm-space-3);
+            border-radius: var(--dm-radius-md);
+            box-shadow: var(--dm-shadow-lg);
+        }
+        .theme-selector select {
+            min-width: 150px;
+        }
+    </style>`);
+
+  $('head').append($style);
+  $('body').append($selector);
+
+  // Handle theme changes
+  $select.on('change', (e) => {
+    Domma.theme.set($(e.target).val());
+  });
+}

package/templates/kickstart/frontend/pages/about/about.js

@@ -0,0 +1,10 @@
+/**
+ * About Page Initialization
+ * Team sections, timeline, company info
+ */
+$(() => {
+  // Example: Initialize any page-specific components
+  // const timeline = Domma.elements.progression('#timeline', { mode: 'timeline' });
+
+  console.log('About page initialized');
+});

package/templates/kickstart/frontend/pages/about/index.html

@@ -0,0 +1,229 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>About - {{projectName}}</title>
+
+  <!-- Domma CSS -->
+  <link rel="stylesheet" href="../../dist/domma.css">
+  <link rel="stylesheet" href="../../dist/grid.css">
+  <link rel="stylesheet" href="../../dist/elements.css">
+  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="../../css/custom.css">
+</head>
+<body class="dm-theme-{{theme}}">
+<!-- Navigation -->
+<nav id="main-navbar"></nav>
+
+<!-- Page Header -->
+<section class="container py-6">
+  <h1 class="display-2 mb-3">About {{projectName}}</h1>
+  <p class="lead text-secondary">
+    Learn more about our mission, values, and the team behind the project.
+  </p>
+</section>
+
+<!-- About Content -->
+<section class="container py-4">
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+    <div class="lg:col-span-2">
+      <h2 class="h3 mb-4">Our Story</h2>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
+      </p>
+      <p>
+        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
+        sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+      </p>
+
+      <h2 class="h3 mt-6 mb-4">Our Mission</h2>
+      <p>
+        To build modern, accessible web applications that deliver exceptional user experiences. We believe in:
+      </p>
+      <ul class="list-unstyled ms-4">
+        <li class="mb-2"><span data-icon="check-circle" class="text-success me-2"></span> <strong>Simplicity</strong> -
+          Keep things simple and intuitive
+        </li>
+        <li class="mb-2"><span data-icon="check-circle" class="text-success me-2"></span> <strong>Performance</strong> -
+          Fast, lightweight, and efficient
+        </li>
+        <li class="mb-2"><span data-icon="check-circle" class="text-success me-2"></span> <strong>Accessibility</strong>
+          - Inclusive design for everyone
+        </li>
+        <li class="mb-2"><span data-icon="check-circle" class="text-success me-2"></span> <strong>Open Source</strong> -
+          Community-driven development
+        </li>
+      </ul>
+    </div>
+
+    <div>
+      <div class="card shadow-md">
+        <div class="card-body">
+          <h3 class="h5 mb-3">Quick Facts</h3>
+          <dl class="mb-0">
+            <dt class="text-secondary mb-1">Founded</dt>
+            <dd class="mb-3">{{year}}</dd>
+
+            <dt class="text-secondary mb-1">Framework</dt>
+            <dd class="mb-3">Domma.js</dd>
+
+            <dt class="text-secondary mb-1">License</dt>
+            <dd class="mb-3">ISC</dd>
+
+            <dt class="text-secondary mb-1">Status</dt>
+            <dd class="mb-0">
+              <span class="badge badge-success">Active Development</span>
+            </dd>
+          </dl>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Team Section -->
+<section class="container py-6">
+  <h2 class="text-center mb-6">Meet the Team</h2>
+
+  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
+    <!-- Team Member 1 -->
+    <div class="card text-center hover shadow-md">
+        <div class="card-body">
+          <div class="mb-3"
+               style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);"></div>
+          <h3 class="h5 mb-1">Jane Doe</h3>
+          <p class="text-secondary mb-3">Lead Developer</p>
+          <div class="d-flex justify-content-center gap-2">
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="github"></span>
+            </a>
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="twitter"></span>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    <!-- Team Member 2 -->
+    <div class="card text-center hover shadow-md">
+        <div class="card-body">
+          <div class="mb-3"
+               style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);"></div>
+          <h3 class="h5 mb-1">John Smith</h3>
+          <p class="text-secondary mb-3">UX Designer</p>
+          <div class="d-flex justify-content-center gap-2">
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="github"></span>
+            </a>
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="twitter"></span>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    <!-- Team Member 3 -->
+    <div class="card text-center hover shadow-md">
+        <div class="card-body">
+          <div class="mb-3"
+               style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);"></div>
+          <h3 class="h5 mb-1">Sarah Johnson</h3>
+          <p class="text-secondary mb-3">Product Manager</p>
+          <div class="d-flex justify-content-center gap-2">
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="github"></span>
+            </a>
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="twitter"></span>
+            </a>
+          </div>
+        </div>
+      </div>
+
+    <!-- Team Member 4 -->
+    <div class="card text-center hover shadow-md">
+        <div class="card-body">
+          <div class="mb-3"
+               style="width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);"></div>
+          <h3 class="h5 mb-1">Mike Chen</h3>
+          <p class="text-secondary mb-3">DevOps Engineer</p>
+          <div class="d-flex justify-content-center gap-2">
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="github"></span>
+            </a>
+            <a href="#" class="btn btn-sm btn-outline-primary">
+              <span data-icon="twitter"></span>
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Timeline Section -->
+<section class="bg-surface py-6">
+  <div class="container">
+    <h2 class="text-center mb-6">Our Journey</h2>
+
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
+      <div class="card h-100 shadow-md">
+          <div class="card-body">
+            <div class="badge badge-primary mb-3">2024 Q1</div>
+            <h3 class="h5 mb-2">Project Launch</h3>
+            <p class="text-secondary mb-0">
+              Initial release with core features and documentation.
+            </p>
+          </div>
+        </div>
+
+      <div class="card h-100 shadow-md">
+          <div class="card-body">
+            <div class="badge badge-primary mb-3">2024 Q2</div>
+            <h3 class="h5 mb-2">Community Growth</h3>
+            <p class="text-secondary mb-0">
+              Reached 1,000 users and 50+ contributors.
+            </p>
+          </div>
+        </div>
+
+      <div class="card h-100 shadow-md">
+          <div class="card-body">
+            <div class="badge badge-primary mb-3">2024 Q3</div>
+            <h3 class="h5 mb-2">Major Update</h3>
+            <p class="text-secondary mb-0">
+              Version 2.0 with enhanced performance and new features.
+            </p>
+          </div>
+        </div>
+
+      <div class="card h-100 shadow-md">
+          <div class="card-body">
+            <div class="badge badge-success mb-3">2024 Q4</div>
+            <h3 class="h5 mb-2">Looking Ahead</h3>
+            <p class="text-secondary mb-0">
+              Expanding features and building partnerships.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer class="page-footer"></footer>
+
+<!-- Domma JavaScript -->
+<script src="../../dist/domma.min.js"></script>
+
+<!-- App Initialization -->
+<script src="../../js/app.js"></script>
+<!-- Page-specific Initialization -->
+<script src="about.js"></script>
+</body>
+</html>

package/templates/kickstart/frontend/pages/blog/blog.js

@@ -0,0 +1,10 @@
+/**
+ * Blog Page Initialization
+ * Blog listing, filters, pagination
+ */
+$(() => {
+  // Example: Initialize blog-specific features
+  // Filter buttons, search, pagination handlers
+
+  console.log('Blog page initialized');
+});

package/templates/kickstart/frontend/pages/blog/index.html

@@ -0,0 +1,218 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Blog - {{projectName}}</title>
+
+  <!-- Domma CSS -->
+  <link rel="stylesheet" href="../../dist/domma.css">
+  <link rel="stylesheet" href="../../dist/grid.css">
+  <link rel="stylesheet" href="../../dist/elements.css">
+  <link rel="stylesheet" href="../../dist/themes/domma-themes.css">
+
+  <!-- Custom CSS -->
+  <link rel="stylesheet" href="../../css/custom.css">
+</head>
+<body class="dm-theme-{{theme}}">
+<!-- Navigation -->
+<nav id="main-navbar"></nav>
+
+<!-- Page Header -->
+<section class="container py-6">
+  <h1 class="display-2 mb-3">Blog</h1>
+  <p class="lead text-secondary">
+    Latest updates, tutorials, and insights from our team.
+  </p>
+</section>
+
+<!-- Filters -->
+<section class="container pb-4">
+  <div class="d-flex flex-wrap align-items-center gap-3">
+    <span class="text-secondary">Filter by:</span>
+    <div class="btn-group">
+      <button class="btn btn-sm btn-primary">All</button>
+      <button class="btn btn-sm btn-outline-primary">Tutorials</button>
+      <button class="btn btn-sm btn-outline-primary">Updates</button>
+      <button class="btn btn-sm btn-outline-primary">News</button>
+    </div>
+  </div>
+</section>
+
+<!-- Blog Posts -->
+<section class="container py-4">
+  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+    <!-- Blog Post 1 -->
+    <article class="card h-100 hover shadow-md">
+        <div class="card-body">
+          <div class="d-flex gap-2 mb-3">
+            <span class="badge badge-primary">Tutorial</span>
+            <span class="badge badge-outline">5 min read</span>
+          </div>
+          <h2 class="h5 mb-2">
+            <a href="#" class="text-decoration-none">Getting Started with Domma</a>
+          </h2>
+          <p class="text-secondary mb-3">
+            Learn the basics of Domma and build your first application in minutes.
+          </p>
+          <div class="d-flex align-items-center text-secondary text-sm">
+            <span data-icon="calendar" class="me-2"></span>
+            <time>January 15, {{year}}</time>
+          </div>
+        </div>
+      </article>
+
+    <!-- Blog Post 2 -->
+    <article class="card h-100 hover shadow-md">
+        <div class="card-body">
+          <div class="d-flex gap-2 mb-3">
+            <span class="badge badge-success">Update</span>
+            <span class="badge badge-outline">3 min read</span>
+          </div>
+          <h2 class="h5 mb-2">
+            <a href="#" class="text-decoration-none">Version 2.0 Released</a>
+          </h2>
+          <p class="text-secondary mb-3">
+            Announcing our biggest update yet with enhanced performance and new features.
+          </p>
+          <div class="d-flex align-items-center text-secondary text-sm">
+            <span data-icon="calendar" class="me-2"></span>
+            <time>January 10, {{year}}</time>
+          </div>
+        </div>
+      </article>
+
+    <!-- Blog Post 3 -->
+    <article class="card h-100 hover shadow-md">
+        <div class="card-body">
+          <div class="d-flex gap-2 mb-3">
+            <span class="badge badge-warning">News</span>
+            <span class="badge badge-outline">4 min read</span>
+          </div>
+          <h2 class="h5 mb-2">
+            <a href="#" class="text-decoration-none">Building Responsive Layouts</a>
+          </h2>
+          <p class="text-secondary mb-3">
+            Master the grid system and create beautiful responsive designs.
+          </p>
+          <div class="d-flex align-items-center text-secondary text-sm">
+            <span data-icon="calendar" class="me-2"></span>
+            <time>January 5, {{year}}</time>
+          </div>
+        </div>
+      </article>
+
+    <!-- Blog Post 4 -->
+    <article class="card h-100 hover shadow-md">
+        <div class="card-body">
+          <div class="d-flex gap-2 mb-3">
+            <span class="badge badge-primary">Tutorial</span>
+            <span class="badge badge-outline">7 min read</span>
+          </div>
+          <h2 class="h5 mb-2">
+            <a href="#" class="text-decoration-none">Theme Customization Guide</a>
+          </h2>
+          <p class="text-secondary mb-3">
+            Create custom themes and override CSS variables to match your brand.
+          </p>
+          <div class="d-flex align-items-center text-secondary text-sm">
+            <span data-icon="calendar" class="me-2"></span>
+            <time>December 28, {{year}}</time>
+          </div>
+        </div>
+      </article>
+
+    <!-- Blog Post 5 -->
+    <article class="card h-100 hover shadow-md">
+        <div class="card-body">
+          <div class="d-flex gap-2 mb-3">
+            <span class="badge badge-info">Tips</span>
+            <span class="badge badge-outline">6 min read</span>
+          </div>
+          <h2 class="h5 mb-2">
+            <a href="#" class="text-decoration-none">10 Performance Optimization Tips</a>
+          </h2>
+          <p class="text-secondary mb-3">
+            Speed up your Domma applications with these proven optimization techniques.
+          </p>
+          <div class="d-flex align-items-center text-secondary text-sm">
+            <span data-icon="calendar" class="me-2"></span>
+            <time>December 20, {{year}}</time>
+          </div>
+        </div>
+      </article>
+
+    <!-- Blog Post 6 -->
+    <article class="card h-100 hover shadow-md">
+        <div class="card-body">
+          <div class="d-flex gap-2 mb-3">
+            <span class="badge badge-danger">Important</span>
+            <span class="badge badge-outline">2 min read</span>
+          </div>
+          <h2 class="h5 mb-2">
+            <a href="#" class="text-decoration-none">Security Best Practices</a>
+          </h2>
+          <p class="text-secondary mb-3">
+            Essential security considerations when building with Domma.
+          </p>
+          <div class="d-flex align-items-center text-secondary text-sm">
+            <span data-icon="calendar" class="me-2"></span>
+            <time>December 15, {{year}}</time>
+          </div>
+        </div>
+      </article>
+    </div>
+  </div>
+</section>
+
+<!-- Pagination -->
+<section class="container py-6">
+  <nav aria-label="Blog pagination">
+    <ul class="pagination justify-content-center">
+      <li class="page-item disabled">
+        <a class="page-link" href="#" aria-label="Previous">
+          <span data-icon="chevron-left"></span>
+        </a>
+      </li>
+      <li class="page-item active"><a class="page-link" href="#">1</a></li>
+      <li class="page-item"><a class="page-link" href="#">2</a></li>
+      <li class="page-item"><a class="page-link" href="#">3</a></li>
+      <li class="page-item">
+        <a class="page-link" href="#" aria-label="Next">
+          <span data-icon="chevron-right"></span>
+        </a>
+      </li>
+    </ul>
+  </nav>
+</section>
+
+<!-- Newsletter Signup -->
+<section class="bg-surface py-6">
+  <div class="container">
+    <div class="d-flex justify-content-center">
+      <div class="text-center" style="max-width: 600px;">
+        <h2 class="h3 mb-3">Subscribe to Our Newsletter</h2>
+        <p class="text-secondary mb-4">
+          Get the latest updates and tutorials delivered to your inbox.
+        </p>
+        <form class="d-flex gap-2">
+          <input type="email" class="form-control" placeholder="Enter your email" required>
+          <button type="submit" class="btn btn-primary">Subscribe</button>
+        </form>
+      </div>
+    </div>
+  </div>
+</section>
+
+<!-- Footer -->
+<footer class="page-footer"></footer>
+
+<!-- Domma JavaScript -->
+<script src="../../dist/domma.min.js"></script>
+
+<!-- App Initialization -->
+<script src="../../js/app.js"></script>
+<!-- Page-specific Initialization -->
+<script src="blog.js"></script>
+</body>
+</html>

package/templates/kickstart/frontend/pages/contact/contact.js

@@ -0,0 +1,33 @@
+/**
+ * Contact Page Initialization
+ * Form handling, validation, submission
+ */
+$(() => {
+  // Handle contact form submission
+  $('#contact-form').on('submit', function(e) {
+    e.preventDefault();
+
+    // Get form values using Domma
+    const formData = {
+      name: $('#name').val(),
+      email: $('#email').val(),
+      subject: $('#subject').val(),
+      message: $('#message').val()
+    };
+
+    // Show success message (in a real app, send to backend)
+    Domma.elements.toast({
+      message: 'Thank you! Your message has been sent successfully.',
+      type: 'success',
+      duration: 5000
+    });
+
+    // Reset form
+    $(this)[0].reset();
+  });
+
+  // Initialize accordion for FAQ
+  Domma.elements.accordion('#faq-accordion');
+
+  console.log('Contact page initialized');
+});