From 124327d53df419451e34dd3f990e97e344a4386e Mon Sep 17 00:00:00 2001
From: octospacc <octo@tutamail.com>
Date: Tue, 2 Apr 2024 18:05:15 +0200
Subject: [PATCH] Update posts metadata, configurations, finish PWA
 integration, fix issues

---
 _includes/head.html                     | 77 +++++++++++++------------
 _layouts/home.html                      | 18 +++---
 _layouts/post.html                      | 12 ++--
 _posts/2023-12-02-from-below.md         |  2 +-
 _posts/2024-04-01-geometry-dash-lite.md |  7 +++
 _sass/_SalaMuseoGames.scss              |  7 +++
 assets/js/preferences.js                | 43 ++++++++++----
 assets/js/pwa.js                        | 48 +++++++++++++--
 pages/configuration.md                  |  8 +--
 9 files changed, 145 insertions(+), 77 deletions(-)
diff --git a/_includes/head.html b/_includes/head.html
index c50b079..137291e 100644
--- a/_includes/head.html
+++ b/_includes/head.html
@@ -1,7 +1,7 @@
 <head>
-	<meta charset="utf-8">
-	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<meta charset="utf-8"/>
+	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1"/>
 
 	{% assign title = '' %}
 	{% if page.layout == 'author' %}
@@ -34,64 +34,64 @@
 	{% endif %}
 
 	<title>{{ title }}</title>
-	<meta name="description" content="{{ description }}">
+	<meta name="description" content="{{ description }}"/>
 	{% if page.tags %}
-		<meta name="keywords" content="{{ page.tags | join: ', ' }}">
+		<meta name="keywords" content="{{ page.tags | join: ', ' }}"/>
 	{% endif %}
 
 	<!-- Social: Twitter -->
-	<meta name="twitter:card" content="summary_large_image">
-	<meta name="twitter:title" content="{{ title }}">
-	<meta name="twitter:description" content="{{ description }}">
+	<meta name="twitter:card" content="summary_large_image"/>
+	<meta name="twitter:title" content="{{ title }}"/>
+	<meta name="twitter:description" content="{{ description }}"/>
 
 	{% if image contains '://' %}
-		<meta property="twitter:image" content="{{ image }}">
+		<meta property="twitter:image" content="{{ image }}"/>
 	{% else %}
-		<meta property="twitter:image" content="{{ image | prepend: site.url }}">
+		<meta property="twitter:image" content="{{ image | prepend: site.url }}"/>
 	{% endif %}
 	
 	{% if site.twitter_username %}
-		<meta name="twitter:site" content="@{{ site.twitter_username }}">
+		<meta name="twitter:site" content="@{{ site.twitter_username }}"/>
 	{% endif %}
 
 	<!-- Social: Facebook / Open Graph -->
-	<meta property="og:url" content="{{ url }}">
-	<meta property="og:title" content="{{ title }}">
-	<meta property="og:image" content="{{ image }}">
-	<meta property="og:description" content="{{ description }}">
-	<meta property="og:site_name" content="{{ site.title }}">
+	<meta property="og:url" content="{{ url }}"/>
+	<meta property="og:title" content="{{ title }}"/>
+	<meta property="og:image" content="{{ image }}"/>
+	<meta property="og:description" content="{{ description }}"/>
+	<meta property="og:site_name" content="{{ site.title }}"/>
 
 	<!-- Favicon -->
-	<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon" />
+	<link rel="shortcut icon" href="{{ site.baseurl }}/favicon.ico" type="image/x-icon"/>
 	
 	<!-- Apple Touch Icons -->
