Skip to content

Improve blog UI/UX, mobile, navigation, design#108

Merged
amavashev merged 2 commits intomainfrom
claude/generate-seo-backlinks-Ur1HW
Mar 20, 2026
Merged

Improve blog UI/UX, mobile, navigation, design#108
amavashev merged 2 commits intomainfrom
claude/generate-seo-backlinks-Ur1HW

Conversation

@amavashev
Copy link
Contributor

Navigation & UX:

  • "← Blog" back link on every post page
  • Prev/Next renamed to "← Older" / "Newer →" with correct semantics
  • Tag filter persists in URL (?tag=costs) — shareable, survives navigation
  • "More from the Blog" related posts section (tag-based matching, up to 3 posts)
  • "NEW" badge on most recent post (< 7 days)
  • RSS feed link visible on blog index

Accessibility:

  • :focus-visible outlines on all buttons, links, and cards
  • aria-pressed on tag filter buttons, aria-label on all nav elements
  • 44px minimum touch targets on mobile
  • Semantic <time datetime> tags throughout

Mobile:

  • Responsive breakpoint at 640px: reduced card padding, stacked prev/next nav, single-column related posts grid

Design polish:

  • Unified metadata rendering (inline middots, removed CSS pseudo-elements)
  • Dark mode meta text color fixed to match light mode
  • line-height: 1.4 on card titles for better multi-line wrapping
  • Share buttons: Copy link, X, LinkedIn

SEO:

  • JSON-LD BlogPosting schema on every blog post page

Cleanup:

  • Post lookup uses URL path instead of fragile title match
  • Removed unused excerpt field from data loader

claude added 2 commits March 20, 2026 11:47
- Add "← Blog" back link on individual post pages
- Fix prev/next nav: rename to "Older/Newer" with correct semantics
- Add focus-visible styles for keyboard navigation on all interactive elements
- Persist tag filter in URL query param (?tag=X) for shareable filtered views
- Show RSS feed link on blog index page
- Fix post lookup to use URL path instead of fragile title match
- Add 44px touch targets and mobile breakpoints (640px)
- Add ARIA attributes: aria-pressed on tags, aria-label on nav/buttons
- Unify metadata rendering: use <time> tag, inline middots, remove CSS pseudos
- Remove unused excerpt field from posts.data.ts
- Fix dark mode meta text color to match light mode (text-3)
- Add JSON-LD BlogPosting schema on blog post pages
- Add "More from the Blog" related posts section (tag-based matching)
- Add share buttons: copy link, X, LinkedIn
- Add "NEW" badge on most recent post (< 7 days old)
- Add line-height: 1.4 to blog card titles for better multi-line wrapping

https://claude.ai/code/session_01N2N4fKqatxBiXgFNSwxFqF
shareUrl() and copyLink() use window/navigator which throw during
static site generation. Add typeof window check to prevent build errors.

https://claude.ai/code/session_01N2N4fKqatxBiXgFNSwxFqF
@amavashev amavashev merged commit 204e38c into main Mar 20, 2026
2 checks passed
@amavashev amavashev deleted the claude/generate-seo-backlinks-Ur1HW branch March 25, 2026 01:31
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants