Initial version

gohugoio · Aug 22, 2020 · 8269565 · 8269565
1 parent 8b9ec18
commit 8269565
Show file tree

Hide file tree

Showing 18 changed files with 223 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+**/resources
diff --git a/README.md b/README.md
@@ -0,0 +1,5 @@
+# Hugo JS Libraries
+
+A collection of JS libraries packaged and ready for use in Hugo.
+
+See each componen's README for usage. The Hugo documentation has more information about [Hugo Modules](https://gohugo.io/hugo-modules/).
diff --git a/alpinejs/README.md b/alpinejs/README.md
@@ -0,0 +1,26 @@
+## Installation
+
+First, add the module import to your site or theme component's configuration's module section:
+
+```toml
+[module]
+[[imports]]
+path = "github.com/gohugoio/hugo-mod-jslibs/alpinejs"
+```
+
+Then add the script source in the head section of your template (typically in the `baseof.html`):
+
+
+```html
+<head>
+{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
+</head>
+```
+
+Note, if used with Turbolinks, the order matters:
+
+```html
+{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
+{{ partialCached "jslibs/turbolinks/script-src.html" "-" }}
+```
+
diff --git a/alpinejs/config.toml b/alpinejs/config.toml
@@ -0,0 +1,9 @@
+[module]
+[[module.mounts]]
+source = "layouts"
+target = "layouts"
+[[module.imports]]
+path = "github.com/alpinejs/alpine"
+[[module.imports.mounts]]
+source = "dist"
+target = "assets/jslibs/alpinejs"
diff --git a/alpinejs/go.mod b/alpinejs/go.mod
@@ -0,0 +1,5 @@
+module github.com/gohugoio/hugo-mod-jslibs/alpinejs
+
+go 1.13
+
+require github.com/alpinejs/alpine v2.6.0+incompatible // indirect
diff --git a/alpinejs/go.sum b/alpinejs/go.sum
@@ -0,0 +1,6 @@
+github.com/alpinejs/alpine v2.4.0+incompatible h1:FrbSMJDAYuGEuSN/JxlZ57OkYQNuJHEkDU3RY1c8eFU=
+github.com/alpinejs/alpine v2.4.0+incompatible/go.mod h1:BKI81egATMnaKqFeX5HEfYMnjZjcjcZmrYAu5Nck+EY=
+github.com/alpinejs/alpine v2.5.0+incompatible h1:dEOJPy27Kdno2wI51sr8ZkU+7QaLmLYLPD2sZfVe3Fw=
+github.com/alpinejs/alpine v2.5.0+incompatible/go.mod h1:BKI81egATMnaKqFeX5HEfYMnjZjcjcZmrYAu5Nck+EY=
+github.com/alpinejs/alpine v2.6.0+incompatible h1:WVtZll4bFK0ODpLdd+I6CFMWFaqVcgy8zjZOyC4l0s4=
+github.com/alpinejs/alpine v2.6.0+incompatible/go.mod h1:BKI81egATMnaKqFeX5HEfYMnjZjcjcZmrYAu5Nck+EY=
diff --git a/alpinejs/layouts/partials/jslibs/alpinejs/script-src.html b/alpinejs/layouts/partials/jslibs/alpinejs/script-src.html
@@ -0,0 +1,7 @@
+{{- $isProd := hugo.IsProduction -}}
+{{- $js := resources.Get "jslibs/alpinejs/alpine.js" -}}
+{{- $js11 := resources.Get "jslibs/alpinejs/alpine-ie11.js" -}}
+{{- if $isProd }}{{ $js = $js | minify | fingerprint }}{{ end -}}
+{{- if $isProd }}{{ $js11 = $js11 | minify | fingerprint }}{{ end -}}
+<script type="module" src="{{ $js.RelPermalink }}" {{ if $isProd }} integrity="{{ $js.Data.Integrity }}" {{ end }}></script>
+<script nomodule src="{{ $js11.RelPermalink }}" {{ if $isProd }} integrity="{{ $js11.Data.Integrity }}" {{ end }} defer></script>
diff --git a/instantpage/README.md b/instantpage/README.md
@@ -0,0 +1,21 @@
+## Installation
+
+First, add the module import to your site or theme component's configuration's module section:
+
+```toml
+[module]
+[[imports]]
+path = "github.com/gohugoio/hugo-mod-jslibs/instantpage"
+```
+
+Then add the script source before the end body tag:
+
+
+```html
+<body>
+...
+{{ partialCached "jslibs/instantpage/script-src.html" "-" }}
+</body>
+```
+
+See the [instant.page](https://instant.page/) documentation for configuration.
diff --git a/instantpage/config.toml b/instantpage/config.toml
@@ -0,0 +1,9 @@
+[module]
+[[module.mounts]]
+source = "layouts"
+target = "layouts"
+[[module.imports]]
+path = "github.com/instantpage/instant.page"
+[[module.imports.mounts]]
+source = "instantpage.js"
+target = "assets/jslibs/instantpage/instantpage.js"
diff --git a/instantpage/go.mod b/instantpage/go.mod
@@ -0,0 +1,2 @@
+module github.com/gohugoio/hugo-mod-jslibs/instantpage
+
diff --git a/instantpage/go.sum b/instantpage/go.sum
diff --git a/instantpage/layouts/partials/jslibs/instantpage/script-src.html b/instantpage/layouts/partials/jslibs/instantpage/script-src.html
@@ -0,0 +1,5 @@
+{{- $isProd := hugo.IsProduction -}}
+{{/* The js.Build step is (currently) just there to create a IIFE module, see https://github.com/instantpage/instant.page/issues/81 */}}
+{{- $js := resources.Get "jslibs/instantpage/instantpage.js" | js.Build -}}
+{{- if $isProd }}{{ $js = $js | minify | fingerprint }}{{ end -}}
+<script src="{{ $js.RelPermalink }}" {{ if $isProd }} integrity="{{ $js.Data.Integrity }}" {{ end }}></script>
diff --git a/turbolinks/README.md b/turbolinks/README.md
@@ -0,0 +1,33 @@
+## Description
+
+This module wraps [Turbolinks](https://github.com/turbolinks).
+
+Also, if [Alpine](../alpinejs/alpine) is present, it adds a set of event listeners that
+prepares/cleans the AlpineJS state. Most importantly, it pauses Alpine's mutation observer so Turbolinks can do its work without interuption.
+
+## Installation
+
+First, add the module import to your site or theme component's configuration's module section:
+
+```toml
+[module]
+[[imports]]
+path = "github.com/gohugoio/hugo-mod-jslibs/turbolinks"
+```
+
+Then add the script source in the head section of your template (typically in the `baseof.html`):
+
+
+```html
+<head>
+{{ partialCached "jslibs/turbolinks/script-src.html" "-" }}
+</head>
+```
+
+Note, if used with AlpineJS, the order matters:
+
+```html
+{{ partialCached "jslibs/alpinejs/script-src.html" "-" }}
+{{ partialCached "jslibs/turbolinks/script-src.html" "-" }}
+```
+
diff --git a/turbolinks/assets/jslibs/turbolinks/alpinejs-turbolinks-bridge.js b/turbolinks/assets/jslibs/turbolinks/alpinejs-turbolinks-bridge.js
@@ -0,0 +1,69 @@
+/**
+ * This adds a set of event listeners that, if Alpine is present,
+ * prepares/cleans the AlpineJS state.
+ * 
+ * Most importantly, it pauses Alpin's mutation observer so Turbolinks can
+ * do its work without interuption.
+ *  See https://github.com/alpinejs/alpine/issues/372
+ *  See https://github.com/alpinejs/alpine/issues/372
+ */
+(function() {
+	document.addEventListener('turbolinks:before-cache', () => {
+		if (!Alpine) return;
+		Alpine.pauseMutationObserver = true;
+		walk(document.body, (el) => {
+			if (el.hasAttribute('x-for')) {
+				let nextEl = el.nextElementSibling;
+
+				while (nextEl && nextEl.__x_for_key !== 'undefined') {
+					const currEl = nextEl;
+					nextEl = nextEl.nextElementSibling;
+					currEl.setAttribute('x-generated', true);
+				}
+			} else if (el.hasAttribute('x-if')) {
+				const ifEl = el.nextElementSibling;
+
+				if (ifEl && typeof ifEl.__x_inserted_me !== 'undefined') {
+					ifEl.setAttribute('x-generated', true);
+				}
+			}
+
+			return true;
+		});
+	});
+
+	document.addEventListener('turbolinks:before-render', (event) => {
+		if (!Alpine) return;
+		Alpine.pauseMutationObserver = true;
+		event.data.newBody.querySelectorAll('[x-generated]').forEach((el) => {
+			el.removeAttribute('x-generated');
+			if (typeof el.__x_for_key === 'undefined' && typeof el.__x_inserted_me === 'undefined') {
+				el.remove();
+			}
+		});
+	});
+
+	document.addEventListener('turbolinks:load', () => {
+		if (!Alpine) return;
+		Alpine.pauseMutationObserver = true;
+	});
+
+	document.addEventListener('turbolinks:render', () => {
+		if (!Alpine) return;
+		Alpine.pauseMutationObserver = false;
+	});
+
+	function walk(el, callback) {
+		if (callback(el) === false) {
+			return;
+		}
+
+		let node = el.firstElementChild;
+
+		while (node) {
+			walk(node, callback);
+
+			node = node.nextElementSibling;
+		}
+	}
+})();
diff --git a/turbolinks/config.toml b/turbolinks/config.toml
@@ -0,0 +1,12 @@
+[module]
+[[module.mounts]]
+source = "layouts"
+target = "layouts"
+[[module.mounts]]
+source = "assets"
+target = "assets"
+[[module.imports]]
+path = "github.com/turbolinks/turbolinks-source-gem"
+[[module.imports.mounts]]
+source = "lib/assets/javascripts"
+target = "assets/jslibs/turbolinks"
diff --git a/turbolinks/go.mod b/turbolinks/go.mod
@@ -0,0 +1,5 @@
+module github.com/gohugoio/hugo-mod-jslibs/turbolinks
+
+go 1.13
+
+require github.com/turbolinks/turbolinks-source-gem v5.2.0+incompatible // indirect
diff --git a/turbolinks/go.sum b/turbolinks/go.sum
@@ -0,0 +1,2 @@
+github.com/turbolinks/turbolinks-source-gem v5.2.0+incompatible h1:UNx8t3fYB51UyUv3gOXpTPT7Q6u9LCdcXQd2iW1EClA=
+github.com/turbolinks/turbolinks-source-gem v5.2.0+incompatible/go.mod h1:Cl0Br9tUXkQvxumVNGTvyaa7dqpFC2kPMrsS0Ttc94U=
diff --git a/turbolinks/layouts/partials/jslibs/turbolinks/script-src.html b/turbolinks/layouts/partials/jslibs/turbolinks/script-src.html
@@ -0,0 +1,6 @@
+{{- $isProd := eq hugo.Environment "production" -}}
+{{- $alpineJsBridge := resources.Get "jslibs/turbolinks/alpinejs-turbolinks-bridge.js" -}}
+{{- $turbolinks := resources.Get "jslibs/turbolinks/turbolinks.js" -}}
+{{- $js := slice $turbolinks $alpineJsBridge | resources.Concat "jslibs/turbolinks/turbolinks.js" }}
+{{- if $isProd }}{{ $js = $js | minify | fingerprint }}{{ end -}}
+<script src="{{ $js.RelPermalink }}" {{ if $isProd }} integrity="{{ $js.Data.Integrity }}" {{ end }} crossorigin="anonymous" defer></script>