feat(blog): UI improvements#7294
Conversation
|
There was a problem hiding this comment.
Pull request overview
This PR implements UI improvements for the blog section, focusing on navigation, spacing, and branding. The changes enhance the desktop blog experience by replacing horizontal scrolling with wrapped navigation items, introduce a route-aware favicon that changes based on the current section, and refine spacing and alignment across various blog components for better visual consistency at larger screen sizes.
Changes:
- Simplified desktop category navigation from horizontal scrolling to flex-wrap layout, removing localStorage persistence and scroll indicators
- Added route-aware favicon functionality that displays a blog-specific icon when viewing blog pages
- Adjusted spacing and alignment across blog components (hero, header, layout, post cards) for improved visual consistency at the blog-max breakpoint (≥1296px)
Reviewed changes
Copilot reviewed 11 out of 12 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| documentation/static/assets/favicon-blog.svg | New blog-specific favicon asset with gradient radial styling |
| documentation/src/hooks/use-route-favicon.ts | New hook that dynamically updates favicon based on current route (blog vs. other pages) |
| documentation/src/refine-theme/common-layout.tsx | Integrated favicon hook into shared layout to enable route-aware favicon switching |
| documentation/src/components/blog/category-nav-bar/index.tsx | Removed horizontal scrolling, localStorage persistence, and shadow indicators; switched to flex-wrap layout for desktop navigation |
| documentation/plugins/blog-plugin.js | Added category name normalization to map "Ecosystem / Integrations" to "Integrations" |
| documentation/src/refine-theme/blog-layout.tsx | Reduced horizontal padding from 8 to 3 (px-8 → px-3) at blog-max breakpoint |
| documentation/src/refine-theme/blog-hero.tsx | Increased left padding from 10 to 68px at blog-max breakpoint |
| documentation/src/refine-theme/blog-header.tsx | Added negative left margin of 1 (-ml-1) to logo at blog-max breakpoint |
| documentation/src/theme/BlogPostItem/index.js | Added max-width constraint and bottom padding at blog-md breakpoint for post cards |
| documentation/src/components/blog/featured-blog-post-item/index.js | Added bottom padding at blog-max breakpoint for featured post cards |
| documentation/src/components/blog/post-paginator/index.js | Added vertical center alignment at blog-md breakpoint |
| documentation/src/components/blog/blog-post-page/index.js | Changed header tag to div, adjusted spacing, and refined negative margin values |
Comments suppressed due to low confidence (1)
documentation/plugins/blog-plugin.js:228
- The regex replacement using word boundaries (
\b) may not work correctly for "Ecosystem / Integrations" because the forward slash creates a word boundary. The pattern\bEcosystem / Integrations\bmight not match as expected. Consider using a simpler string replacement or adjusting the regex pattern. For example:value = value.replace("Ecosystem / Integrations", "Integrations");without regex would be more reliable.
replacements.forEach(([from, to]) => {
value = value.replace(new RegExp(`\\b${from}\\b`, "g"), to);
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div | ||
| className={clsx("not-prose", "pt-8", "blog-lg:pt-16", "blog-max:px-4")} | ||
| > |
There was a problem hiding this comment.
Changing from <header> to <div> reduces semantic HTML meaning. The <header> tag provides better accessibility and SEO by clearly indicating this is a header section containing the post's title and metadata. Consider keeping the <header> tag and adding the padding classes to it instead.
PR Checklist
Please check if your PR fulfills the following requirements:
Bugs / Features
What Changed
documentation/src/components/blog/category-nav-bar/index.tsx.localStorage) and overflow shadow indicators from desktop category navigation indocumentation/src/components/blog/category-nav-bar/index.tsx.documentation/src/hooks/use-route-favicon.ts.documentation/src/refine-theme/common-layout.tsx.documentation/static/assets/favicon-blog.svg."Ecosystem / Integrations"maps to"Integrations"indocumentation/plugins/blog-plugin.js.documentation/src/refine-theme/blog-hero.tsx.documentation/src/refine-theme/blog-layout.tsx.documentation/src/refine-theme/blog-header.tsx.documentation/src/theme/BlogPostItem/index.jsanddocumentation/src/components/blog/featured-blog-post-item/index.js.