feat(ui): apply docs homepage redesign - #843
Conversation
Implements the three marketing-driven UI changes from the Figma design: 1. Header & nav: "BNB CHAIN | DOCS" lockup, plus Settings (toggles light/dark palette) and Get help header actions. 2. Nav restructure: Announcements and BNB Chain Fusion are now nested under Home; tab row is Home, Developer Kit, BNB Smart Chain, opBNB, BNB Greenfield. Removed duplicate "Official Developer Kit" cross-links so the Developer Kit overview binds to its own tab/sidebar. 3. New layouts for the Home page (hero, "Start building" card grid, "Choose the right chain" stat cards) and the Developer Kit overview (hero, "Featured tools" cards, "All developer tools" install table with copy-to-clipboard). Styling reuses the existing --doc-* design tokens (which match the Figma tokens) via new home.css and developer-kit.css components.
- Header: remove Settings; center and stretch the search bar; right-side order is theme toggle, GitHub, then Get Help using the Discord icon. - Tab bar: add a divider between Developer Kit and BNB Smart Chain. - Replace hand-drawn SVGs with Material's bundled icon set (Discord/GitHub brand marks plus card glyphs). - Home: show the left sidebar (remove hide: navigation), rename the Home child to Overview, and add a Resource group (RPC endpoints, Faucet, Bridge, Blog) wired to existing destinations. - Nav: drop navigation.sections so sidebar sections collapse with `>` expanders (Developer Kit SDKs, Announcements, Fusion). - Cards: exact Figma copy/stats, fixed alignment, and per-card footer links. - All developer tools table: colored chain-chip dots (BSC/opBNB/Greenfield), install pills with a yellow `$` prompt, a tools counter, and exact commands.
- Get Help header button: switch from yellow brand fill to a black/dark background with white text and icon. - Featured tools install pills: keep the yellow `$` prompt but force the command text white (was inheriting the link color inside the card).
- BNB Smart Chain: swap the generic hub glyph for the official BNB linked-nodes mark (#F0B90B). - opBNB: use the stacked-diamond glyph extracted from the Figma export (#FF8A38) with a matching orange icon tile.
- Rename the Home section/tab to Overview (navigation.indexes merges index.md, so both the tab and sidebar top item read "Overview"). - Override partials/nav-item.html to force the "Resource" section to render as a flat, always-visible heading (like navigation.sections) while every other section keeps its collapsible chevron. - Style RESOURCE as an uppercase heading with its external links shown inline, each with a diagonal arrow_outward (↗) icon.
chore(ui): remove unused branch CSS
Pull Request ReviewThis PR delivers a substantial docs-site UI refresh focused on the homepage, developer kit landing page, and top navigation/header behavior in a MkDocs Material project. It adds new custom CSS and HTML-heavy markdown layouts, introduces copy-to-clipboard interactions for install commands, and restructures navigation in Sensitive ContentSocial Account:
Security IssuesNo serious security issues detected. Generated by Hashdit Bot. This tool can absolutely NOT replace manual audits. |
There was a problem hiding this comment.
Why do we need to ignore docusaurus?
There was a problem hiding this comment.
docusarus was already ignored on the base branch , this pr didnt change that. just added venv
| <div class="md-header__site_name"> | ||
| <span class="md-ellipsis"> | ||
| {{ config.site_name }} | ||
| Docs |
There was a problem hiding this comment.
Is there why this is hardcoded?
There was a problem hiding this comment.
error from my side , site_name has now been configured as docs instead of documentation
There was a problem hiding this comment.
Should the extension still maintain as .md?
There was a problem hiding this comment.
yes mkdocs expects doc sources to be .md . markdown supports embedded html so its best to leave it as a markdown file
Pull Request ReviewThis PR performs a substantial MkDocs UI/content redesign focused on the homepage and Developer Kit landing page, replacing older markdown-heavy content with card/table-driven layouts and new CSS components. It also restructures top-level navigation in Sensitive ContentSocial Account:
Security IssuesNo serious security issues detected. Generated by Hashdit Bot. This tool can absolutely NOT replace manual audits. |
Keep Overview/Developer Kit nav structure; bring in Pasteur announcement and Scaled UI Amount pages from main.
Pull Request ReviewThis PR redesigns the MkDocs homepage and Developer Kit overview with new responsive layouts, tool and chain cards, installation-command copy controls, and updated styling. It also reorganizes the navigation, customizes Resource rendering and header search behavior, and adds a Discord-based help action. Sensitive ContentSocial Account:
Security IssuesNo serious security issues detected. Generated by Hashdit Bot. This tool can absolutely NOT replace manual audits. |
3 participants
Summary
Test plan
mkdocs buildcompleted locally with existing repository warnings about unrelated missing links/redirect targets.http://127.0.0.1:8014/.