Add Plus Jakarta Sans font and plaintext filter for clean excerpts

Author: ericgitangu

portfolio/templates/portfolio/includes/post_slug.html

@@ -17,8 +17,8 @@
                     {{ post.title|truncatewords:8 }}
                 </h3>
                 <p class="text-xs sm:text-sm text-gray-600 dark:text-gray-400 mt-2
-                          line-clamp-3 break-words leading-relaxed">
-                    {{ post.excerpt|markdown|striptags|truncatewords:20 }}
+                          line-clamp-3 leading-relaxed tracking-normal">
+                    {{ post.excerpt|plaintext|truncatewords:20 }}
                 </p>
             </div>
         </a>

portfolio/templates/portfolio/stored_post.html

@@ -35,8 +35,8 @@ <h3 class="text-base sm:text-lg font-semibold text-gray-900 dark:text-gray-100 b
                     {{ post.title }}
                 </h3>
                 {% if post.excerpt %}
-                <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 line-clamp-2">
-                    {{ post.excerpt|markdown|striptags|truncatewords:20 }}
+                <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 line-clamp-2 tracking-normal">
+                    {{ post.excerpt|plaintext|truncatewords:20 }}
                 </p>
                 {% endif %}
             </a>

portfolio/templatetags/markdown_extras.py

@@ -1,5 +1,7 @@
+import re
 import markdown
 from django import template
+from django.utils.html import strip_tags
 from django.utils.safestring import mark_safe
 
 register = template.Library()
@@ -20,3 +22,25 @@ def markdown_format(text):
     ])
 
     return mark_safe(md.convert(text))
+
+
+@register.filter(name='plaintext')
+def plaintext(text):
+    """Convert markdown to plain text with normalized whitespace."""
+    if not text:
+        return ''
+
+    # Convert markdown to HTML
+    md = markdown.Markdown(extensions=[
+        'markdown.extensions.fenced_code',
+        'markdown.extensions.tables',
+    ])
+    html = md.convert(text)
+
+    # Strip HTML tags
+    plain = strip_tags(html)
+
+    # Normalize whitespace: collapse multiple spaces/newlines into single space
+    plain = re.sub(r'\s+', ' ', plain).strip()
+
+    return plain

templates/base.html

@@ -31,6 +31,11 @@
         <link rel="apple-touch-icon" href="{% static 'favicon.png' %}"/>
         <title>{% block title %}Eric Gitangu - Deveric's Blog{% endblock %}</title>
 
+        <!-- Google Fonts - Plus Jakarta Sans -->
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,500&display=swap" rel="stylesheet">
+
         <!-- Tailwind CSS CDN -->
         <script src="https://cdn.tailwindcss.com"></script>
         <script>
@@ -39,7 +44,7 @@
                 theme: {
                     extend: {
                         fontFamily: {
-                            sans: ['system-ui', '-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica Neue', 'Arial', 'sans-serif'],
+                            sans: ['"Plus Jakarta Sans"', 'system-ui', '-apple-system', 'sans-serif'],
                         }
                     }
                 }