Enhance docs UX with navigation, feedback, and blog improvements#135
Merged
Enhance docs UX with navigation, feedback, and blog improvements#135
Conversation
Navigation & IA: - Add "Docs" dropdown to navbar with Concepts, How-To, Integrations, Incidents, Configuration - Sub-group How-To sidebar into Budget Patterns, Tenants & Config, Error Handling - Consolidate Concepts comparison pages into collapsible sub-section - Add Changelog link to navbar for visibility Homepage: - Add heading "Add budget authority in a few lines" above code snippet - Replace emoji feature card icons with consistent Lucide SVGs - Rename "Try the Demo" to "View Demo on GitHub" to set expectations Blog: - Add tag post counts to filter buttons (e.g., "engineering (4)") - Add featured/pinned post support via frontmatter - Add thumbnail image support for blog cards - Add SVG icons to share buttons (X, LinkedIn, copy link) - Add FEATURED badge styling User Journey: - Add "Choose your stack" table to What is Cycles page - Add API Reference onboarding intro with getting-started tip - Add breadcrumb navigation component for doc pages - Add page feedback widget (thumbs up/down) with issue link Accessibility & Mobile: - Improve mobile tab sizing for code snippet component - Add light mode CSS enhancements for blog elements - Hide thumbnails on mobile for cleaner layout - Improve search config with boost and translations Content: - Add callout containers to 7 key pages (architecture, testing, security, production ops, error handling, budget patterns, MCP) https://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw
…re Protocol link
- Breadcrumb.vue: Make section label a clickable link using firstPageMap
to avoid 404s from generic /{section}/ paths
- PageFeedback.vue: Remove unused `page` import; persist votes to
localStorage so feedback survives page reloads
- config.ts: Restore Protocol GitHub external link to navbar (was
accidentally replaced by Changelog link)
https://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw
- Extract 6 feature card SVGs from index.md YAML to /public/icons/*.svg for easier maintenance and cleaner frontmatter - Replace inline SVGs in BlogIndex (RSS), PageFeedback (thumbs up/down) with Lucide Vue component imports - Replace inline copy-link SVG in BlogPost with Lucide Link component - Extract X/Twitter and LinkedIn brand SVG paths to SocialIcons.ts constants (not in Lucide, so kept as path data) https://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw
…k mode SVGs loaded via <img> tags cannot resolve CSS currentColor — icons were rendering black/invisible. Replace stroke="currentColor" with hardcoded brand teal (#00C9A7) in all 6 feature card icon files. Also add .dark .blog-featured-badge rule with brighter amber (#fbbf24) for better contrast on dark backgrounds. https://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw
Ensures firstPageMap covers all sectionMap keys for consistency. Blog pages are already excluded from breadcrumbs via frontmatter check, but the blog index page could theoretically show one. https://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw
The go() function from useRouter was imported but never called — the component uses plain <a href> links for navigation instead. https://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
This PR significantly improves the documentation user experience by adding breadcrumb navigation, page feedback collection, enhanced blog features, and better information architecture. The changes include new Vue components, improved search configuration, reorganized sidebar navigation, and visual enhancements across the site.
Key Changes
Navigation & UX Components
Breadcrumb.vue): Added section-aware breadcrumb trails on all documentation pages (except home and blog), helping users understand their location within the docs hierarchyPageFeedback.vue): New feedback component that appears on documentation pages, allowing users to rate page helpfulness with persistent localStorage tracking. Negative feedback includes a link to open GitHub issuesSocialIcons.ts): Extracted X/Twitter and LinkedIn SVG paths as reusable constants for blog sharingBlog Enhancements
Navigation & Information Architecture
Home Page & Content
HomeCodeSnippetcomponent with a proper heading ("Add budget authority in a few lines")Blog Post Data Structure
PostDatainterface withfeaturedboolean andimagestring fieldsStyling Improvements
Notable Implementation Details
useRoute,useData) for reactive page contexthttps://claude.ai/code/session_01TF7Pksn82FUivsvg9bm7Rw