domma-js 0.13.9 → 0.13.10

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "domma-js",
-  "version": "0.13.9",
+  "version": "0.13.10",
   "description": "Dynamic Object Manipulation & Modeling API - A complete front-end toolkit.",
   "main": "public/dist/domma.min.js",
   "module": "public/dist/domma.esm.js",

package/templates/kickstart/frontend/config/footer.json

@@ -0,0 +1,21 @@
+{
+  "copyright": "© {{year}} {{projectName}}. All rights reserved.",
+  "links": [
+    {
+      "text": "Privacy Policy",
+      "url": "pages/privacy/index.html"
+    },
+    {
+      "text": "Cookie Policy",
+      "url": "pages/cookies/index.html"
+    },
+    {
+      "text": "Terms of Service",
+      "url": "pages/terms/index.html"
+    },
+    {
+      "text": "Contact Us",
+      "url": "pages/contact/index.html"
+    }
+  ]
+}

package/templates/kickstart/frontend/config/navbar.json

@@ -0,0 +1,36 @@
+{
+  "brand": {
+    "text": "{{projectName}}",
+    "url": "pages/index.html"
+  },
+  "items": [
+    {
+      "text": "Home",
+      "url": "pages/index.html",
+      "page": "home"
+    },
+    {
+      "text": "About",
+      "url": "pages/about/index.html",
+      "page": "about"
+    },
+    {
+      "text": "Blog",
+      "url": "pages/blog/index.html",
+      "page": "blog"
+    },
+    {
+      "text": "Docs",
+      "url": "pages/docs/index.html",
+      "page": "docs"
+    },
+    {
+      "text": "Contact",
+      "url": "pages/contact/index.html",
+      "page": "contact"
+    }
+  ],
+  "variant": "dark",
+  "position": "sticky",
+  "collapsible": true
+}

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

