Update README.md

.gitea/workflows/deploy.yaml

@@ -24,11 +24,14 @@ jobs:
         with:
           fetch-depth: 0
 
+      - name: Generate Timestamp Tag
+        run: echo "BUILD_TIME=$(date +'%Y%m%d-%H%M%S')" >> $GITHUB_ENV
+
       - name: Log in to Gitea Container Registry
         uses: docker/login-action@v2
         with:
           registry: ${{ env.REGISTRY }}
-          username: ${{ gitea.actor }}
+          username: ${{ github.actor }}
           password: ${{ secrets.REGISTRY_TOKEN }}
 
       - name: Build and Push Docker Image
@@ -37,31 +40,45 @@ jobs:
           context: .
           push: true
           tags: |
-            ${{ env.IMAGE_NAME }}:${{ gitea.sha }}
+            ${{ env.IMAGE_NAME }}:${{ env.BUILD_TIME }}
             ${{ env.IMAGE_NAME }}:latest
 
-      - name: Checkout Infra Repository
+      - name: Checkout Infra Repository Manually
-        uses: actions/checkout@v3
+        run: |
-        with:
+          echo "🧹 Cleaning up old workspace..."
-          repository: ${{ env.INFRA_REPO }}
+          rm -rf infra-workspace
-          token: ${{ secrets.INFRA_REPO_TOKEN }}
+
-          path: infra-workspace
+          echo "🚀 Attempting to clone the infrastructure repository..."
+          # Using the token directly in the URL to bypass the API and clone over HTTPS
+          git clone https://gitea_bot:${{ secrets.INFRA_REPO_TOKEN }}@git.h0melab.uk/${{ env.INFRA_REPO }}.git infra-workspace
+
+          echo "✅ Clone successful! Contents:"
+          ls -la infra-workspace
 
       - name: Update Helm values.yaml for Flux
         run: |
-          # Go into the downloaded infrastructure repo
           cd infra-workspace
 
-          # 1. Update the image tag in your local Helm chart using sed
+          echo "--- TARGET FILE BEFORE ---"
-          sed -i "s/tag: .*/tag: ${{ gitea.sha }}/g" charts/slashroot/values.yaml
+          cat charts/slashroot/values.yaml
 
-          # 2. Configure the Gitea Bot to commit the change
+          # The sed command (Make sure the path matches perfectly!)
+          sed -i 's/tag: .*/tag: "${{ env.BUILD_TIME }}"/g' charts/slashroot/values.yaml
+
+          echo "--- TARGET FILE AFTER ---"
+          cat charts/slashroot/values.yaml
+
+          # Set up Git
           git config user.name "Gitea Actions Bot"
           git config user.email "actions@gitea.local"
+          git add charts/slashroot/values.yaml
 
-          # Commit and Push back to the Infra Repo
+          # Check if there are actually changes to commit
-          git add .
+          if git diff --staged --quiet; then
-          git commit -m "BOT: (bump) slashroot-cc update: ${{ gitea.sha }}"
+            echo "❌ ERROR: No changes were made! Check if 'tag: ' actually exists in your values.yaml"
-
+            exit 1
-          # Push the changes (The token we provided earlier handles authentication)
+          else
-          git push origin main
+            echo "✅ Changes detected! Committing and pushing..."
+            git commit -m "BOT: (deploy) slashroot-cc update ${{ env.BUILD_TIME }}"
+            git push origin main
+          fi

Dockerfile

@@ -2,7 +2,7 @@
 FROM node:22-alpine AS builder
 WORKDIR /app
 COPY package*.json ./
-RUN npm ci
+RUN npm install
 COPY . .
 RUN npm run build
 

README.md

