From fbe32815927c41f55deedaac4f795e147796f3a4 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 23 Jan 2022 13:33:40 +0100
Subject: Move evil <script> tag into a .js file.

---
 pydis_site/static/js/resources.js | 48 +++++++++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 pydis_site/static/js/resources.js

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
new file mode 100644
index 00000000..5c353f97
--- /dev/null
+++ b/pydis_site/static/js/resources.js
@@ -0,0 +1,48 @@
+"use strict";
+const initialParams = new URLSearchParams(window.location.search);
+const checkboxOptions = ['topic', 'type', 'payment', 'complexity'];
+
+const createQuerySelect = (opt) => {
+    return "input[name=" + opt + "]"
+}
+
+checkboxOptions.forEach((option) => {
+    document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+        if (initialParams.get(option).includes(checkbox.value)) {
+            checkbox.checked = true
+        }
+    });
+});
+
+function buildQueryParams() {
+    let params = new URLSearchParams(window.location.search);
+    checkboxOptions.forEach((option) => {
+        let tempOut = ""
+        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+            if (checkbox.checked) {
+                tempOut += checkbox.value + ",";
+            }
+        });
+        params.set(option, tempOut);
+    });
+
+    window.location.search = params;
+}
+
+function clearQueryParams() {
+    checkboxOptions.forEach((option) => {
+        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+            checkbox.checked = false;
+        });
+    });
+}
+
+function selectAllQueryParams(column) {
+    checkboxOptions.forEach((option) => {
+        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+            if (checkbox.className == column) {
+                checkbox.checked = true;
+            }
+        });
+    });
+}
-- 
cgit v1.2.3


From 5f214647521a93fa6cb54fcac7d4e1ae66fb7cec Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Thu, 27 Jan 2022 10:23:11 +0100
Subject: Resource filtering on the client, pt 1.

Here's the initial version of this system. We've got filtering,
but only by clicking checkboxes. The overall look and style are
pretty close to where we want them, but it's missing tons of
polish to be complete. The following commits will contain that polish.
---
 pydis_site/apps/resources/views/resources.py  | 125 ++++++++++++-----
 pydis_site/static/css/resources/resources.css |  48 +++----
 pydis_site/static/js/resources.js             | 178 +++++++++++++++++++-----
 pydis_site/templates/resources/resources.html | 192 ++++++++++----------------
 4 files changed, 336 insertions(+), 207 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index de6b2dac..57cb4f71 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -1,40 +1,103 @@
+from pathlib import Path
+
+import yaml
+from django.core.handlers.wsgi import WSGIRequest
 from django.http import HttpRequest, HttpResponse
 from django.shortcuts import render
+from django.views import View
 
-from pydis_site.apps.resources.resource_search import RESOURCE_TABLE, get_resources_from_search
+from pydis_site import settings
 
-RESOURCE_META_TAGS = {k: set(v) for k, v in RESOURCE_TABLE.items()}
+RESOURCES_PATH = Path(settings.BASE_DIR, "pydis_site", "apps", "resources", "resources")
 
 
-def _parse_checkbox_options(options: str) -> set[str]:
-    """Split up the comma separated query parameters for checkbox options into a list."""
-    return set(options.split(",")[:-1])
+class ResourceView(View):
+    """Our curated list of good learning resources."""
 
+    def __init__(self, *args, **kwargs):
+        """Set up all the resources."""
+        super().__init__(*args, **kwargs)
 
