doc:add customer logo sections #366
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
WalkthroughThe pull request introduces several new components and modifications across multiple files. A new Changes
Possibly related PRs
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: 1
Outside diff range and nitpick comments (1)
src/components/UserLogos.tsx (1)
11-20: Add analtattribute to theimgtag for better accessibility.The component implementation looks good and follows React best practices. However, please add an
altattribute to theimgtag to improve accessibility. Thealttext should describe the image for screen readers and in case the image fails to load.Apply this diff to add the
altattribute:-<img src={src} className="object-contain w-28" /> +<img src={src} alt={name} className="object-contain w-28" />
Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Files ignored due to path filters (6)
package.jsonis excluded by!**/*.jsonpnpm-lock.yamlis excluded by!**/pnpm-lock.yaml,!**/*.yamlstatic/img/logo/coderabbit.pngis excluded by!**/*.png,!**/*.pngstatic/img/logo/mermaidicon.svgis excluded by!**/*.svg,!**/*.svgstatic/img/logo/techlockdown.pngis excluded by!**/*.png,!**/*.pngstatic/img/logo/veeva.svgis excluded by!**/*.svg,!**/*.svg
Files selected for processing (4)
- src/components/UserLogos.tsx (1 hunks)
- src/pages/index.tsx (4 hunks)
- src/theme/BlogPostPage/icons.tsx (1 hunks)
- src/theme/BlogPostPage/index.js (4 hunks)
Additional comments not posted (12)
src/theme/BlogPostPage/icons.tsx (1)
4-29: LGTM!The
src/theme/BlogPostPage/index.js (4)
13-14: LGTM!The imports from the
react-sharelibrary and the custom
60-60: LGTM!The destructuring assignment of additional properties from the
metadataobject is correct and aligns with the list of alterations provided. The destructured properties are used to construct the sharing links as described in the AI-generated summary.
70-72: LGTM!The destructuring assignment of the
urlproperty from thesiteConfigobject obtained from theuseDocusaurusContexthook is correct. Theurlproperty is used to construct the sharing links as described in the AI-generated summary.
85-114: LGTM!The implementation of the social media sharing buttons aligns with the description provided in the AI-generated summary. The usage of the
react-sharecomponents and the customurlandpermalinkproperties. The styling of the sharing buttons using utility classes is appropriate. The code implementation looks good.src/pages/index.tsx (7)
14-14: LGTM!The import statement for the new
UserLogscomponent is syntactically correct and the import path is valid.
75-75: LGTM!The dynamic class name is correctly added to the
sectionelement'sclassNameprop using the nullish coalescing operator. This allows for additional customization of thesectionelement's styling based on theclassNameprop passed to theSectioncomponent.
96-96: Verify the visual presentation of logos.The
w-28class name is correctly added to theimgelement'sclassNameprop. However, please ensure that the fixed width of 7rem (112px) does not negatively impact the visual presentation of logos on the page, especially for logos with different aspect ratios.
120-120: LGTM!The
classNameprop is correctly added to theSectioncomponent with the value"bg-slate-50 dark:bg-slate-800". This enhances the styling of the section by setting the background color to a light gray shade for light mode and a dark gray shade for dark mode.
121-121: Verify the functionality and visual presentation of theUserLogscomponent.The
UserLogscomponent is correctly rendered within theSectioncomponent. As mentioned in the AI-generated summary, this component replaces the previously usedZenStackInStackcomponent. Please ensure that theUserLogscomponent functions as expected and presents the user logs or related information in a visually appealing manner.
128-129: LGTM!The
classNameprop is correctly added to theSectioncomponent with the value"bg-slate-50 dark:bg-slate-800". This enhances the styling of the section by setting the background color to a light gray shade for light mode and a dark gray shade for dark mode. TheFrameworkIntegrationcomponent is also correctly rendered within theSectioncomponent.
132-132: LGTM!The new
Sectioncomponent is correctly added at line 132, wrapping theSponsorshipcomponent. This provides a separate section for the sponsorship information. Additionally, the existingSectioncomponent at line 135 is correctly modified to include theclassNameprop with the value"bg-slate-50 dark:bg-slate-800". This enhances the styling of the section by setting the background color to a light gray shade for light mode and a dark gray shade for dark mode.Also applies to: 135-135
| export default function UserLogs(): JSX.Element { | ||
| return ( | ||
| <div className="flex justify-center w-full"> | ||
| <div className="flex flex-col text-center xl:w-3/4"> | ||
| <h2 className="text-2xl md:text-3xl lg:text-4xl pb-20">Used and Loved by</h2> | ||
| <div className="flex flex-wrap justify-evenly gap-8 items-end w-full font-bold"> | ||
| <UserLogo | ||
| src="/img/logo/marblism-logo.png" | ||
| name="Marblism" | ||
| website="https://www.marblism.com/?utm_source=zen" | ||
| className="text-gray-500 hover:text-gray-500" | ||
| /> | ||
| <UserLogo | ||
| src="/img/logo/coderabbit.png" | ||
| name="CodeRabbit" | ||
| website="https://coderabbit.ai/" | ||
| style={{ color: 'rgb(236 86 41)' }} | ||
| /> | ||
| <UserLogo | ||
| src="/img/logo/veeva.svg" | ||
| name="Veeva" | ||
| website="https://quickvault.veeva.com/" | ||
| style={{ color: 'rgb(236 159 69)' }} | ||
| /> | ||
| <UserLogo | ||
| src="/img/logo/mermaidicon.svg" | ||
| name="Mermaid Chart" | ||
| website="https://www.mermaidchart.com/" | ||
| style={{ color: 'rgb(236 75 114)' }} | ||
| /> | ||
| <UserLogo | ||
| src="/img/logo/techlockdown.png" | ||
| name="TECH LOCKDOWN" | ||
| website="https://www.techlockdown.com/" | ||
| className="text-gray-500 hover:text-gray-500" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
There was a problem hiding this comment.
Add an id attribute to the h2 tag and extract the UserLogo components into a separate array.
The component implementation looks good and follows React best practices. However, please consider the following suggestions:
- Add an
idattribute to theh2tag to improve accessibility and SEO. Theidshould be unique and descriptive. - Extract the
UserLogocomponents into a separate array for better readability and maintainability.
Apply this diff to add the id attribute:
-<h2 className="text-2xl md:text-3xl lg:text-4xl pb-20">Used and Loved by</h2>
+<h2 id="user-logos-heading" className="text-2xl md:text-3xl lg:text-4xl pb-20">Used and Loved by</h2>Apply this diff to extract the UserLogo components into a separate array:
+const userLogos = [
+ {
+ src: "/img/logo/marblism-logo.png",
+ name: "Marblism",
+ website: "https://www.marblism.com/?utm_source=zen",
+ className: "text-gray-500 hover:text-gray-500",
+ },
+ {
+ src: "/img/logo/coderabbit.png",
+ name: "CodeRabbit",
+ website: "https://coderabbit.ai/",
+ style: { color: "rgb(236 86 41)" },
+ },
+ {
+ src: "/img/logo/veeva.svg",
+ name: "Veeva",
+ website: "https://quickvault.veeva.com/",
+ style: { color: "rgb(236 159 69)" },
+ },
+ {
+ src: "/img/logo/mermaidicon.svg",
+ name: "Mermaid Chart",
+ website: "https://www.mermaidchart.com/",
+ style: { color: "rgb(236 75 114)" },
+ },
+ {
+ src: "/img/logo/techlockdown.png",
+ name: "TECH LOCKDOWN",
+ website: "https://www.techlockdown.com/",
+ className: "text-gray-500 hover:text-gray-500",
+ },
+];
export default function UserLogs(): JSX.Element {
return (
<div className="flex justify-center w-full">
<div className="flex flex-col text-center xl:w-3/4">
<h2 id="user-logos-heading" className="text-2xl md:text-3xl lg:text-4xl pb-20">Used and Loved by</h2>
<div className="flex flex-wrap justify-evenly gap-8 items-end w-full font-bold">
- <UserLogo
- src="/img/logo/marblism-logo.png"
- name="Marblism"
- website="https://www.marblism.com/?utm_source=zen"
- className="text-gray-500 hover:text-gray-500"
- />
- <UserLogo
- src="/img/logo/coderabbit.png"
- name="CodeRabbit"
- website="https://coderabbit.ai/"
- style={{ color: "rgb(236 86 41)" }}
- />
- <UserLogo
- src="/img/logo/veeva.svg"
- name="Veeva"
- website="https://quickvault.veeva.com/"
- style={{ color: "rgb(236 159 69)" }}
- />
- <UserLogo
- src="/img/logo/mermaidicon.svg"
- name="Mermaid Chart"
- website="https://www.mermaidchart.com/"
- style={{ color: "rgb(236 75 114)" }}
- />
- <UserLogo
- src="/img/logo/techlockdown.png"
- name="TECH LOCKDOWN"
- website="https://www.techlockdown.com/"
- className="text-gray-500 hover:text-gray-500"
- />
+ {userLogos.map((userLogo, index) => (
+ <UserLogo key={index} {...userLogo} />
+ ))}
</div>
</div>
</div>
);
}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.
| export default function UserLogs(): JSX.Element { | |
| return ( | |
| <div className="flex justify-center w-full"> | |
| <div className="flex flex-col text-center xl:w-3/4"> | |
| <h2 className="text-2xl md:text-3xl lg:text-4xl pb-20">Used and Loved by</h2> | |
| <div className="flex flex-wrap justify-evenly gap-8 items-end w-full font-bold"> | |
| <UserLogo | |
| src="/img/logo/marblism-logo.png" | |
| name="Marblism" | |
| website="https://www.marblism.com/?utm_source=zen" | |
| className="text-gray-500 hover:text-gray-500" | |
| /> | |
| <UserLogo | |
| src="/img/logo/coderabbit.png" | |
| name="CodeRabbit" | |
| website="https://coderabbit.ai/" | |
| style={{ color: 'rgb(236 86 41)' }} | |
| /> | |
| <UserLogo | |
| src="/img/logo/veeva.svg" | |
| name="Veeva" | |
| website="https://quickvault.veeva.com/" | |
| style={{ color: 'rgb(236 159 69)' }} | |
| /> | |
| <UserLogo | |
| src="/img/logo/mermaidicon.svg" | |
| name="Mermaid Chart" | |
| website="https://www.mermaidchart.com/" | |
| style={{ color: 'rgb(236 75 114)' }} | |
| /> | |
| <UserLogo | |
| src="/img/logo/techlockdown.png" | |
| name="TECH LOCKDOWN" | |
| website="https://www.techlockdown.com/" | |
| className="text-gray-500 hover:text-gray-500" | |
| /> | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } | |
| export default function UserLogs(): JSX.Element { | |
| const userLogos = [ | |
| { | |
| src: "/img/logo/marblism-logo.png", | |
| name: "Marblism", | |
| website: "https://www.marblism.com/?utm_source=zen", | |
| className: "text-gray-500 hover:text-gray-500", | |
| }, | |
| { | |
| src: "/img/logo/coderabbit.png", | |
| name: "CodeRabbit", | |
| website: "https://coderabbit.ai/", | |
| style: { color: "rgb(236 86 41)" }, | |
| }, | |
| { | |
| src: "/img/logo/veeva.svg", | |
| name: "Veeva", | |
| website: "https://quickvault.veeva.com/", | |
| style: { color: "rgb(236 159 69)" }, | |
| }, | |
| { | |
| src: "/img/logo/mermaidicon.svg", | |
| name: "Mermaid Chart", | |
| website: "https://www.mermaidchart.com/", | |
| style: { color: "rgb(236 75 114)" }, | |
| }, | |
| { | |
| src: "/img/logo/techlockdown.png", | |
| name: "TECH LOCKDOWN", | |
| website: "https://www.techlockdown.com/", | |
| className: "text-gray-500 hover:text-gray-500", | |
| }, | |
| ]; | |
| return ( | |
| <div className="flex justify-center w-full"> | |
| <div className="flex flex-col text-center xl:w-3/4"> | |
| <h2 id="user-logos-heading" className="text-2xl md:text-3xl lg:text-4xl pb-20">Used and Loved by</h2> | |
| <div className="flex flex-wrap justify-evenly gap-8 items-end w-full font-bold"> | |
| {userLogos.map((userLogo, index) => ( | |
| <UserLogo key={index} {...userLogo} /> | |
| ))} | |
| </div> | |
| </div> | |
| </div> | |
| ); | |
| } |
Summary by CodeRabbit
New Features
UserLogscomponent to display user logos with links, enhancing marketing and promotional visibility.Twittericon component for easy integration into the application.Bug Fixes
Documentation