171 {{range .Posts}}
172 -
173 - {{.Title}}
174 - {{if .Draft}}Draft{{end}}
175 - {{if .DateString}} —
-{{.DateString}}{{end}}
176 -
172 +
{{.Title}}{{if .Draft}}
Draft{{end}}
173 +
{{.DateString}}
174 {{end}}
175 -
175 +
176 {{end}}`
177
178 // Books listing template
⏺ Perfect! Now let me test the changes locally to make sure they work correctly.
⏺ Bash(make build && ./ssg)
⎿ Building static site generator...
go build -o ssg
✓ Site generated successfully in public/
… +3 lines (ctrl+o to expand)
⏺ Excellent! The build succeeded. Let me serve it and take a screenshot to verify the new layout.
⏺ Bash(cd public && python3 -m http.server 8000 &)
⎿ Running in the background (↓ to manage)
⏺ puppeteer - puppeteer_navigate (MCP)(url: "http://localhost:8000/blog/")
⎿ Navigated to http://localhost:8000/blog/
⏺ puppeteer - puppeteer_screenshot (MCP)(name: "posts-page", width: 1200,
height: 800)
⎿ Screenshot 'posts-page' taken at 1200x800
⎿ [Image]
⏺ Great! The layout is working. Let me test the hover effect to verify the underline appears:
⏺ puppeteer - puppeteer_hover (MCP)(selector: ".post-title a")
⎿ Hovered .post-title a
⏺ puppeteer - puppeteer_screenshot (MCP)(name: "posts-page-hover", width: 1200,
height: 800)
⎿ Screenshot 'posts-page-hover' taken at 1200x800
⎿ [Image]
⏺ Perfect! The hover effect is working - you can see the underline on "Books I read in 2024" in the hover screenshot. Let me clean up the background server.
⏺ Bash(lsof -ti:8000 | xargs kill)
⎿ (No content)
⏺ Done! I've updated the blog post listing page at /blog/ to match the style of macwright.com/writing. The changes include:
What was changed in templates.go:
1. Two-column grid layout: Post titles in the left column take flexible space, while dates in the right column use minimal width
2. Link styling: Post titles use regular text color (#111) with no underline by default, and show an underline on hover
3. Typography: Added font-weight: 500 and letter-spacing: -0.015em to post titles for better readability
4. Date styling: Dates use tabular-nums for aligned numbers and a dimmed color (#666)
5. Mobile responsive: Single column layout on screens ≤640px wide
The page now has a clean, minimal two-column design that matches the reference site's aesthetic.
⏺ Background command "Start local web server" completed (exit code 0).
⏺ The changes are complete and tested! Your blog posts page now has the two-column layout with titles on the left and dates on the right, matching the macwright.com/writing style. The links display in regular text color and show an underline when hovered.
> The date column is too narrow to contain a full date, please fix.
⏺ Update(templates.go)
⎿ Added 1 line, removed 1 line
44 h2 { font-size: 1.5em; margin-top: 1.5em; }
45 .post-list {
46 display: grid;
47 - grid-template-columns: 1fr min-content;
47 + grid-template-columns: 1fr 110px;
48 gap: 5px;
49 margin-top: 2em;
50 }
⏺ Bash(make build && ./ssg)
⎿ Building static site generator...
go build -o ssg
✓ Site generated successfully in public/
… +3 lines (ctrl+o to expand)
⏺ Bash(cd public && python3 -m http.server 8000 &)
⎿ Running in the background (↓ to manage)
⏺ puppeteer - puppeteer_navigate (MCP)(url: "http://localhost:8000/blog/")
⎿ Navigated to http://localhost:8000/blog/
⏺ puppeteer - puppeteer_screenshot (MCP)(name: "posts-page-fixed-dates", width:
1200, height: 800)
⎿ Screenshot 'posts-page-fixed-dates' taken at 1200x800
⎿ [Image]
⏺ Perfect! The dates are now fully visible with the 110px width. Let me clean up the server.
⏺ Bash(lsof -ti:8000 | xargs kill)
⎿ (No content)
⏺ Fixed! I've changed the date column width from min-content to 110px in templates.go:47, which now properly accommodates the full date format (YYYY-MM-DD). The dates are now fully visible and aligned nicely in the right column.