Export xsl into seperate file via embedding

functions/embedding.go

@@ -0,0 +1,25 @@
+package functions
+
+import (
+	"html/template"
+	"io"
+	"io/fs"
+)
+
+// TODO: this needs to be cached, FS reads are expensive
+func EmbedSafe(fs fs.FS) func(string) template.HTML {
+	return func(path string) template.HTML {
+		f, err := fs.Open(path)
+		if err != nil {
+			return ""
+		}
+
+		defer f.Close()
+		data, err := io.ReadAll(f)
+		if err != nil {
+			return ""
+		}
+
+		return template.HTML(data)
+	}
+}

templating/engine.go

@@ -9,6 +9,7 @@ import (
 
 	"github.com/Theodor-Springmann-Stiftung/kgpz_web/app"
 	"github.com/Theodor-Springmann-Stiftung/kgpz_web/functions"
+	"github.com/Theodor-Springmann-Stiftung/kgpz_web/views"
 	"github.com/gofiber/fiber/v2"
 )
 
@@ -50,6 +51,8 @@ func (e *Engine) Funcs(app *app.KGPZ) error {
 	e.AddFunc("Lower", strings.ToLower)
 	e.AddFunc("Safe", functions.Safe)
 
+	e.AddFunc("EmbedSafe", functions.EmbedSafe(views.StaticFS))
+
 	// App specific
 	e.AddFunc("GetAgent", app.Library.Agents.Item)
 	e.AddFunc("GetPlace", app.Library.Places.Item)

views/assets/scripts.js

@@ -1,35 +1,50 @@
-const p = "[xslt-onload]", T = "xslt-template", i = "xslt-transformed";
+const u = "[xslt-onload]", f = "xslt-template", a = "xslt-transformed", c = "xslt-remote-template";
-function a(c) {
+function h() {
-  let o = document.querySelectorAll(p);
+  let t = htmx.findAll(u);
-  for (let e of o) {
+  for (let n of t)
-    if (e.getAttribute(i) === "true")
+    d(n);
-      continue;
-    let r = e.getAttribute(T), t = htmx.find("#" + r);
-    if (t) {
-      let l = t.innerHTML ? new DOMParser().parseFromString(t.innerHTML, "application/xml") : t.contentDocument, s = new XSLTProcessor();
-      s.importStylesheet(l);
-      let n = new DOMParser().parseFromString(e.innerHTML, "application/xml"), m = s.transformToFragment(n, document), u = new XMLSerializer().serializeToString(m);
-      e.innerHTML = u, e.setAttribute(i, !0);
-    } else
-      throw new Error("Unknown XSLT template: " + r);
-  }
 }
-function d() {
+function d(t) {
-  a(), htmx.on("htmx:load", a), document.querySelectorAll("template[simple]").forEach((o) => {
+  if (t.getAttribute(a) === "true")
-    let e = o.getAttribute("id"), r = o.content;
+    return;
+  let n = t.getAttribute(f), o = htmx.find("#" + n);
+  if (o) {
+    let s = o.innerHTML ? new DOMParser().parseFromString(o.innerHTML, "application/xml") : o.contentDocument;
+    console.log(s);
+    let l = new XSLTProcessor();
+    l.importStylesheet(s);
+    let e = new DOMParser().parseFromString(t.innerHTML, "application/xml"), i = l.transformToFragment(e, document), r = new XMLSerializer().serializeToString(i);
+    t.innerHTML = r, t.setAttribute(a, !0);
+  } else if (t.hasAttribute(c)) {
+    let s = t.getAttribute(c), l = new Request(s, {
+      headers: { "Content-Type": "application/xslt+xml" },
+      cache: "default"
+    });
+    fetch(l).then((e) => e.text()).then((e) => {
+      let i = new DOMParser().parseFromString(e, "application/xslt+xml"), r = new XSLTProcessor();
+      r.importStylesheet(i);
+      let p = new DOMParser().parseFromString(t.innerHTML, "application/xml"), T = r.transformToFragment(p, document), m = new XMLSerializer().serializeToString(T);
+      t.innerHTML = m, t.setAttribute(a, !0);
+    });
+  } else
+    throw new Error("Unknown XSLT template: " + n);
+}
+function S() {
+  h(), document.querySelectorAll("template[simple]").forEach((n) => {
+    let o = n.getAttribute("id"), s = n.content;
     customElements.define(
-      e,
+      o,
       class extends HTMLElement {
         constructor() {
-          super(), this.appendChild(r.cloneNode(!0)), this.slots = this.querySelectorAll("slot");
+          super(), this.appendChild(s.cloneNode(!0)), this.slots = this.querySelectorAll("slot");
         }
         connectedCallback() {
-          let t = [];
+          let l = [];
-          this.slots.forEach((l) => {
+          this.slots.forEach((e) => {
-            let s = l.getAttribute("name"), n = this.querySelector(`[slot="${s}"]`);
+            let i = e.getAttribute("name"), r = this.querySelector(`[slot="${i}"]`);
-            n && (l.replaceWith(n.cloneNode(!0)), t.push(n));
+            r && (e.replaceWith(r.cloneNode(!0)), l.push(r));
-          }), t.forEach((l) => {
+          }), l.forEach((e) => {
-            l.remove();
+            e.remove();
           });
         }
       }
@@ -37,5 +52,5 @@ function d() {
   });
 }
 export {
-  d as setup
+  S as setup
 };

views/assets/xslt/citation.xsl

@@ -0,0 +1,13 @@
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+	<xsl:output method="html" indent="yes" />
+	<xsl:template match="title">
+		<em>
+			<xsl:apply-templates />
+		</em>
+	</xsl:template>
+	<xsl:template match="year">
+		<span class="">
+			<xsl:apply-templates />
+		</span>
+	</xsl:template>
+</xsl:stylesheet>

views/public/xslt/citation.xsl

@@ -0,0 +1,13 @@
+<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
+	<xsl:output method="html" indent="yes" />
+	<xsl:template match="title">
+		<em>
+			<xsl:apply-templates />
+		</em>
+	</xsl:template>
+	<xsl:template match="year">
+		<span class="">
+			<xsl:apply-templates />
+		</span>
+	</xsl:template>
+</xsl:stylesheet>

views/routes/akteure/body.gohtml

@@ -66,12 +66,10 @@
 					<div>
 						{{ range $_, $w := $a.Works }}
 							{{- if ne (len $w.Citation.InnerXML ) 0 -}}
-								<div hx-ext="client-side-templates">
+								<div xslt-template="citation-xslt" xslt-onload>
-									<div xslt-template="citation-xslt" xslt-onload>
+									<xml>
-										<xml>
+										{{- Safe $w.Citation.InnerXML -}}
-											{{- Safe $w.Citation.InnerXML -}}
+									</xml>
-										</xml>
-									</div>
 								</div>
 							{{- end -}}
 						{{ end }}
@@ -94,4 +92,6 @@
 	{{ end }}
 {{ end }}
 
-{{ template "_xslt_citation" . }}
+<script id="citation-xslt" type="application/xml">
+	{{ EmbedSafe "xslt/citation.xsl" }}
+</script>

views/routes/components/_xslt_citation.gohtml

@@ -1,15 +0,0 @@
-<script id="citation-xslt" type="application/xml">
-	<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
-		<xsl:output method="html" indent="yes" />
-		<xsl:template match="title">
-			<em>
-				<xsl:apply-templates />
-			</em>
-		</xsl:template>
-		<xsl:template match="year">
-			<span class="">
-				<xsl:apply-templates />
-			</span>
-		</xsl:template>
-	</xsl:stylesheet>
-</script>

views/transform/main.js

@@ -1,37 +1,62 @@
 import "./site.css";
 
-const ATTR_XSLT = "[xslt-onload]";
+const ATTR_XSLT_ONLOAD = "[xslt-onload]";
 const ATTR_XSLT_TEMPLATE = "xslt-template";
 const ATTR_XSLT_STATE = "xslt-transformed";
+const ATTR_XSLT_REMOTE_TEMPLATE = "xslt-remote-template";
 
-function setup_xslt(evt) {
+function setup_xslt() {
-	let els = document.querySelectorAll(ATTR_XSLT);
+	let els = htmx.findAll(ATTR_XSLT_ONLOAD);
 	for (let element of els) {
-		if (element.getAttribute(ATTR_XSLT_STATE) === "true") {
+		transform_xslt(element);
-			continue;
+	}
-		}
+}
-		let templateId = element.getAttribute(ATTR_XSLT_TEMPLATE);
+
-		let template = htmx.find("#" + templateId);
+function transform_xslt(element) {
-		if (template) {
+	if (element.getAttribute(ATTR_XSLT_STATE) === "true") {
-			let content = template.innerHTML
+		return;
-				? new DOMParser().parseFromString(template.innerHTML, "application/xml")
+	}
-				: template.contentDocument;
+	let templateId = element.getAttribute(ATTR_XSLT_TEMPLATE);
-			let processor = new XSLTProcessor();
+	let template = htmx.find("#" + templateId);
-			processor.importStylesheet(content);
+	if (template) {
-			let data = new DOMParser().parseFromString(element.innerHTML, "application/xml");
+		let content = template.innerHTML
-			let frag = processor.transformToFragment(data, document);
+			? new DOMParser().parseFromString(template.innerHTML, "application/xml")
-			let s = new XMLSerializer().serializeToString(frag);
+			: template.contentDocument;
-			element.innerHTML = s;
+		console.log(content);
-			element.setAttribute(ATTR_XSLT_STATE, true);
+		let processor = new XSLTProcessor();
-		} else {
+		processor.importStylesheet(content);
-			throw new Error("Unknown XSLT template: " + templateId);
+		let data = new DOMParser().parseFromString(element.innerHTML, "application/xml");
-		}
+		let frag = processor.transformToFragment(data, document);
+		let s = new XMLSerializer().serializeToString(frag);
+		element.innerHTML = s;
+		element.setAttribute(ATTR_XSLT_STATE, true);
+	} else if (element.hasAttribute(ATTR_XSLT_REMOTE_TEMPLATE)) {
+		let url = element.getAttribute(ATTR_XSLT_REMOTE_TEMPLATE);
+		let req = new Request(url, {
+			headers: { "Content-Type": "application/xslt+xml" },
+			cache: "default",
+		});
+		// WARNING: It is important to set the right cache cache policy server-side; else a request is
+		// made every time.
+		fetch(req)
+			.then((response) => response.text())
+			.then((text) => {
+				let content = new DOMParser().parseFromString(text, "application/xslt+xml");
+				let processor = new XSLTProcessor();
+				processor.importStylesheet(content);
+				let data = new DOMParser().parseFromString(element.innerHTML, "application/xml");
+				let frag = processor.transformToFragment(data, document);
+				let s = new XMLSerializer().serializeToString(frag);
+				element.innerHTML = s;
+				element.setAttribute(ATTR_XSLT_STATE, true);
+			});
+	} else {
+		throw new Error("Unknown XSLT template: " + templateId);
 	}
 }
 
 function setup() {
-	setup_xslt(null);
+	setup_xslt();
-	htmx.on("htmx:load", setup_xslt);
 	let templates = document.querySelectorAll("template[simple]");
 	templates.forEach((template) => {
 		let templateId = template.getAttribute("id");