feat:First Blog

templates/blog-page.html

@@ -1,10 +1,45 @@
 {% extends "base.html" %}
 
+{% block title %}{{ page.title }}{% endblock title %}
+
+{% block head_extra %}
+    {% if page.description %}
+        <meta name="description" content="{{ page.description | safe }}">
+    {% endif %}
+{% endblock head_extra %}
+
+
 {% block content %}
-<h1 class="title">
+
+<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-center">
   {{ page.title }}
 </h1>
-<p class="subtitle"><strong>{{ page.date }}</strong></p>
-{{ page.content | safe }}
-{% endblock content %}
 
+<p class="subtitle"><strong>{{ page.date }}</strong></p>
+
+{% if page.extra.image %}
+    {% set image = page.extra.image %}
+    {% if image is starting_with("http") %}
+        {% set image_url = image %}
+    {% else %}
+        {% set image_url = get_url(path=image) %}
+    {% endif %}
+
+    <div class="flex justify-center my-4">
+        <img
+            src="{{ image_url | safe }}"
+            alt="{{ page.title }}"
+            class="max-w-full max-h-100 object-cover border border-gray-600 rounded-2xl"
+            loading="lazy"
+            decoding="async"
+            onclick="openFullscreenTailwind(this)"
+        />
+    </div>
+{% endif %}
+
+
+<div class="mt-6 text-xl text-gray-300">
+    {{ page.content | safe }}
+</div>
+
+{% endblock content %}