updates

classes.py

@@ -7,7 +7,7 @@ import frontmatter
 from pathlib import Path
 from logger import logger
 from config import Config
-from jinja_env import env, content_item_template, index_template, categories_index_template
+from jinja_env import env, content_item_template, index_template
 
 class ContentItem:
     def render_content(self):
@@ -124,7 +124,7 @@ class Site:
         self.output_dir.mkdir()
 
         # Create public subdirs
-        subdirs = [self.images_dir, self.css_dir, self.js_dir, self.content_dir]
+        subdirs = [self.images_dir, self.css_dir, self.js_dir, self.content_dir, "categories"]
         for subdir in subdirs:
             subdir = self.output_dir / subdir
             subdir.mkdir(parents=True, exist_ok=True)
@@ -147,6 +147,14 @@ class Site:
         with (self.output_dir / "index.html").open("w", encoding="utf-8") as f:
             f.write(index_template.render(page_title = Config.MAIN_PAGE_TITLE, content_items=self.content_items, categories = self.categories))
 
+        # Render the categories indices
+        for category in self.categories:
+            category_index = Path(f"{self.output_dir}/categories/{category}.html")
+            category_items = [i for i in self.content_items if category in i.data.get("categories")]
+            with (category_index).open(mode="w", encoding="utf-8") as f:
+                f.write(index_template.render(page_title=category, content_items=category_items, categories = self.categories))
+
+
         # Render the about file
         about_content = ContentItem(Path('static/about.md'))
         about_content.parse_content()

templates/index.html

@@ -1,14 +1,19 @@
 
 {% extends "default.html" %}
 
+{% block head_includes %}
+
+{% endblock %}
+
 {% block menu_links %}
             <a href="index.html">Home</a>
+            <a id="categories_toggle" href="#">Categories</a>
             <a href="static/about.html">About</a>
 {% endblock %}
 
 {% block content %}
 <div class="container">
-  <div class="row justify-content-around" style="margin-left: auto; margin-right: auto;">
+  <div id="categories_menu" class="row justify-content-around mx-auto" style="visibility: hidden">
     {% for category in categories %}
       <a href="categories/{{ category }}.html" class="mx-2">{{ category }}</a>
     {% endfor %}
@@ -38,3 +43,18 @@
 
 
 {% endblock %}
+
+{% block footer_includes %}
+<script defer>
+  document.getElementById("categories_toggle").onclick = function() {
+    categories_menu_item = document.getElementById("categories_menu")
+    console.log(categories_menu_item.style.visibility)
+    if (categories_menu_item.style.visibility == "hidden") {
+      categories_menu_item.style.visibility = "visible"
+    }
+    else {
+      categories_menu_item.style.visibility = "hidden"
+    }
+  }
+</script>
+{% endblock %}