Update newsy.html

Author: DevLabStudy

newsy.html

@@ -7,7 +7,7 @@
     /* SEKCJA NAGŁÓWKA I WYSZUKIWARKI */
     .newsy-hero {
         max-width: 1200px;
-        margin: 0 auto 40px auto;
+        margin: 0 auto 30px auto;
         display: flex;
         flex-direction: column;
         gap: 25px;
@@ -31,6 +31,41 @@
         color: #fff;
     }
 
+    /* PASEK FILTRÓW KATEGORII (W STYLU PORTALU) */
+    .newsy-filters {
+        max-width: 1200px;
+        margin: 0 auto 30px auto;
+        display: flex;
+        gap: 12px;
+        flex-wrap: wrap;
+    }
+
+    .filter-btn {
+        background: rgba(255, 255, 255, 0.03);
+        border: 1px solid var(--border);
+        color: var(--text-muted);
+        padding: 8px 16px;
+        border-radius: 6px;
+        font-family: 'JetBrains Mono', monospace;
+        font-size: 0.8rem;
+        font-weight: 700;
+        cursor: pointer;
+        transition: 0.2s;
+        text-transform: uppercase;
+    }
+
+    .filter-btn:hover {
+        border-color: var(--accent-blue);
+        color: #fff;
+        background: rgba(0, 210, 255, 0.05);
+    }
+
+    .filter-btn.active {
+        background: var(--accent-blue);
+        border-color: var(--accent-blue);
+        color: #0f172a;
+    }
+
     /* WYSZUKIWARKA W STYLU TERMINALA */
     .search-container {
         position: relative;
@@ -82,7 +117,7 @@
         background: var(--card-bg);
         border: 1px solid var(--border);
         border-radius: 12px;
-        padding: 30px;
+        padding: 0;
         backdrop-filter: blur(10px);
         display: flex;
         flex-direction: column;
@@ -99,6 +134,7 @@
         top: 0; left: 0; width: 4px; height: 100%;
         background: var(--accent-contrast);
         transition: 0.3s;
+        z-index: 2;
     }
 
     .news-card:hover {
@@ -111,6 +147,22 @@
         background: var(--accent-blue);
     }
 
+    .news-card-thumb {
+        width: 100%;
+        height: 200px;
+        object-fit: cover;
+        border-bottom: 1px solid var(--border);
+        display: block;
+    }
+
+    .news-card-content {
+        padding: 30px;
+        display: flex;
+        flex-direction: column;
+        flex-grow: 1;
+        justify-content: space-between;
+    }
+
     .news-card-meta {
         display: flex;
         justify-content: space-between;
@@ -160,7 +212,6 @@
         font-weight: 700;
     }
 
