feat:First Blog

2025-12-20 07:15:19 +05:30 · 2025-05-16 21:17:15 +05:30
parent b27c2c5fd4
commit 72e0a87073
11 changed files with 246 additions and 27 deletions
--- a/templates/404.html
+++ b/templates/404.html
@@ -2,6 +2,10 @@

 {% block title %} Not Found {% endblock title %}

+{% block head_extra %}
+<link rel="preload" as="image" href="{{ get_url(path='assets/404.webp') | safe }}?v={{ get_hash(path='assets/404.webp') }}" type="image/webp" />
+{% endblock head_extra %}
+
 {% block content %}
 <div class="flex flex-col items-center justify-center text-center min-h-[60vh] space-y-10">
    <h1 class="text-5xl md:text-7xl font-extrabold text-white drop-shadow-lg">
--- a/templates/base.html
+++ b/templates/base.html
@@ -3,33 +3,65 @@
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
-        <meta name="description" content="Coolans Portfolio and Blog Website.">
        <title>{% block title %}{% endblock title %} - Coolans</title>
        <link
            rel="stylesheet"
            href="{{ get_url(path='main.css') | safe }}?v={{ get_hash(path='main.css') }}"
        />
-        <script>
+        <script defer>
            // Mobile menu toggle
            function toggleMobileMenu() {
                const menu = document.getElementById("mobile-menu");
                menu.classList.toggle("hidden");
            }
