Fixed #22: Added About

- Added new About page
- Using new `version` metadata from dashboard.yaml in About
- New top-level menu entry
- New tabs instead of menu for mobile (was toggle)
- Now using DM Sans font for UI (not content) to reflect logo
- Removed drawer JS mechanism
- Using new fallback logo from offspot-config (no-padding)

assets/dashboard-tailwind-src.css

@@ -182,6 +182,51 @@ select {
   }
 }
 
+
+/* latin-ext */
+@font-face {
+  font-family: 'DM Sans';
+  font-style: italic;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(dmsans/DMSans-italic-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'DM Sans';
+  font-style: italic;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(dmsans/DMSans-italic.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+/* latin-ext */
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(dmsans/DMSans-normal-ext.woff2) format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+/* latin */
+@font-face {
+  font-family: 'DM Sans';
+  font-style: normal;
+  font-weight: 100 1000;
+  font-display: swap;
+  src: url(dmsans/DMSans-normal.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+
+.dm-sans {
+  font-family: "DM Sans", serif;
+  font-weight: 400;
+  font-style: normal;
+}
+
 body {
-    font-family: Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
+    font-family:  Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
 }

assets/dashboard.js

@@ -249,6 +249,10 @@ function run() {
     });
   }
 
+  // no filtering on about
+  if (page == "about")
+    return;
+
   var filter = new Filtering();
 
   live('#languages-list', 'change', function(el, ev){
@@ -275,16 +279,6 @@ function run() {
     filter.render(true);
   }
 
-  function onCloseDownloadDrawerButtonClick(el, ev) {
-    // go to home (from downloads)
-    window.location.assign("/");
-  }
-
-  function onOpenDownloadDrawerButtonClick(el, ev) {
-    // go (back) to downloads (from home)
-    window.location.assign("/download");
-  }
-
   function onOpenMobileFiltersButtonClick(el, ev) {
     // open filters on mobile
     removeClass(document.getElementById("mobile-filters"), "hidden");
@@ -332,9 +326,6 @@ function run() {
   live('#order-desc', 'click', onOrderDirButtonClick);
   live('#order-asc', 'click', onOrderDirButtonClick);
 
-  live('#close-download-drawer', 'click', onCloseDownloadDrawerButtonClick);
-  live('#open-download-drawer', 'click', onOpenDownloadDrawerButtonClick);
-
   live('#close-mobile-filters', 'click', onCloseMobileFiltersButtonClick);
   live('#open-mobile-filters', 'click', onOpenMobileFiltersButtonClick);
 

gen-home.py

@@ -121,17 +121,19 @@ class Conf:
     debug: bool = bool(os.getenv("DEBUG", ""))
     fqdn: str = ""
     name: str = ""
+    version: str = "n/a"
     footer_note: str = ""
 
     @classmethod
     def from_doc(cls, document):
-        for key in ("name", "fqdn", "footer_note"):
+        for key in ("name", "fqdn", "footer_note", "version"):
             setattr(cls, key, document.get(key, "--"))
 
     @classmethod
     def to_dict(cls):
         return {
-            key: getattr(cls, key) for key in ("debug", "fqdn", "name", "footer_note")
+            key: getattr(cls, key)
+            for key in ("debug", "fqdn", "name", "version", "footer_note")
         }
 
 
@@ -233,6 +235,10 @@ def gen_home(fpath: pathlib.Path):
             context["page"] = "home"
             fh.write(env.get_template("home.html").render(**context))
 
+        with open(dest_dir / "about.html", "w") as fh:
+            context["page"] = "about"
+            fh.write(env.get_template("about.html").render(**context))
+
         with open(dest_dir / "download.html", "w") as fh:
             context["page"] = "download"
             fh.write(env.get_template("download.html").render(**context))

tailwind.config.js

@@ -42,6 +42,10 @@ module.exports = {
         kwtextblack: '#231f20',
         kwtextgrey: '#585b5d',
         kwtextgreyn: '#707272',
+        kwaboutdarkgrey: '#2f3538',
+        kwaboutdarkergrey: '#21272b',
+        kwaboutorange: '#f48c32',
+        kwbrowsetabgrey: '#333333',
         'kworange': {
            DEFAULT: '#f39325',
            100: '#f79433',

templates/about.html

@@ -0,0 +1,28 @@
+{% extends "base.html" %}
+
+{% block entries %}
+    <section
+      class="
+        content-max-w
+
+        w-100 mx-auto
+
+        p-3
+
+        justify-center
+        box-border
+        my-4
+
+        text-white"
+    >
+    <div class="w-100 max-w-[50em] mx-left">
+      <h1 class="text-[1.2em] mb-[1.5em] mt-[2em]">About Kiwix Hotspot</h1>
+
+      <p class="mb-4"><strong>This software is free</strong> and developed by Kiwix, a non-profit organisation based in Switzerland.</p>
+      <p>Visit <a class="font-medium text-kwaboutorange" target="_blank" href="https://www.kiwix.org">www.kiwix.org</a> for more information.</p>
+      <p class="mb-4">We are also curious to hear from you! Do not hesitate to share your story with us at <a class="font-medium text-kwaboutorange" href="mailto:[email protected]">[email protected]</a>.</p>
+
+      <p class="bg-kwaboutdarkergrey rounded-[.6em] p-[.4em] text-[1em] max-w-[10em]"><code>{{ version }}</code></p>
+    </div>
+    </section>
+{% endblock %}