-	<link rel="apple-touch-icon" href="{{ site.baseurl }}/assets/img/icons/apple-touch-icon.png" />
-	<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/icons/apple-touch-icon-57x57.png" />
-	<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/icons/apple-touch-icon-72x72.png" />
-	<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/icons/apple-touch-icon-114x114.png" />
-	<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/icons/apple-touch-icon-144x144.png" />
-	<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/icons/apple-touch-icon-60x60.png" />
-	<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/icons/apple-touch-icon-120x120.png" />
-	<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/icons/apple-touch-icon-76x76.png" />
-	<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/icons/apple-touch-icon-152x152.png" />
+	<link rel="apple-touch-icon" href="{{ site.baseurl }}/assets/img/icons/apple-touch-icon.png"/>
+	<link rel="apple-touch-icon" sizes="57x57" href="/assets/img/icons/apple-touch-icon-57x57.png"/>
+	<link rel="apple-touch-icon" sizes="72x72" href="/assets/img/icons/apple-touch-icon-72x72.png"/>
+	<link rel="apple-touch-icon" sizes="114x114" href="/assets/img/icons/apple-touch-icon-114x114.png"/>
+	<link rel="apple-touch-icon" sizes="144x144" href="/assets/img/icons/apple-touch-icon-144x144.png"/>
+	<link rel="apple-touch-icon" sizes="60x60" href="/assets/img/icons/apple-touch-icon-60x60.png"/>
+	<link rel="apple-touch-icon" sizes="120x120" href="/assets/img/icons/apple-touch-icon-120x120.png"/>
+	<link rel="apple-touch-icon" sizes="76x76" href="/assets/img/icons/apple-touch-icon-76x76.png"/>
+	<link rel="apple-touch-icon" sizes="152x152" href="/assets/img/icons/apple-touch-icon-152x152.png"/>
 
 	<!-- Windows 8 Tile Icons -->
-	<meta name="application-name" content="{{ site.name }}">
-	<meta name="msapplication-TileColor" content="#141414">
-	<meta name="msapplication-square70x70logo" content="smalltile.png" />
-	<meta name="msapplication-square150x150logo" content="mediumtile.png" />
-	<meta name="msapplication-wide310x150logo" content="widetile.png" />
-	<meta name="msapplication-square310x310logo" content="largetile.png" />
+	<meta name="application-name" content="{{ site.name }}"/>
+	<meta name="msapplication-TileColor" content="#141414"/>
+	<meta name="msapplication-square70x70logo" content="smalltile.png"/>
+	<meta name="msapplication-square150x150logo" content="mediumtile.png"/>
+	<meta name="msapplication-wide310x150logo" content="widetile.png"/>
+	<meta name="msapplication-square310x310logo" content="largetile.png"/>
 	
 	<!-- Android Lolipop Theme Color -->
-	<meta name="theme-color" content="#141414">
+	<meta name="theme-color" content="#141414"/>
 
 	<!-- Fonts -->
-	<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet">
+	<link href="https://fonts.googleapis.com/css?family=Titillium+Web:300,400,700" rel="stylesheet"/>
 
-	<link rel="stylesheet" href="{{ '/assets/css/styles.css' | prepend: site.baseurl }}">
-	<link rel="canonical" href="{{ url }}">
-	<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}" />
+	<link rel="stylesheet" href="{{ '/assets/css/styles.css' | prepend: site.baseurl }}"/>
+	<link rel="canonical" href="{{ url }}"/>
+	<link rel="alternate" type="application/rss+xml" title="{{ site.title }}" href="{{ '/feed.xml' | prepend: site.baseurl | prepend: site.url }}"/>
 
 	<!-- Include extra styles -->
 	{% include extra-css.html %}
