[docs] feature: refactor blog layout ui to card grid#4182
Open
iamSerafinnn wants to merge 8 commits into
Open
Conversation
Member
|
hi thanks, seem has some error when i start at local. |
Contributor
There was a problem hiding this comment.
Pull request overview
Refactors the Docusaurus blog list UI (home site) from the default vertical list into a card-based grid by introducing a @theme/BlogPostItems override and corresponding CSS, along with a Docusaurus dependency version bump.
Changes:
- Added a custom
home/src/theme/BlogPostItemsimplementation to render blog post items as cards in a grid. - Introduced new CSS for grid/card styling and responsive breakpoints.
- Updated Docusaurus dependency versions in
home/package.json(and adjusted the semver range style).
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 13 comments.
Show a summary per file
| File | Description |
|---|---|
| home/src/theme/BlogPostItems/styles.css | Adds grid + card styling and responsive layout for blog listing. |
| home/src/theme/BlogPostItems/index.js | Overrides the default BlogPostItems renderer to output card-based items using blog metadata. |
| home/src/pages/styles.module.css | Minor whitespace cleanup. |
| home/src/pages/index.js | Adds additional inline comments and retains auto-redirect logic. |
| home/package.json | Bumps Docusaurus dependencies and changes them to caret (^) ranges. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| // Docusaurus Hook giving you access to the current post's metadata | ||
| // formats it for BlogCard rendering | ||
| const {metadata} = useBlogPost(); | ||
| const {permalink, title, date, authors, description, tags} = metadata; |
Comment on lines
+65
to
+67
| {authors.length > 0 && ( | ||
| <span className="blog-card__author">· {authors[0].name}</span> | ||
| )} |
Comment on lines
+31
to
+33
| // _________________________________________________________________ | ||
| // REFACTORED BLOG SITE - Serafin O. Gargantiel III. | ||
| // _________________________________________________________________ |
Comment on lines
+6
to
+28
| // import BlogPostItem from '@theme/BlogPostItem'; | ||
| // This is the default component that renders blog posts one by | ||
| // one in a vertical list | ||
| //_________________________________________________________________ | ||
| // export default function BlogPostItems({ | ||
| // items, | ||
| // component: BlogPostItemComponent = BlogPostItem, | ||
| // }) { | ||
| // return ( | ||
| // <> | ||
| // {items.map(({content: BlogPostContent}) => ( | ||
| // <BlogPostProvider | ||
| // key={BlogPostContent.metadata.permalink} | ||
| // content={BlogPostContent}> | ||
| // <BlogPostItemComponent> | ||
| // <BlogPostContent /> | ||
| // </BlogPostItemComponent> | ||
| // </BlogPostProvider> | ||
| // ))} | ||
| // </> | ||
| // ); | ||
| // } | ||
| //_________________________________________________________________ |
| day: 'numeric', | ||
| }); | ||
|
|
||
| // Rending a BlogCard |
| return ( | ||
| <> | ||
| {/* Injects SEO metadata into the page head */} | ||
| {/* Search Engine Optization */} |
| function autoRedirect() { | ||
|
|
||
| // User Language | ||
| let lang = global.navigator?.language || navigator?.userLanguage |
| let lang = global.navigator?.language || navigator?.userLanguage | ||
|
|
||
| // If language is chinese, redirect to "/zh-cn" version of the site | ||
| if (lang != null && (lang.toLowerCase() === 'zh-cn' || lang.toLowerCase().indexOf('zh') > 0)) { |
|
|
||
| // If language is chinese, redirect to "/zh-cn" version of the site | ||
| if (lang != null && (lang.toLowerCase() === 'zh-cn' || lang.toLowerCase().indexOf('zh') > 0)) { | ||
| console.log(window.location.pathname); |
Comment on lines
+22
to
+29
| "@docusaurus/core": "^3.10.1", | ||
| "@docusaurus/plugin-client-redirects": "^3.10.1", | ||
| "@docusaurus/plugin-pwa": "^3.10.1", | ||
| "@docusaurus/plugin-sitemap": "^3.10.1", | ||
| "@docusaurus/preset-classic": "^3.10.1", | ||
| "@docusaurus/remark-plugin-npm2yarn": "^3.10.1", | ||
| "@docusaurus/theme-live-codeblock": "^3.10.1", | ||
| "@docusaurus/theme-search-algolia": "^3.10.1", |
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
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.
What's changed?
I refactored your HertzeBeat site's UI for its home website blog to a more modern layout of card-based grids. It is built from your defaults Docusaurus list-style design and design is inspired from the site you reference, answer.apache.org/blog/.
Checklist
Add or update API