Update repository to reflect changes to the website

layouts/_default/index.json

@@ -0,0 +1,15 @@
+{{/* layouts/_default/index.json */}}
+{{- $index := slice -}}
+{{- range where .Site.RegularPages.ByDate.Reverse "Type" "not in"  (slice "page" "json") -}}
+	{{ if .Params.dateCreated }}
+			{{ $.Scratch.Set "date" (.Params.dateCreated) }}
+	{{ else }}
+			{{- if isset site.Params "date_format" -}}
+				{{- $.Scratch.Set "date" (.Date.Format site.Params.date_format) -}}
+			{{- else -}}
+				{{- $.Scratch.Set "date" (.Date.Format "2006-01-02") -}}
+			{{- end -}}
+	{{ end }}
+	{{- $index = $index | append (dict "title" ( .Title | plainify ) "permalink" .Permalink "tags" .Params.tags "description" (.Params.description | markdownify | htmlUnescape | plainify) "date" ($.Scratch.Get "date") ) -}}
+{{- end -}}
+{{- $index | jsonify -}}

layouts/_default/permalink.html

@@ -3,6 +3,10 @@
 		<article>
 			<h1>{{ .Title }}</h1>
 			<div>
+		{{ if .Params.toc }}
+			<h2>Contents</h2>
+			<aside>{{ .TableOfContents }}</aside>
+		{{ end }}
 			{{ .Content }}
 			</div>
 		</article>

layouts/partials/search.html

@@ -0,0 +1,11 @@
+<!-- layouts/partials/search.html -->
+<form id="search-form" class="noscript" method="GET" action="https://duckduckgo.com/">
+	<div class="search-bar">
+		<input id="search-input" class="search--display" name="q" tabindex="0" autocomplete="off" {{ with site.BaseURL }}value=" site:{{ . }}"{{ end }} placeholder="{{ "Search" }}">
+		<input id="search-submit" class="icon" type="submit" value="⌕">
+	</div>
+	<ul id="search-results" class="search--display"></ul>
+</form>
+<!-- <script src="{{ "/js/fuse.js" | relURL }}"></script> -->
+<script src="{{ "/js/fixedsearch.js" | relURL }}"></script>
+<link rel="stylesheet" href="/css/search.css?rnd={{ now.Unix }}">

static/css/search.css

@@ -0,0 +1,107 @@
+#search-form {
+	display: block;
+	position: fixed;
+	top: 5px;
+	right: 5px;
+	margin: 5px;
+	padding: 20px;
+	min-width: var(--icon-size, 1.5rem);
+	max-width: 15rem;
+	max-height: 100vh;
+	z-index: 1000;
+}
+#search-form.search--display,
+#search-form[data-focus='false'] .search--display {
+	display: none;
+}
+#search-form[data-focus='true'] .search--display {
+	display: block;
+}
+#search-form .search-bar {
+	display: flex;
+	height: 1.4rem;
+	align-items: center;
+}
+#search-form .search-bar {
+	color: rgb(var(--text-color, '3,3,3'));
+}
+#search-form[data-focus='true'] .search-bar {
+	border: 2.5px solid rgb(var(--accent-color, '0,0,255'));
+}
+#search-form[data-focus='true'] .search-bar:not(:focus-within) {
+	color: rgb(var(--page-color, '240,240,240'));
+	border-color: rgb(var(--text-color, '3,3,3'));
+}
+#search-input {
+	display: block;
+	padding: 0.3rem;
+	width: 15rem;
+	max-width: 100vw;
+	height: 100%;
+	background: inherit;
+	border: none;
+	color: inherit;
+	outline: none;
+	text-align: left;
+	/* font-size: var(--s-2, 0.8rem); */
+}
+#search-submit:hover,
+#search-submit:focus {
+	color: rgb(var(--accent-color, '0,0,255'));
+}
+#search-results {
+	display: block;
+	flex-grow: 2;
+	margin: 0.5px 0 0 0;
+	padding: 0;
+	max-height: calc(100vh - 1.4rem - 0.5px);
+	width: 100%;
+	overflow-x: hidden;
+	overflow-y: auto;
+	backdrop-filter: blur(var(--page-color-blur, 2px));
+	border: 2.5px solid;
+	color: rgb(var(--text-color, '3,3,3'));
+	font-size: var(--s-2, 0.8rem);
+	scrollbar-color: rgb(var(--text-color, '3,3,3')) rgb(var(--page-color, '240,240,240')) !important;
+	scrollbar-width: thin !important;
+}
+#search-results:empty {
+	display: none;
+	opacity: 0;
+}
+#search-results li {
+	margin: 0;
+	width: 100%;
+	border-top: 0.5px dashed;
+	list-style: none;
+}
+	#search-results li:first-child {
+	border: none;
+	}
+#search-results a {
+	display: block;
+	padding: 0.3rem;
+	display: block;
+	text-decoration: none;
+}
+#search-results a:hover,
+#search-results a:focus {
+	color: rgb(var(--page-color, '240,240,240'));
+	outline: 0;
+}
+#search-results a:active {
+	color: rgb(var(--page-color, '240,240,240'));
+}
+#search-results li span:empty {
+	display: none;
+}
+#search-results li span:not(:last-child)::after {
+	content: ' – ';
+}
+#search-results li .title {
+	display: block;
+	margin-bottom: calc(var(--line-height, 1.4em)/3);
+}
+#search-results li .title::after {
+	display: none;
+}