@@ -103,7 +103,8 @@
 
 	<script>
 		window.site_config = {
-			baseurl: "{{ site.baseurl }}",
+			url: {{ site.url | jsonify }},
+			baseurl: {{ site.baseurl | jsonify }},
 		};
 		window.page_config = {
 			software_data: {{ page.software_data | jsonify }},
diff --git a/_layouts/home.html b/_layouts/home.html
index e6a2c6c..cec53bf 100644
--- a/_layouts/home.html
+++ b/_layouts/home.html
@@ -109,15 +109,15 @@ layout: main
   "@type": "WebPage",
   "mainEntity": {
     "@type": "Blog",
-    "name": "{{ site.name }}",
-    "headline": "{{ site.title }}",
-    "description": "{{ site.description }}",
+    "name": {{ site.name | jsonify }},
+    "headline": {{ site.title | jsonify }},
+    "description": {{ site.description | jsonify }},
     "url": "{{ site.url }}{{site.baseurl}}/",
     "inLanguage": "{{ site.language }}",
     "isFamilyFriendly": "true",
     "creator": {
         "@type": "Organization",
-        "name": "{{ site.name }}",
+        "name": {{ site.name | jsonify }},
         "url": "{{ site.url }}{{site.baseurl}}/",
         "sameAs": [
             {{ social_urls | split: "," | join: "," }}
@@ -131,9 +131,9 @@ layout: main
             {% assign author = site.authors | where: "name", post.author | first %}
             {
                 "@type": "BlogPosting",
-                "name": "{{ post.title }}",
-                "headline": "{{ post.subtitle }}",
-                "description": "{{ post.description }}",
+                "name": {{ post.title | jsonify }},
+                "headline": {{ post.subtitle | jsonify }},
+                "description": {{ post.description | jsonify }},
                 "image": "{{ post.image }}",
                 "url": "{{ post.url | prepend: site.baseurl | prepend: site.url }}",
                 "inLanguage": "{{ site.language }}",
@@ -142,12 +142,12 @@ layout: main
                 "dateModified": "{{ post.date | date: '%Y-%m-%d/' }}",
                 "author": {
                     "@type": "Person",
-                    "name": "{{ author.display_name }}",
+                    "name": {{ author.display_name | jsonify }},
                     "url": "{{ author.url | prepend: site.baseurl | prepend: site.url }}"
                 },
                 "publisher": {
                     "@type": "Organization",
-                    "name": "{{ site.name }}",
+                    "name": {{ site.name | jsonify }},
                     "url": "{{ site.url }}{{site.baseurl}}/",
                     "logo": {
                         "@type": "ImageObject",
diff --git a/_layouts/post.html b/_layouts/post.html
index 42db804..840cd0f 100644
--- a/_layouts/post.html
+++ b/_layouts/post.html
@@ -123,9 +123,9 @@
         {
             "@context": "http://schema.org",
             "@type": "BlogPosting",
-            "name": "{{ page.title }}",
-            "headline": "{{ page.subtitle }}",
-            "description": "{{ page.description }}",
+            "name": {{ page.title | jsonify }},
+            "headline": {{ page.subtitle | jsonify }},
+            "description": {{ page.description | jsonify }},
             "image": "{{ page.image }}",
             "url": "{{ page.url | prepend: site.baseurl | prepend: site.url }}",
             "articleBody": "{{ content | strip_html | xml_escape | textilize }}",
@@ -136,13 +136,13 @@
             "dateModified": "{{ page.date | date: '%Y-%m-%d/' }}",
             "author": {
                 "@type": "Person",
-                "name": "{{ author.display_name }}",
+                "name": {{ author.display_name | jsonify }},
                 {% if author.photo %}
                 "image": "{{ author.photo }}",
                 {% else %}
                 "image": {{ "/assets/img/user.jpg" | prepend: site.baseurl | prepend: site.url }},
                 {% endif %}
-                "jobTitle": "{{ author.position }}",
+                "jobTitle": {{ author.position | jsonify }},
                 "url": "{{ author.url | prepend: site.baseurl | prepend: site.url }}",
                 "sameAs": [
                     {{ author_urls | split: "," | join: "," }}
@@ -150,7 +150,7 @@
             },
             "publisher": {
                 "@type": "Organization",
-                "name": "{{ site.name }}",
+                "name": {{ site.name | jsonify }},
                 "url": "{{ site.url }}{{site.baseurl}}/",
                 "logo": {
                     "@type": "ImageObject",
diff --git a/_posts/2023-12-02-from-below.md b/_posts/2023-12-02-from-below.md
index 3d3c093..fab6b67 100644
--- a/_posts/2023-12-02-from-below.md
+++ b/_posts/2023-12-02-from-below.md
@@ -18,7 +18,7 @@ software_data:
   # embed_url: "https://html-classic.itch.zone/html/4531906/index.html"
   release    :
     source   : "aftermarket"
-    type     : "release v1.0.0"
+    type     : "release 1.0.0"
 ---
 
 ## About the game
diff --git a/_posts/2024-04-01-geometry-dash-lite.md b/_posts/2024-04-01-geometry-dash-lite.md
index 4353a82..f5135e1 100644
--- a/_posts/2024-04-01-geometry-dash-lite.md
+++ b/_posts/2024-04-01-geometry-dash-lite.md
@@ -14,10 +14,16 @@ tags:
   - "precision"
   - "levels"
   - "reflexes"
+  - "Unity"
 author: "octobot"
 software_data:
   platform   : "web"
   frame_url  : "https://gamingshitposting.github.io/ext-bin-1/geometrylite.io/game/geometry-dash-full-version/index.html"
+  screen:
+    orientation: "landscape"
+  release    :
+    source   : "homebrew"
+    type     : "porting"
 ---
 
 ## About the game
@@ -35,4 +41,5 @@ Since its initial release, Geometry Dash Lite has amassed a dedicated fanbase an
 ## Resources
 
 * Official page of the game: <https://play.google.com/store/apps/details?id=com.robtopx.geometryjumplite>
+* Page of the HTML5 porting: <https://geometrylite.io/geometry-dash-full-version>
 
diff --git a/_sass/_SalaMuseoGames.scss b/_sass/_SalaMuseoGames.scss
index b34edaf..8eeb4e3 100644
--- a/_sass/_SalaMuseoGames.scss
+++ b/_sass/_SalaMuseoGames.scss
@@ -50,3 +50,10 @@ iframe#software-embed-frame
 	border: none;
 	overflow: hidden;
 }
+
+#ConfigurationCustomizerElem > ul > li {
+	display: block;
+}
+#ConfigurationCustomizerElem > ul[data-section]:before {
+	font-weight: bold;
+}
diff --git a/assets/js/preferences.js b/assets/js/preferences.js
index c4e4fa1..660784d 100644
--- a/assets/js/preferences.js
+++ b/assets/js/preferences.js
@@ -5,9 +5,12 @@ var prefsIndex = 'SalaMuseoGames/Prefs/v1';
 var Prefs = {
   pwaManifests: { default: true, name: "Allow installing the site as a PWA" },
   softwarePwaManifests: { default: true, dependsOn: "pwaManifests", name: "Allow installing individual games as PWAs" },
+  // offlineCache: { default: true, name: "Cache site pages and game files offline", summary: "Allow faster site navigation, and gameplay without an Internet connection, by caching unlimited data offline. Disable if you want to save storage. (Note that game data for some emulators is always cached regardless of this setting, you can manage their data from their embedded UI.)" },
+  // dataExport: { onclick: (function(){}), section: "data", name: "Export configuration and gamesaves" },
+  // dataImport: { onclick: (function(){}), section: "data", name: "Import configuration and gamesaves" },
   // featurePreview: { default: false, name: "Use experimental features before their release", summary: "If some new site features or adjustments are scheduled to release soon, you might be chosen to preview them before they are officially available" },
   developerMode: { default: false, name: "Developer Mode", summary: "Show options and enable features dedicated to developers" },
-  allowDownloads: { default: false, section: "developer", name: "Allow downloads where available" },
+  allowDownloads: { default: false, section: "developer", name: "Allow downloads where available", summary: "Only for developers." },
 };
 
 function SavePrefs () {
@@ -15,7 +18,7 @@ function SavePrefs () {
   Object.keys(Prefs).forEach(function(key){
     items[key] = Prefs[key].value;
   });
-  localStorage.setItem(prefsIndex, items);
+  localStorage.setItem(prefsIndex, JSON.stringify(items));
 }
 
 var storedPrefs = JSON.parse(localStorage.getItem(prefsIndex)) || {};
@@ -25,27 +28,43 @@ Object.keys(Prefs).forEach(function(key){
 });
 
 var PrefsSections = {
-  developer: { name: "Developer", visible: Prefs.developerMode.value },
+  data: { name: "Data management", visible: true },
+  developer: { name: "Development", visible: Prefs.developerMode.value },
 };
 
-if (ConfigurationCustomizerElem) {
-  var rootElem = ConfigurationCustomizerElem;
-  rootElem.innerHTML = null;
+var configElem = document.querySelector('#ConfigurationCustomizer');
+if (configElem) {
+  var styleElem = document.createElement('style');
+  configElem.innerHTML = null;
+  configElem.appendChild(styleElem);
   Object.keys(Object.assign({ default: null }, PrefsSections)).forEach(function(key){
+    var section = PrefsSections[key];
     var sectionElem = document.createElement('ul');
     sectionElem.dataset.section = key;
-    sectionElem.style.display = (PrefsSections[key] && !PrefsSections[key].visible ? 'none' : '');
-    rootElem.appendChild(sectionElem);
+    sectionElem.style.display = (section && !section.visible ? 'none' : '');
+    styleElem.innerHTML += `#ConfigurationCustomizerElem > ul[data-section="${key}"]:before { content: "${(section && section.name) || ''}" }`;
+    configElem.appendChild(sectionElem);
   });
   Object.keys(Prefs).forEach(function(key){
-    // TODO: finish HTML
     var pref = Prefs[key];
-    var prefElem = document.createElement('p');
-    prefElem.innerHTML += `<label><input type="checkbox" ${pref.value && 'checked'} disabled/> ${pref.name}</label><br/><small>${pref.summary || ''}</small>`;
-    rootElem.querySelector(`[data-section="${pref.section || 'default'}"]`).appendChild(prefElem);
+    var prefElem = document.createElement('li');
+    var prefType = (pref.default === undefined && pref.onclick ? 'button' : 'checkbox');
+    prefElem.dataset.pref = key;
+    prefElem.innerHTML += `<label>
+      <input type="${prefType}" ${pref.value && 'checked'} value="${prefType === 'button' && pref.name}"/>
+      ${prefType !== 'button' ? pref.name : ''}
+      <br/><small>${pref.summary || ''}</small>
+    </label>`;
+    prefElem.querySelector('input').onclick = pref.onclick;
+    prefElem.querySelector('input').onchange = function(){
+      Prefs[key].value = this.checked;
+      SavePrefs();
+    };
+    configElem.querySelector(`[data-section="${pref.section || 'default'}"]`).appendChild(prefElem);
   });
 }
 
 window.SalaMuseoGames.Prefs = Prefs;
+SavePrefs();
 
 })();
diff --git a/assets/js/pwa.js b/assets/js/pwa.js
index dbbe268..19d575a 100644
--- a/assets/js/pwa.js
+++ b/assets/js/pwa.js
@@ -1,20 +1,56 @@
 (function(){
 
-return // TODO finish
-
 var Prefs = SalaMuseoGames.Prefs;
+var Software = SalaMuseoGames.page.software_data;
+var Screen = (Software && Software.screen);
+var Site = SalaMuseoGames.site;
 
 if (Prefs.pwaManifests.value) {
   var manifestData;
-  if (Prefs.softwarePwaManifests.value && SalaMuseoGames.page.software_data) {
-    // TODO add individual manifests on games pages
+  if (Prefs.softwarePwaManifests.value && Software) {
+    // specific manifests on games pages
+    manifestData = {
+      name: document.querySelector('.post-title').textContent,
+      description: document.querySelector('.post-subtitle').textContent,
+      start_url: (location.href + ''), // TODO Url parameters to make the game open fullscreen and automatically start
+      display: ((Screen && Screen.display) || "standalone"),
+      orientation: ((Screen && Screen.orientation) || "any"),
+    };
   } else {
-    // TODO add site manifest on global pages
+    // site manifest on global pages
+    var ldData;
+    for (var elem of document.querySelectorAll('script[type="application/ld+json"]')) {
+      // extract site data from JSON-LD data blocks
+      var data = JSON.parse(elem.innerHTML);
+      if (data['@type'] === 'Organization') {
+        ldData = data;
+        break;
+      };
+    }
+    manifestData = {
+      name: ldData.name,
+      description: ldData.description,
+      start_url: (Site.url + Site.baseurl),
+      display: "standalone",
+    };
   }
+  manifestData = Object.assign(manifestData, {
+    scope: location.href,
+    background_color: (Software && Software.background_color || getComputedStyle(document.body).backgroundColor),
+    icons: [{
+      src: (SalaMuseoGames.page.icon || (Site.url + Site.baseurl + '/assets/img/icons/mediumtile.png')),
+      sizes: "any",
+      purpose: "any",
+    }],
+  });
   var manifestElem = document.createElement('link');
   manifestElem.rel = 'manifest';
-  manifestElem.href = 'data:application/manifest+json;utf8,' + encodeURIComponent(JSON.stringify(manifestData));
+  manifestElem.href = ('data:application/manifest+json;utf8,' + encodeURIComponent(JSON.stringify(manifestData)));
   document.head.appendChild(manifestElem);
 }
 
+if (Prefs.offlineCache.value) {
+  navigator.serviceWorker.register('/SalaMuseoGames-ServiceWorker.js');
+}
+
 })();
diff --git a/pages/configuration.md b/pages/configuration.md
index 73b06c3..7ace519 100644
--- a/pages/configuration.md
+++ b/pages/configuration.md
@@ -10,16 +10,14 @@ permalink: "/configuration/"
 
 This page allows you to manage advanced, global settings for this entire site, and access special features.
 
+All your changes are saved automatically.
+
 <!-- TODO:
-* Disable offline caching
 * Toggle reproduction history
 * Specify preferred emulators (backends, cores)
 * Force override emulators
 * Toggle automatic web/social embeds
 * Try to load games marked unavailable
-* Configs/saves import/export
 -->
 
-<div id="ConfigurationCustomizerElem"><p>Loading...</p></div>
-
-Work-in-progress. Coming soon, you will be able to modify these options.
\ No newline at end of file
+<div id="ConfigurationCustomizer"><p>Loading...</p></div>
