IMPROVE: Use proper keepachangelog.com format with clean styling

- Extract latest changelog entry with proper HTML structure (h3, h4, h5, ul, li)
- Add white background container with border like keepachangelog.com
- Proper heading hierarchy and spacing for readability
- Remove emoji clutter while maintaining markdown structure
- Clean typography matching the keepachangelog.com reference design

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <[email protected]>

Author: pwt-cd

.github/workflows/build-deploy.yml

@@ -367,14 +367,43 @@ jobs:
           sed "s|{{VERSION}}|${{ needs.extract-version.outputs.version }}|g" README.md > ./pages-content/README.md
           echo "✅ README.md processed with version ${{ needs.extract-version.outputs.version }}"
           
-          # Extract the most recent changelog entry verbatim (just remove emojis)
+          # Extract the most recent changelog entry in keepachangelog.com format
           echo "📋 Extracting latest changelog entry..."
           if [ -f "drafts/current/specifications/CHANGELOG.md" ]; then
-            # Get the first changelog entry and remove emojis
+            # Get the first changelog entry and format it cleanly like keepachangelog.com
             sed -n '/^## \[/,/^## \[/p' drafts/current/specifications/CHANGELOG.md | \
             sed '$d' | \
-            sed 's/🎉\|✨\|🔧\|⬆️\|🏗️\|📊\|🎯\|⚠️\|🐍\|🚀\|🛡️\|🎨\|🧪\|📋\|👥\|💰\|📦\|🔄\|📚//g' \
-            > ./pages-content/recent-changes.html
+            sed 's/🎉\|✨\|🔧\|⬆️\|🏗️\|📊\|🎯\|⚠️\|🐍\|🚀\|🛡️\|🎨\|🧪\|📋\|👥\|💰\|📦\|🔄\|📚//g' | \
+            sed 's/^## \[\([^]]*\)\] - \(.*\)/<h3>\1 - \2<\/h3>/' | \
+            sed 's/^### \(.*\)/<h4>\1<\/h4>/' | \
+            sed 's/^#### \(.*\)/<h5>\1<\/h5>/' | \
+            sed 's/^- \(.*\)/<li>\1<\/li>/' | \
+            sed '/^$/d' | \
+            awk '
+            BEGIN { in_list = 0 }
+            /<h[45]>/ { 
+              if (in_list) { print "</ul>"; in_list = 0 }
+              print $0
+              if (getline && /<li>/) {
+                print "<ul>"
+                print $0
+                in_list = 1
+              }
+              next
+            }
+            /<li>/ { 
+              if (!in_list) { print "<ul>"; in_list = 1 }
+              print $0
+              next
+            }
+            /^[^<]/ {
+              if (in_list) { print "</ul>"; in_list = 0 }
+              if (NF > 0) print "<p>" $0 "</p>"
+              next
+            }
+            { print $0 }
+            END { if (in_list) print "</ul>" }
+            ' > ./pages-content/recent-changes.html
             echo "✅ Latest changelog entry extracted and formatted"
           else
             echo "<p>No changelog available</p>" > ./pages-content/recent-changes.html
@@ -503,28 +532,44 @@ jobs:
                       line-height: 1.6;
                       color: #333;
                       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+                      background: white;
+                      padding: 20px;
+                      border-radius: 4px;
+                      border: 1px solid #e1e4e8;
+                  }
+                  .changelog-content h3 {
+                      color: #24292e;
+                      margin: 0 0 15px 0;
+                      font-size: 1.4em;
+                      font-weight: 600;
+                      border-bottom: 1px solid #e1e4e8;
+                      padding-bottom: 8px;
                   }
                   .changelog-content h4 {
-                      color: #333;
-                      margin-top: 20px;
-                      margin-bottom: 8px;
+                      color: #24292e;
+                      margin: 20px 0 8px 0;
                       font-size: 1.1em;
                       font-weight: 600;
                   }
+                  .changelog-content h5 {
+                      color: #24292e;
+                      margin: 15px 0 6px 0;
+                      font-size: 1em;
+                      font-weight: 600;
+                  }
                   .changelog-content ul {
-                      margin: 8px 0 20px 0;
+                      margin: 8px 0 16px 0;
                       padding-left: 20px;
                   }
                   .changelog-content li {
-                      margin-bottom: 4px;
+                      margin-bottom: 6px;
                       line-height: 1.5;
                   }
                   .changelog-content p {
                       margin: 12px 0;
                       line-height: 1.6;
                   }
                   .changelog-content strong {
-                      color: #0366d6;
                       font-weight: 600;
                   }
               </style>