added views

views/.editorconfig

@@ -0,0 +1,8 @@
+[*]
+trim_trailing_whitespace = true
+charset = utf-8
+insert_final_newline = true
+end_of_line = lf
+indent_style = tab
+indent_size = 2
+max_line_length = 100 

views/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

views/.prettierrc

@@ -0,0 +1,10 @@
+{
+  bracketSameLine: true,
+  bracketSpacing: true,
+  whitespaceSensitivity: "ignore",
+  proseWrap: "always",
+  bracketLine: true,
+  useTabs: true,
+  tabWidth: 2,
+  "plugins": ["prettier-plugin-go-template"]
+}

views/assets/js/htmx-response-targets.js

@@ -0,0 +1,130 @@
+(function(){
+
+    /** @type {import("../htmx").HtmxInternalApi} */
+    var api;
+
+    var attrPrefix = 'hx-target-';
+
+    // IE11 doesn't support string.startsWith
+    function startsWith(str, prefix) {
+        return str.substring(0, prefix.length) === prefix
+    }
+
+    /**
+     * @param {HTMLElement} elt
+     * @param {number} respCode
+     * @returns {HTMLElement | null}
+     */
+    function getRespCodeTarget(elt, respCodeNumber) {
+        if (!elt || !respCodeNumber) return null;
+
+        var respCode = respCodeNumber.toString();
+
+        // '*' is the original syntax, as the obvious character for a wildcard.
+        // The 'x' alternative was added for maximum compatibility with HTML
+        // templating engines, due to ambiguity around which characters are
+        // supported in HTML attributes.
+        //
+        // Start with the most specific possible attribute and generalize from
+        // there.
+        var attrPossibilities = [
+            respCode,
+
+            respCode.substr(0, 2) + '*',
+            respCode.substr(0, 2) + 'x',
+
+            respCode.substr(0, 1) + '*',
+            respCode.substr(0, 1) + 'x',
+            respCode.substr(0, 1) + '**',
+            respCode.substr(0, 1) + 'xx',
+
+            '*',
+            'x',
+            '***',
+            'xxx',
+        ];
+        if (startsWith(respCode, '4') || startsWith(respCode, '5')) {
+            attrPossibilities.push('error');
+        }
+
+        for (var i = 0; i < attrPossibilities.length; i++) {
+            var attr = attrPrefix + attrPossibilities[i];
+            var attrValue = api.getClosestAttributeValue(elt, attr);
+            if (attrValue) {
+                if (attrValue === "this") {
+                    return api.findThisElement(elt, attr);
+                } else {
+                    return api.querySelectorExt(elt, attrValue);
+                }
+            }
+        }
+        
+        return null;
+    }
+
+    /** @param {Event} evt */
+    function handleErrorFlag(evt) {
+        if (evt.detail.isError) {
+            if (htmx.config.responseTargetUnsetsError) {
+                evt.detail.isError = false;
+            }
+        } else if (htmx.config.responseTargetSetsError) {
+            evt.detail.isError = true;
+        }
+    }
+
+    htmx.defineExtension('response-targets', {
+
+        /** @param {import("../htmx").HtmxInternalApi} apiRef */
+        init: function (apiRef) {
+            api = apiRef;
+
+            if (htmx.config.responseTargetUnsetsError === undefined) {
+                htmx.config.responseTargetUnsetsError = true;
+            }
+            if (htmx.config.responseTargetSetsError === undefined) {
+                htmx.config.responseTargetSetsError = false;
+            }
+            if (htmx.config.responseTargetPrefersExisting === undefined) {
+                htmx.config.responseTargetPrefersExisting = false;
+            }
+            if (htmx.config.responseTargetPrefersRetargetHeader === undefined) {
+                htmx.config.responseTargetPrefersRetargetHeader = true;
+            }
+        },
+
+        /**
+         * @param {string} name
+         * @param {Event} evt
+         */
+        onEvent: function (name, evt) {
+            if (name === "htmx:beforeSwap"    &&
+                evt.detail.xhr                &&
+                evt.detail.xhr.status !== 200) {
+                if (evt.detail.target) {
+                    if (htmx.config.responseTargetPrefersExisting) {
+                        evt.detail.shouldSwap = true;
+                        handleErrorFlag(evt);
+                        return true;
+                    }
+                    if (htmx.config.responseTargetPrefersRetargetHeader &&
+                        evt.detail.xhr.getAllResponseHeaders().match(/HX-Retarget:/i)) {
+                        evt.detail.shouldSwap = true;
+                        handleErrorFlag(evt);
+                        return true;
+                    }
+                }
+                if (!evt.detail.requestConfig) {
+                    return true;
+                }
+                var target = getRespCodeTarget(evt.detail.requestConfig.elt, evt.detail.xhr.status);
+                if (target) {
+                    handleErrorFlag(evt);
+                    evt.detail.shouldSwap = true;
+                    evt.detail.target = target;
+                }
+                return true;
+            }
+        }
+    });
+})();

