RC: (upload) astro initial structure

src/pages/blog/index.astro

@@ -0,0 +1,131 @@
+---
+import BaseLayout from '../../layouts/BaseLayout.astro';
+import { getCollection } from 'astro:content';
+
+const allPosts = (await getCollection('blog', ({ data }) => !data.draft))
+  .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());
+
+// Group by tags for sidebar
+const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
+---
+
+<BaseLayout title="Blog" description="Sysadmin chronicles — HPC, homelab, and everything in between">
+  <div class="blog-page">
+    <div class="blog-hero container">
+      <div class="accent-line"></div>
+      <h1>The <span class="text-accent">Log</span></h1>
+      <p class="text-muted font-mono" style="font-size:0.9rem;margin-top:0.5rem">
+        {allPosts.length} entries · HPC · homelab · infra · ops
+      </p>
+    </div>
+
+    <div class="blog-layout container">
+      <!-- Post list -->
+      <div class="post-list">
+        {allPosts.map((post, i) => (
+          <article class="post-row card">
+            <a href={`/blog/${post.id}`} class="post-row-link">
+              <div class="post-row-left">
+                {post.data.day && (
+                  <div class="font-mono" style="font-size:0.7rem;color:var(--petronas-teal);letter-spacing:0.1em;margin-bottom:0.3rem">
+                    entry_{String(post.data.day).padStart(3,'0')}
+                  </div>
+                )}
+                <h2 class="post-row-title">{post.data.title}</h2>
+                <p class="text-muted post-row-desc">{post.data.description}</p>
+                <div class="post-row-meta">
+                  <time class="font-mono text-muted" style="font-size:0.72rem">
+                    {post.data.pubDate.toLocaleDateString('en-GB', {day:'numeric',month:'short',year:'numeric'})}
+                  </time>
+                  <div style="display:flex;gap:0.35rem;flex-wrap:wrap">
+                    {(post.data.tags ?? []).map((t: string) => <span class="tag">{t}</span>)}
+                  </div>
+                </div>
+              </div>
+              <div class="post-row-arrow text-accent font-display">→</div>
+            </a>
+          </article>
+        ))}
+      </div>
+
+      <!-- Sidebar -->
+      <aside class="blog-sidebar">
+        <div class="card" style="position:sticky;top:5.5rem">
+          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:1rem">Tags</p>
+          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
+            {allTags.map(t => <span class="tag">{t}</span>)}
+          </div>
+          <hr class="glow-divider" style="margin:1.5rem 0" />
+          <p class="font-display" style="font-size:0.75rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Navigate</p>
+          <div style="display:flex;flex-direction:column;gap:0.35rem">
+            <a href="/" class="text-muted font-mono" style="font-size:0.8rem">← Home</a>
+            <a href="/homelab" class="text-muted font-mono" style="font-size:0.8rem">Homelab status</a>
+            <a href="/hardware" class="text-muted font-mono" style="font-size:0.8rem">Hardware list</a>
+          </div>
+        </div>
+      </aside>
+    </div>
+  </div>
+</BaseLayout>
+
+<style>
+  .blog-page { padding-top: 8rem; }
+
+  .blog-hero { margin-bottom: 3.5rem; }
+
+  .blog-layout {
+    display: grid;
+    grid-template-columns: 1fr 240px;
+    gap: 3rem;
+    align-items: start;
+  }
+
+  .post-list { display: flex; flex-direction: column; gap: 1rem; }
+
+  .post-row { padding: 0; }
+
+  .post-row-link {
+    display: flex;
+    align-items: center;
+    gap: 1.5rem;
+    padding: 1.5rem;
+    color: inherit;
+    transition: background var(--transition-fast);
+  }
+
+  .post-row:hover .post-row-title { color: var(--petronas-teal); }
+
+  .post-row-left { flex: 1; }
+
+  .post-row-title {
+    font-size: 1.05rem;
+    margin-bottom: 0.4rem;
+    transition: color var(--transition-fast);
+  }
+
+  .post-row-desc {
+    font-size: 0.85rem;
+    line-height: 1.55;
+    margin-bottom: 0.75rem;
+  }
+
+  .post-row-meta {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+  }
+
+  .post-row-arrow {
+    font-size: 1.5rem;
+    opacity: 0.3;
+    transition: opacity var(--transition-fast), transform var(--transition-fast);
+    flex-shrink: 0;
+  }
+  .post-row:hover .post-row-arrow { opacity: 1; transform: translateX(4px); }
+
+  @media (max-width: 768px) {
+    .blog-layout { grid-template-columns: 1fr; }
+    .blog-sidebar { display: none; }
+  }
+</style>