@@ -105,7 +105,7 @@ npm run build   # outputs to dist/
 # Deploy dist/ to any static host: Cloudflare Pages, Netlify, Vercel, nginx
 ```
 
-For Cloudflare Pages (recommended for rcosta.uk):
+For Cloudflare Pages:
 
 - Build command: `npm run build`
 - Output directory: `dist`

package-lock.json

@@ -9,8 +9,8 @@
       "version": "0.0.1",
       "dependencies": {
         "@astrojs/mdx": "^5.0.3",
-        "@astrojs/sitemap": "^3.1.0",
+        "@astrojs/sitemap": "^3.7.2",
-        "astro": "^6.1.2",
+        "astro": "^6.1.3",
         "gsap": "^3.12.5"
       },
       "devDependencies": {
@@ -1780,9 +1780,9 @@
       }
     },
     "node_modules/astro": {
-      "version": "6.1.2",
+      "version": "6.1.3",
-      "resolved": "https://registry.npmjs.org/astro/-/astro-6.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/astro/-/astro-6.1.3.tgz",
-      "integrity": "sha512-r3iIvmB6JvQxsdJLvapybKKq7Bojd1iQK6CCx5P55eRnXJIyUpHx/1UB/GdMm+em/lwaCUasxHCmIO0lCLV2uA==",
+      "integrity": "sha512-FUKbBYOdYYrRNZwDd9I5CVSfR6Nj9aZeNzcjcvh1FgHwR0uXawkYFR3HiGxmdmAB2m8fs0iIkDdsiUfwGeO8qA==",
       "license": "MIT",
       "dependencies": {
         "@astrojs/compiler": "^3.0.1",

package.json

@@ -9,9 +9,9 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^4.15.0",
+    "@astrojs/mdx": "^5.0.3",
-    "@astrojs/mdx": "^3.1.0",
+    "@astrojs/sitemap": "^3.7.2",
-    "@astrojs/sitemap": "^3.1.0",
+    "astro": "^6.1.3",
     "gsap": "^3.12.5"
   },
   "devDependencies": {

src/layouts/PostLayout.astro

@@ -29,7 +29,7 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
       <div class="post-meta">
         <time class="font-mono text-muted" datetime={pubDate.toISOString()}>{formatted}</time>
         <div class="post-tags">
-          {tags.map(tag => <span class="tag">{tag}</span>)}
+          {tags.map(tag => <a href={`/tags/${tag}`} class="tag">{tag}</a>)}
         </div>
       </div>
     </div>
@@ -51,7 +51,7 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
           <div class="card sidebar-card" style="margin-top:1rem">
             <p class="font-display" style="font-size:0.8rem;letter-spacing:0.1em;text-transform:uppercase;color:var(--text-muted);margin-bottom:0.75rem">Tags</p>
             <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
-              {tags.map(tag => <span class="tag">{tag}</span>)}
+              {tags.map(tag => <a href={`/tags/${tag}`} class="tag">{tag}</a>)}
             </div>
           </div>
         )}
@@ -84,9 +84,13 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
 </script>
 
 <style>
-  .post-wrapper { padding-top: 8rem; padding-bottom: 4rem; }
+  .post-wrapper { padding-top: 8rem; padding-bottom: 2rem; }
 
-  .post-hero { max-width: 900px; }
+  /* Hero is explicitly left-aligned — Rajdhani can inherit centre from somewhere */
+  .post-hero {
+    max-width: 800px;
+    text-align: left;
+  }
 
   .day-badge {
     font-size: 0.85rem;
@@ -95,12 +99,16 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
     letter-spacing: 0.08em;
   }
 
-  .post-title { margin-bottom: 1rem; }
+  .post-title {
+    margin-bottom: 1rem;
+    text-align: left;
+  }
 
   .post-description {
     font-size: 1.15rem;
     max-width: 65ch;
     margin-bottom: 1.5rem;
+    text-align: left;
   }
 
   .post-meta {
@@ -119,8 +127,28 @@ const formatted = pubDate.toLocaleDateString('en-GB', {
     align-items: start;
   }
 
+  /* Sidebar card — sticky */
   .sidebar-card { position: sticky; top: 6rem; }
 
+  /* TOC heading labels — was almost same colour as bg */
+  .sidebar-card p[style] {
+    color: var(--text-secondary) !important;
+  }
+
+  /* TOC links — clearly visible */
+  #toc-placeholder a {
+    color: var(--text-secondary) !important;
+  }
+  #toc-placeholder a:hover {
+    color: var(--petronas-teal) !important;
+  }
+
+  /* Sidebar section labels */
+  .sidebar-card .font-display {
+    color: var(--text-secondary) !important;
+    letter-spacing: 0.12em;
+  }
+
   @media (max-width: 900px) {
     .post-body { grid-template-columns: 1fr; }
     .post-sidebar { display: none; }

src/pages/blog/index.astro

@@ -20,29 +20,39 @@ const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
     </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 && (
+              {/* Top row: entry badge + title stacked over description */}
-                  <div class="font-mono" style="font-size:0.7rem;color:var(--petronas-teal);letter-spacing:0.1em;margin-bottom:0.3rem">
+              <div class="post-row-top">
-                    entry_{String(post.data.day).padStart(3,'0')}
+                <div class="post-row-left">
-                  </div>
+                  {post.data.day && (
-                )}
+                    <div class="post-row-day font-mono">
-                <h2 class="post-row-title">{post.data.title}</h2>
+                      entry_{String(post.data.day).padStart(3,'0')}
-                <p class="text-muted post-row-desc">{post.data.description}</p>
+                    </div>
-                <div class="post-row-meta">
+                  )}
-                  <time class="font-mono text-muted" style="font-size:0.72rem">
+                  <h2 class="post-row-title">{post.data.title}</h2>
-                    {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>
+                <p class="text-muted post-row-desc">{post.data.description}</p>
               </div>
-              <div class="post-row-arrow text-accent font-display">→</div>
+
+              {/* Bottom row: date + tags inline + MORE button */}
+              <div class="post-row-meta">
+                <time class="font-mono text-muted post-row-date">
+                  {post.data.pubDate.toLocaleDateString('en-GB', {day:'numeric', month:'short', year:'numeric'})}
+                </time>
+                <div class="post-row-tags">
+                  {(post.data.tags ?? []).map((t: string) => (
+                    <a href={`/tags/${t}`} class="tag" onclick="event.stopPropagation()">{t}</a>
+                  ))}
+                </div>
+                <a href={`/blog/${post.id}`} >
+                <div class="post-row-more font-mono">MORE &rarr;</div>
+                </a>
+              </div>
+
             </a>
           </article>
         ))}
@@ -51,17 +61,23 @@ const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
       <!-- 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>
+          <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:1rem">Tags</p>
+
+          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
+            {allTags.map(t => <a href={`/tags/${t}`} class="tag">{t}</a>)}
+          </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:1rem">Posts</p>
+          <div style="display:flex;flex-wrap:wrap;gap:0.4rem">
+            {allPosts.map(t => <a href={`/blog/${t}`} class="blog">{t}</a>)}
+          </div>
         </div>
       </aside>
     </div>
@@ -86,46 +102,101 @@ const allTags = [...new Set(allPosts.flatMap(p => p.data.tags ?? []))].sort();
 
   .post-row-link {
     display: flex;
-    align-items: center;
+    flex-direction: column;
-    gap: 1.5rem;
+    gap: 1rem;
-    padding: 1.5rem;
+    padding: 1.25rem 1.5rem;
     color: inherit;
-    transition: background var(--transition-fast);
   }
 
-  .post-row:hover .post-row-title { color: var(--petronas-teal); }
+  /* * FIXED: Top section now stacks the title and description in 2 rows 
+   */
+  .post-row-top {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
 
-  .post-row-left { flex: 1; }
+  .post-row-left { display: flex; flex-direction: column; gap: 0.25rem; }
+
+  .post-row-day {
+    font-size: 0.68rem;
+    color: var(--petronas-teal);
+    letter-spacing: 0.1em;
+    opacity: 0.8;
+  }
 
   .post-row-title {
-    font-size: 1.05rem;
+    font-size: 1rem;
-    margin-bottom: 0.4rem;
+    line-height: 1.35;
     transition: color var(--transition-fast);
   }
+  .post-row:hover .post-row-title { color: var(--petronas-teal); }
 
   .post-row-desc {
     font-size: 0.85rem;
     line-height: 1.55;
-    margin-bottom: 0.75rem;
   }
 
+  /* Bottom section: date + tags + button all on one line */
   .post-row-meta {
     display: flex;
     align-items: center;
     gap: 0.75rem;
-    flex-wrap: wrap;
+    flex-wrap: nowrap;
+    border-top: 1px solid var(--border-subtle);
+    padding-top: 1rem;
   }
 
-  .post-row-arrow {
+  .post-row-date {
-    font-size: 1.5rem;
+    font-size: 0.7rem;
-    opacity: 0.3;
+    white-space: nowrap;
-    transition: opacity var(--transition-fast), transform var(--transition-fast);
     flex-shrink: 0;
   }
-  .post-row:hover .post-row-arrow { opacity: 1; transform: translateX(4px); }
+
+  .post-row-tags {
+    display: flex;
+    gap: 0.35rem;
+    flex-wrap: wrap;
+    flex: 1;
+  }
+
+  /* * FIXED: Force the tag contents to center perfectly 
+   * (You can move this to your global CSS file if `.tag` is shared globally)
+   */
+  .tag {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+    padding: 0.3rem 0.65rem;
+    border-radius: 9999px;
+  }
+
+  /* * FIXED: Replaced arrow with a styled 'MORE' button
+   */
+  .post-row-more {
+    font-size: 0.7rem;
+    letter-spacing: 0.05em;
+    padding: 0.35rem 0.6rem;
+    border: 1px solid var(--border-subtle);
+    border-radius: 4px;
+    color: var(--text-muted);
+    transition: all var(--transition-fast);
+    flex-shrink: 0;
+    margin-left: auto;
+    margin-right: 20px;
+    display: flex;
+    align-items: center;
+  }
+  .post-row:hover .post-row-more { 
+    border-color: var(--petronas-teal);
+    color: var(--petronas-teal);
+  }
 
   @media (max-width: 768px) {
-    .blog-layout { grid-template-columns: 1fr; }
+    .blog-layout  { grid-template-columns: 1fr; }
     .blog-sidebar { display: none; }
+    .post-row-meta { flex-wrap: wrap; }
+    .post-row-more { margin-left: 0; } /* Optional: push button to left on mobile if wrapped */
   }
 </style>