fix(www): add missing langs to analytics bento#2214
Conversation
Also, add a copy button to the code editor for one-click code copying, removing the need for manual selection.
Also, rename and move <Editor /> components to components/ui folder.
unrenamed
requested review from
MichaelUnkey,
chronark,
mcstepp and
perkinsjr
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
Caution Review failedThe pull request is closed. 📝 Walkthrough📝 WalkthroughWalkthroughThe changes in this pull request primarily enhance the functionality and presentation of code examples across various programming languages in the application. Key modifications include the introduction of new language icon components, the replacement of the existing code editor with a new Changes
Assessment against linked issues
Possibly related PRs
Suggested labels
Suggested reviewers
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 (
|
|
@unrenamed is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 7
🧹 Outside diff range and nitpick comments (12)
apps/www/components/ui/copy-code-button.tsx (3)
8-27: LGTM: Well-implemented component with room for minor enhancements.The
CopyCodeSnippetButtoncomponent is well-structured and implements the copy functionality correctly. It's accessible and reusable. However, consider the following improvements:
- Add error handling for clipboard operations:
onClick={() => { navigator.clipboard.writeText(props.textToCopy).then( () => { setCopied(true); setTimeout(() => setCopied(false), 2000); }, (err) => console.error('Failed to copy text: ', err) ); }}
- Make the timeout duration configurable:
type Props = { textToCopy: string; className?: string; copyDuration?: number; }; // In the component const copyDuration = props.copyDuration ?? 2000; setTimeout(() => setCopied(false), copyDuration);These changes will improve error handling and component flexibility.
29-50: LGTM: Well-structured SVG component with potential for enhanced reusability.The
CheckmarkCirclecomponent is well-implemented. To improve its reusability, consider accepting props for customization:type CheckmarkCircleProps = { size?: number; circleColor?: string; checkColor?: string; }; function CheckmarkCircle({ size = 52, circleColor = "currentColor", checkColor = "currentColor" }: CheckmarkCircleProps) { return ( <svg className="checkmark" xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 52 52" > <circle className="checkmark__circle" cx="26" cy="26" r="25" fill="none" stroke={circleColor} /> <path className="checkmark__check" fill="none" stroke={checkColor} d="M14.1 27.2l7.1 7.2 16.7-16.8" /> </svg> ); }This change allows for easy customization of the icon's size and colors.
52-84: LGTM: Well-implemented SVG icon with room for enhanced reusability.The
CopyIconcomponent is well-structured but could benefit from increased flexibility. Consider the following improvements:
- Accept props for customization:
type CopyIconProps = { size?: number; gradientColors?: [string, string]; }; function CopyIcon({ size = 24, gradientColors = ["white", "white"] }: CopyIconProps) { // Use size and gradientColors in the SVG }
- Use CSS variables for colors to allow easier theming:
<linearGradient id="paint0_linear_840_3800" ...> <stop stopColor="var(--copy-icon-start-color, white)" stopOpacity="0.4" /> <stop offset="1" stopColor="var(--copy-icon-end-color, white)" /> </linearGradient>
- Consider extracting the complex path to a separate constant for improved readability:
const COPY_ICON_PATH = "M13 5.00002C13.4886 5.00002 13.6599..."; function CopyIcon({ size = 24 }: CopyIconProps) { return ( <svg width={size} height={size} viewBox="0 0 24 24" ...> <path d={COPY_ICON_PATH} ... /> {/* ... */} </svg> ); }These changes will enhance the component's reusability and maintainability.
apps/www/components/svg/lang-icons.tsx (8)
5-26: LGTM with a suggestion for accessibilityThe
JavaIconcomponent is well-structured and correctly implements theactiveprop for styling. The use of SVG ensures scalability.Consider adding an
aria-labelattribute to the SVG for better accessibility:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="Java icon" >This change would improve screen reader support for the icon.
28-44: LGTM with a suggestion for consistencyThe
ElixirIconcomponent is well-implemented and consistent with theJavaIcon. For improved accessibility and consistency across all icon components, consider adding anaria-label:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="Elixir icon" >This change would ensure all icon components have consistent accessibility features.
46-67: LGTM with a suggestion for consistencyThe
RustIconcomponent is well-implemented and consistent with the other icon components. It appropriately uses multiple paths for the more complex Rust logo. For improved accessibility and consistency, add anaria-label:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="Rust icon" >This change ensures all icon components have consistent accessibility features.
69-101: LGTM with a suggestion for consistencyThe
CurlIconcomponent is well-implemented and consistent with the other icon components. It appropriately uses multiple paths for the cURL logo. For improved accessibility and consistency, add anaria-label:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="cURL icon" >This change ensures all icon components have consistent accessibility features.
103-132: LGTM with a suggestion for consistencyThe
PythonIconcomponent is well-implemented and consistent with the other icon components. It appropriately uses a single complex path for the Python logo. For improved accessibility and consistency, add anaria-label:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="Python icon" >This change ensures all icon components have consistent accessibility features.
134-159: LGTM with a suggestion for consistencyThe
TSIconcomponent is well-implemented and consistent with the other icon components. It appropriately uses multiple paths for the TypeScript logo. For improved accessibility and consistency, add anaria-label:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="TypeScript icon" >This change ensures all icon components have consistent accessibility features.
161-177: LGTM with a suggestion for consistencyThe
GoIconcomponent is well-implemented and consistent with the other icon components. It appropriately uses a single complex path for the Go logo. For improved accessibility and consistency, add anaria-label:<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" + aria-label="Go icon" >This change ensures all icon components have consistent accessibility features.
1-177: Well-structured file with room for minor improvementsOverall, this file is well-organized and consistently implements icon components for various programming languages. The use of SVG and the
activeprop for styling is commendable. To further improve the code:
Add
aria-labelattributes to all SVG elements for better accessibility, as suggested in previous comments.Consider refactoring to reduce code duplication:
interface IconProps extends LangIconProps { paths: string[]; label: string; } const IconWrapper: React.FC<IconProps> = ({ active, paths, label }) => ( <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-label={label} > <g opacity={active ? 1 : 0.3}> {paths.map((path, index) => ( <path key={index} d={path} fill={active ? "url(#paint0_linear_574_1420)" : "white"} /> ))} </g> </svg> ); export const JavaIcon: React.FC<LangIconProps> = (props) => ( <IconWrapper {...props} label="Java icon" paths={[ "M8.02611 17.8886C7.85846 17.7748 7.69538 17.6535 7.53739 17.5251C7.50312 17.4972 7.46909 17.4691 7.4353 17.4405L7.17192 17.2061C7.08767 17.1283 7.00541 17.0486 6.92519 16.9669C6.84616 16.8865 6.76911 16.8043 6.69411 16.7203C6.21543 16.1844 5.81995 15.5778 5.52221 14.9207C5.13048 14.0561 4.91594 13.1216 4.89129 12.1726C4.86663 11.2235 5.03237 10.2791 5.37868 9.39533C5.725 8.51153 6.24486 7.70625 6.90751 7.02714C7.57015 6.34803 8.36212 5.80889 9.23656 5.44161C10.111 5.07434 11.0501 4.8864 11.9984 4.88891C12.9466 4.89142 13.8848 5.08434 14.7572 5.45623C15.3549 5.71098 15.9134 6.04616 16.4178 6.45143C16.6497 6.63782 16.8703 6.83903 17.0779 7.05407C17.1382 6.97357 17.1964 6.89165 17.2527 6.80841C17.3666 6.63979 17.4721 6.46571 17.5688 6.28681C17.6682 6.10305 17.7583 5.9142 17.8388 5.72097C17.975 6.137 18.1031 6.54279 18.2216 6.93812C18.8792 9.13202 19.2414 11.004 19.0679 12.5183C18.9759 13.8241 18.5247 15.0789 17.7643 16.1438C17.0039 17.2087 15.9639 18.042 14.7596 18.5516C13.5552 19.0612 12.2335 19.2272 10.9408 19.0311C9.89323 18.8722 8.89784 18.4805 8.02611 17.8886ZM19.9532 12.6001C19.8466 14.0624 19.3396 15.4672 18.4877 16.6603C17.6319 17.8587 16.4615 18.7967 15.106 19.3703C13.7504 19.9439 12.2626 20.1307 10.8075 19.9099C9.35233 19.6892 7.98672 19.0695 6.86184 18.1197L6.853 18.1122L6.57487 17.8647L6.56885 17.8591C5.7845 17.1348 5.15331 16.2603 4.71255 15.2875C4.2718 14.3148 4.03043 13.2634 4.0027 12.1957C3.97496 11.1279 4.16142 10.0654 4.55106 9.07103C4.94071 8.07665 5.52564 7.17054 6.2713 6.40636C7.01697 5.64217 7.90822 5.03542 8.89234 4.62208C9.87647 4.20873 10.9335 3.9972 12.0007 4.00003C13.068 4.00285 14.1239 4.21998 15.1058 4.63853C15.7413 4.9094 16.88 5.68372 16.88 5.68372C16.88 5.68372 17.7524 4.53779 18.2216 3.99999L18.6835 5.44426C19.5714 8.15493 20.1764 10.6022 19.9532 12.6001Z", "M17.8388 5.72097C17.6413 6.19518 17.3857 6.64298 17.0779 7.05407C16.4188 6.37146 15.6297 5.82813 14.7572 5.45623C13.8848 5.08434 12.9466 4.89142 11.9984 4.88891C11.0501 4.8864 10.111 5.07434 9.23656 5.44161C8.36212 5.80889 7.57015 6.34803 6.90751 7.02714C6.24486 7.70625 5.725 8.51153 5.37868 9.39533C5.03237 10.2791 4.86663 11.2235 4.89129 12.1726C4.91594 13.1216 5.13048 14.0561 5.52221 14.9207C5.91395 15.7853 6.47491 16.5624 7.17192 17.2061L7.4353 17.4405C8.43478 18.2845 9.64807 18.835 10.9408 19.0311C12.2335 19.2272 13.5552 19.0612 14.7596 18.5516C15.9639 18.042 17.0039 17.2087 17.7643 16.1438C18.5247 15.0789 18.9759 13.8241 19.0679 12.5183C19.2727 10.7311 18.7313 8.44577 17.8388 5.72097ZM8.19617 17.2647C8.12094 17.3573 8.01999 17.4254 7.90608 17.4606C7.79217 17.4957 7.67042 17.4963 7.5562 17.4621C7.44199 17.428 7.34044 17.3608 7.26439 17.2689C7.18834 17.177 7.1412 17.0646 7.12894 16.9459C7.11667 16.8272 7.13983 16.7075 7.19548 16.602C7.25113 16.4965 7.33678 16.4098 7.4416 16.353C7.54642 16.2962 7.66571 16.2718 7.78439 16.2828C7.90307 16.2939 8.01582 16.3399 8.10838 16.4151C8.22972 16.518 8.30662 16.6639 8.32298 16.8222C8.33935 16.9806 8.29391 17.1391 8.19617 17.2647ZM17.7949 15.1406C16.0536 17.4698 12.3078 16.6788 9.92277 16.7959C9.92277 16.7959 9.49843 16.8252 9.0741 16.8838C9.0741 16.8838 9.23505 16.8106 9.4399 16.7374C11.1226 16.1514 11.9127 16.0342 12.937 15.5068C14.8538 14.5253 16.7706 12.3718 17.151 10.1451C16.4194 12.2839 14.1954 14.1297 12.1761 14.8769C10.7861 15.3896 8.28397 15.8877 8.28397 15.8877L8.18154 15.8291C6.48421 14.9941 6.42568 11.3024 9.5277 10.1158C10.8885 9.58842 12.1761 9.88141 13.654 9.52982C15.2196 9.16359 17.034 7.99163 17.7656 6.45344C18.585 8.9292 19.58 12.7674 17.7949 15.1406Z" ]} /> ); // Repeat for other icons...This refactoring would significantly reduce code duplication and make it easier to add new icons in the future.
apps/www/app/code-examples.tsx (1)
600-602: Consider displaying the 'CopyCodeSnippetButton' on all screen sizes.Currently, the
CopyCodeSnippetButtonis hidden on smaller screens due to thehidden lg:flexclass names. If users on smaller devices would benefit from this feature, consider making the button visible across all screen sizes by adjusting the class names.Apply this diff to adjust the class names:
<CopyCodeSnippetButton textToCopy={getCodeBlock({ language, framework })} - className="absolute hidden cursor-pointer top-5 right-5 lg:flex" /> + className="absolute cursor-pointer top-5 right-5" />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (5)
- apps/www/app/code-examples.tsx (4 hunks)
- apps/www/components/analytics/analytics-bento.tsx (5 hunks)
- apps/www/components/svg/lang-icons.tsx (1 hunks)
- apps/www/components/ui/code-editor.tsx (1 hunks)
- apps/www/components/ui/copy-code-button.tsx (1 hunks)
🧰 Additional context used
🪛 Biome
apps/www/app/code-examples.tsx
[error] 3-4: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
apps/www/components/analytics/analytics-bento.tsx
[error] 9-10: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
🔇 Additional comments (4)
apps/www/components/ui/copy-code-button.tsx (2)
1-6: LGTM: Imports and type definition are well-structured.The import statement and
Propstype definition are correct and follow best practices. ThePropstype provides good type safety for the component.
1-84: Summary: Well-implemented component that aligns with PR objectives.The
CopyCodeSnippetButtoncomponent successfully addresses the PR objective of creating a reusable button for copying code snippets. It provides a good user experience with visual feedback and is generally well-implemented.The suggested improvements focus on:
- Error handling for clipboard operations
- Configurable timeout duration
- Enhanced reusability of SVG components
- Improved maintainability of complex SVG paths
These enhancements will make the component more robust, flexible, and easier to maintain, further improving its alignment with the PR's goals of enhancing the landing page's functionality.
apps/www/components/svg/lang-icons.tsx (1)
1-3: LGTM: Clear and concise type definitionThe
LangIconPropstype is well-defined with a single boolean propactive. This type will be used consistently across all icon components, ensuring type safety.apps/www/components/ui/code-editor.tsx (1)
22-22:⚠️ Potential issueAvoid using array index as part of the key
Using the array index
iin keys can lead to issues if the list items change order. Consider using a unique property fromlineinstead.You can modify the key as follows:
- <div key={`${line}-${i}`} {...getLineProps({ line })}> + <div key={line.toString()} {...getLineProps({ line })}>Likely invalid or redundant comment.
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (1)
apps/www/app/code-examples.tsx (1)
626-633: Enhanced code display and user interaction.The replacement of the
Editorcomponent withCodeEditorandCopyCodeSnippetButtonis a positive change that should improve the user experience. TheCodeEditorlikely provides better syntax highlighting and code display, while theCopyCodeSnippetButtonadds a convenient way for users to copy code snippets.However, there's a potential issue with the positioning of the
CopyCodeSnippetButton:<CopyCodeSnippetButton textToCopy={getCodeBlock({ language, framework })} className="absolute hidden cursor-pointer top-5 right-5 lg:flex" />The button is hidden on smaller screens and only displayed on large (lg) screens. Consider making it visible on smaller screens as well, perhaps by adjusting its position or using a more responsive layout approach.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/www/app/code-examples.tsx (4 hunks)
🧰 Additional context used
🪛 Biome
apps/www/app/code-examples.tsx
[error] 3-4: Some named imports are only used as types.
This import is only used as a type.
Importing the types with import type ensures that they are removed by the transpilers and avoids loading unnecessary modules.
Safe fix: Use import type.(lint/style/useImportType)
🔇 Additional comments (3)
apps/www/app/code-examples.tsx (3)
4-6: Improved component organization and functionality.The changes to the imports suggest a positive refactoring:
- Language icons are now imported from a centralized location.
- New
CodeEditorandCopyCodeSnippetButtoncomponents have been introduced, likely improving the code display and user interaction.These changes should enhance maintainability and user experience.
372-372: Type definitions updated for consistency.The
FrameworkandLanguagesListtype definitions have been updated to useLangIconPropsinstead ofIconProps. This change ensures type consistency with the imported language icons.Also applies to: 513-513
Line range hint
1-683: Summary: Improved code example display aligns with PR objectives.The changes in this file successfully address the PR objectives and the linked issue #2190:
- The introduction of the
CodeEditorandCopyCodeSnippetButtoncomponents enhances the display of code examples and allows for easy copying of snippets.- The language and framework selection mechanism remains intact, allowing users to view examples for all supported SDKs.
- Type definitions have been updated for consistency with the new components.
These improvements directly contribute to a better user experience on the landing page and address the need to showcase examples for all supported SDKs.
To further enhance the implementation:
- Consider making the
CopyCodeSnippetButtonvisible on smaller screens for better mobile responsiveness.- Ensure that all language options are clickable and display the correct code snippets as mentioned in the testing instructions.
Overall, these changes successfully meet the objectives of the pull request.
|
hey @unrenamed, I just filed an issue for the readabilty due to the shadow and length of code. You don't have to fix that in this PR |
|
@chronark Feel free to review the code. I applied coderabbitai comments and synced the branch with the latest |
chronark
left a comment
chronark
left a comment
There was a problem hiding this comment.
Great job @unrenamed !
|
Awarding unrenamed: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/unrenamed |
|
@chronark I noticed I received 150 points for this PR, but since I implemented the fixes for multiple languages (curl, Go, TypeScript, Python, etc.), I wanted to check if the points should cover each language as you mentioned in the comments. Could you clarify? |
|
Ah you're right, my bad |
|
I'll create the issue and link it. Appreciate it! |
* fix(www): add missing langs to analytics bento Also, add a copy button to the code editor for one-click code copying, removing the need for manual selection. * refactor(www): extract langs SVG icons into separate file Also, rename and move <Editor /> components to components/ui folder. * refactor(www): extract copy code snippet button to separate file * refactor(www): apply coderabbitai review comments * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
* wip: Who Am I route * Resolved changes * 2 tests one still remaining * fix(www): add missing langs to analytics bento (#2214) * fix(www): add missing langs to analytics bento Also, add a copy button to the code editor for one-click code copying, removing the need for manual selection. * refactor(www): extract langs SVG icons into separate file Also, rename and move <Editor /> components to components/ui folder. * refactor(www): extract copy code snippet button to separate file * refactor(www): apply coderabbitai review comments * [autofix.ci] apply automated fixes --------- Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix: create bucket if it doesn't exist * fix: revalidate cache * docs: fix typo and remove the weird line (#2223) * docs: correct spelling of EXPRED to EXPIRED (#2228) * Added third happy test * chore: add docs, changesets, fix path * Update apps/docs/api-reference/keys/whoami.mdx Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com> --------- Co-authored-by: Nazar Poshtarenko <32395926+unrenamed@users.noreply.github.com> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: chronark <dev@chronark.com> Co-authored-by: Anne Deepa Prasanna <anneraj73@gmail.com> Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
2 participants
What does this PR do?
Enhances the landing page realtime analytics component by adding missing programming languages and SDKs along with code snippets, showcasing examples of all SDKs that support the key retrieval API (https://www.unkey.com/docs/api-reference/keys/get).
Also:
Fixes #2190
Type of change
How should this be tested?
Checklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
Release Notes
New Features
CodeEditorcomponent for displaying syntax-highlighted code snippets.CopyCodeSnippetButtonfor easy copying of code examples to the clipboard.Improvements
LanguageSwitcherfor selecting programming languages.Bug Fixes