Add new Redpanda footer and optimize for performance #345
Conversation
Update footer to use new responsive multi-column layout with: - New Redpanda footer logo - Organized links in Product, Learn, and Company sections - Improved responsive design with flexbox layout - Enhanced styling with CSS variables for theming - Social media icons integration - Better spacing and typography This redesign improves footer usability and aligns with Redpanda's current branding guidelines.
✅ Deploy Preview for docs-ui ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
|
Important Review skippedAuto incremental reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughThis PR implements a multi-faceted performance, accessibility, and UI enhancement across the documentation site. Key changes include: adding CSS containment rules (contain: layout/style/paint) across multiple layouts to reduce Cumulative Layout Shift; implementing lazy loading and async decoding for images with explicit dimension attributes; restructuring the footer markup with semantic BEM-style naming and a multi-column grid layout; optimizing resource loading with print-media + onload patterns for non-critical CSS and deferred script loading; updating the Gulp build process to refine vendor bundle collection and Prism plugin minification; adding accessibility attributes (role="button", tabindex="0") to navigation toggles; optimizing font delivery with font-display: optional; and updating Stylelint configuration to allow specific CSS properties. Changes span styling, build configuration, templates, and JavaScript across 15 files. Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes
Possibly related PRs
Suggested reviewers
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
.stylelintrc (1)
9-17: Permitsize-adjustso the font fallback fix can ship
src/css/typeface-calibre-regular.css(Line 7) currently comments outsize-adjustpurely because Stylelint flags it.size-adjustis supported in modern browsers and is the intended way to align fallback metrics; without it the CLS mitigation you mention never runs. Please allow it here so we can restore the declaration.Apply this diff:
- "property-no-unknown": [ - true, - { - "ignoreProperties": [ - "contain", - "aspect-ratio" - ] - } - ] + "property-no-unknown": [ + true, + { + "ignoreProperties": [ + "contain", + "aspect-ratio", + "size-adjust" + ] + } + ]
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
Disabled knowledge base sources:
- Jira integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
src/img/footer-logo.svgis excluded by!**/*.svg
📒 Files selected for processing (18)
.stylelintrc(1 hunks)gulp.d/tasks/build.js(2 hunks)src/css/doc.css(3 hunks)src/css/footer.css(1 hunks)src/css/home.css(1 hunks)src/css/main.css(1 hunks)src/css/nav.css(1 hunks)src/css/toc.css(1 hunks)src/css/typeface-calibre-regular.css(1 hunks)src/js/15-optimize-images.js(1 hunks)src/partials/feedback-footer.hbs(1 hunks)src/partials/footer-content.hbs(1 hunks)src/partials/head-scripts.hbs(1 hunks)src/partials/head-styles.hbs(1 hunks)src/partials/header-scripts.hbs(2 hunks)src/partials/home.hbs(2 hunks)src/partials/nav-tree-lab.hbs(2 hunks)src/partials/nav-tree.hbs(1 hunks)
🧰 Additional context used
🧬 Code graph analysis (1)
gulp.d/tasks/build.js (1)
gulp.d/tasks/build-preview-pages.js (1)
vfs(12-12)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: build
🔇 Additional comments (6)
src/partials/header-scripts.hbs (1)
3-22: Deferred script loading and Mermaid gating look greatDeferring Popper/Tippy/Choices while keeping Mermaid off home and labs-search pages tightens the critical path without breaking dependencies. Nicely done.
src/partials/nav-tree-lab.hbs (1)
16-16: Verify keyboard event handlers for button roles.Similar to
nav-tree.hbs, these toggles withrole="button"must respond to both Space and Enter keys. The explicit image dimensions appropriately prevent CLS.The verification script from the
nav-tree.hbsreview will also cover these handlers.Also applies to: 35-35
src/css/footer.css (4)
11-11: Verify CSS containment includespaintvalue per PR objectives.Line 11 specifies
contain: layout style, but the PR objectives describe implementingcontain: layout/style/paintacross multiple selectors. Confirm whether omittingpaintis intentional or if it should be added for full performance optimization.
1-196: Well-structured footer redesign with modern CSS patterns.The footer restructuring follows BEM naming conventions, uses appropriate flexbox and grid layouts with responsive breakpoints, and implements performance optimizations (
min-heightfor CLS prevention,containproperty for rendering isolation). The responsive behavior across 768px, 769px, 1024px, and 1350px breakpoints is well-planned and the visual hierarchy is clear.
75-81: All CSS custom properties are defined and valid.The verification confirms that all three variables referenced in footer.css are properly defined in
src/css/vars.css:
--body-font-family-bold: Defined with fallback fonts--body-faint-font-color: Defined as #667085 with dark mode variant--link-highlight-color: Defined as #444ce7 (light) and #9184f1 (dark)The footer styling is correct and requires no changes.
185-196: No issues found—CSS variables are properly defined.Both
--toc-widthand--toc-width--widescreenare defined insrc/css/vars.css, making them available throughout the stylesheet including the media queries in lines 185-196 ofsrc/css/footer.css. The variables are correctly accessible to themain:not(.labs):not(.home) footer.footerselectors.
|
@JakeSCahill Was it requested that we update the footer to align with rest of RP? I have to say, this feels very...unbalanced. Such an odd use of space here. |
Feediver1
left a comment
There was a problem hiding this comment.
Nothing wrong with it except that I don't like it! So imbalanced. I'm surprised that marketing thought this was an improvement. Approving, but begrudgingly.
I've made the footer content align with our doc content so it feels less awkward. We've always tried to keep the footers in sync with marketing so users have a consistent experience. |
This pull request introduces a series of improvements focused on performance optimization, prevention of layout shifts (CLS), and a major redesign of the site footer. The changes enhance user experience by reserving space for key UI elements, optimizing image loading, and refactoring the footer for better structure and responsiveness. Additionally, several CSS and build process updates support these improvements.
Preview: https://deploy-preview-345--docs-ui.netlify.app/#fin
Performance & Layout Shift (CLS) Prevention
Reduced CLS from an average of 0.401 to 0.247
containand reserved space (min-height,min-width,aspect-ratio) to multiple CSS selectors includinghtml,.doc .sect1, images, navigation, and TOC to isolate rendering and prevent layout shifts. [1] [2] [3] [4] [5] [6]src/js/15-optimize-images.jsto add lazy loading, async decoding, and explicit dimensions to images for faster load times and reduced CLS.src/css/typeface-calibre-regular.cssto usefont-display: optional, reducing CLS from font swaps.Footer Redesign & Responsiveness
src/css/footer.csswith a new structure, improved layout, reserved space, isolated rendering, and enhanced responsive design. Footer now uses.container-large,.footer__top,.footer__columns,.footer__bottom, and related classes. [1] [2]src/css/home.css).Build Process & Asset Optimization
gulp.d/tasks/build.jsto minify Prism plugins, handle legacy JS files, and improve copying of vendor assets to avoid unnecessary processing. [1] [2]Stylelint Configuration
.stylelintrcto ignore unknown properties forcontainandaspect-ratio, supporting new CSS features used for CLS prevention.Minor Accessibility & Usability Fixes
href="#"to the "Make a contribution" link in the feedback footer partial for improved accessibility.