Brought over most of the changes from go-web-starter-kit.

static/js/alpine-intersect.js

@@ -0,0 +1 @@
+(()=>{function o(e){e.directive("intersect",e.skipDuringClone((t,{value:i,expression:l,modifiers:n},{evaluateLater:r,cleanup:c})=>{let s=r(l),a={rootMargin:x(n),threshold:f(n)},u=new IntersectionObserver(d=>{d.forEach(h=>{h.isIntersecting!==(i==="leave")&&(s(),n.includes("once")&&u.disconnect())})},a);u.observe(t),c(()=>{u.disconnect()})}))}function f(e){if(e.includes("full"))return .99;if(e.includes("half"))return .5;if(!e.includes("threshold"))return 0;let t=e[e.indexOf("threshold")+1];return t==="100"?1:t==="0"?0:Number(`.${t}`)}function p(e){let t=e.match(/^(-?[0-9]+)(px|%)?$/);return t?t[1]+(t[2]||"px"):void 0}function x(e){let t="margin",i="0px 0px 0px 0px",l=e.indexOf(t);if(l===-1)return i;let n=[];for(let r=1;r<5;r++)n.push(p(e[l+r]||""));return n=n.filter(r=>r!==void 0),n.length?n.join(" ").trim():i}document.addEventListener("alpine:init",()=>{window.Alpine.plugin(o)});})();

static/js/code.js

@@ -4,7 +4,7 @@ class PaginateTable {
     this.items = [];
     this.url = url;
     this.headers = [];
-    this.search_query=""
+    this.search_query="";
   }
 
   async contents() {
@@ -31,19 +31,43 @@ class PaginateTable {
   }
 }
 
-class GetJson {
+class ForeverScroll {
   constructor(url) {
-    this.item;
+    this.page = 0;
+    this.items = [];
     this.url = url;
+    this.end = false;
   }
 
-  async item() {
-    const resp = await fetch(`${this.url}`);
+  async init() {
+    const resp = await fetch(this.url);
     console.assert(resp.status == 200, "failed to get it");
 
-    this.item = await resp.json();
-    return this.item;
+    const items = await resp.json();
+    if(items) this.items = items;
   }
+
+  async load() {
+    this.page += 1
+    let url = `${this.url}?page=${this.page}`;
+
+    const resp = await fetch(url);
+    console.assert(resp.status == 200, "failed to get it");
+
+    const items = await resp.json();
+
+    if(items) {
+      this.items.push(...items);
+    } else {
+      this.end = true;
+    }
+  }
+}
+
+const GetJson = async (url) => {
+  const resp = await fetch(url);
+  console.assert(resp.status == 200, "failed to get it");
+  return await resp.json();
 }
 
 const ConfirmDelete = async (table, obj_id) => {
@@ -55,3 +79,14 @@ const ConfirmDelete = async (table, obj_id) => {
     return false;
   }
 }
+
+const UrlId = () => {
+  let url = new URL(window.location.href);
+  let parts = url.pathname.split("/");
+
+  if(window.location.href.endsWith("/")) {
+    return parts[parts.length - 2];
+  } else {
+    return parts[parts.length - 1];
+  }
+}