Add a template tag for css-classifying things.

2 files changed, 22 insertions, 3 deletions

diff --git a/pydis_site/apps/resources/templatetags/as_css_class.py b/pydis_site/apps/resources/templatetags/as_css_class.py
new file mode 100644
index 00000000..8b628dc9
--- /dev/null
+++ b/pydis_site/apps/resources/templatetags/as_css_class.py
@@ -0,0 +1,18 @@
+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/templates/resources/resource_box.html b/pydis_site/templates/resources/resource_box.html
index 7de9ca18..09256751 100644
--- a/pydis_site/templates/resources/resource_box.html
+++ b/pydis_site/templates/resources/resource_box.html
@@ -1,7 +1,7 @@
 {% load as_icon %}
 {% load get_category_icon %}
 
-<div class="box">
+<div class="box resource-box {{ resource.css_classes }}">
     {% if 'title_url' in resource %}
         <a href="{{ resource.title_url }}">
             {% include "resources/resource_box_header.html" %}
@@ -13,7 +13,7 @@
     <p class="is-italic">{{ resource.description|safe }}</p>
 
     <div class="is-flex is-align-items-center">
-        {# Add primary link #}
+        {#  Add primary link #}
         {% if 'title_url' in resource %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ resource.title_url }}">
@@ -21,7 +21,8 @@
                 </a>
             </span>
         {% endif %}
-        {# Add all additional icon #}
+
+        {#Add all additional icon #}
         {% for icon in resource.urls %}
             <span class="icon is-size-4 is-medium" style="margin: 5px;">
                 <a href="{{ icon.url }}">