blog: add related posts for blog page #350
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe changes involve a reconfiguration of the blog feature in a Docusaurus project. The blog settings are now managed through a plugin system rather than directly within the main configuration file. A new component for post pagination has been introduced, along with enhancements to the blog post page that include the display of related posts. Additionally, various blog post metadata fields have been updated to improve categorization. Changes
Recent review detailsConfiguration used: CodeRabbit UI Files selected for processing (1)
Files skipped from review as they are similar to previous changes (1)
Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media? TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Outside diff range, codebase verification and nitpick comments (1)
src/plugins/blog-plugin.js (1)
7-28: Document the specific tag exclusion ingetRelatedPosts.The function
getRelatedPostsexcludes posts with the 'zenstack' tag. This seems to be a specific use case and should be documented to clarify its purpose and ensure maintainability.
| rel="dofollow" | ||
| key={post.permalink ?? post.id} |
There was a problem hiding this comment.
Correct the rel attribute and remove incorrect to attribute.
- The
rel="dofollow"attribute is not standard and might be intended asrel="nofollow". Please correct this to ensure proper HTML standards are followed. - The
toattribute on adivelement at line 50 is incorrect asdivelements do not support navigation. This attribute should be removed.
- rel="dofollow"
+ rel="nofollow"
- to={post.permalink}Also applies to: 51-51
src/theme/BlogPostPage/index.js
Outdated
| function getMultipleRandomElement(arr, num) { | ||
| const shuffled = [...arr].sort(() => 0.5 - Math.random()); | ||
|
|
||
| return shuffled.slice(0, num); | ||
| } |
There was a problem hiding this comment.
Consider using a more robust shuffling algorithm.
The current implementation of the shuffle in getMultipleRandomElement uses a simple method which might not provide a uniform distribution. Consider using the Fisher-Yates (or Knuth) shuffle algorithm for a more accurate shuffle.
- const shuffled = [...arr].sort(() => 0.5 - Math.random());
+ for (let i = arr.length - 1; i > 0; i--) {
+ const j = Math.floor(Math.random() * (i + 1));
+ [arr[i], arr[j]] = [arr[j], arr[i]];
+ }
+ return arr.slice(0, num);Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| function getMultipleRandomElement(arr, num) { | |
| const shuffled = [...arr].sort(() => 0.5 - Math.random()); | |
| return shuffled.slice(0, num); | |
| } | |
| function getMultipleRandomElement(arr, num) { | |
| for (let i = arr.length - 1; i > 0; i--) { | |
| const j = Math.floor(Math.random() * (i + 1)); | |
| [arr[i], arr[j]] = [arr[j], arr[i]]; | |
| } | |
| return arr.slice(0, num); | |
| } |
| async function blogPluginExtended(...pluginArgs) { | ||
| const blogPluginInstance = await defaultBlogPlugin(...pluginArgs); | ||
|
|
||
| return { | ||
| // Add all properties of the default blog plugin so existing functionality is preserved | ||
| ...blogPluginInstance, | ||
| contentLoaded: async function (data) { | ||
| await blogPluginInstance.contentLoaded(data); | ||
| const { content: blogContents, actions } = data; | ||
| const { blogPosts: allBlogPosts } = blogContents; | ||
| const { addRoute, createData } = actions; | ||
| // Create routes for blog entries. | ||
| await Promise.all( | ||
| allBlogPosts.map(async (blogPost) => { | ||
| const { id, metadata } = blogPost; | ||
| const relatedPosts = getRelatedPosts(allBlogPosts, metadata); | ||
| await createData( | ||
| // Note that this created data path must be in sync with | ||
| // metadataPath provided to mdx-loader. | ||
| `${utils.docuHash(metadata.source)}.json`, | ||
| JSON.stringify({ ...metadata, relatedPosts }, null, 2) | ||
| ); | ||
| addRoute({ | ||
| path: metadata.permalink, | ||
| component: '@theme/BlogPostPage', | ||
| exact: true, | ||
| modules: { | ||
| content: metadata.source, | ||
| }, | ||
| }); | ||
| }) | ||
| ); | ||
| }, | ||
| }; | ||
| } |
There was a problem hiding this comment.
Add error handling to Promise.all in blogPluginExtended.
The use of Promise.all in blogPluginExtended to create routes and related posts data is efficient but lacks error handling. Consider adding a try-catch block to handle potential errors and ensure robustness.
- await Promise.all(
+ try {
+ await Promise.all(
allBlogPosts.map(async (blogPost) => {
const { id, metadata } = blogPost;
const relatedPosts = getRelatedPosts(allBlogPosts, metadata);
await createData(
`${utils.docuHash(metadata.source)}.json`,
JSON.stringify({ ...metadata, relatedPosts }, null, 2)
);
addRoute({
path: metadata.permalink,
component: '@theme/BlogPostPage',
exact: true,
modules: {
content: metadata.source,
},
});
})
+ );
+ } catch (error) {
+ console.error('Error processing blog posts:', error);
+ }Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| async function blogPluginExtended(...pluginArgs) { | |
| const blogPluginInstance = await defaultBlogPlugin(...pluginArgs); | |
| return { | |
| // Add all properties of the default blog plugin so existing functionality is preserved | |
| ...blogPluginInstance, | |
| contentLoaded: async function (data) { | |
| await blogPluginInstance.contentLoaded(data); | |
| const { content: blogContents, actions } = data; | |
| const { blogPosts: allBlogPosts } = blogContents; | |
| const { addRoute, createData } = actions; | |
| // Create routes for blog entries. | |
| await Promise.all( | |
| allBlogPosts.map(async (blogPost) => { | |
| const { id, metadata } = blogPost; | |
| const relatedPosts = getRelatedPosts(allBlogPosts, metadata); | |
| await createData( | |
| // Note that this created data path must be in sync with | |
| // metadataPath provided to mdx-loader. | |
| `${utils.docuHash(metadata.source)}.json`, | |
| JSON.stringify({ ...metadata, relatedPosts }, null, 2) | |
| ); | |
| addRoute({ | |
| path: metadata.permalink, | |
| component: '@theme/BlogPostPage', | |
| exact: true, | |
| modules: { | |
| content: metadata.source, | |
| }, | |
| }); | |
| }) | |
| ); | |
| }, | |
| }; | |
| } | |
| async function blogPluginExtended(...pluginArgs) { | |
| const blogPluginInstance = await defaultBlogPlugin(...pluginArgs); | |
| return { | |
| // Add all properties of the default blog plugin so existing functionality is preserved | |
| ...blogPluginInstance, | |
| contentLoaded: async function (data) { | |
| await blogPluginInstance.contentLoaded(data); | |
| const { content: blogContents, actions } = data; | |
| const { blogPosts: allBlogPosts } = blogContents; | |
| const { addRoute, createData } = actions; | |
| // Create routes for blog entries. | |
| try { | |
| await Promise.all( | |
| allBlogPosts.map(async (blogPost) => { | |
| const { id, metadata } = blogPost; | |
| const relatedPosts = getRelatedPosts(allBlogPosts, metadata); | |
| await createData( | |
| // Note that this created data path must be in sync with | |
| // metadataPath provided to mdx-loader. | |
| `${utils.docuHash(metadata.source)}.json`, | |
| JSON.stringify({ ...metadata, relatedPosts }, null, 2) | |
| ); | |
| addRoute({ | |
| path: metadata.permalink, | |
| component: '@theme/BlogPostPage', | |
| exact: true, | |
| modules: { | |
| content: metadata.source, | |
| }, | |
| }); | |
| }) | |
| ); | |
| } catch (error) { | |
| console.error('Error processing blog posts:', error); | |
| } | |
| }, | |
| }; | |
| } |
| blogSidebarTitle: 'Recent posts', | ||
| blogSidebarCount: 10, | ||
| }, | ||
| blog: false, |
There was a problem hiding this comment.
Clarify the transition to a plugin-based system.
The change to set the blog configuration to false is approved as it aligns with the transition to a plugin-based system. However, it would be beneficial to add a comment here explaining that the blog settings have been moved to a plugin to avoid confusion.
Consider adding a comment for clarity:
- blog: false,
+ blog: false, // Blog settings are now managed via a plugin systemCommittable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| blog: false, | |
| blog: false, // Blog settings are now managed via a plugin system |
There was a problem hiding this comment.
Actionable comments posted: 0
Outside diff range, codebase verification and nitpick comments (1)
src/theme/BlogPostPage/index.js (1)
14-46: Consider using a more robust shuffling algorithm.The current implementation of the shuffle in
getMultipleRandomPostsuses a simple method which might not provide a uniform distribution. Consider using the Fisher-Yates (or Knuth) shuffle algorithm for a more accurate shuffle.- const shuffled = [...arr].sort(() => 0.5 - Math.random()); + for (let i = arr.length - 1; i > 0; i--) { + const j = Math.floor(Math.random() * (i + 1)); + [arr[i], arr[j]] = [arr[j], arr[i]]; + } + return arr.slice(0, num);
Summary by CodeRabbit
New Features
PostPaginatorcomponent to display blog posts with pagination and improved navigation.Bug Fixes