Merge branch 'main' into content/update-help-channel-timing

12 files changed, 1395 insertions, 101 deletions

diff --git a/pydis_site/static/css/base/base.css b/pydis_site/static/css/base/base.css
index f3fe1e44..4b36b7ce 100644
--- a/pydis_site/static/css/base/base.css
+++ b/pydis_site/static/css/base/base.css
@@ -78,12 +78,20 @@ main.site-content {
     color: #00000000;
 }
 
+#netcup-logo {
+    padding-left: 15px;
+    background: url(https://www.netcup-wiki.de/static/assets/images/netcup_logo_white.svg) no-repeat center;
+    background-size: 60px;
+    background-position: 0px 3px;
+    color: #00000000;
+}
+
 #django-logo {
     padding-bottom: 2px;
-    background: url(https://static.djangoproject.com/img/logos/django-logo-negative.png) no-repeat center;
-    filter: grayscale(1) invert(0.02);
+    background: url(https://static.djangoproject.com/img/logos/django-logo-negative.svg) no-repeat center;
+    filter: grayscale(1) invert(0.09);
     background-size: 52px 25.5px;
-    background-position: -1px -2px;
+    background-position: -2px -1px;
     color: #00000000;
 }
 
@@ -92,6 +100,7 @@ main.site-content {
     height: 20px;
     background: url(https://bulma.io/images/bulma-logo-white.png) no-repeat center;
     background-size: 60px;
+    background-position: 0px 3px;
     color: #00000000;
 }
 
diff --git a/pydis_site/static/css/collapsibles.css b/pydis_site/static/css/collapsibles.css
new file mode 100644
index 00000000..1d73fa00
--- /dev/null
+++ b/pydis_site/static/css/collapsibles.css
@@ -0,0 +1,11 @@
+.collapsible {
+  cursor: pointer;
+  width: 100%;
+  border: none;
+  outline: none;
+}
+
+.collapsible-content {
+  transition: max-height 0.3s ease-out;
+  overflow: hidden;
+}
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/css/resources/resources.css b/pydis_site/static/css/resources/resources.css
index cf4cb472..96d06111 100644
--- a/pydis_site/static/css/resources/resources.css
+++ b/pydis_site/static/css/resources/resources.css
@@ -1,29 +1,293 @@
-.box, .tile.is-parent {
-    transition: 0.1s ease-out;
+/* Colors for icons */
+i.resource-icon.is-orangered {
+    color: #FE640A;
 }
-.box {
-    min-height: 15vh;
+i.resource-icon.is-blurple {
+    color: #7289DA;
 }
-.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);
+i.resource-icon.is-teal {
+    color: #95DBE5;
 }
-.tile.is-parent:hover {
-    padding: 0.65rem 0.85rem 0.85rem 0.65rem;
-    filter: saturate(1.1) brightness(1.1);
+i.resource-icon.is-youtube-red {
+    color: #BB0000;
+}
+i.resource-icon.is-black {
+    color: #2c3334;
+}
+
+/* Colors when icons are hovered */
+i.resource-icon.is-hoverable:hover {
+    filter: brightness(125%);
+}
+i.resource-icon.is-hoverable.is-black:hover {
+    filter: brightness(170%);
+}
+i.resource-icon.is-hoverable.is-teal:hover {
+    filter: brightness(80%);
+}
+
+/* Icon padding */
+.breadcrumb-section {
+    padding: 1rem;
+}
+i.has-icon-padding {
+    padding: 0 10px 25px 0;
+}
+#tab-content p {
+    display: none;
+}
+#tab-content p.is-active {
+display: block;
+}
+
+/* Disable highlighting for all text in the filters. */
+.filter-checkbox,
+.filter-panel label,
+.card-header span {
+    user-select: none
+}
+
+/* Remove pointless margin in panel header */
+#filter-panel-header {
+    margin-bottom: 0;
+}
+
+/* Full width filter cards */
+#resource-filtering-panel .card .collapsible-content .card-content {
+    padding:0
+}
+
+/* Don't round the corners of the collapsibles */
+.filter-category-header {
+    border-radius: 0;
+}
+
+/* Make the checkboxes indent under the filter headers */
+.filter-category-header .card-header .card-header-title {
+    padding-left: 0;
+}
+.filter-panel {
+    padding-left: 1.5rem;
+}
+.filter-checkbox {
+    margin-right: 0.25em !important;
+}
+
+/* Style the search bar */
+#resource-search {
+    margin: 0.25em 0.25em 0 0.25em;
+}
+
+/* Center the 404 div */
+.no-resources-found {
+    display: none;
+    flex-direction: column;
+    align-items: center;
+    margin-top: 1em;
+}
+
+/* Make sure jQuery will use flex when setting `show()` again. */
+.no-resources-found[style*='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;
+    min-width: fit-content;
+    max-width: fit-content;
+    padding-right: 2em;
+}
+.tag.search-query .inner {
+    display: inline-block;
+    padding: 0;
+    max-width: 16.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    line-height: 2em;
+}
+.tag.search-query i {
+    margin: 0 !important;
+    display: inline-block;
+    line-height: 2em;
+    float: left;
+    padding-right: 1em;
+}
+
+/* Don't allow the tag pool to exceed its parent containers width. */
+#tag-pool {
+    max-width: 100%;
+}
+
+/* Disable clicking on the checkbox itself. */
+/* Instead, we want to let the anchor tag handle clicks. */
+.filter-checkbox {
+    pointer-events: none;
+}
+
+/* Blurple category icons */
+i.is-primary {
+    color: #7289da;
 }
 
