Add a dropdown menu listing direct children.

This only shows when the page is also a category, since regular pages
have no children and regular categories already list their children.

7 files changed, 75 insertions, 1 deletions

diff --git a/pydis_site/apps/content/templatetags/__init__.py b/pydis_site/apps/content/templatetags/__init__.py
new file mode 100644
index 00000000..e69de29b
--- /dev/null
+++ b/pydis_site/apps/content/templatetags/__init__.py
diff --git a/pydis_site/apps/content/templatetags/str_methods.py b/pydis_site/apps/content/templatetags/str_methods.py
new file mode 100644
index 00000000..91db3e72
--- /dev/null
+++ b/pydis_site/apps/content/templatetags/str_methods.py
@@ -0,0 +1,21 @@
+from django import template
+from django.template.defaultfilters import stringfilter
+
+register = template.Library()
+
+
[email protected](is_safe=True)
+@stringfilter
+def replace_hyphens(value: str, replacement: str) -> str:
+    """
+    Simple filter to replace hyphens with the specified replacement string.
+
+    Usage:
+
+    ```django
+        {% for name_with_hyphens in name_list %}
+            {{ name_with_hyphens|replace_hyphen:" " }}
+        {% endfor %}
+    ```
+    """
+    return value.replace("-", replacement)
diff --git a/pydis_site/apps/content/tests/test_templatetags.py b/pydis_site/apps/content/tests/test_templatetags.py
new file mode 100644
index 00000000..1147bd88
--- /dev/null
+++ b/pydis_site/apps/content/tests/test_templatetags.py
@@ -0,0 +1,12 @@
+from django.test import TestCase
+
+from pydis_site.apps.content.templatetags.str_methods import replace_hyphens
+
+
+class TestTemplateTags(TestCase):
+    """Tests for the custom template tags in the content app."""
+
+    def test_replace_hyphens(self):
+        self.assertEquals(replace_hyphens("word-with-hyphens", " "), "word with hyphens")
+        self.assertEquals(replace_hyphens("---", ""), "")
+        self.assertEquals(replace_hyphens("hi----", "A"), "hiAAAA")
diff --git a/pydis_site/apps/content/tests/test_views.py b/pydis_site/apps/content/tests/test_views.py
index ab266b29..cd0d0bf7 100644
--- a/pydis_site/apps/content/tests/test_views.py
+++ b/pydis_site/apps/content/tests/test_views.py
@@ -160,7 +160,8 @@ class PageOrCategoryViewTests(MockPagesTestCase, SimpleTestCase, TestCase):
             "page": PARSED_HTML,
             "page_title": PARSED_METADATA["title"],
             "page_description": PARSED_METADATA["description"],
-            "relevant_links": PARSED_METADATA["relevant_links"]
+            "relevant_links": PARSED_METADATA["relevant_links"],
+            "subarticles": ["category"]
         }
         for key, expected_value in expected_page_context.items():
             with self.subTest():
diff --git a/pydis_site/apps/content/views/page_category.py b/pydis_site/apps/content/views/page_category.py
index 8783e33f..bb2c07cc 100644
--- a/pydis_site/apps/content/views/page_category.py
+++ b/pydis_site/apps/content/views/page_category.py
@@ -47,6 +47,13 @@ class PageOrCategoryView(TemplateView):
         else:
             raise Http404
 
+        # Add subarticle information for dropdown menu if the page is also a category
+        if self.page_path.is_file() and self.category_path.is_dir():
+            context["subarticles"] = [
+                path.stem for path in self.category_path.iterdir()
+                if path.suffix != ".yml"
+            ]
+
         context["breadcrumb_items"] = [
             {
                 "name": utils.get_category(settings.PAGES_PATH / location)["title"],
diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html
index 19eec5d4..21895479 100644
--- a/pydis_site/templates/content/base.html
+++ b/pydis_site/templates/content/base.html
@@ -14,6 +14,7 @@
 
     <section class="breadcrumb-section section">
         <div class="container">
+            {# Article breadcrumb #}
             <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
                 <ul>
                     {% for item in breadcrumb_items %}
@@ -22,6 +23,10 @@
                     <li class="is-active"><a href="#">{{ page_title }}</a></li>
                 </ul>
             </nav>
+            {# Sub-Article dropdown for category pages #}
+            {% if subarticles %}
+                {% include "content/dropdown.html" %}
+            {% endif %}
         </div>
     </section>
 
diff --git a/pydis_site/templates/content/dropdown.html b/pydis_site/templates/content/dropdown.html
new file mode 100644
index 00000000..711be113
--- /dev/null
+++ b/pydis_site/templates/content/dropdown.html
@@ -0,0 +1,28 @@
+{% load str_methods %}
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const dropdown = document.querySelector(".dropdown");
+        dropdown.addEventListener("click", () => {
+            dropdown.classList.toggle("is-active");
+        })
+    });
+</script>
+
+<div class="dropdown is-pulled-right is-right">
+    <div class="dropdown-trigger">
+        <a aria-haspopup="true" aria-controls="subarticle-menu">
+            <span>Sub-Articles</span>
+            <span class="icon is-small">
+                <i class="fas fa-angle-down" aria-hidden="true"></i>
+            </span>
+        </a>
+    </div>
+    <div class="dropdown-menu" id="subarticle-menu" role="menu">
+        <div class="dropdown-content">
+            {% for page in subarticles|dictsort:0 %}
+                <a href="{{page}}" class="dropdown-item">{{ page.title|replace_hyphens:" " }}</a>
+            {% endfor %}
+        </div>
+    </div>
+</div>