Version 2.0.0 Refactor, Add PWA Support

Jieiku · Aug 19, 2023 · 211d08f · 211d08f
1 parent 3e5d8a9
commit 211d08f
Show file tree

Hide file tree

Showing 41 changed files with 310 additions and 112 deletions.
diff --git a/.github/workflows/actions.yml b/.github/workflows/actions.yml
@@ -23,4 +23,4 @@ jobs:
         uses: JamesIves/github-pages-deploy-action@v4
         with:
           branch: master
-          folder: '.'
+          folder: '.'
diff --git a/.gitignore b/.gitignore
@@ -1,8 +1,8 @@
 .env
 public
 themes
-storage
 build
+storage
 static/demo.html
 static/tinysearch_engine.js
 static/tinysearch_engine.d.ts

diff --git a/.nojekyll b/.nojekyll
@@ -1 +0,0 @@
-

diff --git a/COPY-TO-ROOT-SASS/abridge.scss b/COPY-TO-ROOT-SASS/abridge.scss
@@ -3,7 +3,7 @@
   /// The things your less likely to need to override have been commented out.
 
   /// Enable a centered viewport for <header>, <main>, <footer> inside <body>
-  /// Fluid layout until a defined size, then becomes centered viewport
+  /// Fluid layout until a defined size, then becomes centered viewport.
   //$enable-maxwidth: true,
   $mw: 75%,// max-width
   //$mb: 1200px,// value at which to switch from fluid layout to max-width

