feat:UI and rss changes

config.toml

@@ -5,7 +5,7 @@ base_url = "https://coolans.dev"
 compile_sass = false
 
 # When set to "true", the generated HTML files are minified.
-minify_html = false
+minify_html = true
 
 # When set to "true", a search index is built from the pages and section
 # content for `default_language`.
@@ -42,10 +42,10 @@ include_description = true
 # Whether to include the RFC3339 datetime of the page in the search index
 include_date = true
 # Whether to include the rendered content of the page/section in the index
-include_content = true
+include_content = false
 # At which code point to truncate the content to. Useful if you have a lot of pages and the index would
 # become too big to load on the site. Defaults to not being set.
-truncate_content_length = 100
+# truncate_content_length = 100
 
 [extra]
 # Put all your custom variables here

content/blog/hello-world.md

@@ -1,6 +1,6 @@
 +++
 title = "Hello World"
-date = 2025-06-15
+date = 2025-05-16
 extra.image = "assets/hello_world.webp"
 description = "My First Blog."
 +++

templates/base.html

@@ -4,8 +4,9 @@
         <meta charset="utf-8" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         <title>{% block title %}{% endblock title %} - Coolans</title>
+        <link rel="icon" href="/assets/favicon.ico">
         {% block rss %}
-          <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path="rss.xml", trailing_slash=false) }}">
+          <link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path='rss.xml', trailing_slash=false) }}">
         {% endblock %}
         <link
             rel="stylesheet"
@@ -32,7 +33,7 @@
                 }
             });
 
-            function openFullscreenTailwind(imgElement) {
+            function openFullscreenImage(imgElement) {
                 const overlay = document.createElement('div');
                 overlay.className = `
                     fixed inset-0 bg-black bg-opacity-90 backdrop-blur-sm flex items-center justify-center z-50

templates/blog-page.html

@@ -32,7 +32,7 @@
             class="max-w-full max-h-100 object-cover border border-gray-600 rounded-2xl"
             loading="lazy"
             decoding="async"
-            onclick="openFullscreenTailwind(this)"
+            onclick="openFullscreenImage(this)"
         />
     </div>
 {% endif %}

templates/blog.html

@@ -18,7 +18,7 @@
 </div>
 
 <!-- Blog Posts Container -->
-<div id="blog-posts" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+<div id="blog-posts" class="grid gap-8 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3">
     {% for page in section.pages %}
     <a
         href="{{ page.permalink | safe }}"
@@ -34,28 +34,33 @@
             {% else %}
                 {% set image_url = get_url(path=image) %}
             {% endif %}
-
-            <img
-                src="{{ image_url | safe }}"
-                alt="{{ page.title }}"
-                class="w-full h-48 object-cover"
-                loading="lazy"
-                decoding="async"
-            />
+        {% else %}
+            {% set image_url = get_url(path='assets/blog-default.png') %}
         {% endif %}
 
+        <!-- Card Image -->
+        <img
+            src="{{ image_url | safe }}"
+            alt="{{ page.title }}"
+            class="w-full h-50 object-cover"
+            loading="lazy"
+            decoding="async"
+        />
+
         <div class="p-6">
-            <h2 class="text-xl font-semibold text-white mb-2">
+            <h2 class="text-2xl font-semibold text-white">
                 {{ page.title }}
             </h2>
-            <p class="text-white text-sm">{{ page.date }}</p>
+            <p class="text-blue-400 text-sm mt-2">{{ page.date }}</p>
+            <p class="text-gray-300 text-sm mt-2">{{ page.description }}</p>
         </div>
     </a>
     {% endfor %}
 </div>
 
-<!-- ElasticLunr and Script -->
+<!-- Load ElasticLunr and Zola's search index -->
 <script src="{{ get_url(path='elasticlunr.min.js') | safe }}"></script>
+<script src="{{ get_url(path='search_index.en.js') | safe }}"></script>
 <script>
 document.addEventListener("DOMContentLoaded", function () {
     const input = document.getElementById("search-input");
@@ -64,29 +69,28 @@ document.addEventListener("DOMContentLoaded", function () {
     const index = elasticlunr(function () {
         this.addField("title");
         this.addField("description");
-        this.setRef("url");
+        this.setRef("id");
     });
 
-    cards.forEach(card => {
-        index.addDoc({
-            title: card.dataset.title,
-            description: card.dataset.description,
-            url: card.dataset.url
-        });
-    });
+    const docs = window.searchIndex.documentStore.docs;
+    for (const id in docs) {
+        if (docs.hasOwnProperty(id)) {
+            index.addDoc(docs[id]);
+        }
+    }
 
     input.addEventListener("input", function () {
-        const query = this.value.trim();
-        if (query.length < 1) {
+        const query = this.value.trim().toLowerCase();
+        if (!query) {
             cards.forEach(c => c.style.display = "");
             return;
         }
 
-        const results = index.search(query, { expand: true });
-        const urls = results.map(r => r.ref);
+        const resultUrls = index.search(query, { expand: true }).map(r => r.ref);
 
         cards.forEach(card => {
-            card.style.display = urls.includes(card.dataset.url) ? "" : "none";
+            const url = card.dataset.url;
+            card.style.display = resultUrls.includes(url) ? "" : "none";
         });
     });
 });

templates/rss.xml

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
+    <channel>
+        <title>{{ config.title }}
+            {%- if term %} - {{ term.name }}
+            {%- elif section.title %} - {{ section.title }}
+            {%- endif -%}
+        </title>
+        <link>
+            {%- if section -%}
+                {{ section.permalink | escape_xml | safe }}
+            {%- else -%}
+                {{ config.base_url | escape_xml | safe }}
+            {%- endif -%}
+        </link>
+        <description>{{ config.description }}</description>
+        <generator>Zola</generator>
+        <language>{{ lang }}</language>
+        <atom:link href="{{ feed_url | safe }}" rel="self" type="application/rss+xml"/>
+        <lastBuildDate>{{ last_updated | date(format="%a, %d %b %Y %H:%M:%S %z") }}</lastBuildDate>
+        {%- for page in pages %}
+        <item>
+            <title>{{ page.title }}</title>
+            <pubDate>{{ page.date | date(format="%a, %d %b %Y %H:%M:%S %z") }}</pubDate>
+            <author>
+                {%- if page.authors -%}
+                    {{ page.authors[0] }}
+                {%- elif config.author -%}
+                    {{ config.author }}
+                {%- else -%}
+                    Unknown
+                {%- endif -%}
+            </author>
+            <link>{{ page.permalink | escape_xml | safe }}</link>
+            {% if page.extra.image %}
+            {%- if page.extra.image is starting_with("http") -%}
+                {%- set image_url = page.extra.image -%}
+            {%- else -%}
+                {%- set image_url = get_url(path=page.extra.image) -%}
+            {%- endif -%}
+            <media:thumbnail url="{{ image_url | safe }}" width="90" height="160"/>
+            {% endif -%}
+            <guid>{{ page.permalink | escape_xml | safe }}</guid>
+            <description xml:base="{{ page.permalink | escape_xml | safe }}">{% if page.summary %}{{ page.summary }}{% else %}{{ page.content }}{% endif %}</description>
+        </item>
+        {%- endfor %}
+    </channel>
+</rss>