static/css/style.css

@@ -8,14 +8,16 @@ h1{font-size:2.1em;}h2{font-size:1.8em;}h3{font-size:1.5em;}
 article, main {padding:4px 2px;}
 blockquote{padding:0.5em 1.5em;background:#EEE;color:#000;border-radius:4px;}
 code{background:#000;font:1em/1.5 monospace, monospace;padding:2px}
+img[src$='#center']{display:block;margin-left:auto;margin-right:auto;}
 
 /* Light theme */
 @media(prefers-color-scheme:light){body{background:#333;color:#FFF;}main a:link{color:#bdf;}main a:visited{color:#ccf;}}
 
 /* Classes */
-a.link-000{background:#000;border:none;}
 .center{display:block;margin-left:auto;margin-right:auto;text-align:center;}
-img[src$='#center']{display:block;margin-left:auto;margin-right:auto;}
+.nextcloud{width:50px;height:30px;position:relative;top:8px;background-size:contain;display:inline-block;background-repeat:no-repeat;background-position:center center;}
 .post-title{line-height:1.8;}
 .subtitle{float:right;}
+a.link-000{background:#000;border:none;}
+a.link-001{padding:10px;background-color:#0082c9;color:#ffffff;border-radius:3px;padding-left:4px;}
 html{overflow-y:scroll;visibility:visible;opacity:1;}

static/js/fixedsearch.js

@@ -0,0 +1,238 @@
+// js/fixedsearch.js
+/*--------------------------------------------------------------
+fixedsearch — Super fast, client side search for Hugo.io with Fusejs.io
+based on https://gist.github.com/cmod/5410eae147e4318164258742dd053993
+--------------------------------------------------------------*/
+
+if (typeof variable !== 'undefined') {
+	console.log('fixedsearch.js already loaded');
+} else {
+fixedsearch = function(){
+	var search_form = document.getElementById('search-form'); // search form
+	var search_input = document.getElementById('search-input'); // input box for search
+	var search_submit = document.getElementById('search-submit'); // form submit button
+	var search_results = document.getElementById('search-results'); // targets the <ul>
+	var fuse; // holds our search engine
+	var search__focus = false; // check to true to make visible by default
+	var results_available = false; // did we get any search results?
+	var first_run = true; // allow us to delay loading json data unless search activated
+	var first = search_results.firstChild; // first child of search list
+	var last = search_results.lastChild; // last child of search list
+
+
+	search_form.classList.remove('noscript'); // JavaScript is active
+	search_form.setAttribute('data-focus', search__focus);
+
+	/*--------------------------------------------------------------
+	The main keyboard event listener running the show
+	--------------------------------------------------------------*/
+	document.addEventListener('keydown', function(e) {
+		// console.log(event); // DEBUG
+		// Ctrl + / to show or hide Search
+		// if (event.metaKey && event.which === 191) {
+		if (event.ctrlKey && event.which === 191) {
+			search_toggle_focus(e); // toggle visibility of search box
+		}
+	});
+
+	/*--------------------------------------------------------------
+	The main keyboard event listener running the show
+	--------------------------------------------------------------*/
+	search_form.addEventListener('keydown', function(e) {
+		// Allow ESC (27) to close search box
+		if (e.keyCode == 27) {
+				search__focus = true; // make sure toggle removes focus
+				search_toggle_focus(e);
+		}
+
+		// DOWN (40) arrow
+		if (e.keyCode == 40) {
+			if (results_available) {
+				e.preventDefault(); // stop window from scrolling
+				if ( document.activeElement == search_input) { first.focus(); } // if the currently focused element is the main input --> focus the first <li>
+				else if ( document.activeElement == last ) { first.focus(); } // if we're at the bottom, loop to the start
+				// else if ( document.activeElement == last ) { last.focus(); } // if we're at the bottom, stay there
+				else { document.activeElement.parentElement.nextSibling.firstElementChild.focus(); } // otherwise select the next search result
+			}
+		}
+
+		// UP (38) arrow
+		if (e.keyCode == 38) {
+			if (results_available) {
+				e.preventDefault(); // stop window from scrolling
+				if ( document.activeElement == search_input) { search_input.focus(); } // If we're in the input box, do nothing
+				else if ( document.activeElement == first) { search_input.focus(); } // If we're at the first item, go to input box
+				else { document.activeElement.parentElement.previousSibling.firstElementChild.focus(); } // Otherwise, select the search result above the current active one
+			}
+		}
+
+		// Use Enter (13) to move to the first result
+		if (e.keyCode == 13) {
+			if (results_available && document.activeElement == search_input) {
+				e.preventDefault(); // stop form from being submitted
+				first.focus();
+			}
+		}
+
+		// Use Backspace (8) to switch back to the search input
+		if (e.keyCode == 8) {
+			if (document.activeElement != search_input) {
+				e.preventDefault(); // stop browser from going back in history
+				search_input.focus();
+			}
+		}
+	});
+
+	/*--------------------------------------------------------------
+	Load our json data and builds fuse.js search index
+	--------------------------------------------------------------*/
+	search_form.addEventListener('focusin', function(e) {
+		search_init(); // try to load the search index
+	});
+
+	/*--------------------------------------------------------------
+	Make submit button toggle focus
+	--------------------------------------------------------------*/
+	search_form.addEventListener('submit', function(e) {
+		search_toggle_focus(e);
+		e.preventDefault();
+		return false;
+	});
+
+	/*--------------------------------------------------------------
+	Remove focus on blur
+	--------------------------------------------------------------*/
+	search_form.addEventListener('focusout', function(e) {
+		if (e.relatedTarget === null) {
+			search_toggle_focus(e);
+		}
+		else if (e.relatedTarget.type === 'submit') {
+			e.stopPropagation();
+		}
+	});
+
+	/*--------------------------------------------------------------
+	Toggle focus UI of form
+	--------------------------------------------------------------*/
+	function search_toggle_focus(e) {
+		// console.log(e); // DEBUG
+		// order of operations is very important to keep focus where it should stay
+		if (!search__focus) {
+			search_submit.value = '⨯';
+			search_form.setAttribute('data-focus', true);
+			search_input.focus(); // move focus to search box
+			search__focus = true;
+		}
+		else {
+			search_submit.value = '⌕';
+			search_form.setAttribute('data-focus', false);
+			document.activeElement.blur(); // remove focus from search box
+			search__focus = false;
+		}
+	}
+
+	/*--------------------------------------------------------------
+	Fetch some json without jquery
+	--------------------------------------------------------------*/
+	function fetch_JSON(path, callback) {
+		var httpRequest = new XMLHttpRequest();
+		httpRequest.onreadystatechange = function() {
+			if (httpRequest.readyState === 4) {
+				if (httpRequest.status === 200) {
+					var data = JSON.parse(httpRequest.responseText);
+						if (callback) callback(data);
+				}
+			}
+		};
+		httpRequest.open('GET', path);
+		httpRequest.send();
+	}
+
+	/*--------------------------------------------------------------
+	Load script
+	based on https://stackoverflow.com/a/55451823
+	--------------------------------------------------------------*/
+	function load_script(url) {
+		return new Promise(function(resolve, reject) {
+			let script = document.createElement("script");
+			script.onerror = reject;
+			script.onload = resolve;
+			if (document.currentScript) {
+				document.currentScript.parentNode.insertBefore(script, document.currentScript);
+			}
+			else {
+				document.head.appendChild(script)
+			}
+			script.src = url;
+		});
+	}
+
+	/*--------------------------------------------------------------
+	Load our search index, only executed once
+	on first call of search box (Ctrl + /)
+	--------------------------------------------------------------*/
+	function search_init() {
+		if (first_run) {
+			load_script(window.location.origin + '/js/fuse.js').then(() => {
+				search_input.value = ""; // reset default value
+				first_run = false; // let's never do this again
+				fetch_JSON('/index.json', function(data){
+					var options = { // fuse.js options; check fuse.js website for details
+						shouldSort: true,
+						location: 0,
+						distance: 100,
+						threshold: 0.4,
+						minMatchCharLength: 2,
+						keys: [
+							'permalink',
+							'title',
+							'date',
+							'description',
+							'tags'
+							]
+					};
+
+					fuse = new Fuse(data, options); // build the index from the json file
+
+					search_input.addEventListener('keyup', function(e) { // execute search as each character is typed
+						search_exec(this.value);
+					});
+					// console.log("index.json loaded"); // DEBUG
+				});
+			}).catch((error) => { console.log('fixedsearch failed to load: ' + error); });
+		}
+	}
+
+	/*--------------------------------------------------------------
+	Using the index we loaded on Ctrl + /, run
+	a search query (for "term") every time a letter is typed
+	in the search box
+	--------------------------------------------------------------*/
+	function search_exec(term) {
+		let results = fuse.search(term); // the actual query being run using fuse.js
+		let search_items = ''; // our results bucket
+
+		if (results.length === 0) { // no results based on what was typed into the input box
+			results_available = false;
+			search_items = '';
+		} else { // build our html
+			for (let item in results.slice(0,5)) { // only show first 5 results
+				search_items = search_items +
+`<li><a href="${results[item].item.permalink}" tabindex="0">
+	<span class="title">${results[item].item.title}</span>
+	<span class="date">${results[item].item.date}</span>
+	<span class="description">${results[item].item.description}</span>
+	<span class="tags">${results[item].item.tags.join(', ')}</span>
+</a></li>`;
+			}
+			results_available = true;
+		}
+
+		search_results.innerHTML = search_items;
+		if (results.length > 0) {
+			first = search_results.firstChild.firstElementChild; // first result container — used for checking against keyboard up/down location
+			last = search_results.lastChild.firstElementChild; // last result container — used for checking against keyboard up/down location
+		}
+	}
+}();
+}

theme.toml

@@ -1,8 +1,8 @@
 name = "geronimo"
 license = "MIT"
-licenselink = "https://framagit.org/ethan/geronimo/~/blob/main/LICENSE"
+licenselink = "https://git.eyoo.link/ethan/geronimo/src/branch/main/LICENSE"
 description = "Hugo theme based on smol"
-homepage = "https://framagit.org/ethan/geronimo"
+homepage = "https://git.eyoo.link/ethan/geronimo"
 tags = []
 features = []
 min_version = "0.41.0"