-    /* STAN BRAKU WYNIKÓW WYSZUKIWANIA */
     .no-results {
         grid-column: 1 / -1;
         text-align: center;
@@ -196,60 +247,111 @@ <h1>Tech Briefs & News</h1>
     </div>
 </div>
 
+<!-- PASEK SZYBKICH FILTRÓW KATEGORII -->
+<div class="newsy-filters" id="categoryFilters">
+    <button class="filter-btn active" data-filter="all">Wszystkie</button>
+    <button class="filter-btn" data-filter="hardware">Hardware</button>
+    <button class="filter-btn" data-filter="ai">AI / Soft</button>
+    <button class="filter-btn" data-filter="homelab">Homelab</button>
+</div>
+
 <div class="newsy-grid" id="newsGrid">
     {% for post in site.newsy %}
-    <a href="{{ post.url }}" class="news-card" data-title="{{ post.title | downcase }}">
+        {% assign post_thumb = post.image %}
+        {% unless post_thumb %}
+            {% if post.content contains '<img' %}
+                {% assign img_tag = post.content | split: '<img' | second %}
+                {% assign img_src = img_tag | split: 'src="' | second | split: '"' | first %}
+                {% if img_src %}
+                    {% assign post_thumb = img_src %}
+                {% endif %}
+            {% endif %}
+        {% endunless %}
+
+        {% assign post_cat = post.category | default: "brief" | downcase %}
+
+    <a href="{{ post.url }}" class="news-card" data-title="{{ post.title | downcase }}" data-category="{{ post_cat }}">
         <div>
-            <div class="news-card-meta">
-                <span class="news-card-tag">[{{ post.category | default: "BRIEF" | upcase }}]</span>
-                <span>// {{ post.date | date: "%Y.%m.%d" }}</span>
+            {% if post_thumb %}
+                <img src="{{ post_thumb }}" alt="{{ post.title }}" class="news-card-thumb">
+            {% endif %}
+            <div class="news-card-content">
+                <div>
+                    <div class="news-card-meta">
+                        <span class="news-card-tag">[{{ post.category | default: "BRIEF" | upcase }}]</span>
+                        <span>// {{ post.date | date: "%Y.%m.%d" }}</span>
+                    </div>
+                    <h2 class="news-card-title">{{ post.title }}</h2>
+                    <p class="news-card-excerpt">
+                        {% if post.description %}
+                            {{ post.description }}
+                        {% else %}
+                            {{ post.excerpt | strip_html | truncate: 120 }}
+                        {% endif %}
+                    </p>
+                </div>
+                <div class="news-card-footer">
+                    <span>// CZYTAJ RAPORT</span>
+                    <span>&rarr;</span>
+                </div>
             </div>
-            <h2 class="news-card-title">{{ post.title }}</h2>
-            <p class="news-card-excerpt">
-                {% if post.description %}
-                    {{ post.description }}
-                {% else %}
-                    {{ post.excerpt | strip_html | truncate: 120 }}
-                {% endif %}
-            </p>
-        </div>
-        <div class="news-card-footer">
-            <span>// CZYTAJ RAPORT</span>
-            <span>&rarr;</span>
         </div>
     </a>
     {% endfor %}
 
     <div class="no-results" id="noResults">
-        // Brak wpisów pasujących do zapytania w bazie danych.
+        // Brak wpisów pasujących do kryteriów wyszukiwania.
     </div>
 </div>
 
 <script>
-    // BŁYSKAWICZNA WYSZUKIWARKA CLIENT-SIDE PO TYTUŁACH
     const searchInput = document.getElementById('newsSearch');
+    const filterButtons = document.querySelectorAll('.filter-btn');
     const newsGrid = document.getElementById('newsGrid');
     const cards = newsGrid.querySelectorAll('.news-card');
     const noResults = document.getElementById('noResults');
 
-    searchInput.addEventListener('input', (e) => {
-        const query = e.target.value.toLowerCase().trim();
+    let currentCategory = 'all';
+    let currentQuery = '';
+
+    function filterCards() {
         let visibleCount = 0;
 
         cards.forEach(card => {
             const title = card.getAttribute('data-title');
-            if(title.includes(query)) {
+            const category = card.getAttribute('data-category');
+
+            const matchesCategory = (currentCategory === 'all' || category.includes(currentCategory));
+            const matchesQuery = title.includes(currentQuery);
+
+            if (matchesCategory && matchesQuery) {
                 card.style.display = 'flex';
                 visibleCount++;
             } else {
                 card.style.display = 'none';
             }
         });
 
-        if(visibleCount === 0) {
+        if (visibleCount === 0) {
             noResults.style.display = 'block';
         } else {
             noResults.style.display = 'none';
         }
+    }
+
+    // Nasłuchiwanie wpisywania w wyszukiwarkę
+    searchInput.addEventListener('input', (e) => {
+        currentQuery = e.target.value.toLowerCase().trim();
+        filterCards();
+    });
+
+    // Nasłuchiwanie kliknięć w przyciski filtrów kategorii
+    filterButtons.forEach(btn => {
+        btn.addEventListener('click', () => {
+            filterButtons.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            currentCategory = btn.getAttribute('data-filter');
+            filterCards();
+        });
     });
 </script>