Refactor as_css_class to 'to_kebabcase'.

We're making a few changes here
- Changing the name to 'to_kebabcase'
- Covering all edge cases
- Adding a unit test for this utility

9 files changed, 80 insertions, 53 deletions

diff --git a/pydis_site/apps/resources/templatetags/as_css_class.py b/pydis_site/apps/resources/templatetags/as_css_class.py
deleted file mode 100644
index 8b628dc9..00000000
--- a/pydis_site/apps/resources/templatetags/as_css_class.py
+++ /dev/null
@@ -1,18 +0,0 @@
-from django import template
-
-register = template.Library()
-
-
[email protected]
-def as_css_class(class_name: str) -> str:
-    """
-    Convert any string to a css-class name.
-
-    For example, convert
-    "Favorite FROOT_is_LEMON" to
-    "favorite-froot-is-lemon"
-    """
-    class_name = class_name.lower()
-    class_name = class_name.replace(" ", "-")
-    class_name = class_name.replace("_", "-")
-    return class_name
diff --git a/pydis_site/apps/resources/templatetags/to_kebabcase.py b/pydis_site/apps/resources/templatetags/to_kebabcase.py
new file mode 100644
index 00000000..41e2ac85
--- /dev/null
+++ b/pydis_site/apps/resources/templatetags/to_kebabcase.py
@@ -0,0 +1,39 @@
+import re
+
+from django import template
+
+REGEX_CONSECUTIVE_NON_LETTERS = r"[^A-Za-z0-9]+"
+register = template.Library()
+
+
+def _to_kebabcase(class_name: str) -> str:
+    """
+    Convert any string to kebab-case.
+
+    For example, convert
+    "__Favorite FROOT¤#/$?is----LeMON???" to
+    "favorite-froot-is-lemon"
+    """
+    # First, make it lowercase, and just remove any apostrophes.
+    # We remove the apostrophes because "wasnt" is better than "wasn-t"
+    class_name = class_name.casefold()
+    class_name = class_name.replace("'", '')
+
+    # Now, replace any non-letter that remains with a dash.
+    # If there are multiple consecutive non-letters, just replace them with a single dash.
+    # my-favorite-class is better than my-favorite------class
+    class_name = re.sub(
+        REGEX_CONSECUTIVE_NON_LETTERS,
+        "-",
+        class_name,
+    )
+
+    # Now we use strip to get rid of any leading or trailing dashes.
+    class_name = class_name.strip("-")
+    return class_name
+
+
[email protected]
+def to_kebabcase(class_name: str) -> str:
+    """Convert a string to kebab-case."""
+    return _to_kebabcase(class_name)
diff --git a/pydis_site/apps/resources/tests/test_resources.py b/pydis_site/apps/resources/tests/test_resources.py
deleted file mode 100644
index 81638e2f..00000000
--- a/pydis_site/apps/resources/tests/test_resources.py
+++ /dev/null
@@ -1,9 +0,0 @@
-from django.test import TestCase
-
-
-class TestResources(TestCase):
-    """Test our resource filtering systems."""
-
-    def test_utils_to_retrieve_tags(self):
-        """Test that the utils that retrieve the tags work as intended."""
-        pass
diff --git a/pydis_site/apps/resources/tests/test_to_kebabcase.py b/pydis_site/apps/resources/tests/test_to_kebabcase.py
new file mode 100644
index 00000000..a141143d
--- /dev/null
+++ b/pydis_site/apps/resources/tests/test_to_kebabcase.py
@@ -0,0 +1,19 @@
+from django.test import TestCase
+
+from pydis_site.apps.resources.templatetags.to_kebabcase import _to_kebabcase
+
+
+class TestToKebabcase(TestCase):
+    """Tests for the `as_css_class` template tag."""
+
+    def test_to_kebabcase(self):
+        """Test the to_kebabcase utility and template tag."""
+        weird_input = (
+            "_-_--_A_LEm0n?in&¤'the##trEE£$@€@€@@£is-NOT----QUITE//"
+            "as#good!  as one   __IN-YOUR|||HaND"
+        )
+
+        self.assertEqual(
+            _to_kebabcase(weird_input),
+            "a-lem0n-in-the-tree-is-not-quite-as-good-as-one-in-your-hand",
+        )
diff --git a/pydis_site/apps/resources/tests/testing_resources/testing/foobar/resource_test.yaml b/pydis_site/apps/resources/tests/testing_resources/testing/foobar/resource_test.yaml
deleted file mode 100644
index 22835090..00000000
--- a/pydis_site/apps/resources/tests/testing_resources/testing/foobar/resource_test.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: Resource Test
diff --git a/pydis_site/apps/resources/tests/testing_resources/testing/my_resource.yaml b/pydis_site/apps/resources/tests/testing_resources/testing/my_resource.yaml
deleted file mode 100644
index 61df6173..00000000
--- a/pydis_site/apps/resources/tests/testing_resources/testing/my_resource.yaml
+++ /dev/null
@@ -1 +0,0 @@
-name: My Resource
diff --git a/pydis_site/apps/resources/views/resources.py b/pydis_site/apps/resources/views/resources.py
index ac9e8355..2375f722 100644
--- a/pydis_site/apps/resources/views/resources.py
+++ b/pydis_site/apps/resources/views/resources.py
@@ -9,7 +9,7 @@ from django.shortcuts import render
 from django.views import View
 
 from pydis_site import settings
