launcher pagination

app/asset/app.js

@@ -192,12 +192,8 @@ document.addEventListener('alpine:init', () => {
     }
   }))
 })
-function alpineInstance() {
-  return {
-    intro: 'Available Web applications and <b class="text-gray-400">tools</b> that run in the browser',
-    apps: [],
-  }
-}
+
+// Launcher
 document.addEventListener('DOMContentLoaded', function(event) {
   fetch('https://gigamaster.github.io/codemo/asset/modal-launcher.html')
   .then(function (response) {
@@ -212,6 +208,31 @@ document.addEventListener('DOMContentLoaded', function(event) {
       console.log(error);
   })
 });
+//Web applications and Tools
+function alpineInstance() {
+  return {
+    pagination: '<template x-for="idx in numOfPages"><a :href="`/${idx}`" x-text="`${idx}`" :aria-current="idx === currentPage + 1 ? \'page\' : false" x-bind:class="idx === currentPage + 1 && \'bg-primary text-light\'" @click.prevent="currentPage = idx - 1" class="h-6 w-6 bg-gray-100 text-gray-40 hover:bg-primary hover:text-light dark:bg-dark dark:hover:bg-primary-dark dark:hover:text-light transition-colors duration-500 rounded-md m-1 px-3 py-1"></a></template>',
+    intro: 'Available Web applications and <b class="text-gray-400">tools</b> that run in the browser',
+    app: [],
+    itemsPerPage: 10,
+    currentPage: 0,
+    numOfPages() {
+      return Math.ceil(this.app.length / this.itemsPerPage)
+    },
+    page() {
+      return this.app.slice(this.currentPage * this.itemsPerPage, (this.currentPage + 1) * this.itemsPerPage)
+    },
+    async getApps() {
+      this.app = await (await fetch('https://gigamaster.github.io/codemo/asset/launcher.json')).json();
+      //document.documentElement.classList.add('alpine');
+    },
+    init() {
+      this.getApps();
+      }
+  }
+}
+
+
 /*
   Usage Example:
   openWithSelfMain('https://example.com','Example Title','960','540');

app/asset/launcher.json

@@ -148,5 +148,45 @@
     "cat": "Web Design",
     "icon": "icon-apps",
     "image": "https://gigamaster.github.io/codemo/web-app/vvveb.webp"
+  },
+  {
+    "id": 20,
+    "url": "https://gigamaster.github.io/codemo/web-app/vvvebjs/",
+    "name": "Vvvebjs",
+    "author": "Author",
+    "desc": "Drag and drop web page builder",
+    "cat": "Web Design",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/vvveb.webp"
+  },
+  {
+    "id": 21,
+    "url": "https://gigamaster.github.io/codemo/web-app/vvvebjs/",
+    "name": "Vvvebjs",
+    "author": "Author",
+    "desc": "Drag and drop web page builder",
+    "cat": "Web Design",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/vvveb.webp"
+  },
+  {
+    "id": 22,
+    "url": "https://gigamaster.github.io/codemo/web-app/vvvebjs/",
+    "name": "Vvvebjs",
+    "author": "Author",
+    "desc": "Drag and drop web page builder",
+    "cat": "Web Design",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/vvveb.webp"
+  },
+  {
+    "id": 23,
+    "url": "https://gigamaster.github.io/codemo/web-app/vvvebjs/",
+    "name": "Vvvebjs",
+    "author": "Author",
+    "desc": "Drag and drop web page builder",
+    "cat": "Web Design",
+    "icon": "icon-apps",
+    "image": "https://gigamaster.github.io/codemo/web-app/vvveb.webp"
   }
 ]

app/asset/manifest.json

@@ -0,0 +1,28 @@
+{
+  "short_name": "Codemo",
+  "name": "Codemo Digital Nomad",
+  "icons": [
+    {
+      "src": "apple-touch-icon.png",
+      "sizes": "any",
+      "type": "image/png",
+      "purpose": "any"
+    },
+    {
+        "src": "https://gigamaster.github.io/codemo/asset/favicon/android-chrome-192x192.png",
+        "sizes": "192x192",
+        "type": "image/png"
+    },
+    {
+        "src": "https://gigamaster.github.io/codemo/asset/favicon/android-chrome-512x512.png",
+        "sizes": "512x512",
+        "type": "image/png"
+    }
+  ],
+  "theme_color": "#111213",
+  "background_color": "#111213",
+  "start_url": "https://gigamaster.github.io/codemo/",
+  "display": "standalone"
+}
+
+

app/asset/modal-launcher.html

@@ -2,21 +2,20 @@
 <div class="mx-auto h-full" x-data="{'layout': 'grid'}">
 <section class="flex flex-wrap" 
   x-data="alpineInstance()"
-  x-init="fetch('https://gigamaster.github.io/codemo/asset/launcher.json')
-          .then(response => response.json())
-          .then(data => apps = data)"
+
   x-bind:class="{'app-list': layout === 'list', 'app-grid': layout === 'grid'}"
 >
 <nav class="flex flex-row w-full items-center justify-between px-2">
   <div>
-    <h1 class="w-full" x-html="intro"><!-- title text --></h1>
+    <div class="w-full" aria-label="Select a page" x-html="pagination">
+    </div>
   </div>
   <div>
     <button type="button" class="m-1 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark" x-on:click="layout = 'list'" x-bind:class="{'bg-primary dark:bg-primary-dark': layout === 'list'}"><i class="icon-layout-list h-6 w-6"></i></button>
     <button type="button" class="m-1 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark" x-on:click="layout = 'grid'" x-bind:class="{'bg-primary dark:bg-primary-dark': layout === 'grid'}"><i class="icon-layout-grid h-6 w-6"></i></button>
   </div>
 </nav>
-<template x-for="app in apps" :key="app.id">
+<template x-for="app in page">
   <div class="" x-bind:class="{'w-full p-2': layout === 'list', 'w-1/5 p-2': layout === 'grid'}">
   <article class="p-1 rounded-md text-gray-400 bg-gray-100 hover:bg-primary hover:text-light dark:bg-dark dark:hover:bg-primary-dark dark:hover:text-light transition-colors duration-500">
     <div class="flex flex-row">
@@ -49,5 +48,8 @@ <h2 class="mb-2 text-xl uppercase" x-text="app.name"></h2>
   </article>
   </div>
 </template>
+  <nav class="flex flex-row w-full items-center justify-between px-2 py-2">
+    <div class="w-full aria-label="Select a page" x-html="pagination"></div>
+  </nav>
 </section>
 </div>

src/template/foot.html

@@ -30,7 +30,7 @@
     <!-- Nomad Notes -->
     <button 
       class="m-1 mb-2 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark"
-      x-on:click.prevent="openWithSelfMain('https://gigamaster.github.io/codemo/tools/notes/index.html','Codemo Digital Nomad—Notes','960','540')" 
+      x-on:click.prevent="openWithSelfMain('https://gigamaster.github.io/codemo/tools/notes/','Codemo Digital Nomad—Notes','960','540')" 
       type="button"
       title="Notes"
     >
@@ -40,7 +40,7 @@
     <!-- localStorage -->
     <button
     class="m-1 mb-2 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark focus:outline-none" 
-    x-on:click.prevent="openWithSelfMain('localmanager.html','codemo','960','540')" 
+    x-on:click.prevent="openWithSelfMain('https://gigamaster.github.io/codemo/tools/storage/','codemo','960','540')" 
     title="Bookmarks" 
     type="button"
     >
@@ -49,6 +49,7 @@
 
     <button
     class="m-1 mb-2 p-1 transition-colors duration-500 rounded-md text-gray-400 bg-gray-100 hover:text-light hover:bg-primary dark:hover:text-light dark:hover:bg-primary-dark dark:bg-dark focus:outline-none focus:bg-primary-100 dark:focus:bg-primary-dark focus:ring-primary-darker" 
+    x-on:click.prevent="openWithSelfMain('https://gigamaster.github.io/codemo/tools/bookmarks/','codemo','960','540')"
     title="Bookmarks" 
     type="button"
     >
@@ -108,7 +109,7 @@
   x-transition:enter-end="opacity-100 scale-100" 
   class="flex h-3/4 w-full max-w-5xl flex-col gap-4 overflow-hidden rounded-md border-b dark:border-primary-darker text-primary-lighter bg-white dark:bg-darker">
     <!-- Dialog Header -->
-    <div class="flex items-center justify-between border-b dark:border-primary-darker p-4 bg-white dark:bg-darker">
+    <div class="flex items-center justify-between bg-white border-b dark:bg-darker dark:border-primary-darker px-4 py-2">
         <h3 
         id="modalLauncherTitle" 
         class="font-semibold tracking-wide text-gray-400 dark:text-white"
@@ -426,7 +427,21 @@ <h5 class="text-sm font-semibold text-gray-600 dark:text-light">Gigamaster</h5>
 
   </div><!-- flex h-screen -->
 </div><!-- setup -->
-
+<!-- add-to-homescreen -->
+<script>
+  window.addEventListener("load", function () {
+    window.AddToHomeScreenInstance = window.AddToHomeScreen({
+      appName: "Codemo", // Name [Required]
+      appNameDisplay: "standalone", // Display position of the app name [Optional]
+      appIconUrl: "https://gigamaster.github.io/codemo/asset/favicon/codemo-logo-80.png", // App icon (square, min. 40 x 40 pixels) [Required]
+      assetUrl: "https://gigamaster.github.io/codemo/asset/favicon/", // assets images [Required]
+      maxModalDisplayCount: -1, // modal display times [Optional. Default: -1 (no limit).]
+      // (Debugging: Use this.clearModalDisplayCount() to reset the count)
+    });
+    window.AddToHomeScreenInstance.show(); // popup is only shown if not already added to homescreen
+  });
+</script>
+<!-- /add-to-homescreen -->
 <script src="https://gigamaster.github.io/codemo/asset/lib/link-previewer.min.js"></script>
 <script src="https://gigamaster.github.io/codemo/asset/app.js"></script>
 </body>