Improve Tag Cropping

Move the tag cropping logic to the frontend, which makes it easier to
crop without crossing boundaries such as link or code block boundaries.

Signed-off-by: Hassan Abouelela <[email protected]>

3 files changed, 40 insertions, 6 deletions

diff --git a/pydis_site/apps/content/utils.py b/pydis_site/apps/content/utils.py
index 76437593..cc08f81f 100644
--- a/pydis_site/apps/content/utils.py
+++ b/pydis_site/apps/content/utils.py
@@ -131,14 +131,10 @@ def get_category_pages(path: Path) -> dict[str, dict]:
         tags = {}
         for tag in get_tags():
             content = frontmatter.parse(tag.body)[1]
-            if len(content) > 100:
-                # Trim the preview to a maximum of 100 visible characters
-                # This causes some markdown to break, but we ignore that
-                content = content[:100] + "..."
 
             tags[tag.name] = {
                 "title": tag.name,
-                "description": markdown.markdown(content),
+                "description": markdown.markdown(content, extensions=["pymdownx.superfences"]),
                 "icon": "fas fa-tag"
             }
 
diff --git a/pydis_site/static/js/content/listing.js b/pydis_site/static/js/content/listing.js
new file mode 100644
index 00000000..3502cb2a
--- /dev/null
+++ b/pydis_site/static/js/content/listing.js
@@ -0,0 +1,36 @@
+/**
+ * Trim a tag listing to only show a few lines of content.
+ */
+function trimTag() {
+    const containers = document.getElementsByClassName("tag-container");
+    for (const container of containers) {
+        // Remove every element after the first two paragraphs
+        while (container.children.length > 2) {
+            container.removeChild(container.lastChild);
+        }
+
+        // Trim down the elements if they are too long
+        const containerLength = container.textContent.length;
+        if (containerLength > 300) {
+            if (containerLength - container.firstChild.textContent.length > 300) {
+                // The first element alone takes up more than 300 characters
+                container.removeChild(container.lastChild);
+            }
+
+            let last = container.lastChild.lastChild;
+            while (container.textContent.length > 300 && container.lastChild.childNodes.length > 0) {
+                last = container.lastChild.lastChild;
+                last.remove();
+            }
+
+            if (container.textContent.length > 300 && (last instanceof HTMLElement && last.tagName !== "CODE")) {
+                // Add back the final element (up to a period if possible)
+                const stop = last.textContent.indexOf(".");
+                last.textContent = last.textContent.slice(0, stop > 0 ? stop + 1: null);
+                container.lastChild.appendChild(last);
+            }
+        }
+    }
+}
+
+trimTag();
diff --git a/pydis_site/templates/content/listing.html b/pydis_site/templates/content/listing.html
index eeb6b5e2..098f4237 100644
--- a/pydis_site/templates/content/listing.html
+++ b/pydis_site/templates/content/listing.html
@@ -1,5 +1,6 @@
 {# Base navigation screen for resources #}
 {% extends 'content/base.html' %}
+{% load static %}
 
 {% block page_content %}
     {# Nested Categories #}
@@ -26,10 +27,11 @@
                 <span class="is-size-4 has-text-weight-bold">{{ data.title }}</span>
             </a>
             {% if "tags" in location %}
-                <p class="is-italic">{{ data.description | safe }}</p>
+                <div class="tag-container">{{ data.description | safe }}</div>
             {% else %}
                 <p class="is-italic">{{ data.description }}</p>
             {% endif %}
         </div>
     {% endfor %}
+    <script src="{% static 'js/content/listing.js' %}"></script>
 {% endblock %}