-def resource_view(request: HttpRequest) -> HttpResponse:
-    """View for resources index page."""
-    checkbox_options = {
-        option: _parse_checkbox_options(request.GET.get(url_param, ""))
-        for option, url_param in (
-            ('topics', 'topic'),
-            ('type', 'type'),
-            ('payment_tiers', 'payment'),
-            ('complexity', 'complexity'),
-        )
-    }
-
-    topics = sorted(RESOURCE_META_TAGS.get("topics"))
-
-    return render(
-        request,
-        template_name="resources/resources.html",
-        context={
-            "checkboxOptions": checkbox_options,
-            "topics_1": topics[:len(topics) // 2],
-            "topics_2": topics[len(topics) // 2:],
-            "tag_types": sorted(RESOURCE_META_TAGS.get("type")),
-            "payment_tiers": sorted(RESOURCE_META_TAGS.get("payment_tiers")),
-            "complexities": sorted(RESOURCE_META_TAGS.get("complexity")),
-            "resources": get_resources_from_search(checkbox_options)
+        # Load the resources from the yaml files in /resources/
+        self.resources = {
+            path.stem: yaml.safe_load(path.read_text())
+            for path in RESOURCES_PATH.rglob("*.yaml")
+        }
+
+        # Parse out all current tags
+        resource_tags = {
+            "topics": set(),
+            "payment_tiers": set(),
+            "complexity": set(),
+            "type": set(),
         }
-    )
+        for resource_name, resource in self.resources.items():
+            css_classes = []
+            for tag_type in resource_tags.keys():
+                # Store the tags into `resource_tags`
+                tags = resource.get("tags", {}).get(tag_type, [])
+                for tag in tags:
+                    tag = tag.title()
+                    tag = tag.replace("And", "and")
+                    resource_tags[tag_type].add(tag)
+
+                # Make a CSS class friendly representation too, while we're already iterating.
+                for tag in tags:
+                    css_tag = f"{tag_type}-{tag}"
+                    css_tag = css_tag.replace("_", "-")
+                    css_tag = css_tag.replace(" ", "-")
+                    css_classes.append(css_tag)
+
+            # Now add the css classes back to the resource, so we can use them in the template.
+            self.resources[resource_name]["css_classes"] = " ".join(css_classes)
+
+        # Set up all the filter checkbox metadata
+        self.filters = {
+            "Complexity": {
+                "filters": sorted(resource_tags.get("complexity")),
+                "icon": "fas fa-brain",
+                "hidden": False,
+            },
+            "Type": {
+                "filters": sorted(resource_tags.get("type")),
+                "icon": "fas fa-photo-video",
+                "hidden": False,
+            },
+            "Payment tiers": {
+                "filters": sorted(resource_tags.get("payment_tiers")),
+                "icon": "fas fa-dollar-sign",
+                "hidden": True,
+            },
+            "Topics": {
+                "filters": sorted(resource_tags.get("topics")),
+                "icon": "fas fa-lightbulb",
+                "hidden": True,
+            }
+        }
+
+    @staticmethod
+    def _get_filter_options(request: WSGIRequest) -> dict[str, set]:
+        """Get the requested filter options out of the request object."""
+        return {
+            option: set(request.GET.get(url_param, "").split(",")[:-1])
+            for option, url_param in (
+                ('topics', 'topics'),
+                ('type', 'type'),
+                ('payment_tiers', 'payment'),
+                ('complexity', 'complexity'),
+            )
+        }
+
+    def get(self, request: WSGIRequest) -> HttpResponse:
+        """List out all the resources, and any filtering options from the URL."""
+        filter_options = self._get_filter_options(request)
+
+        return render(
+            request,
+            template_name="resources/resources.html",
+            context={
+                "resources": self.resources,
+                "filters": self.filters,
+                "filter_options": filter_options,
+            }
+        )
diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 488effc3..f70cbd64 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,29 +1,27 @@
-/*.box, .tile.is-parent {*/
-/*    transition: 0.1s ease-out;*/
-/*}*/
-/*.box {*/
-/*    min-height: 15vh;*/
-/*}*/
-/*.tile.is-parent:hover .box {*/
-/*    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);*/
-/*}*/
-/*.tile.is-parent:hover {*/
-/*    padding: 0.65rem 0.85rem 0.85rem 0.65rem;*/
-/*    filter: saturate(1.1) brightness(1.1);*/
-/*}*/
+/* Disable highlighting for all text in the filters. */
+.filter-checkbox,
+.filter-panel label,
+.card-header span {
+    user-select: none
+}
 
-/*#readingBlock {*/
-/*    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);*/
-/*}*/
+/* Remove pointless margin in panel header */
+#filter-panel-header {
+    margin-bottom: 0;
+}
 
-/*#interactiveBlock {*/
-/*    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);*/
-/*}*/
+/* Full width filter cards */
+#resource-filtering-panel .card .collapsible-content .card-content {
+    padding:0
+}
 
-/*#communitiesBlock {*/
-/*    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);*/
-/*}*/
+/* Disable clicking on the checkbox itself. */
+/* Instead, we want to let the anchor tag handle clicks. */
+.filter-checkbox {
+    pointer-events: none;
+}
 
-/*#podcastsBlock {*/
-/*    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);*/
-/*}*/
+/* Blurple category icons */
+i.is-primary {
+    color: #7289da;
+}
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index 5c353f97..dee59e52 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -1,48 +1,156 @@
 "use strict";
-const initialParams = new URLSearchParams(window.location.search);
-const checkboxOptions = ['topic', 'type', 'payment', 'complexity'];
 
-const createQuerySelect = (opt) => {
-    return "input[name=" + opt + "]"
-}
+// Filters that are currently selected
+var activeFilters = {
+    topics: [],
+    type: [],
+    "payment-tiers": [],
+    complexity: []
+};
 
-checkboxOptions.forEach((option) => {
-    document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-        if (initialParams.get(option).includes(checkbox.value)) {
-            checkbox.checked = true
-        }
-    });
-});
+/* Update the resources to match 'active_filters' */
+function update() {
+    let resources = $('.resource-box');
 
-function buildQueryParams() {
-    let params = new URLSearchParams(window.location.search);
-    checkboxOptions.forEach((option) => {
-        let tempOut = ""
-        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-            if (checkbox.checked) {
-                tempOut += checkbox.value + ",";
+    // If there's nothing in the filters, show everything and return.
+    if (
+        activeFilters.topics.length === 0 &&
+        activeFilters.type.length === 0 &&
+        activeFilters["payment-tiers"].length === 0 &&
+        activeFilters.complexity.length === 0
+    ) {
+        resources.show();
+        return;
+    }
+
+    // Otherwise, hide everything and then filter the resources to decide what to show.
+    resources.hide();
+    resources.filter(function() {
+        let validation = {
+            topics: false,
+            type: false,
+            'payment-tiers': false,
+            complexity: false
+        };
+        let resourceBox = $(this);
+
+        // Validate the filters
+        $.each(activeFilters, function(filterType, activeFilters) {
+            // If the filter list is empty, this passes validation.
+            if (activeFilters.length === 0) {
+                validation[filterType] = true;
+                return;
             }
+
+            // Otherwise, we need to check if one of the classes exist.
+            $.each(activeFilters, function(index, filter) {
+                if (resourceBox.hasClass(filter)) {
+                    validation[filterType] = true;
+                }
+            });
         });
-        params.set(option, tempOut);
-    });
 
-    window.location.search = params;
+        // If validation passes, show the resource.
+        if (Object.values(validation).every(Boolean)) {
+            return true;
+        } else {
+            return false;
+        }
+    }).show();
 }
 
-function clearQueryParams() {
-    checkboxOptions.forEach((option) => {
-        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-            checkbox.checked = false;
-        });
+// Executed when the page has finished loading.
+document.addEventListener("DOMContentLoaded", function () {
+
+    // If you collapse or uncollapse a filter group, swap the icon.
+    $('button.collapsible').click(function() {
+        let icon = $(this).find(".card-header-icon i");
+
+        if ($(icon).hasClass("fa-window-minimize")) {
+            $(icon).removeClass(["far", "fa-window-minimize"]);
+            $(icon).addClass(["fas", "fa-angle-down"]);
+        } else {
+            $(icon).removeClass(["fas", "fa-angle-down"]);
+            $(icon).addClass(["far", "fa-window-minimize"]);
+        }
+    });
+
+    // Update the filters on page load to reflect URL parameters.
+
+    // If you click on the div surrounding the filter checkbox, it clicks the checkbox.
+    $('.filter-panel').click(function() {
+        let checkbox = $(this).find(".filter-checkbox");
+        checkbox.prop("checked", !checkbox.prop("checked"));
+        checkbox.change();
     });
-}
 
-function selectAllQueryParams(column) {
-    checkboxOptions.forEach((option) => {
-        document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-            if (checkbox.className == column) {
-                checkbox.checked = true;
+    // When checkboxes are toggled, trigger a filter update.
+    $('.filter-checkbox').change(function () {
+        let filterItem = this.dataset.filterItem;
+        let filterName = this.dataset.filterName;
+        let cssClass = filterName + "-" + filterItem;
+        var filterIndex = activeFilters[filterName].indexOf(cssClass);
+
+        if (this.checked) {
+            if (filterIndex === -1) {
+                activeFilters[filterName].push(cssClass);
             }
-        });
+            update();
+        } else {
+            if (filterIndex !== -1) {
+                activeFilters[filterName].splice(filterIndex, 1);
+            }
+            update();
+        }
     });
-}
+});
+
+
+
+// const initialParams = new URLSearchParams(window.location.search);
+// const checkboxOptions = ['topic', 'type', 'payment', 'complexity'];
+//
+// const createQuerySelect = (opt) => {
+//     return "input[name=" + opt + "]"
+// }
+//
+// checkboxOptions.forEach((option) => {
+//     document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+//         if (initialParams.get(option).includes(checkbox.value)) {
+//             checkbox.checked = true
+//         }
+//     });
+// });
+//
+// function buildQueryParams() {
+//     let params = new URLSearchParams(window.location.search);
+//     checkboxOptions.forEach((option) => {
+//         let tempOut = ""
+//         document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+//             if (checkbox.checked) {
+//                 tempOut += checkbox.value + ",";
+//             }
+//         });
+//         params.set(option, tempOut);
+//     });
+//
+//     window.location.search = params;
+// }
+//
+// function clearQueryParams() {
+//     checkboxOptions.forEach((option) => {
+//         document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+//             checkbox.checked = false;
+//         });
+//     });
+// }
+//
+// function selectAllQueryParams(column) {
+//     checkboxOptions.forEach((option) => {
+//         document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
+//             if (checkbox.className == column) {
+//                 checkbox.checked = true;
+//             }
+//         });
+//     });
+// }
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 427f417e..77723a8f 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -1,146 +1,106 @@
 {% extends 'base/base.html' %}
 {% load as_icon %}
+{% load as_css_class %}
 {% load static %}
 
 {% block title %}Resources{% endblock %}
 {% block head %}
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script src="{% static "js/resources.js" %}"></script>
+    <script src="{% static "js/content/page.js" %}"></script>
     <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
     <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
+    <link rel="stylesheet" href="{% static "css/content/page.css" %}">
 {% endblock %}
 
 {% block content %}
     {% include "base/navbar.html" %}
-
-    <section class="section">
-        <div class="container">
+    {% if resources|length > 0 %}
+        <section class="section">
+            {#  Headline #}
             <div class="content">
                 <h1 class="resource-title has-text-centered">Resources</h1>
                 <hr/>
             </div>
-            <div class="panel is-hidden-mobile">
-                <p class="panel-heading has-text-centered">Search Options</p>
-
-                <div class="field">
-                    <div class="columns">
-                        <div class="column pl-6 is-two-fifths is-flex is-flex-direction-column">
-                            <div class="title is-5 pt-2 has-text-centered">Topic</div>
-                            <div class="columns">
-                                <div class="column">
-                                    {% for topic in topics_1 %}
-                                    <div class="field">
-                                        <label class="checkbox">
-                                            <input class="topic" name="topic" type="checkbox" value="{{ topic }}">
-                                            <span class="has-text-grey is-size-6">{{ topic }}</span>
-                                        </label>
-                                    </div>
-                                    {% endfor %}
-                                </div>
-                                <div class="column">
-                                    {% for topic in topics_2 %}
-                                    <div class="field">
-                                        <label class="checkbox">
-                                            <input class="topic" name="topic" type="checkbox" value="{{ topic }}">
-                                            <span class="has-text-grey is-size-6">{{ topic }}</span>
-                                        </label>
-                                    </div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
-                                <button onclick="selectAllQueryParams('topic')" class="button is-success is-small">Select All</button>
-                            </span>
-                        </div>
 
-                        <div class="column is-flex is-flex-direction-column pl-6">
-                            <div class="title is-5 pt-2 has-text-centered">Type</div>
+            <div class="columns is-centered">
+                {# Filtering toolbox #}
+                <div class="column is-one-third">
+                    <div class="content is-justify-content-center">
+                        <nav id="resource-filtering-panel" class="panel is-primary">
+                            <p class="panel-heading has-text-centered" id="filter-panel-header">Filters</p>
 
-                            {% for tag_type in tag_types %}
-                            <div class="field">
-                                <label class="checkbox ml-0">
-                                    <input class="type" name="type" type="checkbox" value="{{ tag_type }}">
-                                    <span class="has-text-grey is-size-6">{{ tag_type }}</span>
-                                </label>
-                            </div>
+                            {# Filter checkboxes #}
+                            {% for filter_name, filter_data in filters.items %}
+                                    <div class="card">
+                                        <button type="button" class="card-header collapsible">
+                                            <span class="card-header-title subtitle is-6 my-2 ml-2">
+                                                <i class="{{ filter_data.icon }} is-primary" aria-hidden="true"></i>&nbsp&nbsp{{ filter_name }}
+                                            </span>
+                                            <span class="card-header-icon">
+                                                {% if not filter_data.hidden %}
+                                                    <i class="far fa-window-minimize is-6 title" aria-hidden="true"></i>
+                                                {% else %}
+                                                    <i class="fas fa-angle-down is-6 title" aria-hidden="true"></i>
+                                                {% endif %}
+                                            </span>
+                                        </button>
+                                        {# Checkboxes #}
+                                        {% if filter_data.hidden %}
+                                            <div class="collapsible-content">
+                                        {% else %}
+                                            <div class="collapsible-content" style="max-height: 480px;">
+                                        {% endif %}
+                                            <div class="card-content">
+                                                {% for filter_item in filter_data.filters %}
+                                                    <a class="panel-block filter-panel">
+                                                        <label class="checkbox">
+                                                          <input
+                                                            class="filter-checkbox"
+                                                            type="checkbox"
+                                                            data-filter-name="{{ filter_name|as_css_class }}"
+                                                            data-filter-item="{{ filter_item|as_css_class }}"
+                                                          >
+                                                            {{ filter_item }}
+                                                        </label>
+                                                    </a>
+                                                {% endfor %}
+                                            </div>
+                                        </div>
+                                    </div>
                             {% endfor %}
-                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
-                                <button onclick="selectAllQueryParams('type')" class="button is-success is-small">Select All</button>
-                            </span>
-                        </div>
-
-                        <div class="column is-flex is-flex-direction-column pl-6">
-                            <div class="title is-5 pt-2 has-text-centered">Payment</div>
+                        </nav>
+                    </div>
+                </div>
 
-                            {% for payment_tier in payment_tiers %}
-                            <div class="field">
-                                <label class="checkbox ml-0">
-                                    <input class="payment" name="payment" type="checkbox" value="{{ payment_tier }}">
-                                     <span class="has-text-grey is-size-6">{{ payment_tier }}</span>
-                               </label>
-                            </div>
+                {# Actual resources #}
+                <div class="column is-two-thirds">
+                    <div class="content is-flex is-justify-content-center">
+                        <div>
+                            {% for resource in resources.values %}
+                                {% include "resources/resource_box.html" %}
                             {% endfor %}
-                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
-                                <button onclick="selectAllQueryParams('payment')" class="button is-success is-small">Select All</button>
-                            </span>
-                        </div>
 
-                        <div class="column is-flex is-flex-direction-column px-6">
-                            <div class="title is-5 pt-2 has-text-centered">Level</div>
+                            {% for subcategory in subcategories %}
+                                <h2 id="{{ subcategory.category_info.raw_name }}">
+                                    <a href="whatevenisthis#{{ subcategory.category_info.raw_name }}">
+                                        {{ subcategory.category_info.name }}
+                                    </a>
+                                </h2>
+                                <p>{{ subcategory.category_info.description|safe }}</p>
 
-                            {% for complexity in complexities %}
-                            <div class="field">
-                                <label class="checkbox ml-0">
-                                    <input class="complexity" name="complexity" type="checkbox" value="{{ complexity }}">
-                                    <span class="has-text-grey is-size-6">{{ complexity }}</span>
-                              </label>
-                            </div>
-                           {% endfor %}
-                            <span class="control ml-2 is-flex is-align-items-end is-justify-content-center mt-auto">
-                                <button onclick="selectAllQueryParams('complexity')" class="button is-success is-small">Select All</button>
-                            </span>
+                                {% for resource in subcategory.resources %}
+                                    {% with category_info=subcategory.category_info %}
+                                        {% include "resources/resource_box.html" %}
+                                    {% endwith %}
+                                {% endfor %}
+                            {% endfor %}
                         </div>
                     </div>
-
-                    <div class="is-flex is-justify-content-center pb-3">
-                        <span class="control mr-2">
-                            <button onclick="buildQueryParams()" class="button is-link is-small">Search</button>
-                        </span>
-
-                        <span class="is-one-fifth control is-flex is-align-items-end is-justify-content-end mt-auto">
-                            <button onclick="clearQueryParams()" class="button is-danger is-small">Clear Search</button>
-                        </span>
-                    </div>
-                </div>
-            </div>
-    </section>
-
-    {% if resources|length > 0 %}
-    <section class="section">
-        <div class="container">
-            <div class="content is-flex is-justify-content-center">
-                <div>
-                    {% for resource in resources %}
-                        {% include "resources/resource_box.html" %}
-                    {% endfor %}
-
-                    {% for subcategory in subcategories %}
-                        <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 %}
-                            {% with category_info=subcategory.category_info %}
-                                {% include "resources/resource_box.html" %}
-                            {% endwith %}
-                        {% endfor %}
-                    {% endfor %}
                 </div>
             </div>
-        </div>
-    </section>
+        </section>
     {% else %}
-    <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p>
+        <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p>
     {% endif %}
 {% endblock %}
-- 
cgit v1.2.3


From 4bd629b3d8b0fb5a1edd1c3aa30772094dc9deec Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Thu, 27 Jan 2022 12:39:19 +0100
Subject: Reflect and retain filter state in URL params.

This commits makes two important changes:
- Whenever we click on filter checkboxes, the URL is immediately updated
  to include parameters that represent the chosen options. For example,
  if you select Beginner complexity, the url is updated with
  ?complexity=beginner.
- Whenever the page is loaded, we deserialize any parameters that exist
  in the URL and change the filter state to match it. In other words,
  refreshing the page at any time retains the current state,
  and you can now link people to exactly the filter results that you
  want to share.
---
 pydis_site/static/js/resources.js             | 130 +++++++++++++-------------
 pydis_site/templates/resources/resources.html |   1 +
 2 files changed, 66 insertions(+), 65 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index dee59e52..836ef4ec 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -8,17 +8,67 @@ var activeFilters = {
     complexity: []
 };
 
+/* Check if there are no filters */
+function noFilters() {
+    return (
+        activeFilters.topics.length === 0 &&
+        activeFilters.type.length === 0 &&
+        activeFilters["payment-tiers"].length === 0 &&
+        activeFilters.complexity.length === 0
+    );
+}
+
+/* Update the URL with new parameters */
+function updateURL() {
+    // If there's nothing in the filters, we don't want anything in the URL.
+    if (noFilters()) {
+        window.history.replaceState(null, document.title, './');
+        return;
+    }
+
+    // Iterate through and get rid of empty ones
+    let searchParams = new URLSearchParams(activeFilters);
+    $.each(activeFilters, function(filterType, filters) {
+        if (filters.length === 0) {
+            searchParams.delete(filterType);
+        }
+    });
+
+    // Now update the URL
+    window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
+}
+
+/* Get the params out of the URL and use them. This is run when the page loads. */
+function deserializeURLParams() {
+    let searchParams = new window.URLSearchParams(window.location.search);
+
+    // Work through the parameters and add them to the filter object
+    $.each(Object.keys(activeFilters), function(_, filterType) {
+        let paramFilterContent = searchParams.get(filterType);
+
+        if (paramFilterContent !== null) {
+            // We use split here because we always want an array, not a string.
+            let paramFilterArray = paramFilterContent.split(",");
+            activeFilters[filterType] = paramFilterArray;
+
+            // Check corresponding checkboxes, so the UI reflects the internal state.
+            $(paramFilterArray).each(function(_, filter) {
+                let checkbox = $(`.filter-checkbox[data-filter-name=${filterType}][data-filter-item=${filter}]`);
+                checkbox.prop("checked", true);
+            });
+        }
+    });
+}
+
 /* Update the resources to match 'active_filters' */
 function update() {
     let resources = $('.resource-box');
 
+    // Update the URL to match the new filters.
+    updateURL();
+
     // If there's nothing in the filters, show everything and return.
-    if (
-        activeFilters.topics.length === 0 &&
-        activeFilters.type.length === 0 &&
-        activeFilters["payment-tiers"].length === 0 &&
-        activeFilters.complexity.length === 0
-    ) {
+    if (noFilters()) {
         resources.show();
         return;
     }
@@ -35,16 +85,16 @@ function update() {
         let resourceBox = $(this);
 
         // Validate the filters
-        $.each(activeFilters, function(filterType, activeFilters) {
+        $.each(activeFilters, function(filterType, filters) {
             // If the filter list is empty, this passes validation.
-            if (activeFilters.length === 0) {
+            if (filters.length === 0) {
                 validation[filterType] = true;
                 return;
             }
 
             // Otherwise, we need to check if one of the classes exist.
-            $.each(activeFilters, function(index, filter) {
-                if (resourceBox.hasClass(filter)) {
+            $.each(filters, function(index, filter) {
+                if (resourceBox.hasClass(`${filterType}-${filter}`)) {
                     validation[filterType] = true;
                 }
             });
@@ -61,6 +111,9 @@ function update() {
 
 // Executed when the page has finished loading.
 document.addEventListener("DOMContentLoaded", function () {
+    // Update the filters on page load to reflect URL parameters.
+    deserializeURLParams();
+    update();
 
     // If you collapse or uncollapse a filter group, swap the icon.
     $('button.collapsible').click(function() {
@@ -75,8 +128,6 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
-    // Update the filters on page load to reflect URL parameters.
-
     // If you click on the div surrounding the filter checkbox, it clicks the checkbox.
     $('.filter-panel').click(function() {
         let checkbox = $(this).find(".filter-checkbox");
@@ -88,12 +139,11 @@ document.addEventListener("DOMContentLoaded", function () {
     $('.filter-checkbox').change(function () {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
-        let cssClass = filterName + "-" + filterItem;
-        var filterIndex = activeFilters[filterName].indexOf(cssClass);
+        var filterIndex = activeFilters[filterName].indexOf(filterItem);
 
         if (this.checked) {
             if (filterIndex === -1) {
-                activeFilters[filterName].push(cssClass);
+                activeFilters[filterName].push(filterItem);
             }
             update();
         } else {
@@ -104,53 +154,3 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 });
-
-
-
-// const initialParams = new URLSearchParams(window.location.search);
-// const checkboxOptions = ['topic', 'type', 'payment', 'complexity'];
-//
-// const createQuerySelect = (opt) => {
-//     return "input[name=" + opt + "]"
-// }
-//
-// checkboxOptions.forEach((option) => {
-//     document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-//         if (initialParams.get(option).includes(checkbox.value)) {
-//             checkbox.checked = true
-//         }
-//     });
-// });
-//
-// function buildQueryParams() {
-//     let params = new URLSearchParams(window.location.search);
-//     checkboxOptions.forEach((option) => {
-//         let tempOut = ""
-//         document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-//             if (checkbox.checked) {
-//                 tempOut += checkbox.value + ",";
-//             }
-//         });
-//         params.set(option, tempOut);
-//     });
-//
-//     window.location.search = params;
-// }
-//
-// function clearQueryParams() {
-//     checkboxOptions.forEach((option) => {
-//         document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-//             checkbox.checked = false;
-//         });
-//     });
-// }
-//
-// function selectAllQueryParams(column) {
-//     checkboxOptions.forEach((option) => {
-//         document.querySelectorAll(createQuerySelect(option)).forEach((checkbox) => {
-//             if (checkbox.className == column) {
-//                 checkbox.checked = true;
-//             }
-//         });
-//     });
-// }
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 77723a8f..134c826b 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -45,6 +45,7 @@
                                                 {% endif %}
                                             </span>
                                         </button>
+
                                         {# Checkboxes #}
                                         {% if filter_data.hidden %}
                                             <div class="collapsible-content">
-- 
cgit v1.2.3


From da706784eef24e5b7bb45b50e2ebc1d8dd163a6c Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Fri, 28 Jan 2022 00:53:24 +0100
Subject: Make all tags interactive.

Adds a bunch of tag-related quality of life improvements:
- You can now see which filters you've added at the top left.
- You can click on tags to start filtering to that tag.
- You can click on tags in the filter box to remove the filter.
- Tags will now show an outline when they are active.
---
 pydis_site/static/css/resources/resources.css    |  91 +++++++++++++++++
 pydis_site/static/js/resources.js                | 123 +++++++++++++++++------
 pydis_site/templates/resources/resource_box.html |  37 ++++++-
 pydis_site/templates/resources/resources.html    | 123 ++++++++++++++++-------
 4 files changed, 300 insertions(+), 74 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index f70cbd64..c6347eab 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -25,3 +25,94 @@
 i.is-primary {
     color: #7289da;
 }
+
+/* A little space around the filter card, please! */
+.filter-tags {
+    padding-bottom: .5em;
+    padding-right: .5em;
+}
+
+/* Set default display to inline-flex, for centering. */
+span.filter-box-tag {
+    display: inline-flex;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Make resource tags clickable */
+.resource-tag {
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Move the x down 1 pixel to align center */
+button.delete {
+    margin-top: 1px;
+}
+
+/* Colors for delete button x's */
+button.delete.is-primary::before,
+button.delete.is-primary::after {
+    background-color: #2a45a2;
+}
+button.delete.is-success::before,
+button.delete.is-success::after {
+    background-color: #2c9659;
+}
+button.delete.is-danger::before,
+button.delete.is-danger::after {
+    background-color: #c32841;
+}
+button.delete.is-info::before,
+button.delete.is-info::after {
+    background-color: #237fbd;
+}
+
+/* Give outlines to active tags */
+span.filter-box-tag,
+span.resource-tag.active {
+    outline-width: 1px;
+    outline-style: solid;
+}
+
+/* Make filter tags sparkle when selected! */
+@keyframes glow_success {
+    from { box-shadow: 0 0 2px 2px #aef4af; }
+    33% { box-shadow: 0 0 2px 2px #87af7a; }
+    66% { box-shadow: 0 0 2px 2px #9ceaac; }
+    to { box-shadow: 0 0 2px 2px #7cbf64; }
+}
+
+@keyframes glow_primary {
+    from { box-shadow: 0 0 2px 2px #aeb8f3; }
+    33% { box-shadow: 0 0 2px 2px #909ed9; }
+    66% { box-shadow: 0 0 2px 2px #6d7ed4; }
+    to { box-shadow: 0 0 2px 2px #6383b3; }
+}
+
+@keyframes glow_danger {
+    from { box-shadow: 0 0 2px 2px #c9495f; }
+    33% { box-shadow: 0 0 2px 2px #92486f; }
+    66% { box-shadow: 0 0 2px 2px #d455ba; }
+    to { box-shadow: 0 0 2px 2px #ff8192; }
+}
+@keyframes glow_info {
+    from { box-shadow: 0 0 2px 2px #4592c9; }
+    33% { box-shadow: 0 0 2px 2px #6196bb; }
+    66% { box-shadow: 0 0 2px 2px #5adade; }
+    to { box-shadow: 0 0 2px 2px #6bcfdc; }
+}
+
+span.resource-tag.active.is-primary {
+    animation: glow_primary 4s infinite alternate;
+}
+span.resource-tag.active.has-background-danger-light {
+    animation: glow_danger 4s infinite alternate;
+}
+span.resource-tag.active.has-background-success-light {
+    animation: glow_success 4s infinite alternate;
+}
+span.resource-tag.active.has-background-info-light {
+    animation: glow_info 4s infinite alternate;
+}
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index 836ef4ec..c9ce408b 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -8,6 +8,37 @@ var activeFilters = {
     complexity: []
 };
 
+function addFilter(filterName, filterItem) {
+    // Push the filter into the stack
+    var filterIndex = activeFilters[filterName].indexOf(filterItem);
+    if (filterIndex === -1) {
+        activeFilters[filterName].push(filterItem);
+    }
+    updateUI();
+
+    // Show a corresponding filter box tag
+    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
+    $(".filter-tags").css("padding-bottom", "0.5em");
+
+    // Make corresponding resource tags active
+    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
+}
+
+function removeFilter(filterName, filterItem) {
+    // Remove the filter from the stack
+    var filterIndex = activeFilters[filterName].indexOf(filterItem);
+    if (filterIndex !== -1) {
+        activeFilters[filterName].splice(filterIndex, 1);
+    }
+    updateUI();
+
+    // Hide the corresponding filter box tag
+    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide();
+
+    // Make corresponding resource tags inactive
+    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
+}
+
 /* Check if there are no filters */
 function noFilters() {
     return (
@@ -18,26 +49,6 @@ function noFilters() {
     );
 }
 
-/* Update the URL with new parameters */
-function updateURL() {
-    // If there's nothing in the filters, we don't want anything in the URL.
-    if (noFilters()) {
-        window.history.replaceState(null, document.title, './');
-        return;
-    }
-
-    // Iterate through and get rid of empty ones
-    let searchParams = new URLSearchParams(activeFilters);
-    $.each(activeFilters, function(filterType, filters) {
-        if (filters.length === 0) {
-            searchParams.delete(filterType);
-        }
-    });
-
-    // Now update the URL
-    window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
-}
-
 /* Get the params out of the URL and use them. This is run when the page loads. */
 function deserializeURLParams() {
     let searchParams = new window.URLSearchParams(window.location.search);
@@ -51,18 +62,43 @@ function deserializeURLParams() {
             let paramFilterArray = paramFilterContent.split(",");
             activeFilters[filterType] = paramFilterArray;
 
-            // Check corresponding checkboxes, so the UI reflects the internal state.
+            // Update the corresponding filter UI, so it reflects the internal state.
             $(paramFilterArray).each(function(_, filter) {
                 let checkbox = $(`.filter-checkbox[data-filter-name=${filterType}][data-filter-item=${filter}]`);
+                let filterTag = $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`);
+                let resourceTags = $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`);
                 checkbox.prop("checked", true);
+                filterTag.show();
+                resourceTags.addClass("active");
             });
         }
     });
 }
 
+/* Update the URL with new parameters */
+function updateURL() {
+    // If there's nothing in the filters, we don't want anything in the URL.
+    if (noFilters()) {
+        window.history.replaceState(null, document.title, './');
+        return;
+    }
+
+    // Iterate through and get rid of empty ones
+    let searchParams = new URLSearchParams(activeFilters);
+    $.each(activeFilters, function(filterType, filters) {
+        if (filters.length === 0) {
+            searchParams.delete(filterType);
+        }
+    });
+
+    // Now update the URL
+    window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
+}
+
 /* Update the resources to match 'active_filters' */
-function update() {
+function updateUI() {
     let resources = $('.resource-box');
+    let filterTags = $('.filter-box-tag');
 
     // Update the URL to match the new filters.
     updateURL();
@@ -70,6 +106,8 @@ function update() {
     // If there's nothing in the filters, show everything and return.
     if (noFilters()) {
         resources.show();
+        filterTags.hide();
+        $(".filter-tags").css("padding-bottom", "0");
         return;
     }
 
@@ -112,8 +150,9 @@ function update() {
 // Executed when the page has finished loading.
 document.addEventListener("DOMContentLoaded", function () {
     // Update the filters on page load to reflect URL parameters.
+    $('.filter-box-tag').hide();
     deserializeURLParams();
-    update();
+    updateUI();
 
     // If you collapse or uncollapse a filter group, swap the icon.
     $('button.collapsible').click(function() {
@@ -128,29 +167,47 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
-    // If you click on the div surrounding the filter checkbox, it clicks the checkbox.
+    // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
     $('.filter-panel').click(function() {
         let checkbox = $(this).find(".filter-checkbox");
         checkbox.prop("checked", !checkbox.prop("checked"));
         checkbox.change();
     });
 
+    // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox.
+    $('.filter-box-tag').click(function() {
+        let filterItem = this.dataset.filterItem;
+        let filterName = this.dataset.filterName;
+        let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`);
+
+        removeFilter(filterName, filterItem);
+        checkbox.prop("checked", false);
+    });
+
+    // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox.
+    $('.resource-tag').click(function() {
+        let filterItem = this.dataset.filterItem;
+        let filterName = this.dataset.filterName;
+        let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`)
+
+        if (!$(this).hasClass("active")) {
+            addFilter(filterName, filterItem);
+            checkbox.prop("checked", true);
+        } else {
+            removeFilter(filterName, filterItem);
+            checkbox.prop("checked", false);
+        }
+    });
+
     // When checkboxes are toggled, trigger a filter update.
     $('.filter-checkbox').change(function () {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
-        var filterIndex = activeFilters[filterName].indexOf(filterItem);
 
         if (this.checked) {
-            if (filterIndex === -1) {
-                activeFilters[filterName].push(filterItem);
-            }
-            update();
+            addFilter(filterName, filterItem);
         } else {
-            if (filterIndex !== -1) {
-                activeFilters[filterName].splice(filterIndex, 1);
-            }
-            update();
+            removeFilter(filterName, filterItem);
         }
     });
 });
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 09256751..476a4841 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -1,4 +1,5 @@
 {% load as_icon %}
+{% load as_css_class %}
 {% load get_category_icon %}
 
 <div class="box resource-box {{ resource.css_classes }}">
@@ -34,16 +35,44 @@
         {#  Tags #}
         <div class="is-flex ml-auto is-flex-wrap-wrap is-justify-content-end">
             {% for tag in resource.tags.topics %}
-            <span class="tag is-primary is-light ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag is-primary is-light ml-2 mt-2"
+                data-filter-name="topics"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
             {% for tag in resource.tags.type %}
-            <span class="tag has-background-success-light has-text-success-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2"
+                data-filter-name="type"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
             {% for tag in resource.tags.payment_tiers %}
-            <span class="tag has-background-danger-light has-text-danger-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
+                data-filter-name="payment-tiers"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
             {% for tag in resource.tags.complexity %}
-            <span class="tag has-background-info-light has-text-info-dark ml-2 mt-2"><i class="{{ tag|title|get_category_icon }} mr-1"></i>{{ tag|title }}</span>
+            <span
+                class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2"
+                data-filter-name="complexity"
+                data-filter-item="{{ tag|as_css_class }}"
+            >
+                <i class="{{ tag|title|get_category_icon }} mr-1"></i>
+                {{ tag|title }}
+            </span>
             {% endfor %}
         </div>
     </div>
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 134c826b..87c28153 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -1,74 +1,123 @@
 {% extends 'base/base.html' %}
 {% load as_icon %}
 {% load as_css_class %}
+{% load get_category_icon %}
 {% load static %}
 
 {% block title %}Resources{% endblock %}
 {% block head %}
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script src="{% static "js/resources.js" %}"></script>
-    <script src="{% static "js/content/page.js" %}"></script>
     <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
     <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
     <link rel="stylesheet" href="{% static "css/content/page.css" %}">
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
+    <script defer src="{% static "js/resources.js" %}"></script>
+    <script defer src="{% static "js/content/page.js" %}"></script>
 {% endblock %}
 
 {% block content %}
     {% include "base/navbar.html" %}
     {% if resources|length > 0 %}
         <section class="section">
-            {#  Headline #}
-            <div class="content">
-                <h1 class="resource-title has-text-centered">Resources</h1>
-                <hr/>
-            </div>
-
             <div class="columns is-centered">
                 {# Filtering toolbox #}
                 <div class="column is-one-third">
                     <div class="content is-justify-content-center">
                         <nav id="resource-filtering-panel" class="panel is-primary">
-                            <p class="panel-heading has-text-centered" id="filter-panel-header">Filters</p>
+                            <p class="panel-heading has-text-centered" id="filter-panel-header">Filter Resources</p>
+
+                            {# Filter box tags #}
+                            <div class="card filter-tags">
+                                <div class="is-flex ml-auto is-flex-wrap-wrap">
+                                    {% for filter_name, filter_data in filters.items %}
+                                        {% for filter_item in filter_data.filters %}
+                                            {% if filter_name == "Complexity" %}
+                                                <span
+                                                    class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-info has-background-info-light"></button>
+                                                </span>
+                                            {% endif %}
+                                            {% if filter_name == "Type" %}
+                                                <span
+                                                    class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-success has-background-success-light"></button>
+                                                </span>
+                                            {% endif %}
+                                            {% if filter_name == "Payment tiers" %}
+                                                <span
+                                                    class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-danger has-background-danger-light"></button>
+                                                </span>
+                                            {% endif %}
+                                            {% if filter_name == "Topics" %}
+                                                <span
+                                                    class="filter-box-tag tag is-primary is-light ml-2 mt-2"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                    {{ filter_item|title }}
+                                                    <button class="delete is-small is-primary has-background-primary-light"></button>
+                                                </span>
+                                            {% endif %}
+                                        {% endfor %}
+                                    {% endfor %}
+                                </div>
+                            </div>
 
                             {# Filter checkboxes #}
                             {% for filter_name, filter_data in filters.items %}
-                                    <div class="card">
-                                        <button type="button" class="card-header collapsible">
+                                <div class="card">
+                                <button type="button" class="card-header collapsible">
                                             <span class="card-header-title subtitle is-6 my-2 ml-2">
                                                 <i class="{{ filter_data.icon }} is-primary" aria-hidden="true"></i>&nbsp&nbsp{{ filter_name }}
                                             </span>
-                                            <span class="card-header-icon">
+                                    <span class="card-header-icon">
                                                 {% if not filter_data.hidden %}
                                                     <i class="far fa-window-minimize is-6 title" aria-hidden="true"></i>
                                                 {% else %}
                                                     <i class="fas fa-angle-down is-6 title" aria-hidden="true"></i>
                                                 {% endif %}
                                             </span>
-                                        </button>
+                                </button>
 
-                                        {# Checkboxes #}
-                                        {% if filter_data.hidden %}
-                                            <div class="collapsible-content">
-                                        {% else %}
-                                            <div class="collapsible-content" style="max-height: 480px;">
-                                        {% endif %}
-                                            <div class="card-content">
-                                                {% for filter_item in filter_data.filters %}
-                                                    <a class="panel-block filter-panel">
-                                                        <label class="checkbox">
-                                                          <input
-                                                            class="filter-checkbox"
-                                                            type="checkbox"
-                                                            data-filter-name="{{ filter_name|as_css_class }}"
-                                                            data-filter-item="{{ filter_item|as_css_class }}"
-                                                          >
-                                                            {{ filter_item }}
-                                                        </label>
-                                                    </a>
-                                                {% endfor %}
-                                            </div>
-                                        </div>
-                                    </div>
+                                {# Checkboxes #}
+                                {% if filter_data.hidden %}
+                                    <div class="collapsible-content">
+                                {% else %}
+                                    <div class="collapsible-content" style="max-height: 480px;">
+                                {% endif %}
+                            <div class="card-content">
+                                {% for filter_item in filter_data.filters %}
+                                    <a class="panel-block filter-panel">
+                                        <label class="checkbox">
+                                            <input
+                                                    class="filter-checkbox"
+                                                    type="checkbox"
+                                                    data-filter-name="{{ filter_name|as_css_class }}"
+                                                    data-filter-item="{{ filter_item|as_css_class }}"
+                                            >
+                                            {{ filter_item }}
+                                        </label>
+                                    </a>
+                                {% endfor %}
+                            </div>
+                            </div>
+                            </div>
                             {% endfor %}
                         </nav>
                     </div>
-- 
cgit v1.2.3


From 72ca8758da4b80b638a83093a35a031210a8d9f2 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sat, 29 Jan 2022 12:39:21 +0100
Subject: Let the user know when there are no matches.

---
 pydis_site/static/css/resources/resources.css |   6 +
 pydis_site/static/js/resources.js             |  11 ++
 pydis_site/templates/resources/resources.html | 162 ++++++++++++--------------
 3 files changed, 91 insertions(+), 88 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index c6347eab..218d9a59 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -15,6 +15,12 @@
     padding:0
 }
 
+/* Hide the no resources h2 by default */
+h2.no-resources-found {
+    display: none;
+    margin-top: 1em;
+}
+
 /* Disable clicking on the checkbox itself. */
 /* Instead, we want to let the anchor tag handle clicks. */
 .filter-checkbox {
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index c9ce408b..89b8ae06 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -112,6 +112,8 @@ function updateUI() {
     }
 
     // Otherwise, hide everything and then filter the resources to decide what to show.
+    let hasMatches = false;
+    console.log(hasMatches);
     resources.hide();
     resources.filter(function() {
         let validation = {
@@ -140,11 +142,20 @@ function updateUI() {
 
         // If validation passes, show the resource.
         if (Object.values(validation).every(Boolean)) {
+            hasMatches = true;
             return true;
         } else {
             return false;
         }
     }).show();
+
+    // If there are no matches, show the no matches message
+    console.log(hasMatches);
+    if (!hasMatches) {
+        $(".no-resources-found").show();
+    } else {
+        $(".no-resources-found").hide();
+    }
 }
 
 // Executed when the page has finished loading.
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 87c28153..b82f16e1 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -16,141 +16,127 @@
 
 {% block content %}
     {% include "base/navbar.html" %}
-    {% if resources|length > 0 %}
-        <section class="section">
-            <div class="columns is-centered">
-                {# Filtering toolbox #}
-                <div class="column is-one-third">
-                    <div class="content is-justify-content-center">
-                        <nav id="resource-filtering-panel" class="panel is-primary">
-                            <p class="panel-heading has-text-centered" id="filter-panel-header">Filter Resources</p>
+    <section class="section">
+        <div class="columns is-centered">
+            {# Filtering toolbox #}
+            <div class="column is-one-third">
+                <div class="content is-justify-content-center">
+                    <nav id="resource-filtering-panel" class="panel is-primary">
+                        <p class="panel-heading has-text-centered" id="filter-panel-header">Filter Resources</p>
 
-                            {# Filter box tags #}
-                            <div class="card filter-tags">
-                                <div class="is-flex ml-auto is-flex-wrap-wrap">
-                                    {% for filter_name, filter_data in filters.items %}
-                                        {% for filter_item in filter_data.filters %}
-                                            {% if filter_name == "Complexity" %}
-                                                <span
+                        {# Filter box tags #}
+                        <div class="card filter-tags">
+                            <div class="is-flex ml-auto is-flex-wrap-wrap">
+                                {% for filter_name, filter_data in filters.items %}
+                                    {% for filter_item in filter_data.filters %}
+                                        {% if filter_name == "Complexity" %}
+                                            <span
                                                     class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
                                                     data-filter-name="{{ filter_name|as_css_class }}"
                                                     data-filter-item="{{ filter_item|as_css_class }}"
-                                                >
+                                            >
                                                     <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                     {{ filter_item|title }}
                                                     <button class="delete is-small is-info has-background-info-light"></button>
                                                 </span>
-                                            {% endif %}
-                                            {% if filter_name == "Type" %}
-                                                <span
+                                        {% endif %}
+                                        {% if filter_name == "Type" %}
+                                            <span
                                                     class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
                                                     data-filter-name="{{ filter_name|as_css_class }}"
                                                     data-filter-item="{{ filter_item|as_css_class }}"
-                                                >
+                                            >
                                                     <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                     {{ filter_item|title }}
                                                     <button class="delete is-small is-success has-background-success-light"></button>
                                                 </span>
-                                            {% endif %}
-                                            {% if filter_name == "Payment tiers" %}
-                                                <span
+                                        {% endif %}
+                                        {% if filter_name == "Payment tiers" %}
+                                            <span
                                                     class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
                                                     data-filter-name="{{ filter_name|as_css_class }}"
                                                     data-filter-item="{{ filter_item|as_css_class }}"
-                                                >
+                                            >
                                                     <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                     {{ filter_item|title }}
                                                     <button class="delete is-small is-danger has-background-danger-light"></button>
                                                 </span>
-                                            {% endif %}
-                                            {% if filter_name == "Topics" %}
-                                                <span
+                                        {% endif %}
+                                        {% if filter_name == "Topics" %}
+                                            <span
                                                     class="filter-box-tag tag is-primary is-light ml-2 mt-2"
                                                     data-filter-name="{{ filter_name|as_css_class }}"
                                                     data-filter-item="{{ filter_item|as_css_class }}"
-                                                >
+                                            >
                                                     <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                     {{ filter_item|title }}
                                                     <button class="delete is-small is-primary has-background-primary-light"></button>
                                                 </span>
-                                            {% endif %}
-                                        {% endfor %}
+                                        {% endif %}
                                     {% endfor %}
-                                </div>
+                                {% endfor %}
                             </div>
+                        </div>
 
-                            {# Filter checkboxes #}
-                            {% for filter_name, filter_data in filters.items %}
-                                <div class="card">
-                                <button type="button" class="card-header collapsible">
+                        {# Filter checkboxes #}
+                        {% for filter_name, filter_data in filters.items %}
+                            <div class="card">
+                            <button type="button" class="card-header collapsible">
                                             <span class="card-header-title subtitle is-6 my-2 ml-2">
                                                 <i class="{{ filter_data.icon }} is-primary" aria-hidden="true"></i>&nbsp&nbsp{{ filter_name }}
                                             </span>
-                                    <span class="card-header-icon">
+                                <span class="card-header-icon">
                                                 {% if not filter_data.hidden %}
                                                     <i class="far fa-window-minimize is-6 title" aria-hidden="true"></i>
                                                 {% else %}
                                                     <i class="fas fa-angle-down is-6 title" aria-hidden="true"></i>
                                                 {% endif %}
                                             </span>
-                                </button>
+                            </button>
 
-                                {# Checkboxes #}
-                                {% if filter_data.hidden %}
-                                    <div class="collapsible-content">
-                                {% else %}
-                                    <div class="collapsible-content" style="max-height: 480px;">
-                                {% endif %}
-                            <div class="card-content">
-                                {% for filter_item in filter_data.filters %}
-                                    <a class="panel-block filter-panel">
-                                        <label class="checkbox">
-                                            <input
-                                                    class="filter-checkbox"
-                                                    type="checkbox"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                            {{ filter_item }}
-                                        </label>
-                                    </a>
-                                {% endfor %}
-                            </div>
-                            </div>
-                            </div>
+                            {# Checkboxes #}
+                            {% if filter_data.hidden %}
+                                <div class="collapsible-content">
+                            {% else %}
+                                <div class="collapsible-content" style="max-height: 480px;">
+                            {% endif %}
+                        <div class="card-content">
+                            {% for filter_item in filter_data.filters %}
+                                <a class="panel-block filter-panel">
+                                    <label class="checkbox">
+                                        <input
+                                                class="filter-checkbox"
+                                                type="checkbox"
+                                                data-filter-name="{{ filter_name|as_css_class }}"
+                                                data-filter-item="{{ filter_item|as_css_class }}"
+                                        >
+                                        {{ filter_item }}
+                                    </label>
+                                </a>
                             {% endfor %}
-                        </nav>
-                    </div>
+                        </div>
+                        </div>
+                        </div>
+                        {% endfor %}
+                    </nav>
                 </div>
+            </div>
 
-                {# Actual resources #}
-                <div class="column is-two-thirds">
-                    <div class="content is-flex is-justify-content-center">
-                        <div>
-                            {% for resource in resources.values %}
-                                {% include "resources/resource_box.html" %}
-                            {% endfor %}
-
-                            {% for subcategory in subcategories %}
-                                <h2 id="{{ subcategory.category_info.raw_name }}">
-                                    <a href="whatevenisthis#{{ subcategory.category_info.raw_name }}">
-                                        {{ subcategory.category_info.name }}
-                                    </a>
-                                </h2>
-                                <p>{{ subcategory.category_info.description|safe }}</p>
+            <div class="column is-two-thirds">
+                {# Message to display when there are no hits #}
+                <h2 class="title is-3 has-text-centered pt-0 pb-6 no-resources-found">No matching resources found!</h2>
 
-                                {% for resource in subcategory.resources %}
-                                    {% with category_info=subcategory.category_info %}
-                                        {% include "resources/resource_box.html" %}
-                                    {% endwith %}
-                                {% endfor %}
-                            {% endfor %}
-                        </div>
+                {# Resource cards #}
+                <div class="content is-flex is-justify-content-center">
+                    <div>
+                        {% for resource in resources.values %}
+                            {% include "resources/resource_box.html" %}
+                        {% endfor %}
                     </div>
                 </div>
             </div>
-        </section>
-    {% else %}
-        <h2 class="title is-3 has-text-centered pt-0 pb-6 ">No resources matching search.</p>
-    {% endif %}
+        </div>
+    </section>
 {% endblock %}
+
+
-- 
cgit v1.2.3


From e54a3d18e208dd532533b5bbe146b1bff9875ba4 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sat, 29 Jan 2022 13:42:38 +0100
Subject: Complexity -> Difficulty.

---
 pydis_site/apps/resources/resources/adafruit.yaml                 | 2 +-
 pydis_site/apps/resources/resources/atom.yaml                     | 2 +-
 .../apps/resources/resources/automate_the_boring_stuff_book.yaml  | 2 +-
 .../resources/resources/automate_the_boring_stuff_course.yaml     | 2 +-
 .../apps/resources/resources/awesome_programming_discord.yaml     | 2 +-
 pydis_site/apps/resources/resources/byte_of_python.yaml           | 2 +-
 pydis_site/apps/resources/resources/code_combat.yaml              | 2 +-
 pydis_site/apps/resources/resources/corey_schafer.yaml            | 2 +-
 .../apps/resources/resources/data_science_from_scratch.yaml       | 2 +-
 pydis_site/apps/resources/resources/edublocks.yaml                | 2 +-
 pydis_site/apps/resources/resources/effective_python.yaml         | 2 +-
 pydis_site/apps/resources/resources/exercism.yaml                 | 2 +-
 pydis_site/apps/resources/resources/flask_web_development.yaml    | 2 +-
 pydis_site/apps/resources/resources/fluent_python.yaml            | 2 +-
 .../apps/resources/resources/getting_started_with_kivy.yaml       | 2 +-
 .../getting_started_with_python_for_non_programmers.yaml          | 2 +-
 .../resources/getting_started_with_python_for_programmers.yaml    | 2 +-
 pydis_site/apps/resources/resources/google_collab.yaml            | 2 +-
 .../apps/resources/resources/hitchhikers_guide_to_python.yaml     | 2 +-
 pydis_site/apps/resources/resources/inferential_thinking.yaml     | 2 +-
 pydis_site/apps/resources/resources/jetbrains_academy.yaml        | 2 +-
 pydis_site/apps/resources/resources/jetbrains_videos.yaml         | 2 +-
 pydis_site/apps/resources/resources/jim_shaped_coding.yaml        | 2 +-
 pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml   | 2 +-
 pydis_site/apps/resources/resources/kivy.yaml                     | 2 +-
 pydis_site/apps/resources/resources/microsoft.yaml                | 2 +-
 pydis_site/apps/resources/resources/microsoft_videos.yaml         | 2 +-
 pydis_site/apps/resources/resources/mission_python.yaml           | 2 +-
 .../mit_introduction_to_computer_science_and_programming.yaml     | 2 +-
 pydis_site/apps/resources/resources/mu_editor.yaml                | 2 +-
 pydis_site/apps/resources/resources/netbats_project_ideas.yaml    | 2 +-
 .../resources/neural_networks_from_scratch_in_python.yaml         | 2 +-
 pydis_site/apps/resources/resources/pallets.yaml                  | 2 +-
 pydis_site/apps/resources/resources/panda3d.yaml                  | 2 +-
 pydis_site/apps/resources/resources/people_postgres_data.yaml     | 2 +-
 pydis_site/apps/resources/resources/podcast_dunder_init.yaml      | 2 +-
 .../apps/resources/resources/practical_python_programming.yaml    | 2 +-
 pydis_site/apps/resources/resources/pycharm.yaml                  | 2 +-
 pydis_site/apps/resources/resources/pyglet.yaml                   | 2 +-
 pydis_site/apps/resources/resources/python_bytes.yaml             | 2 +-
 pydis_site/apps/resources/resources/python_cheat_sheet.yaml       | 2 +-
 pydis_site/apps/resources/resources/python_cookbook.yaml          | 2 +-
 pydis_site/apps/resources/resources/python_crash_course.yaml      | 2 +-
 pydis_site/apps/resources/resources/python_developer_guide.yaml   | 2 +-
 pydis_site/apps/resources/resources/python_discord_videos.yaml    | 2 +-
 pydis_site/apps/resources/resources/python_morsels.yaml           | 2 +-
 pydis_site/apps/resources/resources/python_subreddit.yaml         | 2 +-
 pydis_site/apps/resources/resources/python_tricks.yaml            | 2 +-
 pydis_site/apps/resources/resources/python_tutor.yaml             | 2 +-
 pydis_site/apps/resources/resources/real_python.yaml              | 2 +-
 pydis_site/apps/resources/resources/regex101.yaml                 | 2 +-
 pydis_site/apps/resources/resources/repl_it.yaml                  | 2 +-
 pydis_site/apps/resources/resources/screen_readers.yaml           | 2 +-
 pydis_site/apps/resources/resources/sentdex.yaml                  | 2 +-
 pydis_site/apps/resources/resources/simple_guide_to_git.yaml      | 2 +-
 pydis_site/apps/resources/resources/sololearn.yaml                | 2 +-
 pydis_site/apps/resources/resources/spyder.yaml                   | 2 +-
 pydis_site/apps/resources/resources/sublime_text.yaml             | 2 +-
 pydis_site/apps/resources/resources/talk_python_to_me.yaml        | 2 +-
 pydis_site/apps/resources/resources/talon_voice.yaml              | 2 +-
 pydis_site/apps/resources/resources/test_and_code.yaml            | 2 +-
 pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml  | 2 +-
 pydis_site/apps/resources/resources/the_real_python_podcast.yaml  | 2 +-
 pydis_site/apps/resources/resources/think_python.yaml             | 2 +-
 pydis_site/apps/resources/resources/thonny.yaml                   | 2 +-
 pydis_site/apps/resources/resources/two_scoops_of_django.yaml     | 2 +-
 pydis_site/apps/resources/resources/university_of_michigan.yaml   | 2 +-
 pydis_site/apps/resources/resources/university_of_toronto.yaml    | 2 +-
 .../apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml  | 2 +-
 pydis_site/apps/resources/resources/visual_studio_code.yaml       | 2 +-
 pydis_site/apps/resources/resources/wtf_python.yaml               | 2 +-
 pydis_site/apps/resources/views/resources.py                      | 8 ++++----
 pydis_site/static/js/resources.js                                 | 6 +++---
 pydis_site/templates/resources/resource_box.html                  | 4 ++--
 pydis_site/templates/resources/resources.html                     | 2 +-
 75 files changed, 81 insertions(+), 81 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/resources/resources/adafruit.yaml b/pydis_site/apps/resources/resources/adafruit.yaml
index e8eeee37..f9466bd8 100644
--- a/pydis_site/apps/resources/resources/adafruit.yaml
+++ b/pydis_site/apps/resources/resources/adafruit.yaml
@@ -14,7 +14,7 @@ tags:
     - microcontrollers
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/atom.yaml b/pydis_site/apps/resources/resources/atom.yaml
index 3a46a45f..26e125b1 100644
--- a/pydis_site/apps/resources/resources/atom.yaml
+++ b/pydis_site/apps/resources/resources/atom.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml b/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml
index bc0e19ec..9bf9aba8 100644
--- a/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml
+++ b/pydis_site/apps/resources/resources/automate_the_boring_stuff_book.yaml
@@ -15,7 +15,7 @@ tags:
   payment_tiers:
     - free
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml b/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml
index b93ef868..133033f7 100644
--- a/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml
+++ b/pydis_site/apps/resources/resources/automate_the_boring_stuff_course.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - course
diff --git a/pydis_site/apps/resources/resources/awesome_programming_discord.yaml b/pydis_site/apps/resources/resources/awesome_programming_discord.yaml
index 4233f26e..0ef7aefc 100644
--- a/pydis_site/apps/resources/resources/awesome_programming_discord.yaml
+++ b/pydis_site/apps/resources/resources/awesome_programming_discord.yaml
@@ -11,7 +11,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/byte_of_python.yaml b/pydis_site/apps/resources/resources/byte_of_python.yaml
index d2b8fa35..c4b671c2 100644
--- a/pydis_site/apps/resources/resources/byte_of_python.yaml
+++ b/pydis_site/apps/resources/resources/byte_of_python.yaml
@@ -16,7 +16,7 @@ tags:
   payment_tiers:
     - free
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/code_combat.yaml b/pydis_site/apps/resources/resources/code_combat.yaml
index ab4a4aed..84597c4d 100644
--- a/pydis_site/apps/resources/resources/code_combat.yaml
+++ b/pydis_site/apps/resources/resources/code_combat.yaml
@@ -13,7 +13,7 @@ tags:
   payment_tiers:
     - free
     - subscription
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/corey_schafer.yaml b/pydis_site/apps/resources/resources/corey_schafer.yaml
index cb20bc24..b73f4b5d 100644
--- a/pydis_site/apps/resources/resources/corey_schafer.yaml
+++ b/pydis_site/apps/resources/resources/corey_schafer.yaml
@@ -22,7 +22,7 @@ tags:
     - tooling
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/data_science_from_scratch.yaml b/pydis_site/apps/resources/resources/data_science_from_scratch.yaml
index 8ba95e9b..57e73a28 100644
--- a/pydis_site/apps/resources/resources/data_science_from_scratch.yaml
+++ b/pydis_site/apps/resources/resources/data_science_from_scratch.yaml
@@ -16,7 +16,7 @@ tags:
     - data science
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/edublocks.yaml b/pydis_site/apps/resources/resources/edublocks.yaml
index 9fd87945..3eaefc35 100644
--- a/pydis_site/apps/resources/resources/edublocks.yaml
+++ b/pydis_site/apps/resources/resources/edublocks.yaml
@@ -12,7 +12,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - interactive
diff --git a/pydis_site/apps/resources/resources/effective_python.yaml b/pydis_site/apps/resources/resources/effective_python.yaml
index 4e361bcb..96a3b21a 100644
--- a/pydis_site/apps/resources/resources/effective_python.yaml
+++ b/pydis_site/apps/resources/resources/effective_python.yaml
@@ -15,7 +15,7 @@ tags:
     - software design
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/exercism.yaml b/pydis_site/apps/resources/resources/exercism.yaml
index ba8cd2df..b8f53d72 100644
--- a/pydis_site/apps/resources/resources/exercism.yaml
+++ b/pydis_site/apps/resources/resources/exercism.yaml
@@ -13,7 +13,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/flask_web_development.yaml b/pydis_site/apps/resources/resources/flask_web_development.yaml
index 95b75a5b..0bd418e5 100644
--- a/pydis_site/apps/resources/resources/flask_web_development.yaml
+++ b/pydis_site/apps/resources/resources/flask_web_development.yaml
@@ -14,7 +14,7 @@ tags:
     - web development
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/fluent_python.yaml b/pydis_site/apps/resources/resources/fluent_python.yaml
index e35c0134..1d525baa 100644
--- a/pydis_site/apps/resources/resources/fluent_python.yaml
+++ b/pydis_site/apps/resources/resources/fluent_python.yaml
@@ -15,7 +15,7 @@ tags:
     - software design
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml b/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml
index 5dbcd387..06eb2c14 100644
--- a/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml
+++ b/pydis_site/apps/resources/resources/getting_started_with_kivy.yaml
@@ -8,7 +8,7 @@ tags:
     - game development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml b/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml
index 85c061bd..6fab0114 100644
--- a/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml
+++ b/pydis_site/apps/resources/resources/getting_started_with_python_for_non_programmers.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml b/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml
index 2565eedd..74b6efb9 100644
--- a/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml
+++ b/pydis_site/apps/resources/resources/getting_started_with_python_for_programmers.yaml
@@ -8,7 +8,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - intermediate
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/google_collab.yaml b/pydis_site/apps/resources/resources/google_collab.yaml
index 65876c0e..067a79c9 100644
--- a/pydis_site/apps/resources/resources/google_collab.yaml
+++ b/pydis_site/apps/resources/resources/google_collab.yaml
@@ -10,7 +10,7 @@ tags:
     - data science
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml b/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml
index bfac404a..c4b78af6 100644
--- a/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml
+++ b/pydis_site/apps/resources/resources/hitchhikers_guide_to_python.yaml
@@ -11,7 +11,7 @@ tags:
     - general
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/inferential_thinking.yaml b/pydis_site/apps/resources/resources/inferential_thinking.yaml
index 20409f3a..a8cf2bc8 100644
--- a/pydis_site/apps/resources/resources/inferential_thinking.yaml
+++ b/pydis_site/apps/resources/resources/inferential_thinking.yaml
@@ -8,7 +8,7 @@ tags:
     - data science
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/jetbrains_academy.yaml b/pydis_site/apps/resources/resources/jetbrains_academy.yaml
index 63c061ce..c3cb7657 100644
--- a/pydis_site/apps/resources/resources/jetbrains_academy.yaml
+++ b/pydis_site/apps/resources/resources/jetbrains_academy.yaml
@@ -12,7 +12,7 @@ tags:
     - data science
   payment_tiers:
     - subscription
-  complexity:
+  difficulty:
     - beginner
   type:
     - interactive
diff --git a/pydis_site/apps/resources/resources/jetbrains_videos.yaml b/pydis_site/apps/resources/resources/jetbrains_videos.yaml
index aba7c687..00d34e69 100644
--- a/pydis_site/apps/resources/resources/jetbrains_videos.yaml
+++ b/pydis_site/apps/resources/resources/jetbrains_videos.yaml
@@ -14,7 +14,7 @@ tags:
     - web development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/jim_shaped_coding.yaml b/pydis_site/apps/resources/resources/jim_shaped_coding.yaml
index 30992ef2..c9727888 100644
--- a/pydis_site/apps/resources/resources/jim_shaped_coding.yaml
+++ b/pydis_site/apps/resources/resources/jim_shaped_coding.yaml
@@ -15,7 +15,7 @@ tags:
     - web development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml b/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml
index a1907e0f..c8e72c6e 100644
--- a/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml
+++ b/pydis_site/apps/resources/resources/kaggle_pandas_tutorial.yaml
@@ -7,7 +7,7 @@ tags:
     - data science
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - intermediate
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/kivy.yaml b/pydis_site/apps/resources/resources/kivy.yaml
index 5d7d3844..dad29e9a 100644
--- a/pydis_site/apps/resources/resources/kivy.yaml
+++ b/pydis_site/apps/resources/resources/kivy.yaml
@@ -21,7 +21,7 @@ tags:
     - game development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/microsoft.yaml b/pydis_site/apps/resources/resources/microsoft.yaml
index cc5ca93f..e1d62955 100644
--- a/pydis_site/apps/resources/resources/microsoft.yaml
+++ b/pydis_site/apps/resources/resources/microsoft.yaml
@@ -12,7 +12,7 @@ tags:
     - tooling
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/microsoft_videos.yaml b/pydis_site/apps/resources/resources/microsoft_videos.yaml
index 39187650..f45aef63 100644
--- a/pydis_site/apps/resources/resources/microsoft_videos.yaml
+++ b/pydis_site/apps/resources/resources/microsoft_videos.yaml
@@ -19,7 +19,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - video
diff --git a/pydis_site/apps/resources/resources/mission_python.yaml b/pydis_site/apps/resources/resources/mission_python.yaml
index 4e7b30b0..e8e0a6b8 100644
--- a/pydis_site/apps/resources/resources/mission_python.yaml
+++ b/pydis_site/apps/resources/resources/mission_python.yaml
@@ -14,7 +14,7 @@ tags:
     - game development
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml b/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml
index 4aa028ea..4e74936d 100644
--- a/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml
+++ b/pydis_site/apps/resources/resources/mit_introduction_to_computer_science_and_programming.yaml
@@ -10,7 +10,7 @@ tags:
   payment_tiers:
     - free
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - course
diff --git a/pydis_site/apps/resources/resources/mu_editor.yaml b/pydis_site/apps/resources/resources/mu_editor.yaml
index 68c9b7db..b6318d0e 100644
--- a/pydis_site/apps/resources/resources/mu_editor.yaml
+++ b/pydis_site/apps/resources/resources/mu_editor.yaml
@@ -9,7 +9,7 @@ tags:
     - microcontrollers
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - tool
diff --git a/pydis_site/apps/resources/resources/netbats_project_ideas.yaml b/pydis_site/apps/resources/resources/netbats_project_ideas.yaml
index faa029f9..80ba771c 100644
--- a/pydis_site/apps/resources/resources/netbats_project_ideas.yaml
+++ b/pydis_site/apps/resources/resources/netbats_project_ideas.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml b/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml
index 5d3060a4..6313cabe 100644
--- a/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml
+++ b/pydis_site/apps/resources/resources/neural_networks_from_scratch_in_python.yaml
@@ -13,7 +13,7 @@ tags:
     - data science
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/pallets.yaml b/pydis_site/apps/resources/resources/pallets.yaml
index de3f7fad..0da2a625 100644
--- a/pydis_site/apps/resources/resources/pallets.yaml
+++ b/pydis_site/apps/resources/resources/pallets.yaml
@@ -12,7 +12,7 @@ tags:
     - web development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/panda3d.yaml b/pydis_site/apps/resources/resources/panda3d.yaml
index 0d488565..61ecba4b 100644
--- a/pydis_site/apps/resources/resources/panda3d.yaml
+++ b/pydis_site/apps/resources/resources/panda3d.yaml
@@ -16,7 +16,7 @@ tags:
     - game development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/people_postgres_data.yaml b/pydis_site/apps/resources/resources/people_postgres_data.yaml
index 70088af2..c2d63252 100644
--- a/pydis_site/apps/resources/resources/people_postgres_data.yaml
+++ b/pydis_site/apps/resources/resources/people_postgres_data.yaml
@@ -20,7 +20,7 @@ tags:
     - databases
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/podcast_dunder_init.yaml b/pydis_site/apps/resources/resources/podcast_dunder_init.yaml
index ee3028a3..2751481a 100644
--- a/pydis_site/apps/resources/resources/podcast_dunder_init.yaml
+++ b/pydis_site/apps/resources/resources/podcast_dunder_init.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/practical_python_programming.yaml b/pydis_site/apps/resources/resources/practical_python_programming.yaml
index 85b3967a..12873b7c 100644
--- a/pydis_site/apps/resources/resources/practical_python_programming.yaml
+++ b/pydis_site/apps/resources/resources/practical_python_programming.yaml
@@ -12,7 +12,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - course
diff --git a/pydis_site/apps/resources/resources/pycharm.yaml b/pydis_site/apps/resources/resources/pycharm.yaml
index 1fda3bff..574158bc 100644
--- a/pydis_site/apps/resources/resources/pycharm.yaml
+++ b/pydis_site/apps/resources/resources/pycharm.yaml
@@ -8,7 +8,7 @@ tags:
   payment_tiers:
     - free
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - tool
diff --git a/pydis_site/apps/resources/resources/pyglet.yaml b/pydis_site/apps/resources/resources/pyglet.yaml
index d4a37fa8..a47c7e62 100644
--- a/pydis_site/apps/resources/resources/pyglet.yaml
+++ b/pydis_site/apps/resources/resources/pyglet.yaml
@@ -15,7 +15,7 @@ tags:
     - game development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/python_bytes.yaml b/pydis_site/apps/resources/resources/python_bytes.yaml
index 578fff2e..9beba4f4 100644
--- a/pydis_site/apps/resources/resources/python_bytes.yaml
+++ b/pydis_site/apps/resources/resources/python_bytes.yaml
@@ -8,7 +8,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/python_cheat_sheet.yaml b/pydis_site/apps/resources/resources/python_cheat_sheet.yaml
index da9b980f..56f61165 100644
--- a/pydis_site/apps/resources/resources/python_cheat_sheet.yaml
+++ b/pydis_site/apps/resources/resources/python_cheat_sheet.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/python_cookbook.yaml b/pydis_site/apps/resources/resources/python_cookbook.yaml
index 855adb2f..fbb1bdc8 100644
--- a/pydis_site/apps/resources/resources/python_cookbook.yaml
+++ b/pydis_site/apps/resources/resources/python_cookbook.yaml
@@ -15,7 +15,7 @@ tags:
     - software design
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/python_crash_course.yaml b/pydis_site/apps/resources/resources/python_crash_course.yaml
index 379cf954..9de1a53c 100644
--- a/pydis_site/apps/resources/resources/python_crash_course.yaml
+++ b/pydis_site/apps/resources/resources/python_crash_course.yaml
@@ -21,7 +21,7 @@ tags:
     - game development
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/python_developer_guide.yaml b/pydis_site/apps/resources/resources/python_developer_guide.yaml
index f17c88ce..2806d75d 100644
--- a/pydis_site/apps/resources/resources/python_developer_guide.yaml
+++ b/pydis_site/apps/resources/resources/python_developer_guide.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - intermediate
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/python_discord_videos.yaml b/pydis_site/apps/resources/resources/python_discord_videos.yaml
index bf44083f..15a04097 100644
--- a/pydis_site/apps/resources/resources/python_discord_videos.yaml
+++ b/pydis_site/apps/resources/resources/python_discord_videos.yaml
@@ -8,7 +8,7 @@ tags:
     - software design
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/python_morsels.yaml b/pydis_site/apps/resources/resources/python_morsels.yaml
index de02be7f..bbc8133b 100644
--- a/pydis_site/apps/resources/resources/python_morsels.yaml
+++ b/pydis_site/apps/resources/resources/python_morsels.yaml
@@ -13,7 +13,7 @@ tags:
     - software design
   payment_tiers:
     - subscription
-  complexity:
+  difficulty:
     - intermediate
   type:
     - interactive
diff --git a/pydis_site/apps/resources/resources/python_subreddit.yaml b/pydis_site/apps/resources/resources/python_subreddit.yaml
index ef9f23d9..e94f84fc 100644
--- a/pydis_site/apps/resources/resources/python_subreddit.yaml
+++ b/pydis_site/apps/resources/resources/python_subreddit.yaml
@@ -9,7 +9,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/python_tricks.yaml b/pydis_site/apps/resources/resources/python_tricks.yaml
index 17f40732..a38fa74b 100644
--- a/pydis_site/apps/resources/resources/python_tricks.yaml
+++ b/pydis_site/apps/resources/resources/python_tricks.yaml
@@ -13,7 +13,7 @@ tags:
     - software design
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/python_tutor.yaml b/pydis_site/apps/resources/resources/python_tutor.yaml
index 4f6d5130..6bee0d69 100644
--- a/pydis_site/apps/resources/resources/python_tutor.yaml
+++ b/pydis_site/apps/resources/resources/python_tutor.yaml
@@ -6,7 +6,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/real_python.yaml b/pydis_site/apps/resources/resources/real_python.yaml
index 1669638e..0d0b2ad3 100644
--- a/pydis_site/apps/resources/resources/real_python.yaml
+++ b/pydis_site/apps/resources/resources/real_python.yaml
@@ -15,7 +15,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/regex101.yaml b/pydis_site/apps/resources/resources/regex101.yaml
index db3df957..45d00f1b 100644
--- a/pydis_site/apps/resources/resources/regex101.yaml
+++ b/pydis_site/apps/resources/resources/regex101.yaml
@@ -8,7 +8,7 @@ tags:
     - other
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/repl_it.yaml b/pydis_site/apps/resources/resources/repl_it.yaml
index e1ba1d19..e0f6cbb3 100644
--- a/pydis_site/apps/resources/resources/repl_it.yaml
+++ b/pydis_site/apps/resources/resources/repl_it.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/screen_readers.yaml b/pydis_site/apps/resources/resources/screen_readers.yaml
index 9673a132..b086b301 100644
--- a/pydis_site/apps/resources/resources/screen_readers.yaml
+++ b/pydis_site/apps/resources/resources/screen_readers.yaml
@@ -10,7 +10,7 @@ tags:
   payment_tiers:
     - free
     - paid
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/sentdex.yaml b/pydis_site/apps/resources/resources/sentdex.yaml
index 47a8852d..d9131039 100644
--- a/pydis_site/apps/resources/resources/sentdex.yaml
+++ b/pydis_site/apps/resources/resources/sentdex.yaml
@@ -24,7 +24,7 @@ tags:
     - data science
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/simple_guide_to_git.yaml b/pydis_site/apps/resources/resources/simple_guide_to_git.yaml
index 6dacdf5c..3bb46e6d 100644
--- a/pydis_site/apps/resources/resources/simple_guide_to_git.yaml
+++ b/pydis_site/apps/resources/resources/simple_guide_to_git.yaml
@@ -8,7 +8,7 @@ tags:
     - tooling
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/sololearn.yaml b/pydis_site/apps/resources/resources/sololearn.yaml
index b9b59bca..998f5368 100644
--- a/pydis_site/apps/resources/resources/sololearn.yaml
+++ b/pydis_site/apps/resources/resources/sololearn.yaml
@@ -10,7 +10,7 @@ tags:
   payment_tiers:
     - free
     - subscription
-  complexity:
+  difficulty:
     - beginner
   type:
     - interactive
diff --git a/pydis_site/apps/resources/resources/spyder.yaml b/pydis_site/apps/resources/resources/spyder.yaml
index 8dc05542..668e9306 100644
--- a/pydis_site/apps/resources/resources/spyder.yaml
+++ b/pydis_site/apps/resources/resources/spyder.yaml
@@ -7,7 +7,7 @@ tags:
     - data science
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/sublime_text.yaml b/pydis_site/apps/resources/resources/sublime_text.yaml
index 76aeac45..05596477 100644
--- a/pydis_site/apps/resources/resources/sublime_text.yaml
+++ b/pydis_site/apps/resources/resources/sublime_text.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/talk_python_to_me.yaml b/pydis_site/apps/resources/resources/talk_python_to_me.yaml
index 00726203..509922c3 100644
--- a/pydis_site/apps/resources/resources/talk_python_to_me.yaml
+++ b/pydis_site/apps/resources/resources/talk_python_to_me.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/talon_voice.yaml b/pydis_site/apps/resources/resources/talon_voice.yaml
index 0f28a328..3be5fe20 100644
--- a/pydis_site/apps/resources/resources/talon_voice.yaml
+++ b/pydis_site/apps/resources/resources/talon_voice.yaml
@@ -8,7 +8,7 @@ tags:
     - other
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/test_and_code.yaml b/pydis_site/apps/resources/resources/test_and_code.yaml
index efe0c218..f0d1c3b3 100644
--- a/pydis_site/apps/resources/resources/test_and_code.yaml
+++ b/pydis_site/apps/resources/resources/test_and_code.yaml
@@ -8,7 +8,7 @@ tags:
     - tooling
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml b/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml
index 514da947..151768a5 100644
--- a/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml
+++ b/pydis_site/apps/resources/resources/the_flask_mega_tutorial.yaml
@@ -6,7 +6,7 @@ tags:
     - web development
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/the_real_python_podcast.yaml b/pydis_site/apps/resources/resources/the_real_python_podcast.yaml
index 62ba32ce..647779d5 100644
--- a/pydis_site/apps/resources/resources/the_real_python_podcast.yaml
+++ b/pydis_site/apps/resources/resources/the_real_python_podcast.yaml
@@ -9,7 +9,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/think_python.yaml b/pydis_site/apps/resources/resources/think_python.yaml
index aceaf951..f9211308 100644
--- a/pydis_site/apps/resources/resources/think_python.yaml
+++ b/pydis_site/apps/resources/resources/think_python.yaml
@@ -18,7 +18,7 @@ tags:
     - software design
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - beginner
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/thonny.yaml b/pydis_site/apps/resources/resources/thonny.yaml
index a60e4d1b..29ba9e07 100644
--- a/pydis_site/apps/resources/resources/thonny.yaml
+++ b/pydis_site/apps/resources/resources/thonny.yaml
@@ -8,7 +8,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - tool
diff --git a/pydis_site/apps/resources/resources/two_scoops_of_django.yaml b/pydis_site/apps/resources/resources/two_scoops_of_django.yaml
index 4eadc28d..63730ac9 100644
--- a/pydis_site/apps/resources/resources/two_scoops_of_django.yaml
+++ b/pydis_site/apps/resources/resources/two_scoops_of_django.yaml
@@ -14,7 +14,7 @@ tags:
     - web development
   payment_tiers:
     - paid
-  complexity:
+  difficulty:
     - intermediate
   type:
     - book
diff --git a/pydis_site/apps/resources/resources/university_of_michigan.yaml b/pydis_site/apps/resources/resources/university_of_michigan.yaml
index 843b64ed..7aaaf2ae 100644
--- a/pydis_site/apps/resources/resources/university_of_michigan.yaml
+++ b/pydis_site/apps/resources/resources/university_of_michigan.yaml
@@ -7,7 +7,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
   type:
     - course
diff --git a/pydis_site/apps/resources/resources/university_of_toronto.yaml b/pydis_site/apps/resources/resources/university_of_toronto.yaml
index d057eb39..94df96f2 100644
--- a/pydis_site/apps/resources/resources/university_of_toronto.yaml
+++ b/pydis_site/apps/resources/resources/university_of_toronto.yaml
@@ -13,7 +13,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml b/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml
index 02f9fe5a..1a3dd457 100644
--- a/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml
+++ b/pydis_site/apps/resources/resources/vcokltfre_discord_bot_tutorial.yaml
@@ -8,7 +8,7 @@ tags:
     - discord bots
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - intermediate
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/resources/visual_studio_code.yaml b/pydis_site/apps/resources/resources/visual_studio_code.yaml
index f09efcf8..3cf858f8 100644
--- a/pydis_site/apps/resources/resources/visual_studio_code.yaml
+++ b/pydis_site/apps/resources/resources/visual_studio_code.yaml
@@ -6,7 +6,7 @@ tags:
     - general
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - beginner
     - intermediate
   type:
diff --git a/pydis_site/apps/resources/resources/wtf_python.yaml b/pydis_site/apps/resources/resources/wtf_python.yaml
index 7f67ccf9..6d90ba39 100644
--- a/pydis_site/apps/resources/resources/wtf_python.yaml
+++ b/pydis_site/apps/resources/resources/wtf_python.yaml
@@ -12,7 +12,7 @@ tags:
     - other
   payment_tiers:
     - free
-  complexity:
+  difficulty:
     - intermediate
   type:
     - tutorial
diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index 57cb4f71..14b3d0bf 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -28,7 +28,7 @@ class ResourceView(View):
         resource_tags = {
             "topics": set(),
             "payment_tiers": set(),
-            "complexity": set(),
+            "difficulty": set(),
             "type": set(),
         }
         for resource_name, resource in self.resources.items():
@@ -53,8 +53,8 @@ class ResourceView(View):
 
         # Set up all the filter checkbox metadata
         self.filters = {
-            "Complexity": {
-                "filters": sorted(resource_tags.get("complexity")),
+            "Difficulty": {
+                "filters": sorted(resource_tags.get("difficulty")),
                 "icon": "fas fa-brain",
                 "hidden": False,
             },
@@ -84,7 +84,7 @@ class ResourceView(View):
                 ('topics', 'topics'),
                 ('type', 'type'),
                 ('payment_tiers', 'payment'),
-                ('complexity', 'complexity'),
+                ('difficulty', 'difficulty'),
             )
         }
 
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index 89b8ae06..eaca3978 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -5,7 +5,7 @@ var activeFilters = {
     topics: [],
     type: [],
     "payment-tiers": [],
-    complexity: []
+    difficulty: []
 };
 
 function addFilter(filterName, filterItem) {
@@ -45,7 +45,7 @@ function noFilters() {
         activeFilters.topics.length === 0 &&
         activeFilters.type.length === 0 &&
         activeFilters["payment-tiers"].length === 0 &&
-        activeFilters.complexity.length === 0
+        activeFilters.difficulty.length === 0
     );
 }
 
@@ -120,7 +120,7 @@ function updateUI() {
             topics: false,
             type: false,
             'payment-tiers': false,
-            complexity: false
+            difficulty: false
         };
         let resourceBox = $(this);
 
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 476a4841..8a1017b5 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -64,10 +64,10 @@
                 {{ tag|title }}
             </span>
             {% endfor %}
-            {% for tag in resource.tags.complexity %}
+            {% for tag in resource.tags.difficulty %}
             <span
                 class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2"
-                data-filter-name="complexity"
+                data-filter-name="difficulty"
                 data-filter-item="{{ tag|as_css_class }}"
             >
                 <i class="{{ tag|title|get_category_icon }} mr-1"></i>
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 166863c3..9ebebe1f 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -29,7 +29,7 @@
                             <div class="is-flex ml-auto is-flex-wrap-wrap">
                                 {% for filter_name, filter_data in filters.items %}
                                     {% for filter_item in filter_data.filters %}
-                                        {% if filter_name == "Complexity" %}
+                                        {% if filter_name == "Difficulty" %}
                                             <span
                                                     class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
                                                     data-filter-name="{{ filter_name|as_css_class }}"
-- 
cgit v1.2.3


From e53a3a15d0213b3854a3c9619390f0a0e35c4bf6 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 11:41:44 +0100
Subject: Redirects from old endpoints now filter correctly.

For example, navigating to pydis.com/resources/communities will now
correctly redirect to pydis.com/resources/?type=community.
---
 pydis_site/apps/redirect/redirects.yaml       | 10 ++++++----
 pydis_site/apps/resources/urls.py             |  1 +
 pydis_site/apps/resources/views/resources.py  | 25 ++++++++-----------------
 pydis_site/static/js/resources.js             |  8 ++++++++
 pydis_site/templates/resources/resources.html |  1 +
 5 files changed, 24 insertions(+), 21 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/redirect/redirects.yaml b/pydis_site/apps/redirect/redirects.yaml
index bee65103..533b9e25 100644
--- a/pydis_site/apps/redirect/redirects.yaml
+++ b/pydis_site/apps/redirect/redirects.yaml
@@ -90,30 +90,32 @@ resources_index_redirect:
 resources_reading_redirect:
   original_path: resources/reading/
   redirect_route: "resources:index"
+  redirect_arguments: ["book"]
 
 resources_videos_redirect:
   original_path: resources/videos/
   redirect_route: "resources:index"
-
-resources_interactive_redirect:
-  original_path: resources/interactive/
-  redirect_route: "resources:index"
+  redirect_arguments: ["video"]
 
 resources_courses_redirect:
   original_path: resources/courses/
   redirect_route: "resources:index"
+  redirect_arguments: ["course"]
 
 resources_communities_redirect:
   original_path: resources/communities/
   redirect_route: "resources:index"
+  redirect_arguments: ["community"]
 
 resources_podcasts_redirect:
   original_path: resources/podcasts/
   redirect_route: "resources:index"
+  redirect_arguments: ["podcast"]
 
 resources_tools_redirect:
   original_path: resources/tools/
   redirect_route: "resources:index"
+  redirect_arguments: ["tool"]
 
 # Events
 events_index_redirect:
diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py
index 5d5ae7fb..ed24dc99 100644
--- a/pydis_site/apps/resources/urls.py
+++ b/pydis_site/apps/resources/urls.py
@@ -5,4 +5,5 @@ from pydis_site.apps.resources import views
 app_name = "resources"
 urlpatterns = [
     distill_path("", views.resources.ResourceView.as_view(), name="index"),
+    distill_path("<resource_type>/", views.resources.ResourceView.as_view(), name="index"),
 ]
diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index d0b8bae7..b828d89a 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -1,8 +1,9 @@
 from pathlib import Path
+import typing as t
 
 import yaml
 from django.core.handlers.wsgi import WSGIRequest
-from django.http import HttpResponse
+from django.http import HttpResponse, HttpResponseNotFound
 from django.shortcuts import render
 from django.views import View
 
@@ -78,22 +79,12 @@ class ResourceView(View):
             }
         }
 
-    @staticmethod
-    def _get_filter_options(request: WSGIRequest) -> dict[str, set]:
-        """Get the requested filter options out of the request object."""
-        return {
-            option: set(request.GET.get(url_param, "").split(",")[:-1])
-            for option, url_param in (
-                ('topics', 'topics'),
-                ('type', 'type'),
-                ('payment_tiers', 'payment'),
-                ('difficulty', 'difficulty'),
-            )
-        }
-
-    def get(self, request: WSGIRequest) -> HttpResponse:
+    def get(self, request: WSGIRequest, resource_type: t.Optional[str] = None) -> HttpResponse:
         """List out all the resources, and any filtering options from the URL."""
-        filter_options = self._get_filter_options(request)
+
+        # Add type filtering if the request is made to somewhere like /resources/video
+        if resource_type and resource_type.title() not in self.filters['Type']['filters']:
+            return HttpResponseNotFound()
 
         return render(
             request,
@@ -101,6 +92,6 @@ class ResourceView(View):
             context={
                 "resources": self.resources,
                 "filters": self.filters,
-                "filter_options": filter_options,
+                "resource_type": resource_type,
             }
         )
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index eaca3978..bf570097 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -160,6 +160,14 @@ function updateUI() {
 
 // Executed when the page has finished loading.
 document.addEventListener("DOMContentLoaded", function () {
+    /* Check if the user has navigated to one of the old resource pages,
+       like pydis.com/resources/communities. In this case, we'll rewrite
+       the URL before we do anything else. */
+    let resourceTypeInput = $("#resource-type-input").val();
+    if (resourceTypeInput.length !== 0) {
+        window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`);
+    }
+
     // Update the filters on page load to reflect URL parameters.
     $('.filter-box-tag').hide();
     deserializeURLParams();
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 9ebebe1f..7a284fd6 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -16,6 +16,7 @@
 
 {% block content %}
     {% include "base/navbar.html" %}
+    <input type="hidden" id="resource-type-input" value="{{ resource_type }}">
     <section class="section">
         <div class="columns is-centered">
             {# Filtering toolbox #}
-- 
cgit v1.2.3


From 05a8f9a193b451cdf0333b16cf2d525e9d6eb8f4 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 12:01:58 +0100
Subject: Don't redirect if the resource_type is None!

---
 pydis_site/static/js/resources.js | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index bf570097..bfcd569d 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -113,7 +113,6 @@ function updateUI() {
 
     // Otherwise, hide everything and then filter the resources to decide what to show.
     let hasMatches = false;
-    console.log(hasMatches);
     resources.hide();
     resources.filter(function() {
         let validation = {
@@ -164,7 +163,7 @@ document.addEventListener("DOMContentLoaded", function () {
        like pydis.com/resources/communities. In this case, we'll rewrite
        the URL before we do anything else. */
     let resourceTypeInput = $("#resource-type-input").val();
-    if (resourceTypeInput.length !== 0) {
+    if (resourceTypeInput !== "None") {
         window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`);
     }
 
-- 
cgit v1.2.3


From d8c5571a266438d5e2e0c9fd4a35adf469688730 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 12:34:29 +0100
Subject: Support dashful redirects.

Previously, trying to go to `resources/project%20ideas` would crash
the filtering JS.  This has now been sorted out, so that these types
of redirects have their spaces replaced by dashes, which makes them
valid again.
---
 pydis_site/apps/resources/views/resources.py  |  7 +++++--
 pydis_site/static/js/resources.js             | 11 +++++------
 pydis_site/templates/resources/resources.html |  1 -
 3 files changed, 10 insertions(+), 9 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index b828d89a..709fad6c 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -82,9 +82,12 @@ class ResourceView(View):
     def get(self, request: WSGIRequest, resource_type: t.Optional[str] = None) -> HttpResponse:
         """List out all the resources, and any filtering options from the URL."""
 
-        # Add type filtering if the request is made to somewhere like /resources/video
-        if resource_type and resource_type.title() not in self.filters['Type']['filters']:
+        # Add type filtering if the request is made to somewhere like /resources/video.
+        # We also convert all spaces to dashes, so they'll correspond with the filters.
+        dashless_resource_type = resource_type.replace("-", " ")
+        if resource_type and dashless_resource_type.title() not in self.filters['Type']['filters']:
             return HttpResponseNotFound()
+        resource_type = resource_type.replace(" ", "-")
 
         return render(
             request,
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index bfcd569d..34587c81 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -64,9 +64,9 @@ function deserializeURLParams() {
 
             // Update the corresponding filter UI, so it reflects the internal state.
             $(paramFilterArray).each(function(_, filter) {
-                let checkbox = $(`.filter-checkbox[data-filter-name=${filterType}][data-filter-item=${filter}]`);
-                let filterTag = $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`);
-                let resourceTags = $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`);
+                let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
                 checkbox.prop("checked", true);
                 filterTag.show();
                 resourceTags.addClass("active");
@@ -149,7 +149,6 @@ function updateUI() {
     }).show();
 
     // If there are no matches, show the no matches message
-    console.log(hasMatches);
     if (!hasMatches) {
         $(".no-resources-found").show();
     } else {
@@ -196,7 +195,7 @@ document.addEventListener("DOMContentLoaded", function () {
     $('.filter-box-tag').click(function() {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
-        let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`);
+        let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
 
         removeFilter(filterName, filterItem);
         checkbox.prop("checked", false);
@@ -206,7 +205,7 @@ document.addEventListener("DOMContentLoaded", function () {
     $('.resource-tag').click(function() {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
-        let checkbox = $(`.filter-checkbox[data-filter-name=${filterName}][data-filter-item=${filterItem}]`)
+        let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
 
         if (!$(this).hasClass("active")) {
             addFilter(filterName, filterItem);
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 7a284fd6..4dd07270 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -7,7 +7,6 @@
 {% block title %}Resources{% endblock %}
 {% block head %}
     <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
-    <link rel="stylesheet" href="{% static "css/resources/resources_list.css" %}">
     <link rel="stylesheet" href="{% static "css/content/page.css" %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script defer src="{% static "js/resources.js" %}"></script>
-- 
cgit v1.2.3


From df51385ab8adf715d61841eceebeb7cb2f220e77 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 14:14:51 +0100
Subject: Show a "No filters selected" indicator.

---
 pydis_site/static/js/resources.js                | 10 ++++++++--
 pydis_site/templates/resources/resource_box.html |  6 +++---
 pydis_site/templates/resources/resources.html    |  8 +++++++-
 3 files changed, 18 insertions(+), 6 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
index 34587c81..718e1e88 100644
--- a/pydis_site/static/js/resources.js
+++ b/pydis_site/static/js/resources.js
@@ -18,10 +18,12 @@ function addFilter(filterName, filterItem) {
 
     // Show a corresponding filter box tag
     $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
-    $(".filter-tags").css("padding-bottom", "0.5em");
 
     // Make corresponding resource tags active
     $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
+
+    // Hide the "No filters selected" tag.
+    $(".no-tags-selected.tag").hide();
 }
 
 function removeFilter(filterName, filterItem) {
@@ -37,6 +39,11 @@ function removeFilter(filterName, filterItem) {
 
     // Make corresponding resource tags inactive
     $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
+
+    // Show "No filters selected" tag, if there are no filters active
+    if (noFilters()) {
+        $(".no-tags-selected.tag").show();
+    }
 }
 
 /* Check if there are no filters */
@@ -107,7 +114,6 @@ function updateUI() {
     if (noFilters()) {
         resources.show();
         filterTags.hide();
-        $(".filter-tags").css("padding-bottom", "0");
         return;
     }
 
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index b06ffd31..88ddee80 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -18,16 +18,16 @@
         {% if 'title_url' in resource %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ resource.title_url }}">
-                    <i class="fas fa-link is-size-3 resource-icon is-hoverable is-primary"></i>
+                    <i class="fas fa-external-link-alt fa-fw is-size-3 resource-icon is-hoverable is-primary"></i>
                 </a>
             </span>
         {% endif %}
 
-        {#Add all additional icon #}
+        {# Add all additional icon #}
         {% 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-hoverable is-{{ icon.color }}"></i>
+                    <i class="{{ icon.icon|as_icon }} fa-fw is-size-3 resource-icon is-hoverable is-{{ icon.color }}"></i>
                 </a>
             </span>
         {% endfor %}
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 53feb255..c3881092 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -27,6 +27,12 @@
                         {# Filter box tags #}
                         <div class="card filter-tags">
                             <div class="is-flex ml-auto is-flex-wrap-wrap">
+                                {# A filter tag for when there are no filters active #}
+                                <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
+                                        <i class="fas fa-ban mr-1"></i>
+                                        No filters selected
+                                </span>
+
                                 {% for filter_name, filter_data in filters.items %}
                                     {% for filter_item in filter_data.filters %}
                                         {% if filter_name == "Difficulty" %}
@@ -125,7 +131,7 @@
             <div class="column is-two-thirds">
                 {# Message to display when there are no hits #}
                 <div class="no-resources-found">
-                    <h2 class="title is-3 has-text-centered pt-0 pb-6 no-resources-found">No matching resources found!</h2>
+                    <h2 class="title is-3 has-text-centered pt-0 pb-6">No matching resources found!</h2>
                     <img src="{% static "images/resources/duck_pond_404.png" %}" width="650px">
                 </div>
 
-- 
cgit v1.2.3


From dda3e355ac31dc4b9629f2e9e63474bbba69d740 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 14:29:48 +0100
Subject: Refactor: collapsibles as a stand-alone component

---
 pydis_site/apps/resources/urls.py             |   1 +
 pydis_site/static/css/collapsibles.css        |  12 ++
 pydis_site/static/css/content/page.css        |  13 --
 pydis_site/static/js/collapsibles.js          |  13 ++
 pydis_site/static/js/content/page.js          |  13 --
 pydis_site/static/js/resources.js             | 236 --------------------------
 pydis_site/static/js/resources/resources.js   | 236 ++++++++++++++++++++++++++
 pydis_site/templates/content/base.html        |   3 +-
 pydis_site/templates/resources/resources.html |   6 +-
 9 files changed, 267 insertions(+), 266 deletions(-)
 create mode 100644 pydis_site/static/css/collapsibles.css
 create mode 100644 pydis_site/static/js/collapsibles.js
 delete mode 100644 pydis_site/static/js/content/page.js
 delete mode 100644 pydis_site/static/js/resources.js
 create mode 100644 pydis_site/static/js/resources/resources.js

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/resources/urls.py b/pydis_site/apps/resources/urls.py
index aa3892b6..044f7072 100644
--- a/pydis_site/apps/resources/urls.py
+++ b/pydis_site/apps/resources/urls.py
@@ -31,6 +31,7 @@ VALID_RESOURCE_TYPES = [
 
 
 def get_all_pages() -> typing.Iterator[dict[str, str]]:
+    """Get all the valid options for the resource_type path selector."""
     for resource_type in VALID_RESOURCE_TYPES:
         yield {"resource_type": resource_type}
 
diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
new file mode 100644
index 00000000..7b76d8d5
--- /dev/null
+++ b/pydis_site/static/css/collapsibles.css
@@ -0,0 +1,12 @@
+.collapsible {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  outline: none;
+}
+
+.collapsible-content {
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 0.2s ease-out;
+}
\ No newline at end of file
diff --git a/pydis_site/static/css/content/page.css b/pydis_site/static/css/content/page.css
index 2d4bd325..d831f86d 100644
--- a/pydis_site/static/css/content/page.css
+++ b/pydis_site/static/css/content/page.css
@@ -77,16 +77,3 @@ ul.menu-list.toc {
 li img {
     margin-top: 0.5em;
 }
-
-.collapsible {
-  cursor: pointer;
-  width: 100%;
-  border: none;
-  outline: none;
-}
-
-.collapsible-content {
-  overflow: hidden;
-  max-height: 0;
-  transition: max-height 0.2s ease-out;
-}
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
new file mode 100644
index 00000000..366a033c
--- /dev/null
+++ b/pydis_site/static/js/collapsibles.js
@@ -0,0 +1,13 @@
+document.addEventListener("DOMContentLoaded", () => {
+    const headers = document.getElementsByClassName("collapsible");
+    for (const header of headers) {
+        header.addEventListener("click", () => {
+            var content = header.nextElementSibling;
+            if (content.style.maxHeight){
+              content.style.maxHeight = null;
+            } else {
+              content.style.maxHeight = content.scrollHeight + "px";
+            }
+        });
+    }
+});
diff --git a/pydis_site/static/js/content/page.js b/pydis_site/static/js/content/page.js
deleted file mode 100644
index 366a033c..00000000
--- a/pydis_site/static/js/content/page.js
+++ /dev/null
@@ -1,13 +0,0 @@
-document.addEventListener("DOMContentLoaded", () => {
-    const headers = document.getElementsByClassName("collapsible");
-    for (const header of headers) {
-        header.addEventListener("click", () => {
-            var content = header.nextElementSibling;
-            if (content.style.maxHeight){
-              content.style.maxHeight = null;
-            } else {
-              content.style.maxHeight = content.scrollHeight + "px";
-            }
-        });
-    }
-});
diff --git a/pydis_site/static/js/resources.js b/pydis_site/static/js/resources.js
deleted file mode 100644
index 718e1e88..00000000
--- a/pydis_site/static/js/resources.js
+++ /dev/null
@@ -1,236 +0,0 @@
-"use strict";
-
-// Filters that are currently selected
-var activeFilters = {
-    topics: [],
-    type: [],
-    "payment-tiers": [],
-    difficulty: []
-};
-
-function addFilter(filterName, filterItem) {
-    // Push the filter into the stack
-    var filterIndex = activeFilters[filterName].indexOf(filterItem);
-    if (filterIndex === -1) {
-        activeFilters[filterName].push(filterItem);
-    }
-    updateUI();
-
-    // Show a corresponding filter box tag
-    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
-
-    // Make corresponding resource tags active
-    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
-
-    // Hide the "No filters selected" tag.
-    $(".no-tags-selected.tag").hide();
-}
-
-function removeFilter(filterName, filterItem) {
-    // Remove the filter from the stack
-    var filterIndex = activeFilters[filterName].indexOf(filterItem);
-    if (filterIndex !== -1) {
-        activeFilters[filterName].splice(filterIndex, 1);
-    }
-    updateUI();
-
-    // Hide the corresponding filter box tag
-    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide();
-
-    // Make corresponding resource tags inactive
-    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
-
-    // Show "No filters selected" tag, if there are no filters active
-    if (noFilters()) {
-        $(".no-tags-selected.tag").show();
-    }
-}
-
-/* Check if there are no filters */
-function noFilters() {
-    return (
-        activeFilters.topics.length === 0 &&
-        activeFilters.type.length === 0 &&
-        activeFilters["payment-tiers"].length === 0 &&
-        activeFilters.difficulty.length === 0
-    );
-}
-
-/* Get the params out of the URL and use them. This is run when the page loads. */
-function deserializeURLParams() {
-    let searchParams = new window.URLSearchParams(window.location.search);
-
-    // Work through the parameters and add them to the filter object
-    $.each(Object.keys(activeFilters), function(_, filterType) {
-        let paramFilterContent = searchParams.get(filterType);
-
-        if (paramFilterContent !== null) {
-            // We use split here because we always want an array, not a string.
-            let paramFilterArray = paramFilterContent.split(",");
-            activeFilters[filterType] = paramFilterArray;
-
-            // Update the corresponding filter UI, so it reflects the internal state.
-            $(paramFilterArray).each(function(_, filter) {
-                let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
-                let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
-                let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
-                checkbox.prop("checked", true);
-                filterTag.show();
-                resourceTags.addClass("active");
-            });
-        }
-    });
-}
-
-/* Update the URL with new parameters */
-function updateURL() {
-    // If there's nothing in the filters, we don't want anything in the URL.
-    if (noFilters()) {
-        window.history.replaceState(null, document.title, './');
-        return;
-    }
-
-    // Iterate through and get rid of empty ones
-    let searchParams = new URLSearchParams(activeFilters);
-    $.each(activeFilters, function(filterType, filters) {
-        if (filters.length === 0) {
-            searchParams.delete(filterType);
-        }
-    });
-
-    // Now update the URL
-    window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
-}
-
-/* Update the resources to match 'active_filters' */
-function updateUI() {
-    let resources = $('.resource-box');
-    let filterTags = $('.filter-box-tag');
-
-    // Update the URL to match the new filters.
-    updateURL();
-
-    // If there's nothing in the filters, show everything and return.
-    if (noFilters()) {
-        resources.show();
-        filterTags.hide();
-        return;
-    }
-
-    // Otherwise, hide everything and then filter the resources to decide what to show.
-    let hasMatches = false;
-    resources.hide();
-    resources.filter(function() {
-        let validation = {
-            topics: false,
-            type: false,
-            'payment-tiers': false,
-            difficulty: false
-        };
-        let resourceBox = $(this);
-
-        // Validate the filters
-        $.each(activeFilters, function(filterType, filters) {
-            // If the filter list is empty, this passes validation.
-            if (filters.length === 0) {
-                validation[filterType] = true;
-                return;
-            }
-
-            // Otherwise, we need to check if one of the classes exist.
-            $.each(filters, function(index, filter) {
-                if (resourceBox.hasClass(`${filterType}-${filter}`)) {
-                    validation[filterType] = true;
-                }
-            });
-        });
-
-        // If validation passes, show the resource.
-        if (Object.values(validation).every(Boolean)) {
-            hasMatches = true;
-            return true;
-        } else {
-            return false;
-        }
-    }).show();
-
-    // If there are no matches, show the no matches message
-    if (!hasMatches) {
-        $(".no-resources-found").show();
-    } else {
-        $(".no-resources-found").hide();
-    }
-}
-
-// Executed when the page has finished loading.
-document.addEventListener("DOMContentLoaded", function () {
-    /* Check if the user has navigated to one of the old resource pages,
-       like pydis.com/resources/communities. In this case, we'll rewrite
-       the URL before we do anything else. */
-    let resourceTypeInput = $("#resource-type-input").val();
-    if (resourceTypeInput !== "None") {
-        window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`);
-    }
-
-    // Update the filters on page load to reflect URL parameters.
-    $('.filter-box-tag').hide();
-    deserializeURLParams();
-    updateUI();
-
-    // If you collapse or uncollapse a filter group, swap the icon.
-    $('button.collapsible').click(function() {
-        let icon = $(this).find(".card-header-icon i");
-
-        if ($(icon).hasClass("fa-window-minimize")) {
-            $(icon).removeClass(["far", "fa-window-minimize"]);
-            $(icon).addClass(["fas", "fa-angle-down"]);
-        } else {
-            $(icon).removeClass(["fas", "fa-angle-down"]);
-            $(icon).addClass(["far", "fa-window-minimize"]);
-        }
-    });
-
-    // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
-    $('.filter-panel').click(function() {
-        let checkbox = $(this).find(".filter-checkbox");
-        checkbox.prop("checked", !checkbox.prop("checked"));
-        checkbox.change();
-    });
-
-    // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox.
-    $('.filter-box-tag').click(function() {
-        let filterItem = this.dataset.filterItem;
-        let filterName = this.dataset.filterName;
-        let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
-
-        removeFilter(filterName, filterItem);
-        checkbox.prop("checked", false);
-    });
-
-    // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox.
-    $('.resource-tag').click(function() {
-        let filterItem = this.dataset.filterItem;
-        let filterName = this.dataset.filterName;
-        let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
-
-        if (!$(this).hasClass("active")) {
-            addFilter(filterName, filterItem);
-            checkbox.prop("checked", true);
-        } else {
-            removeFilter(filterName, filterItem);
-            checkbox.prop("checked", false);
-        }
-    });
-
-    // When checkboxes are toggled, trigger a filter update.
-    $('.filter-checkbox').change(function () {
-        let filterItem = this.dataset.filterItem;
-        let filterName = this.dataset.filterName;
-
-        if (this.checked) {
-            addFilter(filterName, filterItem);
-        } else {
-            removeFilter(filterName, filterItem);
-        }
-    });
-});
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
new file mode 100644
index 00000000..718e1e88
--- /dev/null
+++ b/pydis_site/static/js/resources/resources.js
@@ -0,0 +1,236 @@
+"use strict";
+
+// Filters that are currently selected
+var activeFilters = {
+    topics: [],
+    type: [],
+    "payment-tiers": [],
+    difficulty: []
+};
+
+function addFilter(filterName, filterItem) {
+    // Push the filter into the stack
+    var filterIndex = activeFilters[filterName].indexOf(filterItem);
+    if (filterIndex === -1) {
+        activeFilters[filterName].push(filterItem);
+    }
+    updateUI();
+
+    // Show a corresponding filter box tag
+    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
+
+    // Make corresponding resource tags active
+    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
+
+    // Hide the "No filters selected" tag.
+    $(".no-tags-selected.tag").hide();
+}
+
+function removeFilter(filterName, filterItem) {
+    // Remove the filter from the stack
+    var filterIndex = activeFilters[filterName].indexOf(filterItem);
+    if (filterIndex !== -1) {
+        activeFilters[filterName].splice(filterIndex, 1);
+    }
+    updateUI();
+
+    // Hide the corresponding filter box tag
+    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide();
+
+    // Make corresponding resource tags inactive
+    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
+
+    // Show "No filters selected" tag, if there are no filters active
+    if (noFilters()) {
+        $(".no-tags-selected.tag").show();
+    }
+}
+
+/* Check if there are no filters */
+function noFilters() {
+    return (
+        activeFilters.topics.length === 0 &&
+        activeFilters.type.length === 0 &&
+        activeFilters["payment-tiers"].length === 0 &&
+        activeFilters.difficulty.length === 0
+    );
+}
+
+/* Get the params out of the URL and use them. This is run when the page loads. */
+function deserializeURLParams() {
+    let searchParams = new window.URLSearchParams(window.location.search);
+
+    // Work through the parameters and add them to the filter object
+    $.each(Object.keys(activeFilters), function(_, filterType) {
+        let paramFilterContent = searchParams.get(filterType);
+
+        if (paramFilterContent !== null) {
+            // We use split here because we always want an array, not a string.
+            let paramFilterArray = paramFilterContent.split(",");
+            activeFilters[filterType] = paramFilterArray;
+
+            // Update the corresponding filter UI, so it reflects the internal state.
+            $(paramFilterArray).each(function(_, filter) {
+                let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                checkbox.prop("checked", true);
+                filterTag.show();
+                resourceTags.addClass("active");
+            });
+        }
+    });
+}
+
+/* Update the URL with new parameters */
+function updateURL() {
+    // If there's nothing in the filters, we don't want anything in the URL.
+    if (noFilters()) {
+        window.history.replaceState(null, document.title, './');
+        return;
+    }
+
+    // Iterate through and get rid of empty ones
+    let searchParams = new URLSearchParams(activeFilters);
+    $.each(activeFilters, function(filterType, filters) {
+        if (filters.length === 0) {
+            searchParams.delete(filterType);
+        }
+    });
+
+    // Now update the URL
+    window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
+}
+
+/* Update the resources to match 'active_filters' */
+function updateUI() {
+    let resources = $('.resource-box');
+    let filterTags = $('.filter-box-tag');
+
+    // Update the URL to match the new filters.
+    updateURL();
+
+    // If there's nothing in the filters, show everything and return.
+    if (noFilters()) {
+        resources.show();
+        filterTags.hide();
+        return;
+    }
+
+    // Otherwise, hide everything and then filter the resources to decide what to show.
+    let hasMatches = false;
+    resources.hide();
+    resources.filter(function() {
+        let validation = {
+            topics: false,
+            type: false,
+            'payment-tiers': false,
+            difficulty: false
+        };
+        let resourceBox = $(this);
+
+        // Validate the filters
+        $.each(activeFilters, function(filterType, filters) {
+            // If the filter list is empty, this passes validation.
+            if (filters.length === 0) {
+                validation[filterType] = true;
+                return;
+            }
+
+            // Otherwise, we need to check if one of the classes exist.
+            $.each(filters, function(index, filter) {
+                if (resourceBox.hasClass(`${filterType}-${filter}`)) {
+                    validation[filterType] = true;
+                }
+            });
+        });
+
+        // If validation passes, show the resource.
+        if (Object.values(validation).every(Boolean)) {
+            hasMatches = true;
+            return true;
+        } else {
+            return false;
+        }
+    }).show();
+
+    // If there are no matches, show the no matches message
+    if (!hasMatches) {
+        $(".no-resources-found").show();
+    } else {
+        $(".no-resources-found").hide();
+    }
+}
+
+// Executed when the page has finished loading.
+document.addEventListener("DOMContentLoaded", function () {
+    /* Check if the user has navigated to one of the old resource pages,
+       like pydis.com/resources/communities. In this case, we'll rewrite
+       the URL before we do anything else. */
+    let resourceTypeInput = $("#resource-type-input").val();
+    if (resourceTypeInput !== "None") {
+        window.history.replaceState(null, document.title, `../?type=${resourceTypeInput}`);
+    }
+
+    // Update the filters on page load to reflect URL parameters.
+    $('.filter-box-tag').hide();
+    deserializeURLParams();
+    updateUI();
+
+    // If you collapse or uncollapse a filter group, swap the icon.
+    $('button.collapsible').click(function() {
+        let icon = $(this).find(".card-header-icon i");
+
+        if ($(icon).hasClass("fa-window-minimize")) {
+            $(icon).removeClass(["far", "fa-window-minimize"]);
+            $(icon).addClass(["fas", "fa-angle-down"]);
+        } else {
+            $(icon).removeClass(["fas", "fa-angle-down"]);
+            $(icon).addClass(["far", "fa-window-minimize"]);
+        }
+    });
+
+    // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
+    $('.filter-panel').click(function() {
+        let checkbox = $(this).find(".filter-checkbox");
+        checkbox.prop("checked", !checkbox.prop("checked"));
+        checkbox.change();
+    });
+
+    // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox.
+    $('.filter-box-tag').click(function() {
+        let filterItem = this.dataset.filterItem;
+        let filterName = this.dataset.filterName;
+        let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
+
+        removeFilter(filterName, filterItem);
+        checkbox.prop("checked", false);
+    });
+
+    // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox.
+    $('.resource-tag').click(function() {
+        let filterItem = this.dataset.filterItem;
+        let filterName = this.dataset.filterName;
+        let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
+
+        if (!$(this).hasClass("active")) {
+            addFilter(filterName, filterItem);
+            checkbox.prop("checked", true);
+        } else {
+            removeFilter(filterName, filterItem);
+            checkbox.prop("checked", false);
+        }
+    });
+
+    // When checkboxes are toggled, trigger a filter update.
+    $('.filter-checkbox').change(function () {
+        let filterItem = this.dataset.filterItem;
+        let filterName = this.dataset.filterName;
+
+        if (this.checked) {
+            addFilter(filterName, filterItem);
+        } else {
+            removeFilter(filterName, filterItem);
+        }
+    });
+});
diff --git a/pydis_site/templates/content/base.html b/pydis_site/templates/content/base.html
index 00f4fce4..4a19a275 100644
--- a/pydis_site/templates/content/base.html
+++ b/pydis_site/templates/content/base.html
@@ -7,7 +7,8 @@
     <meta property="og:type" content="website" />
     <meta property="og:description" content="{{ page_description }}" />
     <link rel="stylesheet" href="{% static "css/content/page.css" %}">
-    <script src="{% static "js/content/page.js" %}"></script>
+    <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
+    <script src="{% static "js/collapsibles.js" %}"></script>
 {% endblock %}
 
 {% block content %}
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index c3881092..80577c2b 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -7,10 +7,10 @@
 {% block title %}Resources{% endblock %}
 {% block head %}
     <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
-    <link rel="stylesheet" href="{% static "css/content/page.css" %}">
+    <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-    <script defer src="{% static "js/resources.js" %}"></script>
-    <script defer src="{% static "js/content/page.js" %}"></script>
+    <script defer src="{% static "js/resources/resources.js" %}"></script>
+    <script defer src="{% static "js/collapsibles.js" %}"></script>
 {% endblock %}
 
 {% block content %}
-- 
cgit v1.2.3


From ca45357255f5957cf779c109fc24e83de904a195 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 30 Jan 2022 20:25:34 +0100
Subject: Collapse category headers on load for mobile only.

---
 pydis_site/static/css/resources/resources.css |  8 ++++++++
 pydis_site/static/js/resources/resources.js   | 13 ++++++++++++-
 pydis_site/templates/resources/resources.html |  2 +-
 3 files changed, 21 insertions(+), 2 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 59f8b78e..b24fcb5b 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -198,4 +198,12 @@ span.resource-tag.active.has-background-info-light {
         padding-top: 4px;
         padding-bottom: 4px;
     }
+}
+
+/* Disable transitions */
+.no-transition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
 }
\ No newline at end of file
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 718e1e88..44d4db5c 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -178,7 +178,7 @@ document.addEventListener("DOMContentLoaded", function () {
     updateUI();
 
     // If you collapse or uncollapse a filter group, swap the icon.
-    $('button.collapsible').click(function() {
+    $('button.collapsible').on("click", function() {
         let icon = $(this).find(".card-header-icon i");
 
         if ($(icon).hasClass("fa-window-minimize")) {
@@ -190,6 +190,17 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
+    // If this is a mobile device, collapse the categories to win back some screen real estate.
+    if (screen.width < 480) {
+        let categoryHeaders = $(".filter-category-header .collapsible-content");
+        let icons = $('.filter-category-header button .card-header-icon i');
+        categoryHeaders.addClass("no-transition");
+        categoryHeaders.css("max-height", 0);
+        icons.removeClass(["far", "fa-window-minimize"]);
+        icons.addClass(["fas", "fa-angle-down"]);
+        categoryHeaders.removeClass("no-transition");
+    }
+
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
     $('.filter-panel').click(function() {
         let checkbox = $(this).find(".filter-checkbox");
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 80577c2b..a7b25f5c 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -104,7 +104,7 @@
                             {% if filter_data.hidden %}
                                 <div class="collapsible-content">
                             {% else %}
-                                <div class="collapsible-content" style="max-height: 480px;">
+                                <div class="collapsible-content" style="max-height: fit-content;">
                             {% endif %}
                         <div class="card-content">
                             {% for filter_item in filter_data.filters %}
-- 
cgit v1.2.3


From 91935d88476bade9701d354e82cafba912a33f69 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Mon, 31 Jan 2022 18:02:59 +0100
Subject: Get rid of invalid filters in the URL.

---
 pydis_site/apps/resources/views/resources.py  | 11 +++++++++++
 pydis_site/static/js/resources/resources.js   | 24 +++++++++++++++++-------
 pydis_site/templates/resources/resources.html |  5 +++++
 3 files changed, 33 insertions(+), 7 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index a5c2cf7c..a38c3b59 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -1,3 +1,4 @@
+import json
 import typing as t
 from pathlib import Path
 
@@ -8,6 +9,7 @@ from django.shortcuts import render
 from django.views import View
 
 from pydis_site import settings
+from pydis_site.apps.resources.templatetags.as_css_class import as_css_class
 
 RESOURCES_PATH = Path(settings.BASE_DIR, "pydis_site", "apps", "resources", "resources")
 
@@ -83,6 +85,14 @@ class ResourceView(View):
         self.filters["Topics"]["filters"].remove("Other")
         self.filters["Topics"]["filters"].append("Other")
 
+        # A complete list of valid filter names
+        self.valid_filters = {
+            "topics": [as_css_class(topic) for topic in self.filters["Topics"]["filters"]],
+            "payment_tiers": [as_css_class(tier) for tier in self.filters["Payment tiers"]["filters"]],
+            "type": [as_css_class(type_) for type_ in self.filters["Type"]["filters"]],
+            "difficulty": [as_css_class(tier) for tier in self.filters["Difficulty"]["filters"]],
+        }
+
     def get(self, request: WSGIRequest, resource_type: t.Optional[str] = None) -> HttpResponse:
         """List out all the resources, and any filtering options from the URL."""
         # Add type filtering if the request is made to somewhere like /resources/video.
@@ -101,6 +111,7 @@ class ResourceView(View):
             context={
                 "resources": self.resources,
                 "filters": self.filters,
+                "valid_filters": json.dumps(self.valid_filters),
                 "resource_type": resource_type,
             }
         )
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 44d4db5c..ad26afd4 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -67,17 +67,27 @@ function deserializeURLParams() {
         if (paramFilterContent !== null) {
             // We use split here because we always want an array, not a string.
             let paramFilterArray = paramFilterContent.split(",");
-            activeFilters[filterType] = paramFilterArray;
 
             // Update the corresponding filter UI, so it reflects the internal state.
             $(paramFilterArray).each(function(_, filter) {
-                let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
-                let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
-                let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
-                checkbox.prop("checked", true);
-                filterTag.show();
-                resourceTags.addClass("active");
+                // Make sure the filter is valid before we do anything.
+                if (String(filter) === "rickroll" && filterType === "type") {
+                    window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
+                } else if (String(filter) === "sneakers" && filterType === "topics") {
+                    window.location.href = "https://www.youtube.com/watch?v=NNZscmNE9QI";
+                } else if (validFilters[filterType].includes(String(filter))) {
+                    let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                    let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                    let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
+                    checkbox.prop("checked", true);
+                    filterTag.show();
+                    resourceTags.addClass("active");
+                    activeFilters[filterType].push(filter);
+                }
             });
+
+            // Ditch all the params from the URL, and recalculate the URL params
+            updateURL();
         }
     });
 }
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 13bba1f2..a37bf80a 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -6,6 +6,11 @@
 
 {% block title %}Resources{% endblock %}
 {% block head %}
+    {# Inject a JSON object of all valid filter types from the view #}
+    <script>
+        const validFilters = {{ valid_filters | safe }}
+    </script>
+
     <link rel="stylesheet" href="{% static "css/resources/resources.css" %}">
     <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
-- 
cgit v1.2.3


From 1e62517558b7aebfac3043b3cc799f075de5f0b5 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Mon, 31 Jan 2022 18:07:34 +0100
Subject: Hide no filters selected in all cases.

---
 pydis_site/static/js/resources/resources.js | 7 +++++++
 1 file changed, 7 insertions(+)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index ad26afd4..d24fbfca 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -69,6 +69,7 @@ function deserializeURLParams() {
             let paramFilterArray = paramFilterContent.split(",");
 
             // Update the corresponding filter UI, so it reflects the internal state.
+            let filterAdded = false;
             $(paramFilterArray).each(function(_, filter) {
                 // Make sure the filter is valid before we do anything.
                 if (String(filter) === "rickroll" && filterType === "type") {
@@ -83,11 +84,17 @@ function deserializeURLParams() {
                     filterTag.show();
                     resourceTags.addClass("active");
                     activeFilters[filterType].push(filter);
+                    filterAdded = true;
                 }
             });
 
             // Ditch all the params from the URL, and recalculate the URL params
             updateURL();
+
+            // If we've added a filter, hide the no filters tag.
+            if (filterAdded) {
+                $(".no-tags-selected.tag").hide();
+            }
         }
     });
 }
-- 
cgit v1.2.3


From ec6490ff796669ca6ba12b42c5876072ed0f0f88 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Mon, 31 Jan 2022 19:43:58 +0100
Subject: Improve performance of addFilter() up to 300%

---
 pydis_site/static/js/resources/resources.js | 24 +++++++++++++++---------
 1 file changed, 15 insertions(+), 9 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index d24fbfca..d2244a9d 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -147,6 +147,7 @@ function updateUI() {
         let resourceBox = $(this);
 
         // Validate the filters
+
         $.each(activeFilters, function(filterType, filters) {
             // If the filter list is empty, this passes validation.
             if (filters.length === 0) {
@@ -171,6 +172,7 @@ function updateUI() {
         }
     }).show();
 
+
     // If there are no matches, show the no matches message
     if (!hasMatches) {
         $(".no-resources-found").show();
@@ -219,14 +221,18 @@ document.addEventListener("DOMContentLoaded", function () {
     }
 
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
-    $('.filter-panel').click(function() {
-        let checkbox = $(this).find(".filter-checkbox");
-        checkbox.prop("checked", !checkbox.prop("checked"));
-        checkbox.change();
+    $('.filter-panel').on("click",function(event) {
+        let hitsCheckbox = Boolean(String(event.target));
+
+        if (!hitsCheckbox) {
+            let checkbox = $(this).find(".filter-checkbox");
+            checkbox.prop("checked", !checkbox.prop("checked"));
+            checkbox.trigger("change");
+        }
     });
 
     // If you click on one of the tags in the filter box, it unchecks the corresponding checkbox.
-    $('.filter-box-tag').click(function() {
+    $('.filter-box-tag').on("click", function() {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
         let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
@@ -236,7 +242,7 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     // If you click on one of the tags in the resource cards, it clicks the corresponding checkbox.
-    $('.resource-tag').click(function() {
+    $('.resource-tag').on("click", function() {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
         let checkbox = $(`.filter-checkbox[data-filter-name='${filterName}'][data-filter-item='${filterItem}']`);
@@ -251,13 +257,13 @@ document.addEventListener("DOMContentLoaded", function () {
     });
 
     // When checkboxes are toggled, trigger a filter update.
-    $('.filter-checkbox').change(function () {
+    $('.filter-checkbox').on("change", function (event) {
         let filterItem = this.dataset.filterItem;
         let filterName = this.dataset.filterName;
 
-        if (this.checked) {
+        if (this.checked && !activeFilters[filterName].includes(filterItem)) {
             addFilter(filterName, filterItem);
-        } else {
+        } else if (!this.checked && activeFilters[filterName].includes(filterItem)) {
             removeFilter(filterName, filterItem);
         }
     });
-- 
cgit v1.2.3


From f8b2d6cbef76ad1644100ae02133e5d324ec2aad Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Mon, 31 Jan 2022 19:54:44 +0100
Subject: Fix category header double click bug on mobile.

---
 pydis_site/static/js/resources/resources.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index d2244a9d..0e951c38 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -214,7 +214,7 @@ document.addEventListener("DOMContentLoaded", function () {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');
         categoryHeaders.addClass("no-transition");
-        categoryHeaders.css("max-height", 0);
+        categoryHeaders.css("max-height", "");
         icons.removeClass(["far", "fa-window-minimize"]);
         icons.addClass(["fas", "fa-angle-down"]);
         categoryHeaders.removeClass("no-transition");
-- 
cgit v1.2.3


From 24edd0ada26af34e946965d5692b6a35b7622ef9 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Mon, 31 Jan 2022 22:16:20 +0100
Subject: Add a button for removing all active filters.

---
 pydis_site/static/css/resources/resources.css |  21 ++++-
 pydis_site/static/js/resources/resources.js   |  67 +++++++++------
 pydis_site/templates/resources/resources.html | 118 ++++++++++++++------------
 3 files changed, 123 insertions(+), 83 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index 16226936..2fb3a9b5 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -97,12 +97,29 @@ i.is-primary {
     color: #7289da;
 }
 
-/* A little space around the filter card, please! */
+/* A little space above the filter card, please! */
 .filter-tags {
     padding-bottom: .5em;
-    padding-right: .5em;
 }
 
+/* Style the close all filters button */
+.close-filters-button {
+    margin-left: auto;
+    display:none;
+}
+.close-filters-button a {
+    height: fit-content;
+    width: fit-content;
+    margin-right: 6px;
+}
+.close-filters-button a i {
+    color: #939bb3;
+}
+.close-filters-button a i:hover {
+    filter: brightness(115%);
+}
+
+
 /* Set default display to inline-flex, for centering. */
 span.filter-box-tag {
     display: none;
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 0e951c38..8627a359 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -8,42 +8,33 @@ var activeFilters = {
     difficulty: []
 };
 
+/* Add a filter, and update the UI */
 function addFilter(filterName, filterItem) {
-    // Push the filter into the stack
     var filterIndex = activeFilters[filterName].indexOf(filterItem);
     if (filterIndex === -1) {
         activeFilters[filterName].push(filterItem);
     }
     updateUI();
+}
 
-    // Show a corresponding filter box tag
-    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).show();
-
-    // Make corresponding resource tags active
-    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).addClass("active");
-
-    // Hide the "No filters selected" tag.
-    $(".no-tags-selected.tag").hide();
+/* Remove all filters, and update the UI */
+function removeAllFilters() {
+    activeFilters = {
+        topics: [],
+        type: [],
+        "payment-tiers": [],
+        difficulty: []
+    };
+    updateUI();
 }
 
+/* Remove a filter, and update the UI */
 function removeFilter(filterName, filterItem) {
-    // Remove the filter from the stack
     var filterIndex = activeFilters[filterName].indexOf(filterItem);
     if (filterIndex !== -1) {
         activeFilters[filterName].splice(filterIndex, 1);
     }
     updateUI();
-
-    // Hide the corresponding filter box tag
-    $(`.filter-box-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).hide();
-
-    // Make corresponding resource tags inactive
-    $(`.resource-tag[data-filter-name=${filterName}][data-filter-item=${filterItem}]`).removeClass("active");
-
-    // Show "No filters selected" tag, if there are no filters active
-    if (noFilters()) {
-        $(".no-tags-selected.tag").show();
-    }
 }
 
 /* Check if there are no filters */
@@ -76,7 +67,7 @@ function deserializeURLParams() {
                     window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
                 } else if (String(filter) === "sneakers" && filterType === "topics") {
                     window.location.href = "https://www.youtube.com/watch?v=NNZscmNE9QI";
-                } else if (validFilters[filterType].includes(String(filter))) {
+                } else if (validFilters.hasOwnProperty(filterType) && validFilters[filterType].includes(String(filter))) {
                     let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
                     let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
                     let resourceTags = $(`.resource-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
@@ -91,9 +82,10 @@ function deserializeURLParams() {
             // Ditch all the params from the URL, and recalculate the URL params
             updateURL();
 
-            // If we've added a filter, hide the no filters tag.
+            // If we've added a filter, hide stuff
             if (filterAdded) {
                 $(".no-tags-selected.tag").hide();
+                $(".close-filters-button").show();
             }
         }
     });
@@ -123,15 +115,36 @@ function updateURL() {
 function updateUI() {
     let resources = $('.resource-box');
     let filterTags = $('.filter-box-tag');
+    let noTagsSelected = $(".no-tags-selected.tag");
+    let closeFiltersButton = $(".close-filters-button");
 
     // Update the URL to match the new filters.
     updateURL();
 
-    // If there's nothing in the filters, show everything and return.
+    // If there's nothing in the filters, we can return early.
     if (noFilters()) {
         resources.show();
         filterTags.hide();
+        noTagsSelected.show();
+        closeFiltersButton.hide();
+        $(`.filter-checkbox:checked`).prop("checked", false)
         return;
+    } else {
+        $.each(activeFilters, function(filterType, filters) {
+            $.each(filters, function(index, filter) {
+                // Show a corresponding filter box tag
+                $(`.filter-box-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).show();
+
+                // Make corresponding resource tags active
+                $(`.resource-tag[data-filter-name=${filterType}][data-filter-item=${filter}]`).addClass("active");
+
+                // Hide the "No filters selected" tag.
+                noTagsSelected.hide();
+
+                // Show the close filters button
+                closeFiltersButton.show();
+            });
+        });
     }
 
     // Otherwise, hide everything and then filter the resources to decide what to show.
@@ -147,7 +160,6 @@ function updateUI() {
         let resourceBox = $(this);
 
         // Validate the filters
-
         $.each(activeFilters, function(filterType, filters) {
             // If the filter list is empty, this passes validation.
             if (filters.length === 0) {
@@ -256,6 +268,11 @@ document.addEventListener("DOMContentLoaded", function () {
         }
     });
 
+    // When you click the little gray x, remove all filters.
+    $(".close-filters-button").on("click", function() {
+        removeAllFilters();
+    });
+
     // When checkboxes are toggled, trigger a filter update.
     $('.filter-checkbox').on("change", function (event) {
         let filterItem = this.dataset.filterItem;
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 4b7e9040..cebaace2 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -31,64 +31,70 @@
 
                         {# Filter box tags #}
                         <div class="card filter-tags">
-                            <div class="is-flex ml-auto is-flex-wrap-wrap">
-                                {# A little x in the top right, visible only when filters are active, which removes all filters. #}
-                                <i class="fas fa-window-close"></i>
-
-                                {# A filter tag for when there are no filters active #}
-                                <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
-                                        <i class="fas fa-ban mr-1"></i>
-                                        No filters selected
-                                </span>
+                            <div class="is-flex ml-auto">
+                                <div>
+                                    {# A filter tag for when there are no filters active #}
+                                    <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
+                                            <i class="fas fa-ban mr-1"></i>
+                                            No filters selected
+                                    </span>
 
-                                {% for filter_name, filter_data in filters.items %}
-                                    {% for filter_item in filter_data.filters %}
-                                        {% if filter_name == "Difficulty" %}
-                                            <span
-                                                    class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-info has-background-info-light"></button>
-                                                </span>
-                                        {% endif %}
-                                        {% if filter_name == "Type" %}
-                                            <span
-                                                    class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-success has-background-success-light"></button>
-                                                </span>
-                                        {% endif %}
-                                        {% if filter_name == "Payment tiers" %}
-                                            <span
-                                                    class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-danger has-background-danger-light"></button>
-                                                </span>
-                                        {% endif %}
-                                        {% if filter_name == "Topics" %}
-                                            <span
-                                                    class="filter-box-tag tag is-primary is-light ml-2 mt-2"
-                                                    data-filter-name="{{ filter_name|as_css_class }}"
-                                                    data-filter-item="{{ filter_item|as_css_class }}"
-                                            >
-                                                    <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
-                                                    {{ filter_item|title }}
-                                                    <button class="delete is-small is-primary has-background-primary-light"></button>
-                                                </span>
-                                        {% endif %}
+                                    {% for filter_name, filter_data in filters.items %}
+                                        {% for filter_item in filter_data.filters %}
+                                            {% if filter_name == "Difficulty" %}
+                                                <span
+                                                        class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-info has-background-info-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                            {% if filter_name == "Type" %}
+                                                <span
+                                                        class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-success has-background-success-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                            {% if filter_name == "Payment tiers" %}
+                                                <span
+                                                        class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-danger has-background-danger-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                            {% if filter_name == "Topics" %}
+                                                <span
+                                                        class="filter-box-tag tag is-primary is-light ml-2 mt-2"
+                                                        data-filter-name="{{ filter_name|as_css_class }}"
+                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                >
+                                                        <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
+                                                        {{ filter_item|title }}
+                                                        <button class="delete is-small is-primary has-background-primary-light"></button>
+                                                    </span>
+                                            {% endif %}
+                                        {% endfor %}
                                     {% endfor %}
-                                {% endfor %}
+                                </div>
+                                <div class="close-filters-button">
+                                    {# A little x in the top right, visible only when filters are active, which removes all filters. #}
+                                    <a class="icon">
+                                        <i class="fas fa-window-close"></i>
+                                    </a>
+
+                                </div>
                             </div>
                         </div>
 
-- 
cgit v1.2.3


From 4dfde7fbf09a38134e997abe5b2b7ebe08fc0538 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 01:18:57 +0100
Subject: Make resource tags correctly deactivate.

---
 pydis_site/static/js/resources/resources.js | 9 +++++++++
 1 file changed, 9 insertions(+)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 8627a359..bffb5e91 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -115,6 +115,7 @@ function updateURL() {
 function updateUI() {
     let resources = $('.resource-box');
     let filterTags = $('.filter-box-tag');
+    let resourceTags = $('.resource-tag');
     let noTagsSelected = $(".no-tags-selected.tag");
     let closeFiltersButton = $(".close-filters-button");
 
@@ -127,9 +128,17 @@ function updateUI() {
         filterTags.hide();
         noTagsSelected.show();
         closeFiltersButton.hide();
+        resourceTags.removeClass("active");
         $(`.filter-checkbox:checked`).prop("checked", false)
         return;
     } else {
+        // Hide everything
+        $('.filter-box-tag').hide();
+        $('.resource-tag').removeClass("active");
+        noTagsSelected.show();
+        closeFiltersButton.hide();
+
+        // Now conditionally show the stuff we want
         $.each(activeFilters, function(filterType, filters) {
             $.each(filters, function(index, filter) {
                 // Show a corresponding filter box tag
-- 
cgit v1.2.3


From d31340f8abeabc5df1c778d7d8eae4d0806fad0e Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 02:13:34 +0100
Subject: Fix bug where transition wouldn't work on first collapse.

---
 pydis_site/static/css/collapsibles.css        | 6 +++++-
 pydis_site/static/js/collapsibles.js          | 6 +-----
 pydis_site/static/js/resources/resources.js   | 7 ++++---
 pydis_site/templates/resources/resources.html | 4 ++--
 4 files changed, 12 insertions(+), 11 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index 8fdd1f12..d35e77ea 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -6,7 +6,11 @@
 }
 
 .collapsible-content {
+  max-height: 40em;
+  transition: max-height 0.3s ease-out;
+}
+
+.collapsible-content.collapsed {
   overflow: hidden;
   max-height: 0;
-  transition: max-height 0.2s ease-out;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index 366a033c..d12d9f86 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -3,11 +3,7 @@ document.addEventListener("DOMContentLoaded", () => {
     for (const header of headers) {
         header.addEventListener("click", () => {
             var content = header.nextElementSibling;
-            if (content.style.maxHeight){
-              content.style.maxHeight = null;
-            } else {
-              content.style.maxHeight = content.scrollHeight + "px";
-            }
+            content.classList.toggle('collapsed');
         });
     }
 });
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index bffb5e91..00bc6ad8 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -234,11 +234,12 @@ document.addEventListener("DOMContentLoaded", function () {
     if (screen.width < 480) {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');
-        categoryHeaders.addClass("no-transition");
-        categoryHeaders.css("max-height", "");
+        categoryHeaders.addClass("no-transition collapsed");
         icons.removeClass(["far", "fa-window-minimize"]);
         icons.addClass(["fas", "fa-angle-down"]);
-        categoryHeaders.removeClass("no-transition");
+
+        // Wait 10ms before removing this class, or else the transition will animate due to a race condition.
+        setTimeout(() => { categoryHeaders.removeClass("no-transition"); }, 10);
     }
 
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index cebaace2..c221c8a3 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -116,9 +116,9 @@
 
                             {# Checkboxes #}
                             {% if filter_data.hidden %}
-                                <div class="collapsible-content">
+                                <div class="collapsible-content collapsed">
                             {% else %}
-                                <div class="collapsible-content" style="max-height: fit-content;">
+                                <div class="collapsible-content">
                             {% endif %}
                                     <div class="card-content">
                                         {% for filter_item in filter_data.filters %}
-- 
cgit v1.2.3


From e07d21a91e63353d693a6fcee3eef0a16b593e06 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 02:50:27 +0100
Subject: Fix delay when collapsing collapsibles.

---
 pydis_site/static/css/collapsibles.css | 3 +--
 pydis_site/static/js/collapsibles.js   | 6 ++++++
 2 files changed, 7 insertions(+), 2 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index d35e77ea..a722d646 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -6,11 +6,10 @@
 }
 
 .collapsible-content {
-  max-height: 40em;
   transition: max-height 0.3s ease-out;
 }
 
 .collapsible-content.collapsed {
   overflow: hidden;
-  max-height: 0;
+  max-height: 0 !important;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index d12d9f86..443d3f49 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -1,4 +1,10 @@
 document.addEventListener("DOMContentLoaded", () => {
+    // Set maxHeight to scroll height on all matching collapsibles
+    const contentContainers = document.getElementsByClassName("collapsible-content");
+    for (const container of contentContainers) {
+        container.style.maxHeight = container.scrollHeight + "px";
+    }
+
     const headers = document.getElementsByClassName("collapsible");
     for (const header of headers) {
         header.addEventListener("click", () => {
-- 
cgit v1.2.3


From e144d4d1b4d1ef2ec2f9f8b771b3606b581ace34 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Tue, 1 Feb 2022 22:43:15 +0100
Subject: Complete refactor of collapsibles.

This is now a completely self-contained feature, which
can be used in the same way on every page. I've moved all the
collapsible-related logics out of the resources.js file and
into collapsibles.js, and added documentation and other
quality-of-life features that will apply to other pages, as well.

Changes:
- The icon will now always change when the collapsible opens or closes.
- By adding the "collapsed" class, you can tell the collapsible to
  be collapsed by default.
---
 .../guides/pydis-guides/contributing/bot.md        | 20 ++++----
 pydis_site/static/css/collapsibles.css             |  4 --
 pydis_site/static/js/collapsibles.js               | 60 ++++++++++++++++++++--
 pydis_site/static/js/resources/resources.js        | 15 +-----
 4 files changed, 67 insertions(+), 32 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
index ed9e3db3..2aa10aa3 100644
--- a/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
+++ b/pydis_site/apps/content/resources/guides/pydis-guides/contributing/bot.md
@@ -14,10 +14,10 @@ First things first, to run the bot's code and make changes to it, you need a loc
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Getting started with Git and GitHub</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
               <p>If you don't have Git on your computer already, <a href="https://git-scm.com/downloads">install it</a>. You can additionally install a Git GUI such as <a href="https://www.gitkraken.com/download">GitKraken</a>, or the <a href="https://cli.github.com/manual/installation">GitHub CLI</a>.</p>
               <p>To learn more about Git, you can look into <a href="../working-with-git">our guides</a>, as well as <a href="https://education.github.com/git-cheat-sheet-education.pdf">this cheatsheet</a>, <a href="https://learngitbranching.js.org">Learn Git Branching</a>, and otherwise any guide you can find on the internet. Once you got the basic idea though, the best way to learn Git is to use it.</p>
@@ -78,10 +78,10 @@ See [here](../obtaining-discord-ids) for help with obtaining Discord IDs.
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Optional config.yml</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
               <p>If you used the provided server template, and you're not sure which channels belong where in the config file, you can use the config below. Pay attention to the comments with several <code>#</code> symbols, and replace the <code>�</code> characters with the right IDs.</p>
               <pre>
@@ -458,10 +458,10 @@ We understand this is tedious and are working on a better solution for setting u
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Why do you need a separate config file?</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             While it's technically possible to edit <code>config-default.yml</code> to match your server, it is heavily discouraged.
             This file's purpose is to provide the configurations the Python bot needs to run in the Python server in production, and should remain as such.
@@ -487,10 +487,10 @@ You are now almost ready to run the Python bot. The simplest way to do so is wit
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Getting started with Docker</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             The requirements for Docker are:
             <ul>
@@ -541,10 +541,10 @@ With at least the site running in Docker already (see the previous section on ho
     <button type="button" class="card-header collapsible">
         <span class="card-header-title subtitle is-6 my-2 ml-2">Ways to run code</span>
         <span class="card-header-icon">
-            <i class="fas fa-angle-down title is-5" aria-hidden="true"></i>
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
         </span>
     </button>
-    <div class="collapsible-content">
+    <div class="collapsible-content collapsed">
         <div class="card-content">
             Notice that the bot is started as a module. There are several ways to do so:
             <ul>
diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
index a722d646..1d73fa00 100644
--- a/pydis_site/static/css/collapsibles.css
+++ b/pydis_site/static/css/collapsibles.css
@@ -7,9 +7,5 @@
 
 .collapsible-content {
   transition: max-height 0.3s ease-out;
-}
-
-.collapsible-content.collapsed {
   overflow: hidden;
-  max-height: 0 !important;
 }
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
index 443d3f49..1df0b9fe 100644
--- a/pydis_site/static/js/collapsibles.js
+++ b/pydis_site/static/js/collapsibles.js
@@ -1,15 +1,67 @@
+/*
+A utility for creating simple collapsible cards.
+
+To see this in action, go to /resources or /pages/guides/pydis-guides/contributing/bot/
+
+// HOW TO USE THIS //
+First, import this file and the corresponding css file into your template.
+
+  <link rel="stylesheet" href="{% static "css/collapsibles.css" %}">
+  <script defer src="{% static "js/collapsibles.js" %}"></script>
+
+Next, you'll need some HTML that these scripts can interact with.
+
+<div class="card">
+    <button type="button" class="card-header collapsible">
+        <span class="card-header-title subtitle is-6 my-2 ml-2">Your headline</span>
+        <span class="card-header-icon">
+            <i class="fas fa-fw fa-angle-down title is-5" aria-hidden="true"></i>
+        </span>
+    </button>
+    <div class="collapsible-content collapsed">
+        <div class="card-content">
+            You can put anything you want here. Lists, more divs, flexboxes, images, whatever.
+        </div>
+    </div>
+</div>
+
+That's it! Collapsing stuff should now work.
+ */
+
 document.addEventListener("DOMContentLoaded", () => {
-    // Set maxHeight to scroll height on all matching collapsibles
     const contentContainers = document.getElementsByClassName("collapsible-content");
     for (const container of contentContainers) {
-        container.style.maxHeight = container.scrollHeight + "px";
+        // Close any collapsibles that are marked as initially collapsed
+        if (container.classList.contains("collapsed")) {
+            container.style.maxHeight = "0px";
+        // Set maxHeight to the size of the container on all other containers.
+        } else {
+            container.style.maxHeight = container.scrollHeight + "px";
+        }
     }
 
+    // Listen for click events, and collapse or explode
     const headers = document.getElementsByClassName("collapsible");
     for (const header of headers) {
+        const content = header.nextElementSibling;
+        const icon = header.querySelector(".card-header-icon i");
+
+        // Any collapsibles that are not initially collapsed needs an icon switch.
+        if (!content.classList.contains("collapsed")) {
+            icon.classList.remove("fas", "fa-angle-down");
+            icon.classList.add("far", "fa-window-minimize");
+        }
+
         header.addEventListener("click", () => {
-            var content = header.nextElementSibling;
-            content.classList.toggle('collapsed');
+            if (content.style.maxHeight !== "0px"){
+                content.style.maxHeight = "0px";
+                icon.classList.remove("far", "fa-window-minimize");
+                icon.classList.add("fas", "fa-angle-down");
+            } else {
+                content.style.maxHeight = content.scrollHeight + "px";
+                icon.classList.remove("fas", "fa-angle-down");
+                icon.classList.add("far", "fa-window-minimize");
+            }
         });
     }
 });
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 00bc6ad8..e45233b3 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -217,20 +217,7 @@ document.addEventListener("DOMContentLoaded", function () {
     deserializeURLParams();
     updateUI();
 
-    // If you collapse or uncollapse a filter group, swap the icon.
-    $('button.collapsible').on("click", function() {
-        let icon = $(this).find(".card-header-icon i");
-
-        if ($(icon).hasClass("fa-window-minimize")) {
-            $(icon).removeClass(["far", "fa-window-minimize"]);
-            $(icon).addClass(["fas", "fa-angle-down"]);
-        } else {
-            $(icon).removeClass(["fas", "fa-angle-down"]);
-            $(icon).addClass(["far", "fa-window-minimize"]);
-        }
-    });
-
-    // If this is a mobile device, collapse the categories to win back some screen real estate.
+    // If this is a mobile device, collapse all the categories to win back some screen real estate.
     if (screen.width < 480) {
         let categoryHeaders = $(".filter-category-header .collapsible-content");
         let icons = $('.filter-category-header button .card-header-icon i');
-- 
cgit v1.2.3


From 3e48c9d57bb0c6fddbe9449bcb8d4b20b41e2448 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Wed, 2 Feb 2022 00:08:02 +0100
Subject: Duck pond removed when removing all filters.

---
 pydis_site/static/js/resources/resources.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index e45233b3..508849e1 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -129,7 +129,8 @@ function updateUI() {
         noTagsSelected.show();
         closeFiltersButton.hide();
         resourceTags.removeClass("active");
-        $(`.filter-checkbox:checked`).prop("checked", false)
+        $(`.filter-checkbox:checked`).prop("checked", false);
+        $(".no-resources-found").hide();
         return;
     } else {
         // Hide everything
-- 
cgit v1.2.3


From a3c29ebd0ebbb1b60cf3d1075cf599adf48e19e9 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 10:26:26 +0100
Subject: Dynamically update URL with search query.

---
 pydis_site/static/js/resources/resources.js | 22 +++++++++++++++++++---
 1 file changed, 19 insertions(+), 3 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 508849e1..c4d01f9d 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -51,6 +51,13 @@ function noFilters() {
 function deserializeURLParams() {
     let searchParams = new window.URLSearchParams(window.location.search);
 
+    // Add the search query to the search bar.
+    if (searchParams.has("search")) {
+        let searchQuery = searchParams.get("search");
+        console.log("Adding query to search box! Query is ${searchQuery}");
+        $("#resource-search input").val(searchQuery);
+    }
+
     // Work through the parameters and add them to the filter object
     $.each(Object.keys(activeFilters), function(_, filterType) {
         let paramFilterContent = searchParams.get(filterType);
@@ -62,11 +69,13 @@ function deserializeURLParams() {
             // Update the corresponding filter UI, so it reflects the internal state.
             let filterAdded = false;
             $(paramFilterArray).each(function(_, filter) {
-                // Make sure the filter is valid before we do anything.
+                // Catch special cases.
                 if (String(filter) === "rickroll" && filterType === "type") {
                     window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
                 } else if (String(filter) === "sneakers" && filterType === "topics") {
                     window.location.href = "https://www.youtube.com/watch?v=NNZscmNE9QI";
+
+                // If the filter is valid, mirror it to the UI.
                 } else if (validFilters.hasOwnProperty(filterType) && validFilters[filterType].includes(String(filter))) {
                     let checkbox = $(`.filter-checkbox[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
                     let filterTag = $(`.filter-box-tag[data-filter-name='${filterType}'][data-filter-item='${filter}']`);
@@ -93,8 +102,10 @@ function deserializeURLParams() {
 
 /* Update the URL with new parameters */
 function updateURL() {
-    // If there's nothing in the filters, we don't want anything in the URL.
-    if (noFilters()) {
+    let searchQuery = $("#resource-search input").val();
+
+    // If there's no active filtering parameters, we can return early.
+    if (noFilters() && searchQuery.length === 0) {
         window.history.replaceState(null, document.title, './');
         return;
     }
@@ -107,6 +118,11 @@ function updateURL() {
         }
     });
 
+    // Add the search query, if necessary.
+    if (searchQuery.length > 0) {
+        searchParams.set("search", searchQuery);
+    }
+
     // Now update the URL
     window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
 }
-- 
cgit v1.2.3


From 364060841c39c12973e6edd1854d251d5d8011c9 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 10:26:51 +0100
Subject: Trigger a UI update when typing into search.

---
 pydis_site/static/js/resources/resources.js | 5 +++++
 1 file changed, 5 insertions(+)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index c4d01f9d..348571e6 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -246,6 +246,11 @@ document.addEventListener("DOMContentLoaded", function () {
         setTimeout(() => { categoryHeaders.removeClass("no-transition"); }, 10);
     }
 
+    // When you type into the search bar, trigger an UI update.
+    $("#resource-search input").on("input", function() {
+        updateUI();
+    });
+
     // If you click on the div surrounding the filter checkbox, it clicks the corresponding checkbox.
     $('.filter-panel').on("click",function(event) {
         let hitsCheckbox = Boolean(String(event.target));
-- 
cgit v1.2.3


From 9db38103343a662248aae9d4a134b93a2113b72f Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 12:05:52 +0100
Subject: Implement fuzzy search.

This implements the core logics for filtering by search.

It uses fuzzysort to match the search query to the name of
the resource. This name is set in the yaml for each resource.
---
 pydis_site/static/js/resources/resources.js | 39 ++++++++++++++++++++++++++---
 1 file changed, 35 insertions(+), 4 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 348571e6..79c33cc7 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -8,6 +8,12 @@ var activeFilters = {
     difficulty: []
 };
 
+// Options for fuzzysort
+const fuzzysortOptions = {
+  allowTypo: true,    // Allow our users to make typos
+  threshold: -10000,  // The threshold for the fuzziness. Adjust for precision.
+};
+
 /* Add a filter, and update the UI */
 function addFilter(filterName, filterItem) {
     var filterIndex = activeFilters[filterName].indexOf(filterItem);
@@ -54,7 +60,6 @@ function deserializeURLParams() {
     // Add the search query to the search bar.
     if (searchParams.has("search")) {
         let searchQuery = searchParams.get("search");
-        console.log("Adding query to search box! Query is ${searchQuery}");
         $("#resource-search input").val(searchQuery);
     }
 
@@ -127,6 +132,17 @@ function updateURL() {
     window.history.replaceState(null, document.title, `?${searchParams.toString()}`);
 }
 
+/* Apply search terms */
+function filterBySearch(resourceItems) {
+    let searchQuery = $("#resource-search input").val();
+
+    resourceItems.filter(function() {
+        // Run a fuzzy search over the item. Does the search query match?
+        let name = $(this).attr("name");
+        return Boolean(fuzzysort.single(searchQuery, name, fuzzysortOptions));
+    }).show();
+}
+
 /* Update the resources to match 'active_filters' */
 function updateUI() {
     let resources = $('.resource-box');
@@ -134,19 +150,28 @@ function updateUI() {
     let resourceTags = $('.resource-tag');
     let noTagsSelected = $(".no-tags-selected.tag");
     let closeFiltersButton = $(".close-filters-button");
+    let searchQuery = $("#resource-search input").val();
 
     // Update the URL to match the new filters.
     updateURL();
 
     // If there's nothing in the filters, we can return early.
     if (noFilters()) {
-        resources.show();
+        // If we have a searchQuery, we need to run all resources through a search.
+        if (searchQuery.length > 0) {
+            resources.hide();
+            filterBySearch(resources);
+        } else {
+            resources.show();
+        }
+
         filterTags.hide();
         noTagsSelected.show();
         closeFiltersButton.hide();
         resourceTags.removeClass("active");
         $(`.filter-checkbox:checked`).prop("checked", false);
         $(".no-resources-found").hide();
+
         return;
     } else {
         // Hide everything
@@ -176,7 +201,7 @@ function updateUI() {
     // Otherwise, hide everything and then filter the resources to decide what to show.
     let hasMatches = false;
     resources.hide();
-    resources.filter(function() {
+    let filteredResources = resources.filter(function() {
         let validation = {
             topics: false,
             type: false,
@@ -208,8 +233,14 @@ function updateUI() {
         } else {
             return false;
         }
-    }).show();
+    });
 
+    // Run the items we've found through the search filter, if necessary.
+    if (searchQuery.length > 0) {
+        filterBySearch(filteredResources);
+    } else {
+        filteredResources.show();
+    }
 
     // If there are no matches, show the no matches message
     if (!hasMatches) {
-- 
cgit v1.2.3


From 6addd63c2f5ea34382d3561073945a9ae6f2ea12 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 13:18:48 +0100
Subject: Add a filter tag when searching.

---
 pydis_site/static/css/resources/resources.css |  8 ++++++++
 pydis_site/static/js/resources/resources.js   | 17 +++++++++++++++--
 pydis_site/templates/resources/resources.html | 10 ++++++++--
 3 files changed, 31 insertions(+), 4 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index f46803e2..6f97422b 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -91,6 +91,14 @@ display: block;
     display: flex !important;
 }
 
+/* By default, we hide the search tag. We'll add it only when there's a search happening. */
+.tag.search-query {
+    display: none;
+}
+.tag.search-query .inner {
+    padding: 0;
+}
+
 /* Disable clicking on the checkbox itself. */
 /* Instead, we want to let the anchor tag handle clicks. */
 .filter-checkbox {
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 79c33cc7..713a7402 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -136,10 +136,19 @@ function updateURL() {
 function filterBySearch(resourceItems) {
     let searchQuery = $("#resource-search input").val();
 
+    /* Show and update the tag if there's a search query */
+    if (searchQuery) {
+        let tag = $(".tag.search-query");
+        let tagText = $(".tag.search-query span");
+        tagText.text(`Search: ${searchQuery}`);
+        tag.show();
+    }
+
     resourceItems.filter(function() {
         // Run a fuzzy search over the item. Does the search query match?
         let name = $(this).attr("name");
-        return Boolean(fuzzysort.single(searchQuery, name, fuzzysortOptions));
+        let result = fuzzysort.single(searchQuery, name, fuzzysortOptions);
+        return Boolean(result) && result.score > fuzzysortOptions.threshold;
     }).show();
 }
 
@@ -151,6 +160,7 @@ function updateUI() {
     let noTagsSelected = $(".no-tags-selected.tag");
     let closeFiltersButton = $(".close-filters-button");
     let searchQuery = $("#resource-search input").val();
+    let searchTag = $(".tag.search-query");
 
     // Update the URL to match the new filters.
     updateURL();
@@ -160,13 +170,15 @@ function updateUI() {
         // If we have a searchQuery, we need to run all resources through a search.
         if (searchQuery.length > 0) {
             resources.hide();
+            noTagsSelected.hide();
             filterBySearch(resources);
         } else {
             resources.show();
+            noTagsSelected.show();
+            $(".tag.search-query").hide();
         }
 
         filterTags.hide();
-        noTagsSelected.show();
         closeFiltersButton.hide();
         resourceTags.removeClass("active");
         $(`.filter-checkbox:checked`).prop("checked", false);
@@ -240,6 +252,7 @@ function updateUI() {
         filterBySearch(filteredResources);
     } else {
         filteredResources.show();
+        searchTag.hide();
     }
 
     // If there are no matches, show the no matches message
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 1f16e5ec..19750612 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -44,11 +44,17 @@
                             <div class="is-flex ml-auto">
                                 <div>
                                     {# A filter tag for when there are no filters active #}
-                                    <span class="no-tags-selected tag has-background-disabled has-text-disabled ml-2 mt-2">
-                                            <i class="fas fa-ban mr-1"></i>
+                                    <span class="tag no-tags-selected is-secondary ml-2 mt-2">
+                                            <i class="fas fa-fw fa-ban mr-1"></i>
                                             No filters selected
                                     </span>
 
+                                    {# A filter tag for search queries #}
+                                    <span class="tag search-query is-secondary ml-2 mt-2">
+                                            <i class="fas fa-fw fa-magnifying-glass mr-1"></i>
+                                            <span class="tag inner">Search: ...</span>
+                                    </span>
+
                                     {% for filter_name, filter_data in filters.items %}
                                         {% for filter_item in filter_data.filters %}
                                             {% if filter_name == "Difficulty" %}
-- 
cgit v1.2.3


From 1ea2cbb5d7793b3e6c023a65572357630f33342c Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 14:07:18 +0100
Subject: Search the resource description too.

---
 pydis_site/static/js/resources/resources.js | 21 +++++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 713a7402..bbf07c94 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -10,8 +10,9 @@ var activeFilters = {
 
 // Options for fuzzysort
 const fuzzysortOptions = {
-  allowTypo: true,    // Allow our users to make typos
-  threshold: -10000,  // The threshold for the fuzziness. Adjust for precision.
+  allowTypo: true,             // Allow our users to make typos
+  titleThreshold: -10000,      // The threshold for the fuzziness on title matches. Closer to 0 is stricter.
+  descriptionThreshold: -500,  // The threshold for the fuzziness on description matches.
 };
 
 /* Add a filter, and update the UI */
@@ -145,10 +146,18 @@ function filterBySearch(resourceItems) {
     }
 
     resourceItems.filter(function() {
-        // Run a fuzzy search over the item. Does the search query match?
-        let name = $(this).attr("name");
-        let result = fuzzysort.single(searchQuery, name, fuzzysortOptions);
-        return Boolean(result) && result.score > fuzzysortOptions.threshold;
+        // Get the resource title and description
+        let title = $(this).attr("name");
+        let description = $(this).find("p").text();
+
+        // Run a fuzzy search. Does the title or description match the query?
+        let titleMatch = fuzzysort.single(searchQuery, title, fuzzysortOptions);
+        titleMatch = Boolean(titleMatch) && titleMatch.score > fuzzysortOptions.titleThreshold;
+
+        let descriptionMatch = fuzzysort.single(searchQuery, description, fuzzysortOptions);
+        descriptionMatch = Boolean(descriptionMatch) && descriptionMatch.score > fuzzysortOptions.descriptionThreshold;
+
+        return titleMatch || descriptionMatch;
     }).show();
 }
 
-- 
cgit v1.2.3


From b4fc433e22ec7192ac5dbe43aa6f483574ac1726 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 14:12:53 +0100
Subject: Fix duck pond not showing for search results of 0.

---
 pydis_site/static/js/resources/resources.js | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index bbf07c94..b74c28ec 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -220,7 +220,6 @@ function updateUI() {
     }
 
     // Otherwise, hide everything and then filter the resources to decide what to show.
-    let hasMatches = false;
     resources.hide();
     let filteredResources = resources.filter(function() {
         let validation = {
@@ -249,7 +248,6 @@ function updateUI() {
 
         // If validation passes, show the resource.
         if (Object.values(validation).every(Boolean)) {
-            hasMatches = true;
             return true;
         } else {
             return false;
@@ -265,7 +263,8 @@ function updateUI() {
     }
 
     // If there are no matches, show the no matches message
-    if (!hasMatches) {
+    let visibleResources = Boolean($(".resource-box:visible").length);
+    if (!visibleResources) {
         $(".no-resources-found").show();
     } else {
         $(".no-resources-found").hide();
-- 
cgit v1.2.3


From 0b8da4d9f15f5f596512aa71365cd7e959846a87 Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 14:17:25 +0100
Subject: Make the remove all tags affect search, too.

---
 pydis_site/static/js/resources/resources.js | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index b74c28ec..113ce502 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -32,6 +32,7 @@ function removeAllFilters() {
         "payment-tiers": [],
         difficulty: []
     };
+    $("#resource-search input").val("");
     updateUI();
 }
 
@@ -62,6 +63,7 @@ function deserializeURLParams() {
     if (searchParams.has("search")) {
         let searchQuery = searchParams.get("search");
         $("#resource-search input").val(searchQuery);
+        $(".close-filters-button").show();
     }
 
     // Work through the parameters and add them to the filter object
@@ -143,6 +145,7 @@ function filterBySearch(resourceItems) {
         let tagText = $(".tag.search-query span");
         tagText.text(`Search: ${searchQuery}`);
         tag.show();
+        $(".close-filters-button").show();
     }
 
     resourceItems.filter(function() {
@@ -184,11 +187,11 @@ function updateUI() {
         } else {
             resources.show();
             noTagsSelected.show();
+            closeFiltersButton.hide();
             $(".tag.search-query").hide();
         }
 
         filterTags.hide();
-        closeFiltersButton.hide();
         resourceTags.removeClass("active");
         $(`.filter-checkbox:checked`).prop("checked", false);
         $(".no-resources-found").hide();
-- 
cgit v1.2.3


From f5f231078ab6f6de6d0161372d00c57f26acba9e Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 16:50:28 +0100
Subject: Add fuzzysort as a local dependency.

---
 pydis_site/static/js/fuzzysort/LICENSE.md     |  21 +
 pydis_site/static/js/fuzzysort/fuzzysort.js   | 636 ++++++++++++++++++++++++++
 pydis_site/templates/resources/resources.html |   2 +-
 3 files changed, 658 insertions(+), 1 deletion(-)
 create mode 100644 pydis_site/static/js/fuzzysort/LICENSE.md
 create mode 100644 pydis_site/static/js/fuzzysort/fuzzysort.js

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/fuzzysort/LICENSE.md b/pydis_site/static/js/fuzzysort/LICENSE.md
new file mode 100644
index 00000000..736006f1
--- /dev/null
+++ b/pydis_site/static/js/fuzzysort/LICENSE.md
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 Stephen Kamenar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
\ No newline at end of file
diff --git a/pydis_site/static/js/fuzzysort/fuzzysort.js b/pydis_site/static/js/fuzzysort/fuzzysort.js
new file mode 100644
index 00000000..88cfe570
--- /dev/null
+++ b/pydis_site/static/js/fuzzysort/fuzzysort.js
@@ -0,0 +1,636 @@
+/*
+  fuzzysort.js https://github.com/farzher/fuzzysort
+  SublimeText-like Fuzzy Search
+
+  fuzzysort.single('fs', 'Fuzzy Search') // {score: -16}
+  fuzzysort.single('test', 'test') // {score: 0}
+  fuzzysort.single('doesnt exist', 'target') // null
+
+  fuzzysort.go('mr', [{file:'Monitor.cpp'}, {file:'MeshRenderer.cpp'}], {key:'file'})
+  // [{score:-18, obj:{file:'MeshRenderer.cpp'}}, {score:-6009, obj:{file:'Monitor.cpp'}}]
+
+  fuzzysort.go('mr', ['Monitor.cpp', 'MeshRenderer.cpp'])
+  // [{score: -18, target: "MeshRenderer.cpp"}, {score: -6009, target: "Monitor.cpp"}]
+
+  fuzzysort.highlight(fuzzysort.single('fs', 'Fuzzy Search'), '<b>', '</b>')
+  // <b>F</b>uzzy <b>S</b>earch
+*/
+
+// UMD (Universal Module Definition) for fuzzysort
+;(function(root, UMD) {
+  if(typeof define === 'function' && define.amd) define([], UMD)
+  else if(typeof module === 'object' && module.exports) module.exports = UMD()
+  else root.fuzzysort = UMD()
+})(this, function UMD() { function fuzzysortNew(instanceOptions) {
+
+  var fuzzysort = {
+
+    single: function(search, target, options) {                                                                                                                                                                                                               ;if(search=='farzher')return{target:"farzher was here (^-^*)/",score:0,indexes:[0,1,2,3,4,5,6]}
+      if(!search) return null
+      if(!isObj(search)) search = fuzzysort.getPreparedSearch(search)
+
+      if(!target) return null
+      if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+      var allowTypo = options && options.allowTypo!==undefined ? options.allowTypo
+        : instanceOptions && instanceOptions.allowTypo!==undefined ? instanceOptions.allowTypo
+        : true
+      var algorithm = allowTypo ? fuzzysort.algorithm : fuzzysort.algorithmNoTypo
+      return algorithm(search, target, search[0])
+    },
+
+    go: function(search, targets, options) {                                                                                                                                                                                                                  ;if(search=='farzher')return[{target:"farzher was here (^-^*)/",score:0,indexes:[0,1,2,3,4,5,6],obj:targets?targets[0]:null}]
+      if(!search) return noResults
+      search = fuzzysort.prepareSearch(search)
+      var searchLowerCode = search[0]
+
+      var threshold = options && options.threshold || instanceOptions && instanceOptions.threshold || -9007199254740991
+      var limit = options && options.limit || instanceOptions && instanceOptions.limit || 9007199254740991
+      var allowTypo = options && options.allowTypo!==undefined ? options.allowTypo
+        : instanceOptions && instanceOptions.allowTypo!==undefined ? instanceOptions.allowTypo
+        : true
+      var algorithm = allowTypo ? fuzzysort.algorithm : fuzzysort.algorithmNoTypo
+      var resultsLen = 0; var limitedCount = 0
+      var targetsLen = targets.length
+
+      // This code is copy/pasted 3 times for performance reasons [options.keys, options.key, no keys]
+
+      // options.keys
+      if(options && options.keys) {
+        var scoreFn = options.scoreFn || defaultScoreFn
+        var keys = options.keys
+        var keysLen = keys.length
+        for(var i = targetsLen - 1; i >= 0; --i) { var obj = targets[i]
+          var objResults = new Array(keysLen)
+          for (var keyI = keysLen - 1; keyI >= 0; --keyI) {
+            var key = keys[keyI]
+            var target = getValue(obj, key)
+            if(!target) { objResults[keyI] = null; continue }
+            if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+            objResults[keyI] = algorithm(search, target, searchLowerCode)
+          }
+          objResults.obj = obj // before scoreFn so scoreFn can use it
+          var score = scoreFn(objResults)
+          if(score === null) continue
+          if(score < threshold) continue
+          objResults.score = score
+          if(resultsLen < limit) { q.add(objResults); ++resultsLen }
+          else {
+            ++limitedCount
+            if(score > q.peek().score) q.replaceTop(objResults)
+          }
+        }
+
+      // options.key
+      } else if(options && options.key) {
+        var key = options.key
+        for(var i = targetsLen - 1; i >= 0; --i) { var obj = targets[i]
+          var target = getValue(obj, key)
+          if(!target) continue
+          if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+          var result = algorithm(search, target, searchLowerCode)
+          if(result === null) continue
+          if(result.score < threshold) continue
+
+          // have to clone result so duplicate targets from different obj can each reference the correct obj
+          result = {target:result.target, _targetLowerCodes:null, _nextBeginningIndexes:null, score:result.score, indexes:result.indexes, obj:obj} // hidden
+
+          if(resultsLen < limit) { q.add(result); ++resultsLen }
+          else {
+            ++limitedCount
+            if(result.score > q.peek().score) q.replaceTop(result)
+          }
+        }
+
+      // no keys
+      } else {
+        for(var i = targetsLen - 1; i >= 0; --i) { var target = targets[i]
+          if(!target) continue
+          if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+          var result = algorithm(search, target, searchLowerCode)
+          if(result === null) continue
+          if(result.score < threshold) continue
+          if(resultsLen < limit) { q.add(result); ++resultsLen }
+          else {
+            ++limitedCount
+            if(result.score > q.peek().score) q.replaceTop(result)
+          }
+        }
+      }
+
+      if(resultsLen === 0) return noResults
+      var results = new Array(resultsLen)
+      for(var i = resultsLen - 1; i >= 0; --i) results[i] = q.poll()
+      results.total = resultsLen + limitedCount
+      return results
+    },
+
+    goAsync: function(search, targets, options) {
+      var canceled = false
+      var p = new Promise(function(resolve, reject) {                                                                                                                                                                                                         ;if(search=='farzher')return resolve([{target:"farzher was here (^-^*)/",score:0,indexes:[0,1,2,3,4,5,6],obj:targets?targets[0]:null}])
+        if(!search) return resolve(noResults)
+        search = fuzzysort.prepareSearch(search)
+        var searchLowerCode = search[0]
+
+        var q = fastpriorityqueue()
+        var iCurrent = targets.length - 1
+        var threshold = options && options.threshold || instanceOptions && instanceOptions.threshold || -9007199254740991
+        var limit = options && options.limit || instanceOptions && instanceOptions.limit || 9007199254740991
+        var allowTypo = options && options.allowTypo!==undefined ? options.allowTypo
+          : instanceOptions && instanceOptions.allowTypo!==undefined ? instanceOptions.allowTypo
+          : true
+        var algorithm = allowTypo ? fuzzysort.algorithm : fuzzysort.algorithmNoTypo
+        var resultsLen = 0; var limitedCount = 0
+        function step() {
+          if(canceled) return reject('canceled')
+
+          var startMs = Date.now()
+
+          // This code is copy/pasted 3 times for performance reasons [options.keys, options.key, no keys]
+
+          // options.keys
+          if(options && options.keys) {
+            var scoreFn = options.scoreFn || defaultScoreFn
+            var keys = options.keys
+            var keysLen = keys.length
+            for(; iCurrent >= 0; --iCurrent) {
+              if(iCurrent%1000/*itemsPerCheck*/ === 0) {
+                if(Date.now() - startMs >= 10/*asyncInterval*/) {
+                  isNode?setImmediate(step):setTimeout(step)
+                  return
+                }
+              }
+
+              var obj = targets[iCurrent]
+              var objResults = new Array(keysLen)
+              for (var keyI = keysLen - 1; keyI >= 0; --keyI) {
+                var key = keys[keyI]
+                var target = getValue(obj, key)
+                if(!target) { objResults[keyI] = null; continue }
+                if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+                objResults[keyI] = algorithm(search, target, searchLowerCode)
+              }
+              objResults.obj = obj // before scoreFn so scoreFn can use it
+              var score = scoreFn(objResults)
+              if(score === null) continue
+              if(score < threshold) continue
+              objResults.score = score
+              if(resultsLen < limit) { q.add(objResults); ++resultsLen }
+              else {
+                ++limitedCount
+                if(score > q.peek().score) q.replaceTop(objResults)
+              }
+            }
+
+          // options.key
+          } else if(options && options.key) {
+            var key = options.key
+            for(; iCurrent >= 0; --iCurrent) {
+              if(iCurrent%1000/*itemsPerCheck*/ === 0) {
+                if(Date.now() - startMs >= 10/*asyncInterval*/) {
+                  isNode?setImmediate(step):setTimeout(step)
+                  return
+                }
+              }
+
+              var obj = targets[iCurrent]
+              var target = getValue(obj, key)
+              if(!target) continue
+              if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+              var result = algorithm(search, target, searchLowerCode)
+              if(result === null) continue
+              if(result.score < threshold) continue
+
+              // have to clone result so duplicate targets from different obj can each reference the correct obj
+              result = {target:result.target, _targetLowerCodes:null, _nextBeginningIndexes:null, score:result.score, indexes:result.indexes, obj:obj} // hidden
+
+              if(resultsLen < limit) { q.add(result); ++resultsLen }
+              else {
+                ++limitedCount
+                if(result.score > q.peek().score) q.replaceTop(result)
+              }
+            }
+
+          // no keys
+          } else {
+            for(; iCurrent >= 0; --iCurrent) {
+              if(iCurrent%1000/*itemsPerCheck*/ === 0) {
+                if(Date.now() - startMs >= 10/*asyncInterval*/) {
+                  isNode?setImmediate(step):setTimeout(step)
+                  return
+                }
+              }
+
+              var target = targets[iCurrent]
+              if(!target) continue
+              if(!isObj(target)) target = fuzzysort.getPrepared(target)
+
+              var result = algorithm(search, target, searchLowerCode)
+              if(result === null) continue
+              if(result.score < threshold) continue
+              if(resultsLen < limit) { q.add(result); ++resultsLen }
+              else {
+                ++limitedCount
+                if(result.score > q.peek().score) q.replaceTop(result)
+              }
+            }
+          }
+
+          if(resultsLen === 0) return resolve(noResults)
+          var results = new Array(resultsLen)
+          for(var i = resultsLen - 1; i >= 0; --i) results[i] = q.poll()
+          results.total = resultsLen + limitedCount
+          resolve(results)
+        }
+
+        isNode?setImmediate(step):step() //setTimeout here is too slow
+      })
+      p.cancel = function() { canceled = true }
+      return p
+    },
+
+    highlight: function(result, hOpen, hClose) {
+      if(typeof hOpen == 'function') return fuzzysort.highlightCallback(result, hOpen)
+      if(result === null) return null
+      if(hOpen === undefined) hOpen = '<b>'
+      if(hClose === undefined) hClose = '</b>'
+      var highlighted = ''
+      var matchesIndex = 0
+      var opened = false
+      var target = result.target
+      var targetLen = target.length
+      var matchesBest = result.indexes
+      for(var i = 0; i < targetLen; ++i) { var char = target[i]
+        if(matchesBest[matchesIndex] === i) {
+          ++matchesIndex
+          if(!opened) { opened = true
+            highlighted += hOpen
+          }
+
+          if(matchesIndex === matchesBest.length) {
+            highlighted += char + hClose + target.substr(i+1)
+            break
+          }
+        } else {
+          if(opened) { opened = false
+            highlighted += hClose
+          }
+        }
+        highlighted += char
+      }
+
+      return highlighted
+    },
+    highlightCallback: function(result, cb) {
+      if(result === null) return null
+      var target = result.target
+      var targetLen = target.length
+      var indexes = result.indexes
+      var highlighted = ''
+      var matchI = 0
+      var indexesI = 0
+      var opened = false
+      var result = []
+      for(var i = 0; i < targetLen; ++i) { var char = target[i]
+        if(indexes[indexesI] === i) {
+          ++indexesI
+          if(!opened) { opened = true
+            result.push(highlighted); highlighted = ''
+          }
+
+          if(indexesI === indexes.length) {
+            highlighted += char
+            result.push(cb(highlighted, matchI++)); highlighted = ''
+            result.push(target.substr(i+1))
+            break
+          }
+        } else {
+          if(opened) { opened = false
+            result.push(cb(highlighted, matchI++)); highlighted = ''
+          }
+        }
+        highlighted += char
+      }
+      return result
+    },
+
+    prepare: function(target) {
+      if(!target) return {target: '', _targetLowerCodes: [0/*this 0 doesn't make sense. here because an empty array causes the algorithm to deoptimize and run 50% slower!*/], _nextBeginningIndexes: null, score: null, indexes: null, obj: null} // hidden
+      return {target:target, _targetLowerCodes:fuzzysort.prepareLowerCodes(target), _nextBeginningIndexes:null, score:null, indexes:null, obj:null} // hidden
+    },
+    prepareSlow: function(target) {
+      if(!target) return {target: '', _targetLowerCodes: [0/*this 0 doesn't make sense. here because an empty array causes the algorithm to deoptimize and run 50% slower!*/], _nextBeginningIndexes: null, score: null, indexes: null, obj: null} // hidden
+      return {target:target, _targetLowerCodes:fuzzysort.prepareLowerCodes(target), _nextBeginningIndexes:fuzzysort.prepareNextBeginningIndexes(target), score:null, indexes:null, obj:null} // hidden
+    },
+    prepareSearch: function(search) {
+      if(!search) search = ''
+      return fuzzysort.prepareLowerCodes(search)
+    },
+
+
+
+    // Below this point is only internal code
+    // Below this point is only internal code
+    // Below this point is only internal code
+    // Below this point is only internal code
+
+
+
+    getPrepared: function(target) {
+      if(target.length > 999) return fuzzysort.prepare(target) // don't cache huge targets
+      var targetPrepared = preparedCache.get(target)
+      if(targetPrepared !== undefined) return targetPrepared
+      targetPrepared = fuzzysort.prepare(target)
+      preparedCache.set(target, targetPrepared)
+      return targetPrepared
+    },
+    getPreparedSearch: function(search) {
+      if(search.length > 999) return fuzzysort.prepareSearch(search) // don't cache huge searches
+      var searchPrepared = preparedSearchCache.get(search)
+      if(searchPrepared !== undefined) return searchPrepared
+      searchPrepared = fuzzysort.prepareSearch(search)
+      preparedSearchCache.set(search, searchPrepared)
+      return searchPrepared
+    },
+
+    algorithm: function(searchLowerCodes, prepared, searchLowerCode) {
+      var targetLowerCodes = prepared._targetLowerCodes
+      var searchLen = searchLowerCodes.length
+      var targetLen = targetLowerCodes.length
+      var searchI = 0 // where we at
+      var targetI = 0 // where you at
+      var typoSimpleI = 0
+      var matchesSimpleLen = 0
+
+      // very basic fuzzy match; to remove non-matching targets ASAP!
+      // walk through target. find sequential matches.
+      // if all chars aren't found then exit
+      for(;;) {
+        var isMatch = searchLowerCode === targetLowerCodes[targetI]
+        if(isMatch) {
+          matchesSimple[matchesSimpleLen++] = targetI
+          ++searchI; if(searchI === searchLen) break
+          searchLowerCode = searchLowerCodes[typoSimpleI===0?searchI : (typoSimpleI===searchI?searchI+1 : (typoSimpleI===searchI-1?searchI-1 : searchI))]
+        }
+
+        ++targetI; if(targetI >= targetLen) { // Failed to find searchI
+          // Check for typo or exit
+          // we go as far as possible before trying to transpose
+          // then we transpose backwards until we reach the beginning
+          for(;;) {
+            if(searchI <= 1) return null // not allowed to transpose first char
+            if(typoSimpleI === 0) { // we haven't tried to transpose yet
+              --searchI
+              var searchLowerCodeNew = searchLowerCodes[searchI]
+              if(searchLowerCode === searchLowerCodeNew) continue // doesn't make sense to transpose a repeat char
+              typoSimpleI = searchI
+            } else {
+              if(typoSimpleI === 1) return null // reached the end of the line for transposing
+              --typoSimpleI
+              searchI = typoSimpleI
+              searchLowerCode = searchLowerCodes[searchI + 1]
+              var searchLowerCodeNew = searchLowerCodes[searchI]
+              if(searchLowerCode === searchLowerCodeNew) continue // doesn't make sense to transpose a repeat char
+            }
+            matchesSimpleLen = searchI
+            targetI = matchesSimple[matchesSimpleLen - 1] + 1
+            break
+          }
+        }
+      }
+
+      var searchI = 0
+      var typoStrictI = 0
+      var successStrict = false
+      var matchesStrictLen = 0
+
+      var nextBeginningIndexes = prepared._nextBeginningIndexes
+      if(nextBeginningIndexes === null) nextBeginningIndexes = prepared._nextBeginningIndexes = fuzzysort.prepareNextBeginningIndexes(prepared.target)
+      var firstPossibleI = targetI = matchesSimple[0]===0 ? 0 : nextBeginningIndexes[matchesSimple[0]-1]
+
+      // Our target string successfully matched all characters in sequence!
+      // Let's try a more advanced and strict test to improve the score
+      // only count it as a match if it's consecutive or a beginning character!
+      if(targetI !== targetLen) for(;;) {
+        if(targetI >= targetLen) {
+          // We failed to find a good spot for this search char, go back to the previous search char and force it forward
+          if(searchI <= 0) { // We failed to push chars forward for a better match
+            // transpose, starting from the beginning
+            ++typoStrictI; if(typoStrictI > searchLen-2) break
+            if(searchLowerCodes[typoStrictI] === searchLowerCodes[typoStrictI+1]) continue // doesn't make sense to transpose a repeat char
+            targetI = firstPossibleI
+            continue
+          }
+
+          --searchI
+          var lastMatch = matchesStrict[--matchesStrictLen]
+          targetI = nextBeginningIndexes[lastMatch]
+
+        } else {
+          var isMatch = searchLowerCodes[typoStrictI===0?searchI : (typoStrictI===searchI?searchI+1 : (typoStrictI===searchI-1?searchI-1 : searchI))] === targetLowerCodes[targetI]
+          if(isMatch) {
+            matchesStrict[matchesStrictLen++] = targetI
+            ++searchI; if(searchI === searchLen) { successStrict = true; break }
+            ++targetI
+          } else {
+            targetI = nextBeginningIndexes[targetI]
+          }
+        }
+      }
+
+      { // tally up the score & keep track of matches for highlighting later
+        if(successStrict) { var matchesBest = matchesStrict; var matchesBestLen = matchesStrictLen }
+        else { var matchesBest = matchesSimple; var matchesBestLen = matchesSimpleLen }
+        var score = 0
+        var lastTargetI = -1
+        for(var i = 0; i < searchLen; ++i) { var targetI = matchesBest[i]
+          // score only goes down if they're not consecutive
+          if(lastTargetI !== targetI - 1) score -= targetI
+          lastTargetI = targetI
+        }
+        if(!successStrict) {
+          score *= 1000
+          if(typoSimpleI !== 0) score += -20/*typoPenalty*/
+        } else {
+          if(typoStrictI !== 0) score += -20/*typoPenalty*/
+        }
+        score -= targetLen - searchLen
+        prepared.score = score
+        prepared.indexes = new Array(matchesBestLen); for(var i = matchesBestLen - 1; i >= 0; --i) prepared.indexes[i] = matchesBest[i]
+
+        return prepared
+      }
+    },
+
+    algorithmNoTypo: function(searchLowerCodes, prepared, searchLowerCode) {
+      var targetLowerCodes = prepared._targetLowerCodes
+      var searchLen = searchLowerCodes.length
+      var targetLen = targetLowerCodes.length
+      var searchI = 0 // where we at
+      var targetI = 0 // where you at
+      var matchesSimpleLen = 0
+
+      // very basic fuzzy match; to remove non-matching targets ASAP!
+      // walk through target. find sequential matches.
+      // if all chars aren't found then exit
+      for(;;) {
+        var isMatch = searchLowerCode === targetLowerCodes[targetI]
+        if(isMatch) {
+          matchesSimple[matchesSimpleLen++] = targetI
+          ++searchI; if(searchI === searchLen) break
+          searchLowerCode = searchLowerCodes[searchI]
+        }
+        ++targetI; if(targetI >= targetLen) return null // Failed to find searchI
+      }
+
+      var searchI = 0
+      var successStrict = false
+      var matchesStrictLen = 0
+
+      var nextBeginningIndexes = prepared._nextBeginningIndexes
+      if(nextBeginningIndexes === null) nextBeginningIndexes = prepared._nextBeginningIndexes = fuzzysort.prepareNextBeginningIndexes(prepared.target)
+      var firstPossibleI = targetI = matchesSimple[0]===0 ? 0 : nextBeginningIndexes[matchesSimple[0]-1]
+
+      // Our target string successfully matched all characters in sequence!
+      // Let's try a more advanced and strict test to improve the score
+      // only count it as a match if it's consecutive or a beginning character!
+      if(targetI !== targetLen) for(;;) {
+        if(targetI >= targetLen) {
+          // We failed to find a good spot for this search char, go back to the previous search char and force it forward
+          if(searchI <= 0) break // We failed to push chars forward for a better match
+
+          --searchI
+          var lastMatch = matchesStrict[--matchesStrictLen]
+          targetI = nextBeginningIndexes[lastMatch]
+
+        } else {
+          var isMatch = searchLowerCodes[searchI] === targetLowerCodes[targetI]
+          if(isMatch) {
+            matchesStrict[matchesStrictLen++] = targetI
+            ++searchI; if(searchI === searchLen) { successStrict = true; break }
+            ++targetI
+          } else {
+            targetI = nextBeginningIndexes[targetI]
+          }
+        }
+      }
+
+      { // tally up the score & keep track of matches for highlighting later
+        if(successStrict) { var matchesBest = matchesStrict; var matchesBestLen = matchesStrictLen }
+        else { var matchesBest = matchesSimple; var matchesBestLen = matchesSimpleLen }
+        var score = 0
+        var lastTargetI = -1
+        for(var i = 0; i < searchLen; ++i) { var targetI = matchesBest[i]
+          // score only goes down if they're not consecutive
+          if(lastTargetI !== targetI - 1) score -= targetI
+          lastTargetI = targetI
+        }
+        if(!successStrict) score *= 1000
+        score -= targetLen - searchLen
+        prepared.score = score
+        prepared.indexes = new Array(matchesBestLen); for(var i = matchesBestLen - 1; i >= 0; --i) prepared.indexes[i] = matchesBest[i]
+
+        return prepared
+      }
+    },
+
+    prepareLowerCodes: function(str) {
+      var strLen = str.length
+      var lowerCodes = [] // new Array(strLen)    sparse array is too slow
+      var lower = str.toLowerCase()
+      for(var i = 0; i < strLen; ++i) lowerCodes[i] = lower.charCodeAt(i)
+      return lowerCodes
+    },
+    prepareBeginningIndexes: function(target) {
+      var targetLen = target.length
+      var beginningIndexes = []; var beginningIndexesLen = 0
+      var wasUpper = false
+      var wasAlphanum = false
+      for(var i = 0; i < targetLen; ++i) {
+        var targetCode = target.charCodeAt(i)
+        var isUpper = targetCode>=65&&targetCode<=90
+        var isAlphanum = isUpper || targetCode>=97&&targetCode<=122 || targetCode>=48&&targetCode<=57
+        var isBeginning = isUpper && !wasUpper || !wasAlphanum || !isAlphanum
+        wasUpper = isUpper
+        wasAlphanum = isAlphanum
+        if(isBeginning) beginningIndexes[beginningIndexesLen++] = i
+      }
+      return beginningIndexes
+    },
+    prepareNextBeginningIndexes: function(target) {
+      var targetLen = target.length
+      var beginningIndexes = fuzzysort.prepareBeginningIndexes(target)
+      var nextBeginningIndexes = [] // new Array(targetLen)     sparse array is too slow
+      var lastIsBeginning = beginningIndexes[0]
+      var lastIsBeginningI = 0
+      for(var i = 0; i < targetLen; ++i) {
+        if(lastIsBeginning > i) {
+          nextBeginningIndexes[i] = lastIsBeginning
+        } else {
+          lastIsBeginning = beginningIndexes[++lastIsBeginningI]
+          nextBeginningIndexes[i] = lastIsBeginning===undefined ? targetLen : lastIsBeginning
+        }
+      }
+      return nextBeginningIndexes
+    },
+
+    cleanup: cleanup,
+    new: fuzzysortNew,
+  }
+  return fuzzysort
+} // fuzzysortNew
+
+// This stuff is outside fuzzysortNew, because it's shared with instances of fuzzysort.new()
+var isNode = typeof require !== 'undefined' && typeof window === 'undefined'
+var MyMap = Map||function(){var s=Object.create(null);this.get=function(k){return s[k]};this.set=function(k,val){s[k]=val;return this};this.clear=function(){s=Object.create(null)}}
+var preparedCache = new MyMap()
+var preparedSearchCache = new MyMap()
+var noResults = []; noResults.total = 0
+var matchesSimple = []; var matchesStrict = []
+function cleanup() { preparedCache.clear(); preparedSearchCache.clear(); matchesSimple = []; matchesStrict = [] }
+function defaultScoreFn(a) {
+  var max = -9007199254740991
+  for (var i = a.length - 1; i >= 0; --i) {
+    var result = a[i]; if(result === null) continue
+    var score = result.score
+    if(score > max) max = score
+  }
+  if(max === -9007199254740991) return null
+  return max
+}
+
+// prop = 'key'              2.5ms optimized for this case, seems to be about as fast as direct obj[prop]
+// prop = 'key1.key2'        10ms
+// prop = ['key1', 'key2']   27ms
+function getValue(obj, prop) {
+  var tmp = obj[prop]; if(tmp !== undefined) return tmp
+  var segs = prop
+  if(!Array.isArray(prop)) segs = prop.split('.')
+  var len = segs.length
+  var i = -1
+  while (obj && (++i < len)) obj = obj[segs[i]]
+  return obj
+}
+
+function isObj(x) { return typeof x === 'object' } // faster as a function
+
+// Hacked version of https://github.com/lemire/FastPriorityQueue.js
+var fastpriorityqueue=function(){var r=[],o=0,e={};function n(){for(var e=0,n=r[e],c=1;c<o;){var f=c+1;e=c,f<o&&r[f].score<r[c].score&&(e=f),r[e-1>>1]=r[e],c=1+(e<<1)}for(var a=e-1>>1;e>0&&n.score<r[a].score;a=(e=a)-1>>1)r[e]=r[a];r[e]=n}return e.add=function(e){var n=o;r[o++]=e;for(var c=n-1>>1;n>0&&e.score<r[c].score;c=(n=c)-1>>1)r[n]=r[c];r[n]=e},e.poll=function(){if(0!==o){var e=r[0];return r[0]=r[--o],n(),e}},e.peek=function(e){if(0!==o)return r[0]},e.replaceTop=function(o){r[0]=o,n()},e};
+var q = fastpriorityqueue() // reuse this, except for async, it needs to make its own
+
+return fuzzysortNew()
+}) // UMD
+
+// TODO: (performance) wasm version!?
+// TODO: (performance) threads?
+// TODO: (performance) avoid cache misses
+// TODO: (performance) preparedCache is a memory leak
+// TODO: (like sublime) backslash === forwardslash
+// TODO: (like sublime) spaces: "a b" should do 2 searches 1 for a and 1 for b
+// TODO: (scoring) garbage in targets that allows most searches to strict match need a penality
+// TODO: (performance) idk if allowTypo is optimized
\ No newline at end of file
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index 201caf85..101f9965 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -16,7 +16,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
     <script defer src="{% static "js/resources/resources.js" %}"></script>
     <script defer src="{% static "js/collapsibles.js" %}"></script>
-    <script src="https://rawgit.com/farzher/fuzzysort/master/fuzzysort.js"></script>
+    <script defer src="{% static "js/fuzzysort/fuzzysort.js" %}"></script>
 {% endblock %}
 
 {% block content %}
-- 
cgit v1.2.3


From 33e8f0cb477547bbef7564a83353d2379caa9e0e Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 16:53:32 +0100
Subject: Best practice: Switch name to data-resource-name.

---
 pydis_site/static/js/fuzzysort/LICENSE.md        | 2 +-
 pydis_site/static/js/fuzzysort/fuzzysort.js      | 2 +-
 pydis_site/static/js/resources/resources.js      | 2 +-
 pydis_site/templates/resources/resource_box.html | 2 +-
 4 files changed, 4 insertions(+), 4 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/fuzzysort/LICENSE.md b/pydis_site/static/js/fuzzysort/LICENSE.md
index 736006f1..a3b9d9d7 100644
--- a/pydis_site/static/js/fuzzysort/LICENSE.md
+++ b/pydis_site/static/js/fuzzysort/LICENSE.md
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
\ No newline at end of file
+SOFTWARE.
diff --git a/pydis_site/static/js/fuzzysort/fuzzysort.js b/pydis_site/static/js/fuzzysort/fuzzysort.js
index 88cfe570..ba01ae63 100644
--- a/pydis_site/static/js/fuzzysort/fuzzysort.js
+++ b/pydis_site/static/js/fuzzysort/fuzzysort.js
@@ -633,4 +633,4 @@ return fuzzysortNew()
 // TODO: (like sublime) backslash === forwardslash
 // TODO: (like sublime) spaces: "a b" should do 2 searches 1 for a and 1 for b
 // TODO: (scoring) garbage in targets that allows most searches to strict match need a penality
-// TODO: (performance) idk if allowTypo is optimized
\ No newline at end of file
+// TODO: (performance) idk if allowTypo is optimized
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 113ce502..6e4a09ba 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -150,7 +150,7 @@ function filterBySearch(resourceItems) {
 
     resourceItems.filter(function() {
         // Get the resource title and description
-        let title = $(this).attr("name");
+        let title = $(this).attr("data-resource-name");
         let description = $(this).find("p").text();
 
         // Run a fuzzy search. Does the title or description match the query?
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 5189bb3e..5ca46296 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -2,7 +2,7 @@
 {% load to_kebabcase %}
 {% load get_category_icon %}
 
-<div class="box resource-box {{ resource.css_classes }}" name="{{ resource.name }}">
+<div class="box resource-box {{ resource.css_classes }}" data-resource-name="{{ resource.name }}">
     {% if 'title_url' in resource %}
         <a href="{{ resource.title_url }}">
             {% include "resources/resource_box_header.html" %}
-- 
cgit v1.2.3


From fbea3ccd4e7bf90c6efa67f4a5b98148eb4af23f Mon Sep 17 00:00:00 2001
From: Leon Sandøy <leon.haland@gmail.com>
Date: Sun, 13 Feb 2022 20:03:46 +0100
Subject: Edge cases: Show duckies when no visible resources

---
 pydis_site/static/js/resources/resources.js | 22 ++++++++++++++--------
 1 file changed, 14 insertions(+), 8 deletions(-)

(limited to 'pydis_site/static/js')

diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
index 6e4a09ba..d6cc8128 100644
--- a/pydis_site/static/js/resources/resources.js
+++ b/pydis_site/static/js/resources/resources.js
@@ -108,6 +108,17 @@ function deserializeURLParams() {
     });
 }
 
+/* Show or hide the duckies, depending on whether or not there are any resources visible. */
+function updateDuckies() {
+    let visibleResources = Boolean($(".resource-box:visible").length);
+    if (!visibleResources) {
+        $(".no-resources-found").show();
+    } else {
+        $(".no-resources-found").hide();
+    }
+}
+
+
 /* Update the URL with new parameters */
 function updateURL() {
     let searchQuery = $("#resource-search input").val();
@@ -194,7 +205,7 @@ function updateUI() {
         filterTags.hide();
         resourceTags.removeClass("active");
         $(`.filter-checkbox:checked`).prop("checked", false);
-        $(".no-resources-found").hide();
+        updateDuckies();
 
         return;
     } else {
@@ -265,13 +276,8 @@ function updateUI() {
         searchTag.hide();
     }
 
-    // If there are no matches, show the no matches message
-    let visibleResources = Boolean($(".resource-box:visible").length);
-    if (!visibleResources) {
-        $(".no-resources-found").show();
-    } else {
-        $(".no-resources-found").hide();
-    }
+    // Gotta update those duckies!
+    updateDuckies();
 }
 
 // Executed when the page has finished loading.
-- 
cgit v1.2.3