Refactor GitHub Actions workflow for PR previews and enhance Jekyll configuration with navigation links; remove obsolete staging files and add test staging post.

Author: devnomadic

.github/workflows/preview.yml

@@ -9,36 +9,45 @@ on:
       - closed
 
 permissions:
-  contents: write
-  pull-requests: write
+  contents: read
+  pages: write
+  id-token: write
 
-concurrency: preview-${{ github.ref }}
+concurrency:
+  group: "pages"
+  cancel-in-progress: false
 
 jobs:
-  deploy-preview:
+  build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
-
+        
       - name: Setup Ruby
         uses: ruby/setup-ruby@v1
         with:
           ruby-version: '3.1'
           bundler-cache: true
-
-      - name: Build Jekyll site
-        if: github.event.action != 'closed'
-        run: |
-          # Remove CNAME file for previews to avoid routing conflicts
-          rm -f CNAME
-          bundle exec jekyll build
+          
+      - name: Build with Jekyll
+        run: bundle exec jekyll build
         env:
           JEKYLL_ENV: production
-
-      - name: Deploy preview
-        uses: rossjrw/pr-preview-action@v1
+          
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
         with:
-          source-dir: ./_site
-          preview-branch: gh-pages
-          umbrella-dir: pr-preview
+          path: ./_site
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4
+

_config.yml

@@ -28,6 +28,14 @@ dash:
   show_author: true
   avatar_source: "local"
   avatar_path: "/assets/avatar.gif"
+  show_nav: true
+  nav_links:
+    - url: /about
+      title: About
+    - url: /archive
+      title: Archive
+    - url: /tags
+      title: Tags
   social_links:
     - url: https://github.com/devnomadic
       icon: github

_config_preview.yml

@@ -8,6 +8,24 @@ tags: remote-work development tools productivity vscode docker
 
 # Creating Your Remote Development Paradise
 
+## 📝 TL;DR
+
+Complete guide to **setting up a productive remote development environment** for digital nomads:
+
+**Hardware Essentials:**
+- 💻 **MacBook Pro M3** (16GB+ RAM) + portable monitor
+- ⌨️ **Compact mechanical keyboard** + wireless mouse  
+
+**Software Stack:**
+- 🔧 **VS Code** with Remote Development extensions
+- 🐳 **Docker** for consistent environments
+- ☁️ **Cloud services** (GitHub Codespaces, AWS Cloud9)
+- 🔒 **VPN** + secure backup solutions
+
+**Key Tips:** Prioritize battery life, internet reliability, and portable ergonomics!
+
+---
+
 Working remotely as a developer requires a carefully crafted environment that enables productivity from anywhere in the world. Here's my guide to setting up the perfect remote development setup.
 
 ## Essential Hardware

_posts/2025-06-08-remote-development-environment.md

@@ -8,6 +8,20 @@ tags: introduction devnomad remote-work digital-nomad software-engineering trave
 
 # Welcome to my digital nomad journey!
 
+## 📝 TL;DR
+
+🚀 **Starting devnomadic** - a blog documenting my journey as a software engineer embracing the digital nomad lifestyle.
+
+**What you'll find here:**
+- 🔧 **Technical tutorials** & best practices
+- 🌍 **Remote work insights** from distributed teams  
+- ✈️ **Travel stories** from a developer's perspective
+- 📱 **Tool recommendations** for nomadic developers
+
+Join me as I explore the intersection of **code, travel, and remote work**!
+
+---
+
 Hello and welcome to devnomadic! This blog represents the beginning of documenting my journey as a software engineer embracing the digital nomad lifestyle.
 
 ## Why devnomadic?

_posts/2025-06-09-welcome-to-devnomadic.md

@@ -10,6 +10,18 @@ tags: BlazorWebAssembly CloudflareWorkers DevSecOps WebDevelopment CyberSecurity
 
 *Published: June 9, 2025*
 
+## 📝 TL;DR
+
+Built **Albatross**, a secure IP abuse checker using Blazor WebAssembly + Cloudflare Workers. Key features:
+- 🔐 **Secure API proxy** with HMAC authentication (no exposed API keys)
+- ⚡ **Fast client-side app** with server-side API protection
+- 🛡️ **Real-time IP reputation checking** via AbuseIPDB
+- 🏗️ **Modern architecture** combining the best of client and edge computing
+
+**Tech Stack:** Blazor WASM, Cloudflare Workers, HMAC-SHA256, AbuseIPDB API
+
+---
+
 In an era where cybersecurity threats are constantly evolving, having reliable tools to check IP addresses for malicious activity has become essential. Today, I'm excited to share the journey of building **Albatross** - a secure, modern web application that leverages the AbuseIPDB API to provide real-time IP abuse checking through a sophisticated architecture combining Blazor WebAssembly and Cloudflare Workers.
 
 ## The Challenge: Secure API Proxy Architecture

_posts/2025-06-10-albatross.md

@@ -66,3 +66,47 @@
   color: #202124;
   line-height: 1.5;
 }
+
+/* Remove text justification on mobile devices */
+@media (max-width: 768px) {
+  body, p, div, article, section {
+    text-align: left !important;
+  }
+  
+  /* Specifically target post content */
+  .post-content, 
+  .post-body, 
+  .content,
+  .post-excerpt {
+    text-align: left !important;
+  }
+}
+
+/* TLDR section styling */
+.post-content h2:has(+ p):where(:contains("TL;DR"), :contains("TLDR")),
+.post-content h2 + p:has-text("📝 TL;DR") {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  border-left: 4px solid #4285f4;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* Alternative approach - target by content */
+.post-content > h2 + p:first-of-type,
+.post-content h2 + p {
+  background: linear-gradient(135deg, #f8f9ff 0%, #e8f2ff 100%);
+  border-left: 4px solid #4285f4;
+  padding: 1.5rem;
+  margin: 1.5rem 0;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+/* TLDR heading style */
+.post-content h2:contains("TL;DR") {
+  color: #4285f4;
+  font-size: 1.1rem;
+  margin-bottom: 0.5rem;
+}

assets/css/custom.css

@@ -0,0 +1,29 @@
+---
+layout: post
+title: "Test Staging Post"
+date: 2025-06-10 12:00:00 -0500
+tags: [test, staging]
+---
+
+# Test Staging Post
+
+This is a test post that lives directly in the staging directory.
+
+## Purpose
+
+This post is used to test the staging preview system:
+
+- It's a real blog post with proper front matter
+- It lives in the `staging/` directory
+- It will be built as part of the staging collection
+- It appears in the preview site
+
+## Content
+
+This is just sample content to verify that:
+
+1. Jekyll can build staging posts
+2. The staging collection works
+3. Posts appear in the preview deployment
+
+When this works, we know the staging system is functioning correctly!