aboutsummaryrefslogtreecommitdiffstats
path: root/pydis_site/static
diff options
context:
space:
mode:
Diffstat (limited to 'pydis_site/static')
-rw-r--r--pydis_site/static/css/base/base.css15
-rw-r--r--pydis_site/static/css/collapsibles.css11
-rw-r--r--pydis_site/static/css/content/page.css13
-rw-r--r--pydis_site/static/css/resources/resources.css298
-rw-r--r--pydis_site/static/css/resources/resources_list.css55
-rw-r--r--pydis_site/static/images/resources/duck_pond_404.jpgbin0 -> 123824 bytes
-rw-r--r--pydis_site/static/images/sponsors/netcup.pngbin0 -> 9492 bytes
-rw-r--r--pydis_site/static/js/collapsibles.js67
-rw-r--r--pydis_site/static/js/content/page.js13
-rw-r--r--pydis_site/static/js/fuzzysort/LICENSE.md21
-rw-r--r--pydis_site/static/js/fuzzysort/fuzzysort.js636
-rw-r--r--pydis_site/static/js/resources/resources.js367
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
Binary files differ
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
Binary files differ
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);
+ }
+ });
+});
generated by cgit v1.2.3 (git 2.39.1) at 2025-10-19 20:02:14 +0000