-from pydis_site.apps.resources.templatetags.as_css_class import as_css_class
+from pydis_site.apps.resources.templatetags.to_kebabcase import to_kebabcase
 
 RESOURCES_PATH = Path(settings.BASE_DIR, "pydis_site", "apps", "resources", "resources")
 
@@ -58,9 +58,7 @@ class ResourceView(View):
 
                 # Make a CSS class friendly representation too, while we're already iterating.
                 for tag in tags:
-                    css_tag = f"{tag_type}-{tag}"
-                    css_tag = css_tag.replace("_", "-")
-                    css_tag = css_tag.replace(" ", "-")
+                    css_tag = to_kebabcase(f"{tag_type}-{tag}")
                     css_classes.append(css_tag)
 
             # Now add the css classes back to the resource, so we can use them in the template.
@@ -96,12 +94,12 @@ class ResourceView(View):
 
         # A complete list of valid filter names
         self.valid_filters = {
-            "topics": [as_css_class(topic) for topic in self.filters["Topics"]["filters"]],
+            "topics": [to_kebabcase(topic) for topic in self.filters["Topics"]["filters"]],
             "payment_tiers": [
-                as_css_class(tier) for tier in self.filters["Payment tiers"]["filters"]
+                to_kebabcase(tier) for tier in self.filters["Payment tiers"]["filters"]
             ],
-            "type": [as_css_class(type_) for type_ in self.filters["Type"]["filters"]],
-            "difficulty": [as_css_class(tier) for tier in self.filters["Difficulty"]["filters"]],
+            "type": [to_kebabcase(type_) for type_ in self.filters["Type"]["filters"]],
+            "difficulty": [to_kebabcase(tier) for tier in self.filters["Difficulty"]["filters"]],
         }
 
     def get(self, request: WSGIRequest, resource_type: t.Optional[str] = None) -> HttpResponse:
diff --git a/pydis_site/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 2ec233cb..e26203e9 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -1,5 +1,5 @@
 {% load as_icon %}
-{% load as_css_class %}
+{% load to_kebabcase %}
 {% load get_category_icon %}
 
 <div class="box resource-box {{ resource.css_classes }}">
@@ -38,7 +38,7 @@
             <span
                 class="tag resource-tag is-primary is-light ml-2 mt-2"
                 data-filter-name="topics"
-                data-filter-item="{{ tag|as_css_class }}"
+                data-filter-item="{{ tag|to_kebabcase }}"
             >
                 <i class="{{ tag|title|get_category_icon }} mr-1"></i>
                 {{ tag|title }}
@@ -48,7 +48,7 @@
             <span
                 class="tag resource-tag has-background-success-light has-text-success-dark ml-2 mt-2"
                 data-filter-name="type"
