fix(www): analytics bento code snippet is not readable#2311
fix(www): analytics bento code snippet is not readable#2311chronark merged 2 commits intounkeyed:mainfrom
Conversation
- add hover effect to analytics bento removing gradient background - make copy code button sticky to top-right corner - impl independent vertical scrolls for language switcher and code editor
unrenamed
requested review from
MichaelUnkey,
chronark,
mcstepp and
perkinsjr
as code owners
|
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@unrenamed is attempting to deploy a commit to the Unkey Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe pull request introduces modifications to the 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 (
|
|
Thank you for following the naming conventions for pull request titles! 🙏 |
![coderabbitai[bot]](proxy.php?url=https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Outside diff range and nitpick comments (4)
apps/www/components/analytics/analytics-bento.tsx (4)
70-85: Improved styling and layout for AnalyticsBento component.The changes enhance the visual appeal and interactivity of the component. The use of the
cnutility function for managing class names is a good practice. Consider extracting the long className string into a separate constant for better readability.+ const analyticsBentoClasses = cn( + "group relative mt-[80px] w-full h-[640px] analytics-linear-gradientborder border-white/10", + "flex justify-center xl:justify-start items-end rounded-3xl", + ); <div - className={cn( - "group relative mt-[80px] w-full h-[640px] analytics-linear-gradientborder border-white/10", - "flex justify-center xl:justify-start items-end rounded-3xl", - )} + className={analyticsBentoClasses} >
77-80: Enhanced visual design and interactivity.The addition of the LightSvg component and the modifications to AnalyticsStars improve the overall visual appeal. The new gradient background div with hover effect enhances interactivity.
Consider adding an
aria-hidden="true"attribute to the LightSvg component to improve accessibility, as it's a decorative element:- <LightSvg className="absolute hidden md:flex top-[-180px] left-0 lg:left-[300px] z-50 pointer-events-none" /> + <LightSvg className="absolute hidden md:flex top-[-180px] left-0 lg:left-[300px] z-50 pointer-events-none" aria-hidden="true" />
819-826: Enhanced flexibility for BentoText component styling.The addition of the className prop improves the component's reusability and allows for more flexible styling from parent components. The use of the cn utility function to combine default and custom classes is a good practice.
Consider using a more specific type for the className prop:
- export function BentoText({ className }: { className?: string }) { + export function BentoText({ className }: { className?: string | undefined }) {This change explicitly allows undefined as a valid type for className, which is more accurate and consistent with React's prop types.
Line range hint
1-1186: Consider splitting the file into smaller, focused components.While the changes made are good, this file contains multiple components and is quite large. Consider splitting it into separate files for each main component (e.g., AnalyticsBento.tsx, AnalyticsApiView.tsx, AnalyticsWebAppView.tsx, etc.) to improve maintainability and readability.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
📒 Files selected for processing (1)
- apps/www/components/analytics/analytics-bento.tsx (4 hunks)
🧰 Additional context used
🔇 Additional comments (1)
apps/www/components/analytics/analytics-bento.tsx (1)
81-85: Improved flexibility for BentoText component.The addition of the className prop to the BentoText component enhances its reusability. The conditional className based on the showApi state allows for dynamic styling, which is a good practice for responsive design.
|
nice work |
|
Awarding unrenamed: 150 points 🕹️ Well done! Check out your new contribution on oss.gg/unrenamed |
- add hover effect to analytics bento removing gradient background - make copy code button sticky to top-right corner - impl independent vertical scrolls for language switcher and code editor
- add hover effect to analytics bento removing gradient background - make copy code button sticky to top-right corner - impl independent vertical scrolls for language switcher and code editor
* fix:breadcrum-cache-issue * chore:rename-revalidateMytag * refactor: move-revalidateTag * refactor: extract tags into reusable utility * feat: add template * Update 3_follow_the_unkey_x_account.md (#2323) * fix: capture uniqueness error and return it correctly (#2337) * docs: getVerifications instead of get (#2329) * Update 3_follow_the_unkey_x_account.md (#2324) Followed unkey on Twitter Co-authored-by: Andreas Thomas <[email protected]> * fix: transaction ...: in use: for query (#2278) * fix: transaction ...: in use: for query - Fixes #2197 - The error is caused by the cache revalidation happening in the background, so we have a racecondition with the other queries we are running in the insertGenericAuditLogs function * docs: explain for future self * fix: another racecondition also bulk insert auditLogs and auditLogTargets * [autofix.ci] apply automated fixes --------- Co-authored-by: chronark <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix: handle undefined ratelimits * Update 3_follow_the_unkey_x_account.md (#2338) * fix: handle case when blogs array is empty * [oss.gg] side quest : added another framework; hono on cloudflare workers. (#2345) * fix: weird spacing in changelog by removing the extra gap (#2340) * fix: weird spacing in changelog * feat: formatted * oss.gg: create a template for ratelimiting a oak server in deno with unkey (#2308) Co-authored-by: Andreas Thomas <[email protected]> * follow unkey on X #2252 (#2315) Co-authored-by: Your Name <[email protected]> * Follow the Unkey X account: @unkeydev Complete! (#2332) * Update 3_follow_the_unkey_x_account.md * Update 3_follow_the_unkey_x_account.md --------- Co-authored-by: Andreas Thomas <[email protected]> * fix(www): analytics bento code snippet is not readable (#2311) - add hover effect to analytics bento removing gradient background - make copy code button sticky to top-right corner - impl independent vertical scrolls for language switcher and code editor * Update 7_create_a_template.md * Update 7_create_a_template.md * chore(deps-dev): bump @content-collections/core from 0.6.2 to 0.7.2 (#2255) Bumps @content-collections/core from 0.6.2 to 0.7.2. --- updated-dependencies: - dependency-name: "@content-collections/core" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: order audit logs by time, show latest on top (#2295) * feat: add template * feat: Unkey FastAPI boilerplate (#2307) * feat: add template * feat: follow unkey on X (#2357) * Update 6_record_onboarding.md (#2301) * fix: reset input fields in API delete dialog after reopening (#2316) * fix: reset input fields in API delete dialog after reopening * refactor: remove unnecessary useEffect and utilize existing onOpenChange function for dialog * refactor: removed unused imports * Update 3_follow_the_unkey_x_account.md (#2364) Added name to the followed list. Co-authored-by: Andreas Thomas <[email protected]> * ci: add label * feat: add hover to input fields * Added gaps and width for md (#2371) * docs: update overview.mdx (#2384) avaliable -> available * oss.gg side quest 3_follow_the_unkey_x_account.md (#2399) Followed the unkey x account * feat: Following unkey acc on twitter #2407 (#2408) * Feat: Followed Unkey on X * Feat: Followed Unkey on Twitter --------- Co-authored-by: Andreas Thomas <[email protected]> * resolve merge conflicts * resolve merge conflicts --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: chronark <[email protected]> Co-authored-by: Emily Marie Ahtúnan <[email protected]> Co-authored-by: Harsh Shrikant Bhat <[email protected]> Co-authored-by: Aritra Sadhukhan <[email protected]> Co-authored-by: Flo <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Devang Rakholiya <[email protected]> Co-authored-by: Prabin <[email protected]> Co-authored-by: ZiaCodes <[email protected]> Co-authored-by: Devansh Baghel <[email protected]> Co-authored-by: Shreenarayan jaiswal <[email protected]> Co-authored-by: Your Name <[email protected]> Co-authored-by: Chirag Arora <[email protected]> Co-authored-by: Nazar Poshtarenko <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Saketh Pavan Goti <[email protected]> Co-authored-by: Teddy ASSIH <[email protected]> Co-authored-by: Vardhaman Bhandari <[email protected]> Co-authored-by: Atharva_404 <[email protected]> Co-authored-by: Rishi <[email protected]> Co-authored-by: Ikko Eltociear Ashimine <[email protected]> Co-authored-by: Ayan Mondal <[email protected]> Co-authored-by: Kunal Arya <[email protected]>
2 participants
What does this PR do?
Fixes #2216
ℹ️ The screenshots below show the updated (top) version of the Realtime Analytics bento and the previous version (bottom) on the landing page.
Type of change
How should this be tested?
Realtime AnalyticssectionShow API CodeChecklist
Required
pnpm buildpnpm fmtconsole.logsgit pull origin mainAppreciated
Summary by CodeRabbit
New Features
CopyCodeSnippetButtonfor easier code copying.LanguageSwitcherfor improved styling and overflow management.Improvements
AnalyticsBentocomponent for a better user experience.classNameprop in theBentoTextfunction.