diff --git a/README.md b/README.md
@@ -121,7 +121,7 @@ $switcherDefault: "dark",// default nojs switcher mode: dark, light (make sure t
 js_switcher_default = "dark" # default nojs switcher mode: dark, light (make sure to also set $switcherDefault in abridge.scss)
 ```
 
-By default abrdige uses dark mode for the switcher, so unless you want to set the default mode to light for nojs visitors, then you do not need to worry about these settings.
+By default abridge uses dark mode for the switcher, so unless you want to set the default mode to light for nojs visitors, then you do not need to worry about these settings.
 
 ### Number of Items per page for pagination
 
@@ -240,6 +240,18 @@ You can see a demo on [this page](https://abridge.netlify.app/overview-math/).
 
 For better performance I recommend only enabling math on a [per page bases in your post.md files](https://github.com/Jieiku/abridge/blob/master/content/overview-math.md?plain=1#L11-L13), instead of in your main config.toml file.
 
+### PWA (Progressive Web Application)
+
+Abridge theme has PWA support. You can install the entire site as an app and have it work offline. To try it out simply use google chrome or your phone and go here: https://abridge.netlify.app/
+
+If using chrome on desktop then look at the end of the address bar for the install button. On android you should get a popup to install, you can also install from the 3 dot menu in the top right corner. Once you have the PWA installed, you can go completely offline and you will still be able to browse or search the site!
+
+To use it in your own instance you will need to edit `static/sw.js` for the list of files to cache. Technically you do not need to edit `sw.js`, but if even a single file in the cache list is missing then it wont pre cache the list, so it will only cache as you browse.
+
+There is an npm script to generate the file cache list and minification `npm run pwa`. My `netlify.toml` file automatically runs this npm script during site deployment, so everything is automatic. If Zola was able to template a js file then it might be possible to generate the list of cache files dynamically at build.
+
+The PWA feature is also easy to disable by simply setting `pwa = false` in `config.toml`
+
 ## Javascript files
 
 These are the javascript files currently used by Abridge:
@@ -252,6 +264,8 @@ These are the javascript files currently used by Abridge:
 - theme.js: tiny script to facilitate local storage for the theme switcher. (never bundle, always separate)
 - theme_button.js: tiny script for the theme switcher function when you click the theme switch button.
 - prestyle.js: Used to preload css files `<link rel="preload"` - this script changes these to `<link rel="stylesheet"` once the page has finished loading, this allows us to load stylesheets for external fonts, fontawesome, or katex in a non blocking fashion.
+- sw.js: this is the Service Worker file for the PWA.
+- sw_load.js: this file handles loading the Service Worker for the PWA.
 
 ### js_bundle option
 
@@ -397,14 +411,12 @@ Nginx does not come by default with brotli support, but adding it was not diffic
 
 ## Contributing and Philosophy
 
-We'd love your help! Especially with fixes to issues.
+We'd love your help! Especially with fixes to issues, or improvements to existing features.
 
-The overall idea behind abridge is to be lightweight, fast, and to work properly even if javascript is disabled.
+The goal is for abridge to be lightweight, fast, and to work properly even if javascript is disabled or blocked.
 
 The only feature that may be considered a necessity that relies on javascript is the Search.
 
-New features that rely on javascript will do so with it disabled by default unless lightweight and useful.
-
 ## License
 
 **abridge** is distributed under the terms of the [MIT license](https://github.com/jieiku/abridge/blob/master/LICENSE).
diff --git a/config.toml b/config.toml
@@ -58,13 +58,10 @@ Sitemap = "Plan du site"
 404_try_search = "Essayez de rechercher ou"
 ### go to homepage
 404_go_home = "allez à la page d'accueil"
+copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Le contenu du site Web est sous licence <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.'
 
 #[languages.es.translations]
 #flag = "🇪🇸"
-#about = "Acerca de"
-#posts = "Publicaciones"
-#categories = "Categorías"
-#tags = "Etiquetas"
 
 [search]                # Options specific to elasticlunr search.
 index_format = "elasticlunr_json" # elasticlunr_json, elasticlunr_javascript
@@ -138,11 +135,11 @@ sitedesc = false # enables or disables the display of the site description below
 headhr = false # show or hide horizontal rule below header
 foothr = true # show or hide horizontal rule above footer
 
-#copyright_start_string = "©"
-#copyright_start_year = 2019  # optional
-#copyright_end_year = "" # optional, recommend leaving unset, zola build will set this to current year by default, can use empty string to omit the year.
-#copyright_entity = "MyName." # optional, if ommited then the config.title is used.
-#copyright_end_string = 'Unless otherwise noted, the content in this website is available under the <a href="http://creativecommons.org/licenses/by-nd/3.0/">CC BY-ND 3.0</a> license.'
+### $CURRENT_YEAR and $SITE_TITLE can be used anywhere within the copyright, you can change their position or you can also delete them and type whatever you want instead.
+#copyright = false # set to false to disable the copyright.
+#copyright_override = '© 2019-$CURRENT_YEAR $SITE_TITLE'
+#copyright_override = '© $CURRENT_YEAR $SITE_TITLE • Website content is licensed <a rel="noopener" target="_blank" href="https://creativecommons.org/licenses/by/4.0/">CC BY 4.0</a>.'
+
 
 ###############################################################################
 ### meta/seo/analytic tags
@@ -193,6 +190,15 @@ youtube = "channel/your-channel-id"
 researchgate = "your-profile-id"
 
 
+###############################################################################
+### Commenting System for visitors to leave comments on pages.
+###   hyvor talk
+###############################################################################
+
+#comments.hyvor = "9366" # hyvor website id, comment out to disable.
+#comments.hyvorcolor = "os" # set the color property for hyvor
+
+
 ###############################################################################
 ### Resource Files
 ### You can load extra css files if you need to, just separate by comma:
@@ -217,17 +223,19 @@ search_library = 'elasticlunr'
 #js_prestyle = "js/prestyle.js"# Bundleable - used to preload: FontAwesome, Katex, external Google Fonts
 #js_codecopy = "js/codecopy.js"# Bundleable - copy code block to clipboard button
 #js_email = "js/email.js"# Bundleable - obfuscates email address in footer
+#js_swload = "js/sw_load.min.js" # loads the PWA service worker
 
 stylesheets = ["abridge.css"]
 
+pwa = true # true to load the service worker
+webmanifest = "manifest.json" # Required for PWAs
 
 ###############################################################################
 ### Favicons, comment out a line to disable loading some or all of these if needed.
 ###############################################################################
 
 favicon_theme_color = "#333333"
 favicon_ms_color = "#333333"
-favicon_webmanifest = "site.webmanifest" # Used for android-chrome-512x512.png and android-chrome-192x192.png
 favicon_mask = "safari-pinned-tab.svg" # safari-pinned-tab.svg
 favicon_mask_color = "#ff9900"
 favicon_svg = "favicon.svg" # favicon.svg

diff --git a/content/pages/offline.fr.md b/content/pages/offline.fr.md
@@ -0,0 +1,10 @@
++++
+title = "Mode hors-ligne"
+path = "fr/offline"
+template = "pages.html"
+draft = false
++++
+
+## Mode hors-ligne
+
+Désolé, aucun cache n'a été trouvé et il semble que vous soyez hors ligne, une connexion est requise.
diff --git a/content/pages/offline.md b/content/pages/offline.md
@@ -0,0 +1,10 @@
++++
+title = "Offline Mode"
+path = "offline"
+template = "pages.html"
+draft = false
++++
+
+## Offline Mode
+
+Sorry, no cache found and it looks like you’re offline, a connection is required.
diff --git a/netlify.toml b/netlify.toml
@@ -1,12 +1,12 @@
 [build]
 publish = "public"
-command = "zola build && npm run abridge-demo && zola build"
+command = "zola build && npm run pwa && zola build"
 
 [build.environment]
 ZOLA_VERSION = "0.17.2"
 
 [context.deploy-preview]
-command = "zola build --base-url $DEPLOY_PRIME_URL && npm run abridge-demo && zola build --base-url $DEPLOY_PRIME_URL"
+command = "zola build --base-url $DEPLOY_PRIME_URL && npm run pwa && zola build --base-url $DEPLOY_PRIME_URL"
 
 [[headers]]
   for = "/*"
@@ -16,4 +16,4 @@ command = "zola build --base-url $DEPLOY_PRIME_URL && npm run abridge-demo && zo
     X-XSS-Protection = "1; mode=block"
     Referrer-Policy = "strict-origin-when-cross-origin"
     Strict-Transport-Security = "max-age=63072000; includeSubdomains"
-    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; connect-src 'self'; form-action 'self'; script-src 'self'; img-src 'self' data: cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
+    Content-Security-Policy = "default-src 'none'; frame-ancestors 'none'; object-src 'none'; base-uri 'self'; manifest-src 'self'; worker-src 'self'; form-action 'self'; connect-src 'self' *.hyvor.com ws://*.hyvor.com; script-src 'self' talk.hyvor.com; img-src 'self' data: talk.hyvor.com cdn.cloudflare.com; frame-src 'self' www.youtube-nocookie.com player.vimeo.com streamable.com www.streamable.com; media-src 'self' data: cdn.cloudflare.com www.youtube-nocookie.com player.vimeo.com; font-src 'self' cdn.cloudflare.com cdn.jsdelivr.net fonts.gstatic.com; style-src 'self' talk.hyvor.com cdn.cloudflare.com cdn.jsdelivr.net fonts.googleapis.com;"
diff --git a/package.json b/package.json
@@ -6,10 +6,11 @@
   "license": "MIT",
   "homepage": "https://github.com/Jieiku/abridge",
   "scripts": {
-    "all": "npm run theme && npm run theme-light && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch && npm run abridge-bundle-elasticlunr",
-    "nonbundles": "npm run theme && npm run theme-light && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch",
+    "all": "npm run theme && npm run theme-light && npm run pwa && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch && npm run abridge-bundle-elasticlunr",
+    "nonbundles": "npm run theme && npm run theme-light && npm run pwa && npm run katex-bundle && npm run search-elasticlunr && npm run search-stork && npm run search-tinysearch",
     "theme": "uglifyjs static/js/theme.js -c -m -o static/js/theme.min.js",
     "theme-light": "uglifyjs static/js/theme_light.js -c -m -o static/js/theme_light.min.js",
+    "pwa": "CACHEFILES=$(find public -type f | sed 's/^public//' | sed 's/^\\/sw\\..*//' | sed 's/.*sw_load.*//' | sed 's/index.html//' | sed 's/.*stork.*//' | sed 's/.*tinysearch.*//' | sort | uniq | sed '/^$/d' | sed \"s/\\(.*\\)/'\\1'/\" | tr '\\n' ',' | uniq | sed 's/.$//' | sed \"s/\\(.*\\)/BASE_CACHE_FILES = \\[\\1\\];/\") && echo $CACHEFILES && sed -i \"s|BASE_CACHE_FILES =.*|$CACHEFILES|\" 'static/sw.js' && uglifyjs static/js/sw_load.js -c -m -o static/js/sw_load.min.js && uglifyjs static/sw.js -c -m -o static/sw.min.js",
     "katex-bundle": "uglifyjs static/js/katex.min.js static/js/mathtex-script-type.min.js static/js/katex-auto-render.min.js static/js/katexoptions.js -c -m -o static/js/katexbundle.min.js",
     "search-elasticlunr": "uglifyjs static/js/elasticlunr.min.js static/js/search.js -c -m -o static/js/search_elasticlunr.min.js",
     "search-stork": "uglifyjs static/js/stork.js static/js/stork_config.js -c -m -o static/js/search_stork.min.js",

diff --git a/sass/abridge.scss b/sass/abridge.scss
@@ -672,8 +672,14 @@ $syntax: true !default;//syntax highlighting for code blocks
       text-align: right;
     }
   }
-  footer nav > a {
-    margin: .2rem;
+  //footer nav >
+  footer nav {
+    a {
+        margin: .2rem;
+    }
+    i {
+      margin-bottom: .2rem;
+    }
   }
   header > nav > div:first-of-type {//Keep the logo from wrapping
     display: inline;
@@ -736,11 +742,6 @@ $syntax: true !default;//syntax highlighting for code blocks
   .mode:hover, .cnav {
     color: var(--a1);//pagination color current page
   }
-  footer nav {
-    i {
-      margin: 0 .2rem .4rem;
-    }
-  }
   //dropdown menu used for lang, etc.
   .dropdown {
     display: inline-block;

diff --git a/sass/fonts/_Abridge.scss b/sass/fonts/_Abridge.scss
diff --git a/sass/fonts/_Arimo.scss b/sass/fonts/_Arimo.scss
diff --git a/sass/fonts/_FiraCode.scss b/sass/fonts/_FiraCode.scss
diff --git a/sass/fonts/_Roboto-Mono.scss b/sass/fonts/_Roboto-Mono.scss
@@ -1,11 +1,11 @@
 @font-face {
     font-family: 'Roboto Mono';
-    src: local("Roboto Mono"), local("Roboto-Mono"), local("RobotoMono"), local("Roboto-Mono-Regular"), local("RobotoMono-Regular"), url("font/Roboto-Mono.woff2");//latin regular
+    src: local("Roboto Mono"), local("Roboto-Mono"), local("RobotoMono"), local("Roboto-Mono-Regular"), local("RobotoMono-Regular"), url("fonts/Roboto-Mono.woff2");//latin regular
     font-display: swap;
 }
 @font-face {
     font-family: 'Roboto Mono';
-    src: local("Roboto Mono Italic"), local("Roboto-Mono-Italic"), local("RobotoMono-Italic"), url("font/Roboto-Mono-Italic.woff2");//latin italic
+    src: local("Roboto Mono Italic"), local("Roboto-Mono-Italic"), local("RobotoMono-Italic"), url("fonts/Roboto-Mono-Italic.woff2");//latin italic
     font-style: italic;
     font-display: swap;
 }
diff --git a/sass/fonts/_Roboto.scss b/sass/fonts/_Roboto.scss
@@ -1,17 +1,17 @@
 @font-face {
     font-family: 'Roboto';
-    src: local("Roboto"), url("font/Roboto.woff2");//latin regular
+    src: local("Roboto"), url("fonts/Roboto.woff2");//latin regular
     font-display: swap;
 }
 @font-face {
     font-family: 'Roboto';
-    src: local("Roboto-Italic"), url("font/Roboto-Italic.woff2");//latin italic
+    src: local("Roboto-Italic"), url("fonts/Roboto-Italic.woff2");//latin italic
     font-style: italic;
     font-display: swap;
 }
 @font-face {
     font-family: 'Roboto';
-    src: local("Roboto-Bold"), url("font/Roboto-Bold.woff2");//latin bold
+    src: local("Roboto-Bold"), url("fonts/Roboto-Bold.woff2");//latin bold
     font-weight: bold;
     font-display: swap;
 }
diff --git a/screenshot.png b/screenshot.png
diff --git a/static/font/Abridge.woff2 b/static/font/Abridge.woff2
diff --git a/static/font/Arimo-Bold.woff2 b/static/font/Arimo-Bold.woff2
diff --git a/static/font/Arimo-Italic.woff2 b/static/font/Arimo-Italic.woff2
diff --git a/static/font/Arimo.woff2 b/static/font/Arimo.woff2
diff --git a/static/font/FiraCode.woff2 b/static/font/FiraCode.woff2
diff --git a/static/font/Roboto-Bold.woff2 → static/fonts/Roboto-Bold.woff2 b/static/font/Roboto-Bold.woff2 → static/fonts/Roboto-Bold.woff2
diff --git a/static/font/Roboto-Italic.woff2 → static/fonts/Roboto-Italic.woff2 b/static/font/Roboto-Italic.woff2 → static/fonts/Roboto-Italic.woff2
diff --git a/static/font/Roboto-Mono-Italic.woff2 → static/fonts/Roboto-Mono-Italic.woff2 b/static/font/Roboto-Mono-Italic.woff2 → static/fonts/Roboto-Mono-Italic.woff2
diff --git a/static/font/Roboto-Mono.woff2 → static/fonts/Roboto-Mono.woff2 b/static/font/Roboto-Mono.woff2 → static/fonts/Roboto-Mono.woff2
diff --git a/static/font/Roboto.woff2 → static/fonts/Roboto.woff2 b/static/font/Roboto.woff2 → static/fonts/Roboto.woff2
diff --git a/static/js/sw_load.js b/static/js/sw_load.js
@@ -0,0 +1,13 @@
+if ("serviceWorker" in navigator) {
+    navigator.serviceWorker
+        .register("/sw.min.js?v=3.7.6", { scope: "/" })
+        .then(() => {
+            console.info("SW Loaded");
+        }, err => console.error("SW error: ", err));
+
+    navigator.serviceWorker
+        .ready
+        .then(() => {
+            console.info("SW Ready");
+        });
+}
diff --git a/static/js/sw_load.min.js b/static/js/sw_load.min.js
diff --git a/static/site.webmanifest → static/manifest.json b/static/site.webmanifest → static/manifest.json
@@ -2,11 +2,13 @@
     "name": "Abridge Zola Theme",
     "short_name": "Abridge",
     "description": "Fast & Lightweight Zola Theme",
-    "start_url": "/index.html",
-    "scope": "/",
-    "background_color": "#111111",
-    "theme_color": "#222222",
+    "background_color": "#111",
+    "theme_color": "#222",
     "display": "standalone",
+    "orientation": "any",
+    "start_url": "/",
+    "scope": "/",
+    "categories": ["developer", "development", "productivity"],
     "icons": [
         {
             "src": "/android-chrome-192x192.png",

diff --git a/static/stork.st b/static/stork.st
diff --git a/static/stork.wasm b/static/stork.wasm