-                data-filter-item="{{ tag|as_css_class }}"
+                data-filter-item="{{ tag|to_kebabcase }}"
             >
                 <i class="{{ tag|title|get_category_icon }} mr-1"></i>
                 {{ tag|title }}
@@ -58,7 +58,7 @@
             <span
                 class="tag resource-tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
                 data-filter-name="payment-tiers"
-                data-filter-item="{{ tag|as_css_class }}"
+                data-filter-item="{{ tag|to_kebabcase }}"
             >
                 <i class="{{ tag|title|get_category_icon }} mr-1"></i>
                 {{ tag|title }}
@@ -68,7 +68,7 @@
             <span
                 class="tag resource-tag has-background-info-light has-text-info-dark ml-2 mt-2"
                 data-filter-name="difficulty"
-                data-filter-item="{{ tag|as_css_class }}"
+                data-filter-item="{{ tag|to_kebabcase }}"
             >
                 <i class="{{ tag|title|get_category_icon }} mr-1"></i>
                 {{ tag|title }}
diff --git a/pydis_site/templates/resources/resources.html b/pydis_site/templates/resources/resources.html
index c221c8a3..70fad097 100644
--- a/pydis_site/templates/resources/resources.html
+++ b/pydis_site/templates/resources/resources.html
@@ -1,6 +1,6 @@
 {% extends 'base/base.html' %}
 {% load as_icon %}
-{% load as_css_class %}
+{% load to_kebabcase %}
 {% load get_category_icon %}
 {% load static %}
 
@@ -44,8 +44,8 @@
                                             {% if filter_name == "Difficulty" %}
                                                 <span
                                                         class="filter-box-tag tag has-background-info-light has-text-info-dark ml-2 mt-2"
-                                                        data-filter-name="{{ filter_name|as_css_class }}"
-                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                        data-filter-name="{{ filter_name|to_kebabcase }}"
+                                                        data-filter-item="{{ filter_item|to_kebabcase }}"
                                                 >
                                                         <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                         {{ filter_item|title }}
@@ -55,8 +55,8 @@
                                             {% if filter_name == "Type" %}
                                                 <span
                                                         class="filter-box-tag tag has-background-success-light has-text-success-dark ml-2 mt-2"
-                                                        data-filter-name="{{ filter_name|as_css_class }}"
-                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                        data-filter-name="{{ filter_name|to_kebabcase }}"
+                                                        data-filter-item="{{ filter_item|to_kebabcase }}"
                                                 >
                                                         <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                         {{ filter_item|title }}
@@ -66,8 +66,8 @@
                                             {% if filter_name == "Payment tiers" %}
                                                 <span
                                                         class="filter-box-tag tag has-background-danger-light has-text-danger-dark ml-2 mt-2"
-                                                        data-filter-name="{{ filter_name|as_css_class }}"
-                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                        data-filter-name="{{ filter_name|to_kebabcase }}"
+                                                        data-filter-item="{{ filter_item|to_kebabcase }}"
                                                 >
                                                         <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                         {{ filter_item|title }}
@@ -77,8 +77,8 @@
                                             {% if filter_name == "Topics" %}
                                                 <span
                                                         class="filter-box-tag tag is-primary is-light ml-2 mt-2"
-                                                        data-filter-name="{{ filter_name|as_css_class }}"
-                                                        data-filter-item="{{ filter_item|as_css_class }}"
+                                                        data-filter-name="{{ filter_name|to_kebabcase }}"
+                                                        data-filter-item="{{ filter_item|to_kebabcase }}"
                                                 >
                                                         <i class="{{ filter_item|title|get_category_icon }} mr-1"></i>
                                                         {{ filter_item|title }}
@@ -127,8 +127,8 @@
                                                     <input
                                                             class="filter-checkbox"
                                                             type="checkbox"
-                                                            data-filter-name="{{ filter_name|as_css_class }}"
-                                                            data-filter-item="{{ filter_item|as_css_class }}"
+                                                            data-filter-name="{{ filter_name|to_kebabcase }}"
+                                                            data-filter-item="{{ filter_item|to_kebabcase }}"
                                                     >
                                                     {{ filter_item }}
                                                 </label>