-#readingBlock {
-    background-image: linear-gradient(141deg, #911eb4 0%, #b631de 71%, #cf4bf7 100%);
+/* A little space above the filter card, please! */
+.filter-tags {
+    padding-bottom: .5em;
 }
 
-#interactiveBlock {
-    background-image: linear-gradient(141deg, #d05600 0%, #da722a 71%, #e68846 100%);
+/* 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%);
+}
+
+/* When hovering title anchors, just make the color a lighter primary, not black. */
+.resource-box a:hover {
+    filter: brightness(120%);
+    color: #7289DA;
+}
+
+/* Set default display to inline-flex, for centering. */
+span.filter-box-tag {
+    display: none;
+    align-items: center;
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Make sure jQuery will use inline-flex when setting `show()` again. */
+span.filter-box-tag[style*='display: block'] {
+    display: inline-flex !important;
+}
+
+/* Make resource tags clickable */
+.resource-tag {
+    cursor: pointer;
+    user-select: none;
+}
+
+/* Give the resource tags a bit of breathing room */
+.resource-tag-container {
+    padding-left: 1.5rem;
+}
+
+/* When hovering tags, brighten them a bit. */
+.resource-tag:hover,
+.filter-box-tag:hover {
+    filter: brightness(95%);
+}
+
+/* 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,
+.tag.search-query {
+    outline-width: 1px;
+    outline-style: solid;
+}
+
+/* Disable transitions */
+.no-transition {
+  -webkit-transition: none !important;
+  -moz-transition: none !important;
+  -o-transition: none !important;
+  transition: none !important;
+}
+
+/* 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;
 }
 
-#communitiesBlock {
-    background-image: linear-gradient(141deg, #3b756f 0%, #3a847c 71%, #41948b 100%);
+/* Smaller filter category headers when on mobile */
+@media screen and (max-width: 480px) {
+    .filter-category-header .card-header .card-header-title {
+        font-size: 14px;
+        padding: 0;
+    }
+    .filter-panel {
+        padding-top: 4px;
+        padding-bottom: 4px;
+    }
+    .tag.search-query .inner {
+        max-width: 16.2rem;
+    }
 }
 
-#podcastsBlock {
-    background-image: linear-gradient(141deg, #232382 0%, #30309c 71%, #4343ad 100%);
+/* Constrain the width of the filterbox */
+@media screen and (min-width: 769px) {
+    .filtering-column {
+        max-width: 25rem;
+        min-width: 18rem;
+    }
 }
diff --git a/pydis_site/static/css/resources/resources_list.css b/pydis_site/static/css/resources/resources_list.css
deleted file mode 100644
index 33129c87..00000000
--- a/pydis_site/static/css/resources/resources_list.css
+++ /dev/null
@@ -1,55 +0,0 @@
-.breadcrumb-section {
-    padding: 1rem;
-}
-
-i.resource-icon.is-orangered {
-    color: #FE640A;
-}
-
-i.resource-icon.is-orangered:hover {
-    color: #fe9840;
-}
-
-i.resource-icon.is-blurple {
-    color: #7289DA;
-}
-
-i.resource-icon.is-blurple:hover {
-    color: #93a8da;
-}
-
-i.resource-icon.is-teal {
-    color: #95DBE5;
-}
-
-i.resource-icon.is-teal:hover {
-    color: #a9f5ff;
-}
-
-i.resource-icon.is-youtube-red {
-    color: #BB0000;
-}
-
-i.resource-icon.is-youtube-red:hover {
-    color: #f80000;
-}
-
-i.resource-icon.is-amazon-orange {
-    color: #FF9900;
-}
-
-i.resource-icon.is-amazon-orange:hover {
-    color: #ffb71a;
-}
-
-i.resource-icon.is-black {
-    color: #000000;
-}
-
-i.resource-icon.is-black {
-    color: #191919;
-}
-
-i.has-icon-padding {
-    padding: 0 10px 25px 0;
-}
diff --git a/pydis_site/static/images/resources/duck_pond_404.jpg b/pydis_site/static/images/resources/duck_pond_404.jpg
new file mode 100644
index 00000000..29bcf1d6
--- /dev/null
+++ b/pydis_site/static/images/resources/duck_pond_404.jpg
diff --git a/pydis_site/static/images/sponsors/netcup.png b/pydis_site/static/images/sponsors/netcup.png
new file mode 100644
index 00000000..e5dff196
--- /dev/null
+++ b/pydis_site/static/images/sponsors/netcup.png
diff --git a/pydis_site/static/js/collapsibles.js b/pydis_site/static/js/collapsibles.js
new file mode 100644
index 00000000..1df0b9fe
--- /dev/null
+++ b/pydis_site/static/js/collapsibles.js
@@ -0,0 +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", () => {
+    const contentContainers = document.getElementsByClassName("collapsible-content");
+    for (const container of contentContainers) {
+        // 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", () => {
+            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/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/fuzzysort/LICENSE.md b/pydis_site/static/js/fuzzysort/LICENSE.md
new file mode 100644
index 00000000..a3b9d9d7
--- /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.
diff --git a/pydis_site/static/js/fuzzysort/fuzzysort.js b/pydis_site/static/js/fuzzysort/fuzzysort.js
new file mode 100644
index 00000000..ba01ae63
--- /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
diff --git a/pydis_site/static/js/resources/resources.js b/pydis_site/static/js/resources/resources.js
new file mode 100644
index 00000000..d6cc8128
--- /dev/null
+++ b/pydis_site/static/js/resources/resources.js
@@ -0,0 +1,367 @@
+"use strict";
+
+// Filters that are currently selected
+var activeFilters = {
+    topics: [],
+    type: [],
+    "payment-tiers": [],
+    difficulty: []
+};
+
+// Options for fuzzysort
+const fuzzysortOptions = {
+  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 */
+function addFilter(filterName, filterItem) {
+    var filterIndex = activeFilters[filterName].indexOf(filterItem);
+    if (filterIndex === -1) {
+        activeFilters[filterName].push(filterItem);
+    }
+    updateUI();
+}
+
+/* Remove all filters, and update the UI */
+function removeAllFilters() {
+    activeFilters = {
+        topics: [],
+        type: [],
+        "payment-tiers": [],
+        difficulty: []
+    };
+    $("#resource-search input").val("");
+    updateUI();
+}
+
+/* Remove a filter, and update the UI */
+function removeFilter(filterName, filterItem) {
+    var filterIndex = activeFilters[filterName].indexOf(filterItem);
+    if (filterIndex !== -1) {
+        activeFilters[filterName].splice(filterIndex, 1);
+    }
+    updateUI();
+}
+
+/* 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);
+
+    // Add the search query to the search bar.
+    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
+    $.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(",");
+
+            // Update the corresponding filter UI, so it reflects the internal state.
+            let filterAdded = false;
+            $(paramFilterArray).each(function(_, filter) {
+                // 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}']`);
+                    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);
+                    filterAdded = true;
+                }
+            });
+
+            // Ditch all the params from the URL, and recalculate the URL params
+            updateURL();
+
+            // If we've added a filter, hide stuff
+            if (filterAdded) {
+                $(".no-tags-selected.tag").hide();
+                $(".close-filters-button").show();
+            }
+        }
+    });
+}
+
+/* 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();
+
+    // If there's no active filtering parameters, we can return early.
+    if (noFilters() && searchQuery.length === 0) {
+        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);
+        }
+    });
+
+    // 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()}`);
+}
+
+/* Apply search terms */
+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();
+        $(".close-filters-button").show();
+    }
+
+    resourceItems.filter(function() {
+        // Get the resource title and description
+        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?
+        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();
+}
+
+/* Update the resources to match 'active_filters' */
+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");
+    let searchQuery = $("#resource-search input").val();
+    let searchTag = $(".tag.search-query");
+
+    // Update the URL to match the new filters.
+    updateURL();
+
+    // If there's nothing in the filters, we can return early.
+    if (noFilters()) {
+        // 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();
+            closeFiltersButton.hide();
+            $(".tag.search-query").hide();
+        }
+
+        filterTags.hide();
+        resourceTags.removeClass("active");
+        $(`.filter-checkbox:checked`).prop("checked", false);
+        updateDuckies();
+
+        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
+                $(`.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.
+    resources.hide();
+    let filteredResources = 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)) {
+            return true;
+        } else {
+            return false;
+        }
+    });
+
+    // Run the items we've found through the search filter, if necessary.
+    if (searchQuery.length > 0) {
+        filterBySearch(filteredResources);
+    } else {
+        filteredResources.show();
+        searchTag.hide();
+    }
+
+    // Gotta update those duckies!
+    updateDuckies();
+}
+
+// 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 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');
+        categoryHeaders.addClass("no-transition collapsed");
+        icons.removeClass(["far", "fa-window-minimize"]);
+        icons.addClass(["fas", "fa-angle-down"]);
+
+        // Wait 10ms before removing this class, or else the transition will animate due to a race condition.
+        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));
+
+        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').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}']`);
+
+        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').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}']`);
+
+        if (!$(this).hasClass("active")) {
+            addFilter(filterName, filterItem);
+            checkbox.prop("checked", true);
+        } else {
+            removeFilter(filterName, filterItem);
+            checkbox.prop("checked", false);
+        }
+    });
+
+    // 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;
+        let filterName = this.dataset.filterName;
+
+        if (this.checked && !activeFilters[filterName].includes(filterItem)) {
+            addFilter(filterName, filterItem);
+        } else if (!this.checked && activeFilters[filterName].includes(filterItem)) {
+            removeFilter(filterName, filterItem);
+        }
+    });
+});