Fix UI Issue #675: Right Sidebar in KubeEdge Version Blog Page is Too…

[harshita9104]

Fix UI Issue #675

📌 Problem

• The right sidebar in blog pages across all versions was too congested.
• Scrollbar design was not user-friendly.

✅ Solution Implemented

• Increased sidebar width slightly for better readability.
• Improved styling for the scrollbar to make navigation smoother.
• A more structured UI for readability and usability.

🔧 Files Changed

• src/css/custom.css
• docusaurus.config.js

🖼️ Screenshots

Before

After

📌 Fixes: #675
🚀 Ready for review!

[harshita9104]

Hello @Shelley-BaoYue , @anvithks ,
Kindly review the PR which enhances the sidebar of the blog page
The PR ensures :-
Increased sidebar width slightly for better readability.
Improved styling for the scrollbar to make navigation smoother.
A more structured UI for readability and usability.
Fixes #675

Kindly review the PR and suggest any changes!!

Thank you!!

[harshita9104]

/assign @Shelley-BaoYue

[harshita9104]

Fixes #675

[Shelley-BaoYue]

This work looks good! Can the left sidebar be adjusted in width, or I think it would look better if it was narrower?

[kubeedge-bot]

[APPROVALNOTIFIER] This PR is NOT APPROVED

This pull-request has been approved by:
To complete the pull request process, please assign shelley-baoyue after the PR has been reviewed.
You can assign the PR to them by writing /assign @shelley-baoyue in a comment when ready.

The full list of commands accepted by this bot can be found here.

Needs approval from an approver in each of these files:

• OWNERS

Approvers can indicate their approval by writing /approve in a comment
Approvers can cancel approval by writing /approve cancel in a comment

[harshita9104]

This work looks good! Can the left sidebar be adjusted in width, or I think it would look better if it was narrower?

Hello @Shelley-BaoYue , @anvithks
I have made the changes

After making changes according to your suggestions

Kindly review the PR !

Thank you so much !!

[TenzDelek]

hi @Shelley-BaoYue , I have an idea for this. what about we keep the blog content in a card format first then when a user click on it it should show this content. because currently the blog section looks more like a docs. how about we keep this work in the LFX as well?

like this->

[harshita9104]

hi @Shelley-BaoYue , I have an idea for this. what about we keep the blog content in a card format first then when a user click on it it should show this content. because currently the blog section looks more like a docs. how about we keep this work in the LFX as well?

like this->

Hello @TenzDelek ,

Kindly look at the code once, card-based layouts on blog page is an unnatural fit because:-

-The blog content is written in Markdown (.md/.mdx), which doesn't support dynamic layouts like cards.
-Markdown is statically processed into HTML, making UI customization difficult.
-Docusaurus follows a structured theme optimized for documentation, not for a card-based UI.
-The blog layout is not component-driven like in Next.js or Gatsby.
-Implementing a card-based UI would require overriding Docusaurus’s BlogListPage component.
-Markdown content would need to be converted to structured JSON for React components.
-Custom pagination, styling, and filtering would need to be implemented manually.
-Docusaurus integrates blogs with docs, keeping a consistent structure, while a card UI would break that consistency.
-This is not a simple CSS fix but a fundamental structural change.
-Such a change requires long-term maintenance and could break existing features.
-Docusaurus is optimized for content-focused navigation, making card-based layouts an unnatural fit.

[TenzDelek]

Kindly look at the code once

checkout the blogpost component. and you will get a clearer idea. I think you are confuse a bit here. what I am suggesting is not to change the structure of the mdx in any form. but rather make an entry page for the blog post as attached. (similar to case study)