Use <details> for FAQ, add tags

Resolves #4.
techmino-hub · Apr 28, 2024 · 049a6bb · 049a6bb
1 parent 105494a
commit 049a6bb
Show file tree

Hide file tree

Showing 5 changed files with 223 additions and 922 deletions.
diff --git a/.github/scripts/generate_faq_html.py b/.github/scripts/generate_faq_html.py
@@ -9,23 +9,58 @@
 faq_html_template_location  = "data/faq-template.html"
 faq_html_output_location    = "faq.html"
 template_insertion_location = "<INSERT_QUESTIONS>"
+tags_map = {
+    "techmino": "<span class=\"tag techmino\">Techmino</span>",
+    "galaxy": "<span class=\"tag galaxy\">Tech. Galaxy</span>",
+    "linux": "<span class=\"tag linux\">Linux</span>",
+    "apple": "<span class=\"tag apple\">Mac/iOS</span>",
+    "multiplayer": "<span class=\"tag multiplayer\">Multiplayer</span>",
+    "error": "<span class=\"tag error\">Error</span>",
+    "bot": "<span class=\"tag bot\">ColdClear/9S</span>"
+}
+
+# Sample question
+# <details class="question" name="faq">
+#     <summary>
+#         Question
+#         <span class="tags">
+#             <span class="tag techmino">Techmino</span>
+#             <span class="tag galaxy">Galaxy</span>
+#             <span class="tag linux">Linux</span>
+#             <span class="tag apple">Mac/iOS</span>
+#             <span class="tag multiplayer">Multiplayer</span>
+#             <span class="tag error">Error</span>
+#             <span class="tag bot">ColdClear/9S</span>
+#         </span>
+#     </summary>
+#     <article>
+#         <p>Answer</p>
+#         <div class="answer-source">— I made it up</div>
+#     </article>
+# </details>
+
+def tags_html(entry):
+    tags = entry['tags']
+    tags_html = ""
+    for tag in tags:
+        if tag in tags_map:
+            tags_html += tags_map[tag]
+    return tags_html
 
 def faq_html(entry):
     return f"""
-    <div class="question">
-        <button class="question-header">
-            <div class="question-icon-container">
-                <svg class="question-icon" viewBox="0 0 24 24">
-                    <path fill="currentColor" d="M7 14l5-5 5 5z"></path>
-                </svg>
-            </div>
-            <h2 class="question-title">{entry['question']}</h2>
-        </button>
-        <div class="answer">
+    <details class="question" name="faq">
+        <summary>
+            {entry['question']}
+            <span class="tags">
+                {tags_html(entry)}
+            </span>
+        </summary>
+        <article>
             {entry['answerHTML']}
             <div class="answer-source">— {entry['author']}</div>
-        </div>
-    </div>
+        </article>
+    </details>
     """
 
 faq = yaml.load(open(faq_yaml_location, "r", encoding="utf-8"),Loader=_Loader)

diff --git a/data/faq-template.html b/data/faq-template.html
@@ -57,20 +57,24 @@ <h5 class="center-text" id="last-updated"></h5>
                 <!-- Do not edit the below line! It will be replaced by the faq generator. -->
                 <INSERT_QUESTIONS>
                 <!-- Sample question
-                    <div class="question">
-                        <button class="question-header">
-                            <div class="question-icon-container">
-                                <svg class="question-icon" viewBox="0 0 24 24">
-                                    <path fill="currentColor" d="M7 14l5-5 5 5z"></path>
-                                </svg>
-                            </div>
-                            <h2 class="question-title">Question</h2>
-                        </button>
-                        <div class="answer">
+                    <details class="question" name="faq">
+                        <summary>
+                            Question
+                            <span class="tags">
+                                <span class="tag techmino">Techmino</span>
+                                <span class="tag galaxy">Galaxy</span>
+                                <span class="tag linux">Linux</span>
+                                <span class="tag apple">Mac/iOS</span>
+                                <span class="tag multiplayer">Multiplayer</span>
+                                <span class="tag error">Error</span>
+                                <span class="tag bot">ColdClear/9S</span>
+                            </span>
+                        </summary>
+                        <article>
                             <p>Answer</p>
                             <div class="answer-source">— I made it up</div>
-                        </div>
-                    </div>
+                        </article>
+                    </details>
                 -->
             </section>
         </section>