Fixes to search, local-file-tweaks, test ajax-navigation, update Buttons, add offline.zip packaging

.github/workflows/main.yml

@@ -1,26 +1,19 @@
 name: Build and Deploy
-
 on:
   push:
     branches: [ "sitoctt-next" ]
   pull_request:
     branches: [ "sitoctt-next" ]
-
-  workflow_dispatch:
-
 jobs:
   page_build:
     runs-on: ubuntu-latest
     steps:
     - name: Checkout
       uses: actions/checkout@v3
-
     - name: Build
       run: |
         export sitocttEnv=GitHub
-        sh ./Scripts/Requirements.sh
+        sh ./Scripts/Deploy.sh
-        sh ./Scripts/Produce.sh
-
     - name: Deploy
       uses: JamesIves/github-pages-deploy-action@v4
       with:

.gitignore

@@ -1,9 +1,8 @@
 /build/
+/dist/
 /resources/
 /public/
-/public.Content/
 /public.gmi/*
-/public.Plain/*
 /Scripts/.bak/*
 #/Scripts/package.json
 #/Scripts/package-lock.json

.gitlab-ci.yml

@@ -1,10 +1,9 @@
 image: alpine:latest
-
 pages:
   stage: deploy
   script: |
-    sh ./Scripts/Requirements.sh
+    export sitocttEnv=GitLab
-    sh ./Scripts/Produce.sh
+    sh ./Scripts/Deploy.sh
   artifacts:
     paths:
       - build/public

Scripts/Build.sh

@@ -11,8 +11,10 @@ cp -r \
 	../hugo.toml  ../static   \
 ./
 
-if [ "${sitocttEnv}" = GitHub ]
+if [ -n "${sitocttEnv}" ]
-then cp ./layouts/partials/assetsRoot.GitHub.html ./layouts/partials/assetsRoot.html
+then
+	sed -i -e "s|#${sitocttEnv}:||g" ./hugo.toml
+	mv "./layouts/partials/assetsRoot.${sitocttEnv}.html" ./layouts/partials/assetsRoot.html || true
 fi
 
 sh "${swd}/Translate/Get.sh"

Scripts/Deploy.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+. "$(dirname "$(realpath "$0")")/Lib/Globals.sh"
+cd "${swd}/.."
+
+sh "${swd}/Requirements.sh"
+rm -rf ./dist
+
+sh "${swd}/Produce.sh"
+mv ./build/public ./dist
+
+sh "${swd}/Package.sh"
+mv ./build/public/offline.zip ./dist/
+
+cd "${owd}"

Scripts/Package.sh

@@ -0,0 +1,14 @@
+#!/bin/sh
+. "$(dirname "$(realpath "$0")")/Lib/Globals.sh"
+cd "${swd}/.."
+
+export sitocttEnv=Offline
+export HUGO_ENV=production
+sh "${swd}/Clean.sh"
+sh "${swd}/Update.sh"
+
+cd ./build/public
+#zip -9 -r ./offline.zip *
+7z a -tzip -mcp=437 -mx9 ./offline.zip *
+
+cd "${owd}"

Scripts/Produce.sh

@@ -3,6 +3,7 @@
 cd "${swd}/.."
 
 export HUGO_ENV=production
+sh "${swd}/Clean.sh"
 sh "${swd}/Update.sh"
 sh "${swd}/Redirects.sh"
 

Scripts/Redirects.sh

@@ -37,7 +37,11 @@ nicename="$(echo "${nicepath}" | rev | cut -d/ -f1 | rev)"
 #	fi
 #done
 for path in "${nicepath}" #${extrapaths}
-do sed -e "s|{URL}|./${nicename}/|g" ../../redirectTemplate.html > "${path}.html"
+do cat ../layouts/alias.html \
+	| sed -e "s|{{ .Permalink }}|./${nicename}/|g" \
+	| sed -e "s|{{ $canonicalUrl }}|./${nicename}/|g" \
+	| sed -e "s|{{ site.Language.LanguageCode }}||g" \
+> "${path}.html"
 done
 #if [ "$(echo "{}" | cut -d/ -f2)" = it ]
 #then

Scripts/Requirements.sh

@@ -11,7 +11,7 @@ hugoexternal=true
 if [ -n "$(which apt)" ]
 then
 	asroot apt update
-	asroot apt install -y python3 nodejs findutils git tar gzip wget
+	asroot apt install -y python3 nodejs findutils git wget tar gzip p7zip-full #zip
 	if [ "$(uname -o)" != Android ]
 	then asroot apt install -y npm
 	else
@@ -21,7 +21,7 @@ then
 elif [ -n "$(which apk)" ]
 then
 	asroot apk update
-	asroot apk add hugo python3 py3-pip nodejs npm findutils git tar gzip wget
+	asroot apk add hugo python3 py3-pip nodejs npm findutils git wget tar gzip 7zip #zip
 	hugoexternal=false
 fi
 

assets/ButtonBadges.toml

@@ -59,7 +59,7 @@ href = "http://http.sitoctt.octt.eu.org"
 [[10-site]]
 alt = "Download Offline Version"
 file = "OFF-LINE-VERSION.png"
-href = "https://github.com/octospacc/sitoctt/archive/refs/heads/gh-pages.zip"
+href = "https://sitoctt.octt.eu.org/offline.zip"
 
 #######################################
 

content/it/miscellanea/Raccolta-Siti-Internet.md

@@ -24,9 +24,9 @@ Le bandiere di nazione (emoji, forse non visibili su browser antichi) accanto ai
 [![Yesterweb]({{< assetsRoot >}}/Media/Buttons/Sites/Yesterweb-88x31.png)](#-s-a-5)&nbsp;
 [![OpenBooks]({{< assetsRoot >}}/Media/Buttons/Sites/OpenBooks-88x31.gif)](#-s-a-6)&nbsp;
 
-</marquee> -->
+</marquee>
 
-_Questi sopra sono i siti della lista che hanno un bottone 88x31. Vuoi anche tu il privilegio di stare anche in cima? Allora muoviti a disegnare st'immaginetta, su!_
+_Questi sopra sono i siti della lista che hanno un bottone 88x31. Vuoi anche tu il privilegio di stare anche in cima? Allora muoviti a disegnare st'immaginetta, su!_ -->
 
 ## Il mio..
 
@@ -153,7 +153,9 @@ Un museo virtuale dedicato ad illustrare quei rari contenuti informatici e video
 
 ## Attenzione
 
-<marquee><i>Però, oh voi persone che fate i sitarelli, mannaggia, non mettete testo importante nell'infernale tag &lt;marquee&gt;, che non si legge niente e fa il mal di testa!</i></marquee>
+<marquee>
+<i>Però, oh voi persone che fate i sitarelli, mannaggia, non mettete testo importante nell'infernale tag &lt;marquee&gt;, che non si legge niente e fa il mal di testa!</i>
+</marquee>
 
 ## {{% i18n notes-refs %}}
 

hugo.toml

@@ -1,11 +1,14 @@
 title = "✨sitoctt✨"
-baseURL = "https://sitoctt.octt.eu.org/"
+#GitLab:baseURL = "https://sitoctt.octt.eu.org/"
-#relativeURLs = true
+#GitHub:baseURL = "http://http.sitoctt.octt.eu.org/"
-theme = ["hugo-notice", "ananke"]
+#Offline:relativeURLs = true
+#Offline:disableAliases = true
+canonifyURLs = true
 disablePathToLower = true
 sectionPagesMenu = "main"
 defaultContentLanguage = "it"
 defaultContentLanguageInSubdir = true
+theme = ["hugo-notice", "ananke"]
 
 [permalinks]
   [permalinks.page]
@@ -50,6 +53,8 @@ defaultContentLanguageInSubdir = true
   other_posts_number = 5
   toc = true
   show_reading_time = true
+  canonicalUrlOverride = "https://sitoctt.octt.eu.org"
+  #canonicalUrlOverride = "http://http.sitoctt.octt.eu.org"
   #custom_css = [ "Global.scss", "sitoctt.scss" ]
 
 [outputFormats]

layouts/alias.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html lang="{{ site.Language.LanguageCode }}"><!--
+    {{- $canonicalBase := site.Params.canonicalUrlOverride -}}
+    {{- $canonicalUrl := (or
+      (and
+        $canonicalBase
+        (printf "%s%s"
+          $canonicalBase 
+          (relURL .Permalink)))
+      .Permalink) -}}
+  -->
+  <head>
+    <title>{{ .Permalink }}</title>
+    <link rel="canonical" href="{{ $canonicalUrl }}" />
+    <meta name="robots" content="noindex" />
+    <meta charset="utf-8" />
+    <meta http-equiv="refresh" content="0; url={{ .Permalink }}" />
+  </head>
+</html>

layouts/partials/ImgButton.html

@@ -12,10 +12,11 @@
   {{- $style = "image-rendering: pixelated;" -}}
 {{- end -}}
 {{/* TODO: maybe set rendering via a class instead of inline CSS? */}}
