Refactor common HTML into a base template.

4 files changed, 88 insertions, 108 deletions

diff --git a/pydis_site/apps/content/views/page_category.py b/pydis_site/apps/content/views/page_category.py
index 7e8fe07d..623c2596 100644
--- a/pydis_site/apps/content/views/page_category.py
+++ b/pydis_site/apps/content/views/page_category.py
@@ -35,12 +35,17 @@ class PageOrCategoryView(TemplateView):
 
         if self.full_location.is_dir():
             context["categories"] = utils.get_categories(self.full_location)
-            context["category_info"] = utils.get_category(self.full_location)
+            category = utils.get_category(self.full_location)
+            context["category_info"] = category
+            context["page_title"] = category["name"]
+            context["page_description"] = category["description"]
             context["content"] = utils.get_pages(self.full_location)
             context["path"] = f"{self.location}/"  # Add trailing slash here to simplify template
         elif self.full_location.with_suffix(".md").is_file():
             page_result = utils.get_page(self.full_location.with_suffix(".md"))
             context["page"] = page_result
+            context["page_title"] = page_result["metadata"]["title"]
+            context["page_description"] = page_result["metadata"]["description"]
             context["relevant_links"] = page_result["metadata"].get("relevant_links", {})
         else:
             raise Http404
diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html
new file mode 100644
index 00000000..1508dfb3
--- /dev/null
+++ b/pydis_site/templates/content/base.html
@@ -0,0 +1,36 @@
+{% extends 'base/base.html' %}
+{% load static %}
+
+{% block title %}{{ page_title }}{% endblock %}
+{% block head %}
+<meta property="og:title" content="Python Discord - {{ page_title }}" />
+    <meta property="og:type" content="website" />
+    <meta property="og:description" content="{{ page_description }}" />
+    <link rel="stylesheet" href="{% static "css/content/page.css" %}">
+{% endblock %}
+
+{% block content %}
+    {% include "base/navbar.html" %}
+
+    <section class="breadcrumb-section section">
+        <div class="container">
+            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
+                <ul>
+                    {% for item in breadcrumb_items %}
+                        <li><a href="{% url "content:page_category" location=item.path %}">{{ item.name }}</a></li>
+                    {% endfor %}
+                    <li class="is-active"><a href="#">{{ page_title }}</a></li>
+                </ul>
+            </nav>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <div class="content">
+                <h1 class="title">{{ page_title }}</h1>
+                {% block page_content %}{% endblock %}
+            </div>
+        </div>
+    </section>
+{% endblock %}
diff --git a/pydis_site/templates/content/listing.html b/pydis_site/templates/content/listing.html
index 6c84a38c..9271f3ab 100644
--- a/pydis_site/templates/content/listing.html
+++ b/pydis_site/templates/content/listing.html
@@ -1,59 +1,27 @@
-{% extends 'base/base.html' %}
-{% load static %}
+{% extends 'content/base.html' %}
 
-{% block title %}{{ category_info.name|default:"Pages" }}{% endblock %}
-{% block head %}
-    <meta property="og:title" content="Python Discord - {{ category_info.name|default:"Pages" }}" />
-    <meta property="og:type" content="website" />
-    <meta property="og:description" content="{{ category_info.description }}" />
-    <link rel="stylesheet" href="{% static "css/content/page.css" %}">
-{% endblock %}
-
-{% block content %}
-    {% include "base/navbar.html" %}
+{% block page_content %}
+    {% for category, data in categories.items %}
+        <div class="box" style="max-width: 800px;">
+            <span class="icon is-size-4 is-medium">
+                <i class="fas fa-folder is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
+            </span>
 
-    <section class="breadcrumb-section section">
-        <div class="container">
-            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
-                <ul>
-                    {% for item in breadcrumb_items %}
-                        <li><a href="{% url "content:page_category" location=item.path %}">{{ item.name }}</a></li>
-                    {% endfor %}
-                    <li class="is-active"><a href="#">{{ category_info.name }}</a></li>
-                </ul>
-            </nav>
+            <a href="{% url "content:page_category" location=path|add:category %}">
+                <span class="is-size-4 has-text-weight-bold">{{ data.name }}</span>
+            </a>
+            <p class="is-italic">{{ data.description }}</p>
         </div>
