Redesign version home pages #1346
Conversation
Remove title since it stands out awkwardly
When the page loads, a flash of unstyled content (FOUC) occurs, which makes the Font Awesome icon appear large until the page fully loads. This commit fixes that issue.
This reverts commit 7c4cf99.
Cells should automatically know when a cell contains one link or multiple links and apply the necessary styles based on logic.
…ocs-scalardb into redesign-home-page
Reduce the opacity of the background image in the hero section of the version home pages.
Keeping empty link/title placeholders causes links to not work when the site is built.
This style shows the second paragraph depending on if the visitor's screen is wide enough to show the content and not make it look disproportionate (basically, the text gets longer but the video stays the same height).
Remove background from hero text and reduce padding around hero section, according to feedback at: https://scalar-labs.slack.com/archives/CDSFWGSTZ/p1750218637894259?thread_ts=1750041895.129159&cid=CDSFWGSTZ Also fix spacing issue around video on mobile after changing the padding mentioned.
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @josh-wong, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!
This pull request focuses on a significant redesign of the ScalarDB version home pages (3.13, 3.14, 3.15) to enhance user experience and content organization. It consolidates multiple UI components into a single, more flexible grid system, improves site responsiveness, and integrates lightweight YouTube video embedding capabilities.
Highlights
- Documentation Redesign: The home pages for ScalarDB versions 3.15, 3.14, and 3.13 have been completely redesigned to improve the user interface and simplify content presentation. This involves a significant overhaul of the layout and content structure.
- Component Consolidation: Individual
CardRowcomponents (e.g.,CardRowAbout,CardRowQuickstart) across various documentation files (English and Japanese versions) have been replaced with a single, unifiedCategoryGridcomponent. This streamlines the page structure and improves maintainability. - Styling and Responsiveness: New CSS rules have been introduced to address horizontal scrolling issues, ensure elements stay within their containers, and provide responsive design for mobile screens. This includes new classes for grid layouts, hero sections, and category tables.
- Multimedia Integration: A new dependency,
react-lite-youtube-embed, has been added to enable lightweight embedding of YouTube videos directly into the documentation, enhancing content richness without performance overhead.
Using Gemini Code Assist
The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.
Invoking Gemini
You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.
| Feature | Command | Description |
|---|---|---|
| Code Review | /gemini review |
Performs a code review for the current pull request in its current state. |
| Pull Request Summary | /gemini summary |
Provides a summary of the current pull request in its current state. |
| Comment | @gemini-code-assist | Responds in comments when explicitly tagged, both in issue comments and review comments. |
| Help | /gemini help |
Displays a list of available commands. |
Customization
To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.
Limitations & Feedback
Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.
You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.
Footnotes
-
Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩
There was a problem hiding this comment.
Pull Request Overview
This PR redesigns versioned home pages by consolidating multiple card rows into a unified CategoryGrid, adds responsive styling and a lightweight YouTube embed, and introduces a new dependency for video embedding.
- Replaced individual
CardRow*imports and components with a singleCategoryGridin English and Japanese docs for versions 3.13–3.15. - Created a
CategoryGridcomponent (with hero text, video embed, and grid table) in multiple*.tsxfiles. - Updated
custom.cssfor overflow fixes, grid layout, and responsive behavior; addedreact-lite-youtube-embedinpackage.json.
Reviewed Changes
Copilot reviewed 14 out of 16 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| versioned_docs/version-3.14/index.mdx | Swapped multiple CardRow* blocks for <CategoryGrid /> |
| versioned_docs/version-3.13/index.mdx | Swapped multiple CardRow* blocks for <CategoryGrid /> |
| src/css/custom.css | Added overflow, box-sizing, grid and responsive styles |
| src/components/Cards/ja-jp/3.15.tsx | Introduced CategoryGrid with video embed and table |
| src/components/Cards/ja-jp/3.14.tsx | Introduced CategoryGrid with video embed and table |
| src/components/Cards/ja-jp/3.13.tsx | Introduced CategoryGrid with video embed and table |
| src/components/Cards/3.15.tsx | Introduced CategoryGrid with video embed and table |
| src/components/Cards/3.14.tsx | Introduced CategoryGrid with video embed and table |
| src/components/Cards/3.13.tsx | Introduced CategoryGrid with video embed and table |
| package.json | Added react-lite-youtube-embed dependency |
| i18n/versioned_docs/ja-jp/.../version-3.14/index.mdx | Swapped multiple CardRow* blocks for <CategoryGrid /> |
| i18n/versioned_docs/ja-jp/.../version-3.13/index.mdx | Swapped multiple CardRow* blocks for <CategoryGrid /> |
| i18n/versioned_docs/ja-jp/.../current/index.mdx | Swapped multiple CardRow* blocks for <CategoryGrid /> |
| docs/index.mdx | Swapped multiple CardRow* blocks for <CategoryGrid /> |
Comments suppressed due to low confidence (3)
src/components/Cards/3.13.tsx:37
- Placeholder values 'XXX' found in
linksandlabels; replace with actual routes and labels.
links: ['scalardb-cluster/run-non-transactional-storage-operations-through-sql-interface/#configure-scalardb-cluster-to-run-non-transactional-storage-operations'],
src/components/Cards/3.15.tsx:19
- [nitpick] Variable
new_contentuses snake_case; consider using camelCase (e.g.,newContent) to align with JavaScript conventions.
const new_content = [
src/components/Cards/3.15.tsx:218
- Class
new-content-cellisn’t defined incustom.css; either rename to match.category-cellor add appropriate CSS rules.
<span key={`${j}-${k}`} className="new-content-cell">
There was a problem hiding this comment.
Code Review
This pull request effectively redesigns the version home pages by replacing the old card layout with a new, unified CategoryGrid component. The changes are well-structured and include new styling for a modern look, responsive design, and the addition of an embedded YouTube video.
I've found one issue that should be addressed:
- There is placeholder content (
XXX) in one of the new components which will result in a broken link.
Please see my detailed comment below. Once this is addressed, the PR should be in great shape.
We need to apply the redesign here since we're in the middle of releasing version 3.16.
* Move file to 3.15 * Update version * Add 3.15 * Create version-3.15-sidebars.json * Create version-3.15.json * Create 3.16.tsx * Create 3.16.tsx * Create index.mdx * Create index.mdx * Fix links; remove asterisks * Create placeholder draft of release-notes.mdx * Create placeholder draft of release-notes.mdx * Create release-support-policy.mdx * Create release-support-policy.mdx * Add `3.16` as `latest`; change `3.15` to number * Add announcement for 3.16 release * Add `3.15` to `allowedLanguageDropdownVersions` * Update support dates for 3.16 and 3.15 * Add release notes for 3.16.0 * Add patch version release notes for 3.15.4 eab8fbc * Remove misplaced feature ABAC was introduced in 3.15, so we shouldn't re-introduce it here. * Rename `semi-synchronous replication` to `remote replication` * Apply redesign done in #1346 We need to apply the redesign here since we're in the middle of releasing version 3.16. * Remove misplaced feature ABAC was introduced in 3.15, so we shouldn't re-introduce it here. * Add placeholder for new blog posts * Change message from release note link to IBM Db2 info * Add doc for 3.16 * Add Data Loader and Schema Loader error code docs * Match version home page redesign from #1346 * Specify Db2 in link
1 participant
Description
This PR redesigns the home pages for ScalarDB versions 3.15, 3.14, and 3.13. The changes introduce updates to documentation and styling, focusing on improving the user interface and simplifying content presentation. Key changes include replacing detailed card rows with a unified
CategoryGridcomponent, adding responsive design elements, and addressing layout issues. Additionally, a new dependency was added for embedding lightweight YouTube videos.Related issues and/or PRs
Changes made
Version home page redesign
CardRowAboutandCardRowQuickstart) with a singleCategoryGridcomponent in multiple documentation files to streamline the layout. This change affects both English and Japanese versions across version releases 3.15, 3.14, and 3.13. (docs/index.mdx,i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/current/index.mdx,versioned_docs/version-3.13/index.mdx,versioned_docs/version-3.14/index.mdx,i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/version-3.13/index.mdx,i18n/versioned_docs/ja-jp/docusaurus-plugin-content-docs/version-3.14/index.mdx) [1] [2] [3] [4] [5] [6]Styling enhancements
overflow-x: hiddenand ensuring all elements stay within their containers usingbox-sizing: border-box. Also added responsive styles for mobile screens. (src/css/custom.css)src/css/custom.css)Dependency additions
react-lite-youtube-embedto enable lightweight embedding of YouTube videos. (package.json)Checklist
Additional notes (optional)
N/A