views/assets/scripts.js

@@ -0,0 +1,22 @@
+function a() {
+  document.querySelectorAll("template[simple]").forEach((l) => {
+    let s = l.getAttribute("id"), n = l.content;
+    customElements.define(s, class extends HTMLElement {
+      constructor() {
+        super(), this.appendChild(n.cloneNode(!0)), this.slots = this.querySelectorAll("slot");
+      }
+      connectedCallback() {
+        let o = [];
+        this.slots.forEach((e) => {
+          let r = e.getAttribute("name"), t = this.querySelector(`[slot="${r}"]`);
+          t && (e.replaceWith(t.cloneNode(!0)), o.push(t));
+        }), o.forEach((e) => {
+          e.remove();
+        });
+      }
+    });
+  });
+}
+export {
+  a as setup
+};

views/embed.go

@@ -0,0 +1,33 @@
+//go:build !dev
+// +build !dev
+
+// Package ui handles the PocketBase Admin frontend embedding.
+// we could use io/fs.Sub to get a sub filesystem, but it errors. echo.MustSubFS throws on error
+package views
+
+import (
+	"embed"
+	"io/fs"
+)
+
+//go:embed all:assets
+var ui_static embed.FS
+var StaticFS = MustSubFS(ui_static, "assets")
+
+//go:embed all:routes
+var ui_routes embed.FS
+var RoutesFS = MustSubFS(ui_routes, "routes")
+
+//go:embed all:layouts
+var ui_layouts embed.FS
+var LayoutFS = MustSubFS(ui_layouts, "layouts")
+
+func MustSubFS(fsys fs.FS, dir string) fs.FS {
+	sub, err := fs.Sub(fsys, dir)
+
+	if err != nil {
+		panic("Could not create SubFS for " + dir)
+	}
+
+	return sub
+}

views/embed_dev.go

@@ -0,0 +1,17 @@
+//go:build dev
+
+package views
+
+import (
+	"os"
+)
+
+const (
+	STATIC_FILEPATH = "./views/assets"
+	ROUTES_FILEPATH = "./views/routes"
+	LAYOUT_FILEPATH = "./views/layouts"
+)
+
+var StaticFS = os.DirFS(STATIC_FILEPATH)
+var RoutesFS = os.DirFS(ROUTES_FILEPATH)
+var LayoutFS = os.DirFS(LAYOUT_FILEPATH)

views/layouts/default/root.tmpl

@@ -0,0 +1,27 @@
+<!doctype html>
+<html class="w-full h-full" lang="de">
+	<head>
+		{{ block "head" . }}
+			<!-- Default Head elements -->
+		{{ end }}
+
+
+		<link rel="stylesheet" type="text/css" href="/assets/style.css" />
+		<link href="/assets/css/remixicon.css" rel="stylesheet" />
+		<script src="/assets/js/alpine.min.js" defer></script>
+		<script src="/assets/js/htmx.min.js" defer></script>
+		<script src="/assets/js/htmx-response-targets.js" defer></script>
+
+		<script type="module">
+			import { setup } from "/assets/scripts.js";
+			setup();
+		</script>
+	</head>
+
+	<body class="w-full h-full" hx-ext="response-targets">
+		{{ block "body" . }}
+			<!-- Default app body... -->
+		{{ end }}
+
+	</body>
+</html>

views/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "caveman_views",
+  "version": "1.0.0",
+  "description": "default views for caveman",
+  "type": "module",
+  "scripts": {
+		"dev": "vite",
+		"build": "vite build",
+		"preview": "vite preview"
+  },
+  "repository": {
+    "type": "git",
+    "url": "github.com/Simon-Martens/pocketcatalog"
+  },
+  "keywords": [
+    "DB",
+    "htmx",
+    "frontend"
+  ],
+  "author": "Simon Martens",
+  "license": "MIT",
+  "devDependencies": {
+    "autoprefixer": "^10.4.20",
+    "postcss": "^8.4.47",
+    "prettier": "^3.3.3",
+    "prettier-plugin-go-template": "^0.0.15",
+    "tailwindcss": "^3.4.13",
+    "vite": "^5.4.8"
+  }
+}

views/postcss.config.js

@@ -0,0 +1,8 @@
+export default {
+  plugins: {
+    'postcss-import': {},
+    'tailwindcss/nesting': {},
+    tailwindcss: {},
+    autoprefixer: {},  
+  },
+}