-    </section>
-
-    <section class="section">
-        <div class="container">
-            <div class="content">
-                <h1>{{ category_info.name|default:"Pages" }}</h1>
-                {% for category, data in categories.items %}
-                    <div class="box" style="max-width: 800px;">
-                        <span class="icon is-size-4 is-medium">
-                            <i class="fas fa-folder is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
-                        </span>
-
-
-                        <a href="{% url "content:page_category" location=path|add:category %}">
-                            <span class="is-size-4 has-text-weight-bold">{{ data.name }}</span>
-                        </a>
-                        <p class="is-italic">{{ data.description }}</p>
-                    </div>
-                {% endfor %}
-                {% for page, data in content.items %}
-                    <div class="box" style="max-width: 800px;">
-                        <span class="icon is-size-4 is-medium">
-                            <i class="{{ data.icon_class|default:"fab" }} {{ data.icon|default:"fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
-                        </span>
-                        <a href="{% url "content:page_category" location=path|add:page %}">
-                                <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span>
-                        </a>
-                        <p class="is-italic">{{ data.description }}</p>
-                    </div>
-                {% endfor %}
-            </div>
+    {% endfor %}
+    {% for page, data in content.items %}
+        <div class="box" style="max-width: 800px;">
+            <span class="icon is-size-4 is-medium">
+                <i class="{{ data.icon_class|default:"fab" }} {{ data.icon|default:"fa-python" }} is-size-3 is-black has-icon-padding" aria-hidden="true"></i>
+            </span>
+            <a href="{% url "content:page_category" location=path|add:page %}">
+                <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span>
+            </a>
+            <p class="is-italic">{{ data.description }}</p>
         </div>
-    </section>
+    {% endfor %}
 {% endblock %}
diff --git a/pydis_site/templates/content/page.html b/pydis_site/templates/content/page.html
index c3b2285b..2b366e50 100644
--- a/pydis_site/templates/content/page.html
+++ b/pydis_site/templates/content/page.html
@@ -1,60 +1,31 @@
-{% extends 'base/base.html' %}
-{% load static %}
+{% extends 'content/base.html' %}
 
-{% block title %}{{ page.metadata.title }}{% endblock %}
 {% block head %}
-  <meta property="og:title" content="Python Discord - {{ page.metadata.title }}" />
-  <meta property="og:type" content="website" />
-  <meta property="og:description" content="{{ page.metadata.description }}" />
-  <link rel="stylesheet" href="{% static "css/content/page.css" %}">
-  <link rel="stylesheet"
-    href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/atom-one-dark-reasonable.min.css">
-  <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
-  <script>hljs.initHighlightingOnLoad();</script>
+    {{ block.super }}
+    <link rel="stylesheet"
+      href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/atom-one-dark-reasonable.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
 {% endblock %}
 
-{% block content %}
-    {% include "base/navbar.html" %}
-
-    <section class="breadcrumb-section section">
-        <div class="container">
-            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
-                <ul>
-                    {% for item in breadcrumb_items %}
-                        <li><a href="{% url "content:page_category" location=item.path %}">{{ item.name }}</a></li>
-                    {% endfor %}
-                    <li class="is-active"><a href="#">{{ page.metadata.title }}</a></li>
-                </ul>
-            </nav>
-        </div>
-    </section>
-
-    <section class="section">
-        <div class="content">
-            <div class="container">
-                <h1 class="title">{{ page.metadata.title }}</h1>
-
-                {% if relevant_links|length > 0 %}
-                    <div class="columns is-variable is-8">
-                        <div class="column is-two-thirds">
-                            {{ page.page|safe }}
-                        </div>
-                        <div class="column">
-                            <div class="box">
-                                <p class="menu-label">Relevant links</p>
-                                <ul class="menu-list">
-                                    {% for value, link in relevant_links.items %}
-                                        <li><a class="has-text-link" href="{{link}}">{{ value }}</a></li>
-                                    {% endfor %}
-                                </ul>
-                            </div>
-                        </div>
-                    </div>
-                {% else %}
-                    <div>{{ page.page|safe }}</div>
-                {% endif %}
+{% block page_content %}
+    {% if relevant_links|length > 0 %}
+        <div class="columns is-variable is-8">
+            <div class="column is-two-thirds">
+                {{ page.page|safe }}
+            </div>
+            <div class="column">
+                <div class="box">
+                    <p class="menu-label">Relevant links</p>
+                    <ul class="menu-list">
+                        {% for value, link in relevant_links.items %}
+                            <li><a class="has-text-link" href="{{link}}">{{ value }}</a></li>
+                        {% endfor %}
+                    </ul>
+                </div>
             </div>
         </div>
-    </section>
-
+    {% else %}
+        <div>{{ page.page|safe }}</div>
+    {% endif %}
 {% endblock %}