Merge pull request #421 from ks129/resources-lists

Dewikification - Display resources based on YAML files

4 files changed, 105 insertions, 7 deletions

diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
new file mode 100644
index 00000000..af7c8d65
--- /dev/null
+++ b/pydis_site/templates/resources/resource_box.html
@@ -0,0 +1,22 @@
+{% load as_icon %}
+
+<div class="box" style="max-width: 800px;">
+    {% if 'title_url' in resource %}
+        <a href="{{ resource.title_url }}">
+            {% include "resources/resource_box_header.html" %}
+        </a>
+    {% else %}
+        {% include "resources/resource_box_header.html" %}
+    {% endif %}
+
+    <p class="is-italic">{{ resource.description|safe }}</p>
+
+    {# Icons #}
+    {% for icon in resource.urls %}
+        <span class="icon is-size-4 is-medium" style="margin: 5px;">
+            <a href="{{ icon.url }}">
+                <i class="{{ icon.icon|as_icon }} is-size-3 resource-icon is-{{ icon.color }}"></i>
+            </a>
+        </span>
+    {% endfor %}
+</div>
diff --git a/pydis_site/templates/resources/resource_box_header.html b/pydis_site/templates/resources/resource_box_header.html
new file mode 100644
index 00000000..84e1a79b
--- /dev/null
+++ b/pydis_site/templates/resources/resource_box_header.html
@@ -0,0 +1,24 @@
+{% load as_icon %}
+
+{# Icon section #}
+{% if 'icon_image' in resource %}
+    <img src="{{ resource.icon_image }}" alt="" style="height: {{ resource.icon_size|default:30 }}px;">
+{% elif 'title_icon' in resource %}
+    <span class="icon is-size-4 is-medium">
+        <i class="{{ resource.title_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ resource.title_icon_color }}"></i>
+    </span>
+{% elif 'default_icon' in category_info %}
+    <span class="icon is-size-4 is-medium">
+        <i class="{{ category_info.default_icon|as_icon }} is-size-3 resource-icon has-icon-padding is-{{ category_info.default_icon_color }}"></i>
+    </span>
+{% endif %}
+
+{# Title section #}
+<span class="is-size-4 has-text-weight-bold">
+    {% if 'title_image' in resource %}
+        <img src="{{ resource.title_image }}" alt="" style="height: 50px; {{ resource.title_image_style }}">
+    {% endif %}
+    {% if 'name' in resource %}
+        {{ resource.name }}
+    {% endif %}
+</span>
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 491bc55e..f1f487cf 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -24,7 +24,7 @@
 
                   <div class="tile is-vertical is-9">
                       <div class="tile">
-                          <a class="tile is-8 is-parent" href="/resources/reading/">
+                          <a class="tile is-8 is-parent" href="{% url "resources:resources" category="reading" %}">
                               <article class="tile is-child box hero is-black" id="readingBlock">
                                   <p class="title is-size-1"><i class="fad fa-book-alt" aria-hidden="true"></i> Read</p>
                                   <p class="subtitle is-size-4">Lovingly curated books to explore</p>
@@ -32,7 +32,7 @@
                           </a>
 
                           <div class="tile">
-                              <a class="tile is-parent" href="/resources/videos/">
+                              <a class="tile is-parent" href="{% url "resources:resources" category="videos" %}">
                                   <article class="tile is-child box hero is-danger is-bold">
                                       <p class="title is-size-1"><i class="fad fa-video" aria-hidden="true"></i> Watch</p>
                                       <p class="subtitle is-size-4">Visually engaging</p>
@@ -42,13 +42,13 @@
                       </div>
 
                       <div class="tile">
-                          <a class="tile is-parent" href="/resources/interactive/">
+                          <a class="tile is-parent" href="{% url "resources:resources" category="interactive" %}">
                               <article class="tile is-child box hero is-black" id="interactiveBlock">
                                   <p class="title is-size-1"><i class="fad fa-code" aria-hidden="true"></i> Try</p>
                                   <p class="subtitle is-size-4">Interactively discover the possibilities</p>
                               </article>
                           </a>
-                          <a class="tile is-8 is-parent" href="/resources/courses/">
+                          <a class="tile is-8 is-parent" href="{% url "resources:resources" category="courses" %}">
                               <article class="tile is-child box hero is-success is-bold">
                                   <p class="title is-size-1"><i class="fad fa-graduation-cap" aria-hidden="true"></i> Learn</p>
                                   <p class="subtitle is-size-4">Structured courses with clear goals</p>
@@ -61,14 +61,14 @@
               <div class="tile is-ancestor">
                   <div class="tile is-vertical is-9">
                       <div class="tile">
-                          <a class="tile is-8 is-parent" href="/resources/communities/">
+                          <a class="tile is-8 is-parent" href="{% url "resources:resources" category="communities" %}">
                               <article class="tile is-child box hero is-black" id="communitiesBlock">
                                   <p class="title is-size-1"><i class="fad fa-users" aria-hidden="true"></i> Communities</p>
                                   <p class="subtitle is-size-4">Some of our best friends</p>
                               </article>
                           </a>
                           <div class="tile">
-                              <a class="tile is-parent" href="/resources/podcasts/">
+                              <a class="tile is-parent" href="{% url "resources:resources" category="podcasts" %}">
                                   <article class="tile is-child box hero is-black" id="podcastsBlock">
                                       <p class="title is-size-1"><i class="fad fa-podcast" aria-hidden="true"></i> Listen</p>
                                       <p class="subtitle is-size-4">Regular podcasts to follow</p>
@@ -77,7 +77,7 @@
                           </div>
                       </div>
                   </div>
-                  <a class="tile is-parent" href="/resources/tools/">
+                  <a class="tile is-parent" href="{% url "resources:resources" category="tools" %}">
                       <article class="tile is-child box hero is-dark">
                           <p class="title is-size-1"><i class="fad fa-tools" aria-hidden="true"></i> Tools</p>
                           <p class="subtitle is-size-4">Things we love to use</p>
diff --git a/pydis_site/templates/resources/resources_list.html b/pydis_site/templates/resources/resources_list.html
new file mode 100644
index 00000000..e2be3cb7
--- /dev/null
+++ b/pydis_site/templates/resources/resources_list.html
@@ -0,0 +1,52 @@
+{% extends "base/base.html" %}
+{% load as_icon %}
+{% load static %}
+
+{% block title %}{{ category_info.name }}{% endblock %}
+{% block head %}
+    <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
+{% endblock %}
+
+{% block content %}
+    {% include "base/navbar.html" %}
+
+    <section class="section breadcrumb-section">
+        <div class="container">
+            <nav class="breadcrumb is-pulled-left" aria-label="breadcrumbs">
+                <ul>
+                    <li><a href="{% url "resources:index" %}">Resources</a></li>
+                    <li class="is-active"><a href="#">{{ category_info.name }}</a></li>
+                </ul>
+            </nav>
+        </div>
+    </section>
+
+    <section class="section">
+        <div class="container">
+            <div class="content">
+                <h1>{{ category_info.name }}</h1>
+                <p>{{ category_info.description|safe }}</p>
+                <div>
+                    {% for resource in resources|dictsort:"position" %}
+                        {% include "resources/resource_box.html" %}
+                    {% endfor %}
+
+                    {% for subcategory in subcategories|dictsort:"category_info.position" %}
+                        <h2 id="{{ subcategory.category_info.raw_name }}">
+                            <a href="{% url "resources:resources" category=category_info.raw_name %}#{{ subcategory.category_info.raw_name }}">
+                                {{ subcategory.category_info.name }}
+                            </a>
+                        </h2>
+                        <p>{{ subcategory.category_info.description|safe }}</p>
+
+                        {% for resource in subcategory.resources|dictsort:"position" %}
+                            {% with category_info=subcategory.category_info %}
+                                {% include "resources/resource_box.html" %}
+                            {% endwith %}
+                        {% endfor %}
+                    {% endfor %}
+                </div>
+            </div>
+        </div>
+    </section>
+{% endblock %}