Feat/btn marker links

app/pages/templates/pages/detail.html

@@ -1,5 +1,5 @@
 {% extends "base.html" %}
-{% load static %}
+{% load static content_filters %}
 {% block content %}
 <main>
   <div class="min-h-screen bg-contain bg-center" style="background-image: url('{% static 'img/bg-conference-at-glance.png' %}');">
@@ -10,7 +10,7 @@
       <article>
         <h1 class="text-5xl my-10 font-bold font-td_pinoy text-orange-2 hyphens-auto">{{ page.title|safe }}</h1>
         <div class="prose prose-lg max-w-none prose-custom">
-          {{ page.content|safe }}
+          {{ page.content|render_buttons }}
         </div>
       </article>
     </div>

app/pages/templatetags/content_filters.py

@@ -0,0 +1,34 @@
+import re
+
+from django import template
+from django.utils.html import mark_safe
+
+register = template.Library()
+
+
+def _replace_btn_link(match):
+    attrs = match.group(1)
+    text = match.group(2)
+
+    if "|btn" not in text:
+        return match.group(0)
+
+    clean_text = text.replace("|btn", "").strip()
+
+    if "class=" in attrs:
+        attrs = re.sub(r'class=["\']([^"\']*)["\']', r'class="\1 btn btn-primary"', attrs)
+    else:
+        attrs += ' class="btn btn-primary"'
+
+    return f"<a {attrs}>{clean_text}</a>"
+
+
+@register.filter
+def render_buttons(value):
+    """Convert links with |btn marker in their text to button-styled links.
+
+    Usage in TinyMCE: set link text to "Click here|btn"
+    Output: <a href="..." class="btn btn-primary">Click here</a>
+    """
+    result = re.sub(r"<a\s+([^>]+)>([^<]*\|btn[^<]*)</a>", _replace_btn_link, value)
+    return mark_safe(result)

templates/includes/announcement_modal.html

@@ -2,6 +2,7 @@
 Announcement modal component. Displays the latest published announcement from the database.
 The modal is dismissible and won't show again until browser session is closed or cache is cleared.
 {% endcomment %}
+{% load content_filters %}
 
 {% if latest_announcement %}
 <dialog id="announcement-modal" class="modal" open>
@@ -11,7 +12,7 @@
         </form>
         <h3 class="font-bold text-2xl mb-4">📢 {{ latest_announcement.title }}</h3>
         <div class="py-4 prose prose-sm max-w-none [&_p]:text-lg [&_p]:pb-4 [&_h1]:text-lg [&_h2]:text-xl">
-            {{ latest_announcement.content|safe }}
+            {{ latest_announcement.content|render_buttons }}
         </div>
     </div>
     <form method="dialog" class="modal-backdrop">