-{{- $img := (printf `<img src="%s" style="%s" alt="%s" title="%s" width="%spx" height="%spx" />`
+{{- $img := (printf `<img src="%s" style="%s" alt="%s" title="%s" width="%spx" height="%spx" decoding="%s" />`
   $src $style
   $alt $alt
   (index $sizes 0) (index $sizes 1)
+  (or .decoding "async")
 ) | safeHTML -}}
 {{ if .href }}
   {{ partial "anchor.html" (dict

layouts/partials/footer-buttons.html

@@ -10,12 +10,15 @@
               {{ $src = (partial "functions/ParseFileUrl.html" $src) }}
             {{- end -}}
             {{- $newprops := (dict
+              "decoding" "async"
               "src" $src
               "srcRelative" .file
               "hrefLinkback" .linkback
             ) -}}
             {{- if .spam -}}
-              {{- $newprops = (merge $newprops (dict "rel" "nofollow noopener" "target" "_blank")) -}}
+              {{- $newprops = (merge $newprops (dict
+                "rel" "nofollow noopener"
+                "target" "_blank")) -}}
             {{- end -}}
             {{ partial "ImgButton.html" (merge . $newprops) }}
           {{- else -}}

redirectTemplate.html

@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-  <head>
-    <title>{URL}</title>
-    <link rel="canonical" href="{URL}" />
-    <meta name="robots" content="noindex" />
-    <meta charset="utf-8" />
-    <meta http-equiv="refresh" content="0; url={URL}" />
-  </head>
-</html>

static/MinesweeperEmbed.js

@@ -1,4 +1,5 @@
 // Multipurpose embeddable Minesweeper game on top of vuesweeper
+// TODO game iframe must be re-set to be transparent and color scheme set to same as the website (light)
 
 // How many pixels one square takes up
 var MineSquareSize = 32;
@@ -17,12 +18,15 @@ var ResizeAlerted = false;
 // Add styles to current page
 var New = document.createElement('style');
 New.innerHTML = `
-/* Don't know what's up with the percentages */
+/* TODO must set position:relative to parent div */
 .Minesweeper {
-	width: calc(100% - 5% - 1.25%);
+	/* Don't know what's up with the percentages */
+	/* width: calc(100% - 5% - 1.25%); */
+	width: 100%;
 	z-index: 4;
 }
 .Minesweeper > iframe {
+	width: 100%;
 	max-height: none !important;
 	border: none;
 }

static/ajax-navigation.js

@@ -2,31 +2,40 @@
 // TODO investigate/fix strange screen flash when navigating back from an hash URL
 // TODO error handling, caching, loading indication, totally handle hash change
 
-var oldUrl = null;
-var firstLoad = true;
 window.SiteInitOnLoad = [];
+var oldUrl = null;
+
+// TODO before deploying this: handle page-specific scripts (comments, etc...)
+//if (location.protocol === 'file:') {
+	window.PatchAjaxNavigationAnchor = Void;
+	return; // HTTP requests don't work on local files with default browser configuration
+//}
+
+function toPathUrl (url) {
+	return url.split('#')[0];
+}
 
 function initPage () {
-	oldUrl = location.href;
+	if (oldUrl !== null) {
-	document.body.scrollIntoView();
+		document.body.scrollIntoView();
-	Array.from(document.querySelectorAll('a')).forEach(function(anchorEl){
-		var isInternalLink = anchorEl.href.startsWith(location.protocol + '//' + location.host);
-		var isPagewideLink = (anchorEl.href.split('#')[0] === location.href.split('#')[0]);
-		if (isInternalLink && !isPagewideLink) {
-			anchorEl.onclick = (function(clickEvent){
-				clickEvent.preventDefault();
-				loadContent(anchorEl.href, true);
-			});
-		}
-	});
-	if (!firstLoad) {
 		SiteInitOnLoad.forEach(function(routine){ routine(); });
 	}
-	firstLoad = false;
+	oldUrl = location.href;
+	var langToken = ('/' + document.documentElement.lang + '/');
+	var baseHref = (location.href.split(langToken)[0] + langToken);
+	Array.from(document.querySelectorAll('a[href]')).filter(function(anchorEl){
+		//var tokens = href.split('/' + document.documentElement.lang + '/');
+		//if (location.href.slice(0, href[0]))
+		//return (anchorEl.getAttribute('href').replace(location.host, '').replace(/^(\.\.\/)+/, '').replace(/^(\/)+/, '').split('/')[1] === document.documentElement.lang);
+		return (anchorEl.href.slice(0, baseHref.length) === baseHref);
+	}).forEach(PatchAjaxNavigationAnchor);
 }
 
 function loadContent (url, push) {
-	var fallbackTimeout = setTimeout((function(){ location.href = url; }), 3e3);
+	function useFallback () {
+		location.href = url;
+	}
+	var fallbackTimeout = setTimeout(useFallback, 3000);
 	fetch(url)
 		.then(function(request){ return request.text(); })
 		.then(function(html){
@@ -40,17 +49,28 @@ function loadContent (url, push) {
 			clearTimeout(fallbackTimeout);
 		}).catch(function(err){
 			console.error(err);
-			location.href = url;
+			useFallback();
 		});
 }
 
-window.addEventListener('load', initPage);
+window.PatchAjaxNavigationAnchor = (function PatchAjaxNavigationAnchor (anchorEl) {
+	var isSitewideLink = anchorEl.href.startsWith(location.protocol + '//' + location.host);
+	var isPagewideLink = (toPathUrl(anchorEl.href) === toPathUrl(location.href));
+	if (isSitewideLink && !isPagewideLink) {
+		anchorEl.addEventListener('click', (function(clickEvent){
+			clickEvent.preventDefault();
+			loadContent(anchorEl.href, true);
+		}));
+	}
+});
 
-window.addEventListener('popstate', (stateEvent) => {
+window.addEventListener('DOMContentLoaded', initPage);
-	if (location.href.split('#')[0] !== oldUrl.split('#')[0]) {
+
+window.addEventListener('popstate', (function(stateEvent){
+	if (toPathUrl(location.href) !== toPathUrl(oldUrl)) {
 		loadContent(location.href, false);
 	}
 	oldUrl = location.href;
-});
+}));
 
 })();

static/local-file-tweaks.js

@@ -1,15 +1,28 @@
 (function(){
 
 if (location.protocol !== 'file:') {
+	window.PatchLocalFileAnchor = Void;
 	return;
 }
 
-window.addEventListener('load', (function(){
+window.PatchLocalFileAnchor = (function PatchLocalFileAnchor (anchorEl) {
-	Array.from(document.querySelectorAll('a[href]')).forEach(function(linkEl){
+	var href = anchorEl.href;
-		if (linkEl.href.startsWith('file://') && linkEl.href.endsWith('/')) {
+	if (href.startsWith('file://')) {
-			linkEl.href += 'index.html';
+		var tokens = href.split('#');
+		href = tokens[0];
+		if (href.endsWith('/')) {
+			href += 'index.html';
 		}
-	});
+		tokens = tokens.slice(1);
+		if (tokens.length) {
+			href += ('#' + tokens.join('#'));
+		}
+		anchorEl.href = href;
+	}
+});
+
+window.addEventListener('DOMContentLoaded', (function(){
+	Array.from(document.querySelectorAll('a[href]')).forEach(PatchLocalFileAnchor);
 }));
 
 })();

static/site-search.js

@@ -1,4 +1,9 @@
 (function(){
+// TODO make links work on file:/// (must be relative)
+// TODO fix ajax navigation to different-language page, doesn't currently load the index for the selected language
+// TODO better perf
+// TODO thumbnails?
+// TODO highlight found word in text summary? we must handle generating summary client-side at different points of text for it to work
 
 function init () {
 
@@ -14,14 +19,23 @@ var searchVisible = false;
 var indexed = false;
 var hasResults = false;
 
-hideButton.addEventListener("click", hideSearch);
+hideButton.addEventListener('click', hideSearch);
-wrapper.addEventListener("click", hideSearch);
+wrapper.addEventListener('click', hideSearch);
-modal.addEventListener("click", function (event) {
+modal.addEventListener('click', (function(){
   event.stopPropagation();
   event.stopImmediatePropagation();
   return false;
-});
+}));
-document.addEventListener("keydown", function (event) {
+document.removeEventListener('keydown', window.SiteSearchOnKeyHandler);
+window.SiteSearchOnKeyHandler = documentOnKeyDown;
+document.addEventListener('keydown', SiteSearchOnKeyHandler);
+
+// Update search on each keypress
+input.onkeyup = function (event) {
+  executeQuery(this.value);
+};
+
+function documentOnKeyDown (event) {
   if (event.key == "/") {
     if (!searchVisible) {
       event.preventDefault();
@@ -72,13 +86,7 @@ document.addEventListener("keydown", function (event) {
       }
     }
   }
-
+}
-});
-
-// Update search on each keypress
-input.onkeyup = function (event) {
-  executeQuery(this.value);
-};
 
 function displaySearch() {
   if (!indexed) {
@@ -129,7 +137,17 @@ function executeQuery(term) {
   if (results.length > 0) {
     results.forEach(function (value, key) {
       var title = value.item.externalUrl?  value.item.title + '<span class="text-xs ml-2 align-center cursor-default text-neutral-400 dark:text-neutral-500">'+value.item.externalUrl+'</span>' : value.item.title;
-      var linkconfig = value.item.externalUrl? 'target="_blank" rel="noopener" href="'+value.item.externalUrl+'"' : 'href="'+value.item.permalink+'"';
+      var linkconfig;
+      if (value.item.externalUrl) {
+        linkconfig = 'target="_blank" rel="noopener" href="'+value.item.externalUrl+'"';
+      } else {
+        var dataUrl = wrapper.dataset.url;
+        if (dataUrl.startsWith('../')) {
+          linkconfig = 'href="'+('..' + '/..'.repeat(dataUrl.split('/').length - 3) + value.item.permalink)+'"';
+        } else {
+          linkconfig = 'href="'+value.item.permalink+'"';
+        }
+      }
       resultsHTML =
         resultsHTML +
         `<li class="mb-2">
@@ -154,6 +172,11 @@ function executeQuery(term) {
   }
 
   output.innerHTML = resultsHTML;
+  Array.from(output.querySelectorAll('a')).forEach(function(anchorEl){
+    anchorEl.addEventListener('click', hideSearch);
+    PatchLocalFileAnchor(anchorEl);
+    PatchAjaxNavigationAnchor(anchorEl);
+  });
   if (results.length > 0) {
     first = output.firstChild.firstElementChild;
     last = output.lastChild.firstElementChild;
@@ -166,6 +189,7 @@ document.querySelector('.SiteSearchForm').innerHTML = document.querySelector('.S
 
 var inputEl = document.querySelector('.SiteSearchForm > input');
 //inputEl.classList.add('bg-transparent', 'white');
+inputEl.style.width = '10rem';
 inputEl.placeholder = (inputText + '... 🔎️ [CTRL+/]');
 inputEl.onclick = inputEl.oninput = inputEl.onchange = inputEl.onpaste = displaySearch;
 inputEl.onkeydown = (function(event){

themes/ananke/layouts/_default/baseof.html

@@ -40,7 +40,9 @@
       {{ end }}
     {{ end }}
 
-    {{ if .Params.canonicalUrl }}
+    {{ if .Site.Params.canonicalUrlOverride }}
+      <link rel="canonical" href="{{ .Site.Params.canonicalUrlOverride }}{{ .RelPermalink }}">
+    {{ else if .Params.canonicalUrl }}
       <link rel="canonical" href="{{ .Params.canonicalUrl }}">
     {{ else }}
       <link rel="canonical" href="{{ .Permalink }}">

themes/ananke/layouts/partials/page-header.html

@@ -17,7 +17,7 @@
     </div>
   </header>
 {{ else }}
-  <header>
+  <header id="!/header">
     <div class="{{ .Site.Params.background_color_class | default "bg-black" }}" style="background-color: #330066;">
       {{ partial "site-navigation.html" . }}
     </div>

themes/ananke/layouts/partials/site-navigation.html

@@ -9,12 +9,12 @@
     </a>
     <div class="SiteSearchForm di nowrap relative">
       <form class="di" action="https://hlb0.octt.eu.org/Redirector.php">
-        <input class="mw5 mt2 bg-transparent moon-gray ba b--solid b--moon-gray" 
+        <input class="mw5 mt2 f6 tc bg-transparent moon-gray ba b--solid b--moon-gray"
                type="text" name="_query[]" required="required" placeholder="{{ i18n "searchNoJs" }}... 🔎️" />
         <div class="di">
           <input type="hidden" name="url" value="https://yacy.spacc.eu.org/yacysearch.html">
           <input type="hidden" name="_query[]" value="site:sitoctt.octt.eu.org" />
-          <input class="bg-transparent moon-gray ba b--solid b--moon-gray" type="submit" value="{{ i18n "search" }} 🔎️" />
+          <input class="f6 bg-transparent moon-gray ba b--solid b--moon-gray" type="submit" value="{{ i18n "search" }} 🔎️" />
         </div>
       </form>
     </div>

themes/ananke/layouts/partials/site-scripts.html

@@ -1,4 +1,5 @@
-<!--<script src="/ajax-navigation.js"></script>-->
+<script> window.Void = (function Void(){}); </script>
+<script src="/ajax-navigation.js"></script>
 <script src="/local-file-tweaks.js"></script>
 <script src="/{{ .Lang }}/searchindex.js"></script>
 <script src="/lib/fuse.min.js"></script>

themes/ananke/layouts/partials/site-style.html

@@ -6,4 +6,8 @@
   {{ with partialCached "func/style/GetResource" . . }}{{ else }}
     <link rel="stylesheet" href="{{ relURL (.) }}">
   {{ end }}
-{{ end }}
+{{ end }}
+
+<style>
+.Pixelated, .Pixelated * { image-rendering: pixelated; }
+</style>