+
+            document.addEventListener("click", function (event) {
+                const menu = document.getElementById("mobile-menu");
+                const button = event.target.closest("button[aria-label='Toggle menu']");
+
+                // If menu is open, and click is outside menu and button — close it
+                if (
+                    !menu.classList.contains("hidden") &&
+                    !menu.contains(event.target) &&
+                    !button
+                ) {
+                    menu.classList.add("hidden");
+                }
+            });
+
+            function openFullscreenTailwind(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
+                    transition-opacity duration-300 ease-in-out
+                `;
+                overlay.onclick = () => overlay.remove();
+
+                const fullscreenImage = document.createElement('img');
+                fullscreenImage.src = imgElement.src;
+                fullscreenImage.alt = imgElement.alt;
+                fullscreenImage.className = `
+                    max-w-[90vw] max-h-[90vh] rounded-2xl shadow-2xl
+                    transition-transform duration-500 ease-in-out scale-95 hover:scale-100
+                `;
+
+                overlay.appendChild(fullscreenImage);
+                document.body.appendChild(overlay);
+            }
        </script>
+        <link rel="preload" as="image" href="/assets/background.webp" type="image/webp"/>
        <style>
          .bg-image {
            background-image: url('/assets/background.webp');
          }
        </style>
+        {% block head_extra %}{% endblock head_extra %}
    </head>

-    <body
-        class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300"
-    >
+    <body class="min-h-screen flex flex-col bg-black text-white relative transition-colors duration-300">
        <!-- Blurred Background Image -->
-        <div
-            class="fixed inset-0 -z-10 bg-image bg-cover bg-center blur-md"
-        ></div>
+        <div class="fixed inset-0 -z-10 bg-image bg-cover bg-center blur-md"></div>
+
        <div class="fixed inset-0 bg-black/70 -z-5"></div>

        <!-- Top Navigation -->
@@ -46,7 +78,7 @@

                <!-- Mobile menu button -->
                <button
-                    class="md:hidden px-3 py-2 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
+                    class="sm:hidden px-3 py-3 rounded-lg text-gray-300 bg-gray-900/80 border border-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-white"
                    aria-label="Toggle menu"
                    onclick="toggleMobileMenu()"
                >
@@ -66,20 +98,19 @@
                <!-- Nav Links Island -->
                <ul
                    id="mobile-menu"
-                    class="hidden md:flex md:static absolute right-4 top-full mt-2 md:mt-0 px-6 py-3 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 md:space-x-6 flex-col md:flex-row text-gray-300 md:items-center"
+                    class="hidden sm:flex sm:static absolute right-4 top-full mt-2 sm:mt-0 px-6 py-3 rounded-2xl bg-gray-900/70 border border-gray-800 shadow-xl backdrop-blur-md space-x-6 sm:space-x-6 flex-col sm:flex-row text-gray-300 sm:items-center"
                >
-
                    <li>
                        <a
                            href="/"
-                            class="hover:text-blue-400 block py-2 md:py-0"
+                            class="hover:text-blue-400 block py-2 sm:py-0"
                            >Home</a
                        >
                    </li>
                    <li>
                        <a
                            href="/blog"
-                            class="hover:text-blue-400 block py-2 md:py-0"
+                            class="hover:text-blue-400 block py-2 sm:py-0"
                            >Blogs</a
                        >
                    </li>
@@ -93,7 +124,7 @@
                class="container mx-auto px-4"
            >
                <div
-                    class="px-6 py-4 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
+                    class="p-8 rounded-2xl bg-gray-900/80 border border-gray-800 shadow-xl backdrop-blur-md text-center text-sm"
                >
                {% block content %}{% endblock content %}
                </div>
--- a/templates/blog-page.html
+++ b/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 %}
--- a/templates/blog.html
+++ b/templates/blog.html
@@ -3,12 +3,92 @@
 {% block title %} Blogs {% endblock title %}

 {% block content %}
-<h1 class="text-4xl md:text-5xl font-extrabold">
-  {{ section.title }}
+<h1 class="text-4xl md:text-5xl font-extrabold mb-8 text-center">
+    {{ section.title }}
 </h1>
-<ul>
-  {% for page in section.pages %}
-  <li><a href="{{ page.permalink | safe }}">{{ page.title }}</a></li>
-  {% endfor %}
-</ul>
+
+<!-- Search Input -->
+<div class="mb-8 text-center">
+    <input
+        id="search-input"
+        type="text"
+        placeholder="Search blogs..."
+        class="w-full max-w-2xl px-4 py-2 rounded-md bg-gray-800 text-white border border-gray-700 focus:outline-none focus:ring-2 focus:ring-blue-600"
+    />
+</div>
+
+<!-- Blog Posts Container -->
+<div id="blog-posts" class="grid gap-8 md:grid-cols-2 lg:grid-cols-3">
+    {% for page in section.pages %}
+    <a
+        href="{{ page.permalink | safe }}"
+        class="blog-card rounded-2xl overflow-hidden bg-gray-900/80 border border-gray-600 shadow-lg backdrop-blur-md transition-transform hover:scale-[1.02]"
+        data-title="{{ page.title | safe }}"
+        data-description="{{ page.description | safe }}"
+        data-url="{{ page.permalink | safe }}"
+    >
+        {% 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 %}
+
+            <img
+                src="{{ image_url | safe }}"
+                alt="{{ page.title }}"
+                class="w-full h-48 object-cover"
+                loading="lazy"
+                decoding="async"
+            />
+        {% endif %}
+
+        <div class="p-6">
+            <h2 class="text-xl font-semibold text-white mb-2">
+                {{ page.title }}
+            </h2>
+            <p class="text-white text-sm">{{ page.date }}</p>
+        </div>
+    </a>
+    {% endfor %}
+</div>
+
+<!-- ElasticLunr and Script -->
+<script src="{{ get_url(path='elasticlunr.min.js') | safe }}"></script>
+<script>
+document.addEventListener("DOMContentLoaded", function () {
+    const input = document.getElementById("search-input");
+    const cards = [...document.querySelectorAll(".blog-card")];
+
+    const index = elasticlunr(function () {
+        this.addField("title");
+        this.addField("description");
+        this.setRef("url");
+    });
+
+    cards.forEach(card => {
+        index.addDoc({
+            title: card.dataset.title,
+            description: card.dataset.description,
+            url: card.dataset.url
+        });
+    });
+
+    input.addEventListener("input", function () {
+        const query = this.value.trim();
+        if (query.length < 1) {
+            cards.forEach(c => c.style.display = "");
+            return;
+        }
+
+        const results = index.search(query, { expand: true });
+        const urls = results.map(r => r.ref);
+
+        cards.forEach(card => {
+            card.style.display = urls.includes(card.dataset.url) ? "" : "none";
+        });
+    });
+});
+</script>
 {% endblock content %}
--- a/templates/index.html
+++ b/templates/index.html
@@ -2,9 +2,13 @@

 {% block title %}Welcome{% endblock title %}

+{% block head_extra %}
+<meta name="description" content="Coolans Portfolio and Blog Website.">
+{% endblock head_extra %}
+
 {% block content %}
 <h1 class="text-4xl md:text-5xl font-extrabold leading-tight">
-    Hi, I'm Tanveer — a Full Stack Developer & Self-Taught SysAdmin.
+    HI <br> I'm Tanveer Ahmed Ansari <br>Full Stack Developer & Self-Taught SysAdmin.
 </h1>

 <p class="mt-6 text-lg text-gray-300">
--- a/templates/shortcodes/paragraph.html
+++ b/templates/shortcodes/paragraph.html
@@ -0,0 +1,3 @@
+<p {% if class %}class="{{class}}"{% endif %}>
+    {{ body | markdown | safe }}
+</p>