Migrate FAQ to YAML

* Update script * Update FAQ JSONc and it'stemplate * Big update - Change from JSON(C) to YAML - Add table-compact CSS style Co-authored-by: NOT_A_ROBOT <[email protected]> * Small edit in generate_faq_html file * Add .nojekyll file * Update FAQ * Update FAQ * Clean up * Fix monospace font --------- Co-authored-by: NOT_A_ROBOT <[email protected]>
techmino-hub · Feb 3, 2024 · b8fb974 · b8fb974
1 parent 63a1ba7
commit b8fb974
Show file tree

Hide file tree

Showing 11 changed files with 585 additions and 386 deletions.
diff --git a/.github/scripts/generate_faq_html.py b/.github/scripts/generate_faq_html.py
@@ -1,9 +1,13 @@
-import json
+import yaml
+try:
+    from yaml import CLoader as _Loader
+except ImportError:
+    from yaml import Loader  as _Loader
 
 # Constants
-faq_json_location = "data/faq.json"
-faq_html_template_location = "data/faq-template.html"
-faq_html_output_location = "faq.html"
+faq_yaml_location  = "data/faq.yaml"
+faq_html_template_location  = "data/faq-template.html"
+faq_html_output_location    = "faq.html"
 template_insertion_location = "<INSERT_QUESTIONS>"
 
 def faq_html(entry):
@@ -24,12 +28,12 @@ def faq_html(entry):
     </div>
     """
 
-faq = json.load(open(faq_json_location, "r"))
-html_template = open(faq_html_template_location, "r").read()
+faq = yaml.load(open(faq_yaml_location, "r", encoding="utf-8"),Loader=_Loader)
+html_template = open(faq_html_template_location, "r", encoding="utf-8").read()
 text_to_insert = ""
 for entry in faq:
     text_to_insert += faq_html(entry)
 
 html_template = html_template.replace(template_insertion_location, text_to_insert)
 
-open(faq_html_output_location, "w").write(html_template)
+open(faq_html_output_location, "w", encoding="utf-8").write(html_template)
diff --git a/.github/workflows/update_faq.yml b/.github/workflows/update_faq.yml
@@ -20,6 +20,7 @@ jobs:
 
       - name: Generate FAQ HTML
         run: |
+          python -m pip install pyyaml
           python .github/scripts/generate_faq_html.py
 
       - name: Commit updated FAQ HTML

diff --git a/.nojekyll b/.nojekyll
diff --git a/data/faq-template.html b/data/faq-template.html
@@ -3,7 +3,7 @@
 !!  !!! WARNING WARNING WARNING WARNING WARNING !!!                                         !!
 !!                                                                                          !!
 !!  PLEASE DO NOT OVERWRITE faq.html!                                                       !!
-!!  It will get overwritten by GitHub Actions when someone edits /data/faq.json.            !!
+!!  It will get overwritten by GitHub Actions when someone edits /data/faq.yaml.            !!
 !!  If you want to make changes to the page, please edit /data/faq-template.html instead.   !!
 !!  If you want to make changes to the question template, edit the faq generator in         !!
 !!    /.github/scripts/generate_faq_html.py instead.                                        !!

diff --git a/data/faq.json b/data/faq.json
diff --git a/data/faq.yaml b/data/faq.yaml
diff --git a/data/img/faq/mac-unverified-developer.png b/data/img/faq/mac-unverified-developer.png
diff --git a/data/img/faq/mac-unverified-developer_backup.png b/data/img/faq/mac-unverified-developer_backup.png
diff --git a/faq.html b/faq.html
diff --git a/index.html b/index.html
@@ -2,7 +2,7 @@
 <html lang="en">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Techmino Hub - Home</title>
     <link rel="stylesheet" href="style.css">
     <noscript>

diff --git a/style.css b/style.css
@@ -1,7 +1,6 @@
 /* -------- Fonts -------- */
 @font-face { font-family: "techmino-proportional"; src: url('fonts/proportional.otf') }
-/* Currently unused, if you want to use it then uncomment the below line */
-/* @font-face { font-family: "techmino-monospace"   ; src: url('fonts/monospace.otf') } */
+@font-face { font-family: "techmino-monospace"   ; src: url('fonts/monospaced.otf') }
 
 /* -------- Body -------- */
 body{
@@ -13,6 +12,10 @@ body{
     z-index: -2;
 }
 
+body code {
+    font-family: "techmino-monospace";
+}
+
 /* -------- Background -------- */
 canvas#bg{
     position: fixed;
@@ -151,6 +154,59 @@ a:not(header a):hover
     height: auto;
     margin: 0.5rem 0;
 }
+.expanded .answer img.center {
+    max-width: 100%;
+    height: auto;
+    display: block;
+    margin: 0 auto;
+}
+.expanded .answer table {
+    border-collapse: collapse;
+    margin: 20px auto;
+    width: 100%;
+
+    /* For scrolling, if the screen's width is too low */
+    display: block;
+    max-width: -moz-fit-content;
+    max-width: fit-content;
+    overflow-x: auto;
+    white-space: nowrap;
+
+    th {
+        border: 1.5px solid #ddd;
+        padding: 8px;
+        text-align: center;
+    };
+    tr {border: 0.75px solid #ddd}
+    td {
+        border: 0.75px solid #ddd;
+        padding: 8px;
+        text-align: left;
+    };
+}
+.expanded .answer table.compact {
+    border-collapse: collapse;
+    margin: 20px auto;
+    width: 100%;
+    display: flex;
+
+    td {border: 0px solid #ddd}
+}
+@media only screen and (max-width: 700px) {
+    .expanded .answer table.compact {
+        /* Inverting/transposing the table */
+        tr {
+            display: block;
+            float: left;
+        };
+        th, td {
+            width: auto !important;
+            display: block;
+            border: 0px;
+        }
+
+    }
+}
 
 .answer-source {
     font-size: 1rem;