@@ -1,54 +1,91 @@
 /**
  * Domma Kickstart Application
- * Simple initialization for navbar, footer, theme, and features
+ * Configuration-driven initialization using JSON configs
  */
 
 $(() => {
   console.log('[App] Initializing...');
 
-  // Simple navbar initialization
-  const initNavbar = () => {
-    Domma.elements.navbar('#main-navbar', {
-      brand: {
-        text: '{{projectName}}',
-        url: './'
-      },
-      items: [
-        { text: 'Home', url: './', active: true },
-        { text: 'About', url: 'about/' },
-        { text: 'Contact', url: 'contact/' },
-        { text: 'Blog', url: 'blog/' },
-        { text: 'Docs', url: 'docs/' }
-      ],
-      variant: 'dark',
-      position: 'sticky',
-      collapsible: true
-    });
-    console.log('[App] Navbar initialized');
-  };
+  // Calculate path prefix based on current page location
+  const currentPath = window.location.pathname;
+  const currentDir = currentPath.substring(0, currentPath.lastIndexOf('/'));
+  const depth = (currentDir.match(/\//g) || []).length;
+  const prefix = '../'.repeat(depth);
 
-  // Simple footer initialization
-  const initFooter = () => {
-    const $footer = $('.page-footer');
-    if ($footer.length) {
-      const footerHTML = `
-        <div class="container py-4">
-          <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
-            <p class="mb-0 text-secondary">© {{year}} {{projectName}}. All rights reserved.</p>
-            <nav class="d-flex gap-3">
-              <a href="privacy/" class="text-secondary">Privacy Policy</a>
-              <a href="cookies/" class="text-secondary">Cookie Policy</a>
-              <a href="terms/" class="text-secondary">Terms of Service</a>
-              <a href="contact/" class="text-secondary">Contact Us</a>
-            </nav>
-          </div>
-        </div>
-      `;
-      $footer.html(footerHTML);
-      console.log('[App] Footer initialized');
+  console.log('[App] Path:', currentPath, 'Depth:', depth, 'Prefix:', prefix);
+
+  // Helper to adjust URLs in config based on page depth
+  const adjustUrls = (config) => {
+    const adjusted = _.cloneDeep(config);
+
+    if (adjusted.brand?.url) {
+      adjusted.brand.url = prefix + adjusted.brand.url;
+    }
+
+    if (adjusted.items) {
+      adjusted.items = adjusted.items.map(item => ({
+        ...item,
+        url: prefix + item.url
+      }));
+    }
+
+    if (adjusted.links) {
+      adjusted.links = adjusted.links.map(link => ({
+        ...link,
+        url: prefix + link.url
+      }));
     }
+
+    return adjusted;
   };
 
+  // Load navbar config and initialize
+  fetch(prefix + 'config/navbar.json')
+    .then(response => {
+      if (!response.ok) throw new Error(`Failed to load navbar.json: ${response.status}`);
+      return response.json();
+    })
+    .then(config => {
+      const navConfig = adjustUrls(config);
+      console.log('[App] Navbar config:', navConfig);
+      Domma.elements.navbar('#main-navbar', navConfig);
+      console.log('[App] Navbar initialized');
+    })
+    .catch(error => {
+      console.error('[App] Navbar error:', error);
+    });
+
+  // Load footer config and initialize
+  fetch(prefix + 'config/footer.json')
+    .then(response => {
+      if (!response.ok) throw new Error(`Failed to load footer.json: ${response.status}`);
+      return response.json();
+    })
+    .then(config => {
+      const footerConfig = adjustUrls(config);
+      const $footer = $('.page-footer');
+
+      if ($footer.length) {
+        const footerHTML = `
+          <div class="container py-4">
+            <div class="d-flex justify-content-between align-items-center flex-wrap gap-3">
+              <p class="mb-0 text-secondary">${footerConfig.copyright}</p>
+              <nav class="d-flex gap-3">
+                ${footerConfig.links.map(link =>
+                  `<a href="${link.url}" class="text-secondary">${link.text}</a>`
+                ).join('')}
+              </nav>
+            </div>
+          </div>
+        `;
+        $footer.html(footerHTML);
+        console.log('[App] Footer initialized');
+      }
+    })
+    .catch(error => {
+      console.error('[App] Footer error:', error);
+    });
+
   // Initialize theme
   if (Domma.theme) {
     Domma.theme.init({
@@ -56,13 +93,9 @@ $(() => {
       persist: true,
       autoDetect: false
     });
-    console.log('[App] Theme initialized: {{theme}}');
+    console.log('[App] Theme initialized');
   }
 
-  // Initialize components
-  initNavbar();
-  initFooter();
-
   // Scan for icons
   if (Domma.icons) {
     Domma.icons.scan();

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -223,8 +223,8 @@
 <!-- Domma JavaScript -->
 <script src="../../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- App Initialization -->
+<script src="../../js/app.js"></script>
 <!-- Page-specific Initialization -->
 <script src="about.js"></script>
 </body>

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -216,8 +216,8 @@
 <!-- Domma JavaScript -->
 <script src="../../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- App Initialization -->
+<script src="../../js/app.js"></script>
 <!-- Page-specific Initialization -->
 <script src="blog.js"></script>
 </body>

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -192,8 +192,8 @@
 <!-- Domma JavaScript -->
 <script src="../../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- App Initialization -->
+<script src="../../js/app.js"></script>
 
 <!-- Form Handling -->
 <!-- Page-specific Initialization -->

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -378,8 +378,8 @@
 <!-- Domma JavaScript -->
 <script src="../../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- Global App Initialization -->
+<script src="../../js/app.js"></script>
 
 <!-- Page-specific Initialization -->
 <script src="cookies.js"></script>

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

@@ -42,7 +42,7 @@
       }
   </style>
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -290,8 +290,8 @@ Domma.theme.get();  // 'ocean-dark'</code></pre>
 <script src="../../dist/domma/domma.min.js"></script>
 <script src="../../dist/domma/domma-syntax.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- App Initialization -->
+<script src="../../js/app.js"></script>
 
 <!-- Page-specific scripts -->
 <!-- Page-specific Initialization -->

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../css/custom.css">
 </head>
-<body class="dm-cloaked dm-theme-{{theme}}" data-layout="public">
+<body class="dm-cloaked dm-theme-{{theme}}">
 <!-- Navigation (initialized by app.js) -->
 <nav id="main-navbar"></nav>
 
@@ -145,8 +145,8 @@
 <!-- Domma JavaScript -->
 <script src="../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../layouts/js/layout.js"></script>
+<!-- Global App Initialization -->
+<script src="../js/app.js"></script>
 
 <!-- Page-specific Initialization -->
 <script src="index.js"></script>

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -271,8 +271,8 @@
 <!-- Domma JavaScript -->
 <script src="../../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- Global App Initialization -->
+<script src="../../js/app.js"></script>
 
 <!-- Page-specific Initialization -->
 <script src="privacy.js"></script>

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

@@ -14,7 +14,7 @@
   <!-- Custom CSS -->
   <link rel="stylesheet" href="../../css/custom.css">
 </head>
-<body class="dm-theme-{{theme}}" data-layout="public">
+<body class="dm-theme-{{theme}}">
 <!-- Navigation -->
 <nav id="main-navbar"></nav>
 
@@ -366,8 +366,8 @@
 <!-- Domma JavaScript -->
 <script src="../../dist/domma/domma.min.js"></script>
 
-<!-- Layout System -->
-<script src="../../layouts/js/layout.js"></script>
+<!-- Global App Initialization -->
+<script src="../../js/app.js"></script>
 
 <!-- Page-specific Initialization -->
 <script src="terms.js"></script>

package/templates/kickstart/frontend/layouts/config/footer-public.json

@@ -1,25 +0,0 @@
-{
-  "class": "page-footer",
-  "layout": "nav",
-  "content": {
-    "left": "© {{year}} {{projectName}}. All rights reserved.",
-    "nav": [
-      {
-        "text": "Privacy Policy",
-        "url": "privacy/index.html"
-      },
-      {
-        "text": "Cookie Policy",
-        "url": "cookies/index.html"
-      },
-      {
-        "text": "Terms of Service",
-        "url": "terms/index.html"
-      },
-      {
-        "text": "Contact Us",
-        "url": "contact/index.html"
-      }
-    ]
-  }
-}

package/templates/kickstart/frontend/layouts/config/nav-public.json

@@ -1,30 +0,0 @@
-{
-  "type": "flat",
-  "items": [
-    {
-      "text": "Home",
-      "url": "index.html",
-      "page": "home"
-    },
-    {
-      "text": "About",
-      "url": "about/index.html",
-      "page": "about"
-    },
-    {
-      "text": "Blog",
-      "url": "blog/index.html",
-      "page": "blog"
-    },
-    {
-      "text": "Docs",
-      "url": "docs/index.html",
-      "page": "docs"
-    },
-    {
-      "text": "Contact",
-      "url": "contact/index.html",
-      "page": "contact"
-    }
-  ]
-}

package/templates/kickstart/frontend/layouts/config/presets.json

@@ -1,27 +0,0 @@
-{
-  "public": {
-    "navbar": {
-      "type": "flat",
-      "brand": {
-        "text": "{{projectName}}",
-        "url": "index.html"
-      },
-      "items": "nav-public",
-      "variant": "dark",
-      "position": "sticky",
-      "collapsible": true
-    },
-    "footer": "footer-public",
-    "sidebar": {
-      "enabled": false
-    },
-    "theme": {
-      "toggle": false,
-      "variantSelector": false
-    },
-    "snow": {
-      "toggle": false
-    },
-    "features": ["back-to-top", "icon-scan"]
-  }
-}