Added tag filtering and RSS feed

index.html

@@ -3,6 +3,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Hex Studios</title>
+    <link rel="alternate" type="application/rss+xml" title="Hex Studios RSS Feed" href="posts/feed.php">
 
     <script>
         (function() {
@@ -32,17 +33,18 @@
 
     <div id="links-section">
         <h2>Links</h2>
-        <ul>
+        <ul class="custom-list">
             <li><a href="https://git.bellsworne.tech/">Git repos</a></li>
             <li><a href="https://youtube.com/c/hexstudios">YouTube</a></li>
             <li><a href="https://bellsworne.com">My company - Bellsworne</a></li>
             <li><a href="https://git.bellsworne.tech/chrisbell/hexstudios-co">Page source code (git)</a></li>
+            <li><a href="posts/feed.php">RSS feed</a></li>
         </ul>
     </div>
 
     <div id="sticky-posts-section">
         <h2>Pinned posts</h2>
-        <ul>
+        <ul class="custom-list">
             <li><a href="post.html?file=about.md">About <i class="post-link-date">August 13, 2026</i></a></li>
             <li><a href="post.html?file=projects.md">Projects <i class="post-link-date">August 13, 2026</i></a></li>
         </ul>
@@ -50,40 +52,80 @@
 
     <div id="posts-section">
         <h2>Posts</h2>
-        <ul id="posts-list"></ul>
+        <ul id="tags-list"></ul>
+        <ul class="custom-list" id="posts-list"></ul>
     </div>
-    
+
     <script>
+        let allPosts = [];
+        let activeTag = null;
+
         async function loadPosts() {
             const list = document.getElementById('posts-list');
             try {
                 const res = await fetch('posts/list.php');
-                const posts = await res.json();
-
-                if (!posts.length) {
-                    list.innerHTML = '<li>No posts yet.</li>';
-                    return;
-                }
-
-                posts.forEach(post => {
-                    const li = document.createElement('li');
-                    const a = document.createElement('a');
-                    const i = document.createElement('i');
-                    a.textContent = post.title;
-                    i.textContent = post.date;
-                    a.href = post.type === 'html'
-                    ? 'posts/' + post.file
-                    : 'post.html?file=' + encodeURIComponent(post.file);
-                    li.appendChild(a);
-                    a.appendChild(i);
-                    i.classList.add("post-link-date");
-                    list.appendChild(li);
-                });
+                allPosts = await res.json();
+                renderTags();
+                renderPosts();
             } catch (err) {
                 list.innerHTML = '<li>Couldn\u2019t load posts.</li>';
             }
         }
 
+        function renderTags() {
+            const tagsList = document.getElementById('tags-list');
+            const tags = [...new Set(allPosts.flatMap(p => p.tags || []))].sort();
+
+            tagsList.innerHTML = '';
+            if (!tags.length) return;
+
+            const makeTagButton = (label, tagValue) => {
+                const li = document.createElement('li');
+                const btn = document.createElement('button');
+                btn.textContent = label;
+                btn.className = 'tag-btn' + (activeTag === tagValue ? ' active' : '');
+                btn.onclick = () => {
+                    activeTag = tagValue;
+                    renderTags();
+                    renderPosts();
+                };
+                li.appendChild(btn);
+                tagsList.appendChild(li);
+            };
+
+            makeTagButton('all', null);
+            tags.forEach(tag => makeTagButton(tag, tag));
+        }
+
+        function renderPosts() {
+            const list = document.getElementById('posts-list');
+            const posts = activeTag
+                ? allPosts.filter(p => (p.tags || []).includes(activeTag))
+                : allPosts;
+
+            list.innerHTML = '';
+
+            if (!posts.length) {
+                list.innerHTML = '<li>No posts' + (activeTag ? ' tagged \u201c' + activeTag + '\u201d' : '') + '.</li>';
+                return;
+            }
+
+            posts.forEach(post => {
+                const li = document.createElement('li');
+                const a = document.createElement('a');
+                const i = document.createElement('i');
+                a.textContent = post.title;
+                i.textContent = post.date;
+                a.href = post.type === 'html'
+                    ? 'posts/' + post.file
+                    : 'post.html?file=' + encodeURIComponent(post.file);
+                li.appendChild(a);
+                a.appendChild(i);
+                i.classList.add("post-link-date");
+                list.appendChild(li);
+            });
+        }
+
         document.addEventListener('DOMContentLoaded', loadPosts);
     </script>
 </body>