-
Notifications
You must be signed in to change notification settings - Fork 62
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Get Started section #526
Get Started section #526
Conversation
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
📝 WalkthroughWalkthroughThe pull request involves the systematic removal of multiple documentation files across various modules in the system architecture. These files, located in the Changes
The changes represent a comprehensive removal of architectural documentation across multiple system modules, indicating a documentation reorganization or migration strategy. Additionally, updates to messaging and navigation enhance user experience and accessibility to information about ZetaChain. Possibly related PRs
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 (
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (2)
src/pages/_meta.json (1)
6-9
: Consider enhancing the "Get Started" section metadataThe addition of the "start" section is well-structured. Consider adding a
navImgUrl
property to maintain consistency with other sections like "nodes" that have visual indicators."start": { "title": "Get Started", "description": "Start building on ZetaChain." + "navImgUrl": "/img/pages/get-started.svg" },
src/components/shared/components/Layout/Layout.constants.tsx (1)
76-82
: Consider using a distinct icon for Get Started sectionThe new navigation item is well-placed, but it currently shares the same icon (IconAbout) with the About section. Consider using a more appropriate icon like IconWelcome or creating a new IconGetStarted to better differentiate these sections.
{ label: "Get Started", - icon: IconAbout, + icon: IconWelcome, url: "/start", },
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
src/components/Home/components/HomeHero.tsx
(1 hunks)src/components/shared/components/Layout/Layout.constants.tsx
(1 hunks)src/pages/_meta.json
(2 hunks)src/pages/index.mdx
(1 hunks)src/pages/start/_meta.json
(1 hunks)
✅ Files skipped from review due to trivial changes (1)
- src/pages/start/_meta.json
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (2)
src/components/Home/components/HomeHero.tsx (2)
20-21
: LGTM! Clear and impactful messaging.The updated copy effectively communicates ZetaChain's unique value proposition, emphasizing its universal blockchain capabilities and cross-chain accessibility.
25-26
: LGTM! Strong developer-focused messaging.The revised text successfully highlights ZetaChain's technical capabilities while maintaining accessibility. The emphasis on the Universal EVM and developer empowerment aligns well with the platform's technical documentation focus.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 2
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (6)
src/pages/start/_meta.json
(1 hunks)src/pages/start/app.mdx
(1 hunks)src/pages/start/build.mdx
(1 hunks)src/pages/start/evm.mdx
(1 hunks)src/pages/start/index.mdx
(1 hunks)src/pages/start/zetachain.mdx
(1 hunks)
✅ Files skipped from review due to trivial changes (4)
- src/pages/start/zetachain.mdx
- src/pages/start/build.mdx
- src/pages/start/app.mdx
- src/pages/start/evm.mdx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (4)
src/pages/start/_meta.json (2)
3-4
: Section titles are clear and descriptive.The titles for each section provide a good progression from introduction to specific features.
Also applies to: 7-8, 11-12, 15-16, 19-20
1-22
: Verify JSON structure for Nextra sidebar.The JSON structure appears correct, but given the reported issue where nested items aren't appearing in Vercel deployment, please verify the following:
- Ensure the
_meta.json
file is in the correct directory structure- Check if Nextra configuration in
next.config.js
has the correct theme settings- Verify that the corresponding
.mdx
files exist for each section✅ Verification successful
JSON structure is correct for Nextra sidebar
The file structure, configuration, and corresponding .mdx files are all properly set up. The issue with nested items not appearing in Vercel deployment is likely unrelated to the _meta.json structure or file organization.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Verify the existence of required files and configuration # Check if all corresponding .mdx files exist echo "Checking .mdx files..." for page in index zetachain build evm app; do fd "^${page}.mdx$" src/pages/start done # Check Nextra configuration echo "Checking Nextra configuration..." cat next.config.jsLength of output: 2506
src/pages/start/index.mdx (2)
6-7
: LGTM! Clean and consistent imports.The imports follow the project's conventions using the "~" alias prefix.
9-12
: Verify component rendering in production build.The layout structure is clean, but there's a reported issue where nested items don't appear in the Vercel deployment. This might be related to how
CurrentPageNavigationSections
renders in production.Let's verify the component's configuration:
Consider adding debug logging in
CurrentPageNavigationSections
to trace the rendering flow in production:<div className="flex flex-col gap-20 sm:gap-[120px]"> + {/* Debug: Add temporary logging */} + {console.log('Rendering navigation sections:', process.env.NODE_ENV)} <CurrentPageNavigationSections /> <GetSupport /> </div>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/shared/components/Layout/components/NavigationAccordionLink.tsx (1)
23-27
: Consider making isTopLevelPage required to prevent ambiguity.The
isTopLevelPage
property is optional, which could lead to inconsistent visual hierarchy if not explicitly set.type NavigationAccordionLinkProps = PropsWithChildren<{ page: Page; onClick?: () => void; - isTopLevelPage?: boolean; + isTopLevelPage: boolean; }>;
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
src/components/shared/components/Layout/components/NavigationAccordionLink.tsx
(3 hunks)src/components/shared/components/Layout/components/NavigationLayout.tsx
(1 hunks)src/pages/start/build.mdx
(1 hunks)src/pages/start/zetachain.mdx
(1 hunks)
🚧 Files skipped from review as they are similar to previous changes (2)
- src/pages/start/build.mdx
- src/pages/start/zetachain.mdx
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (2)
src/components/shared/components/Layout/components/NavigationAccordionLink.tsx (1)
85-92
: Verify styling consistency across different themes and viewports.The dot indicator's styling and positioning might need adjustment for better visibility and alignment across different themes and screen sizes.
✅ Verification successful
Styling implementation verified and found to be consistent
The dot indicator's styling follows the design system's patterns with proper theme support and responsive adjustments. The implementation handles different viewports and themes appropriately.
🏁 Scripts executed
The following scripts were executed for the analysis:
Script:
#!/bin/bash # Description: Check for potential styling inconsistencies across themes # Look for other dot indicators or similar visual hierarchies # Search for similar styling patterns rg -l 'w-1\s+h-1.*ml-1\s+mr-2\s+mt-2' . rg -l 'bg-green-100.*bg-grey-200.*bg-grey-600' . # Check for theme-related classes rg -l 'dark:bg-grey-[0-9]' .Length of output: 1156
src/components/shared/components/Layout/components/NavigationLayout.tsx (1)
92-97
: Investigate deployment inconsistency with nested items.The nested items visibility issue in Vercel might be related to SSR/CSR differences or state management. Consider the following:
- Add debug logging for page structure during SSR and CSR
- Verify navSection.children filtering behavior
- Ensure state is properly hydrated during SSR
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (5)
src/pages/start/_meta.json (1)
2-4
: Add a Description to the "index" Section
The "index" section, which represents the "Get Started" area, currently only provides a title. For consistency with the other sections—and to improve clarity in the documentation—consider adding a descriptive field. For example:"index": { "title": "Get Started", + "description": "Begin your journey with ZetaChain and learn how to leverage omnichain interoperability." }
This aligns the structure with the other sections and provides users with additional context.
src/components/shared/components/Icons/components/IconCoffeeCup.tsx (1)
8-22
: Add ARIA attributes for better accessibility.The SVG icon should include ARIA attributes to improve accessibility.
Apply this diff to add accessibility attributes:
<svg width={24} height={24} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Coffee cup icon" {...otherProps} className={clsx(otherProps?.className, { "text-grey-400 dark:text-grey-300": !otherProps?.className })} >src/pages/start/zetachain.mdx (3)
1-5
: Metadata Block EvaluationThe front matter is correctly formatted; however, the description field currently holds a placeholder ("Description"). Consider updating it with a more informative summary prior to final release.
22-31
: Universal Blockchain Section EnhancementsIn line 24, consider hyphenating "first ever" to "first-ever" to improve clarity when used as a compound adjective. Additionally, in line 27, ensure consistent branding by correcting "Zetachain" to "ZetaChain".
Suggested diff:
- first ever Universal Blockchain + first-ever Universal Blockchain - Zetachain brings programmability to non-smart contract chains such as Bitcoin... + ZetaChain brings programmability to non-smart contract chains such as Bitcoin...🧰 Tools
🪛 LanguageTool
[uncategorized] ~24-~24: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... Universal Blockchain ZetaChain is the first ever Universal Blockchain to enable native c...(EN_COMPOUND_ADJECTIVE_INTERNAL)
52-61
: Universal Smart Contract Section EnhancementsThe overview for Universal Smart Contract is comprehensive. In line 57, consider whether "multi-chain" should be standardized to "multichain" in line with branding or style guidelines.
Suggested diff:
- Orchestrating complex multi-chain actions + Orchestrating complex multichain actions🧰 Tools
🪛 LanguageTool
[misspelling] ~57-~57: This word is normally spelled as one.
Context: ...evelopment by: - Orchestrating complex multi-chain actions - Accessing liquidity across di...(EN_COMPOUNDS_MULTI_CHAIN)
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
public/img/pages/start.svg
is excluded by!**/*.svg
📒 Files selected for processing (12)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
(1 hunks)src/components/shared/components/Icons/index.ts
(1 hunks)src/components/shared/components/Layout/Layout.constants.tsx
(2 hunks)src/pages/_meta.json
(2 hunks)src/pages/developers/apps/_meta.json
(0 hunks)src/pages/developers/evm/_meta.json
(0 hunks)src/pages/developers/tutorials/call.mdx
(1 hunks)src/pages/index.mdx
(0 hunks)src/pages/reference/apps/get-testnet-zeta.mdx
(1 hunks)src/pages/start/_meta.json
(1 hunks)src/pages/start/index.mdx
(1 hunks)src/pages/start/zetachain.mdx
(1 hunks)
💤 Files with no reviewable changes (3)
- src/pages/developers/apps/_meta.json
- src/pages/developers/evm/_meta.json
- src/pages/index.mdx
✅ Files skipped from review due to trivial changes (2)
- src/pages/developers/tutorials/call.mdx
- src/pages/reference/apps/get-testnet-zeta.mdx
🚧 Files skipped from review as they are similar to previous changes (3)
- src/pages/start/index.mdx
- src/pages/_meta.json
- src/components/shared/components/Layout/Layout.constants.tsx
🧰 Additional context used
🪛 LanguageTool
src/pages/start/zetachain.mdx
[uncategorized] ~24-~24: If this is a compound adjective that modifies the following noun, use a hyphen.
Context: ... Universal Blockchain ZetaChain is the first ever Universal Blockchain to enable native c...
(EN_COMPOUND_ADJECTIVE_INTERNAL)
[misspelling] ~57-~57: This word is normally spelled as one.
Context: ...evelopment by: - Orchestrating complex multi-chain actions - Accessing liquidity across di...
(EN_COMPOUNDS_MULTI_CHAIN)
🪛 Biome (1.9.4)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
[error] 4-4: Constraining a type parameter to any or unknown is useless.
All types are subtypes of any and unknown.
Safe fix: Remove the constraint.
(lint/complexity/noUselessTypeConstraint)
🔇 Additional comments (12)
src/pages/start/_meta.json (5)
5-8
: Review "zetachain" Section Consistency
The "zetachain" section includes both a title and a tailored description, which clearly communicates its intended content. Ensure that this description consistently reflects the current messaging across related documentation areas.
9-12
: "build" Section Clarity Check
The "build" section’s title and description are concise and well aligned with the documentation goals. No changes are necessary here.
13-16
: "evm" Section Verification
The "evm" section effectively conveys its purpose with both title and description. The content is clear and consistent with the overall style.
17-20
: "app" Section Review
The "app" section is well-defined; the title and description clearly describe the intended functionality and value. This section appears to be in good shape.
1-21
: Overall JSON Structure Validation
The overall JSON structure is valid and neatly organized, aligning with modern documentation metadata standards. Just ensure that any downstream components or navigation logic consuming this metadata are updated accordingly to reflect the addition of a description in the "index" section and any other future adjustments.src/components/shared/components/Icons/index.ts (1)
12-12
: LGTM!The new export follows the established pattern and maintains alphabetical ordering.
src/pages/start/zetachain.mdx (6)
6-8
: Introduction Paragraph ClarityThe introduction concisely states ZetaChain's mission and aligns well with the documentation's tone. No changes are required.
9-16
: The Future We See Section ApprovalThis section effectively outlines current blockchain challenges and sets the stage for ZetaChain's vision. The narrative is both engaging and clear.
17-21
: Vision Statement ReviewThe vision statement solidly articulates ZetaChain’s intended future and purpose. The message is compelling and well-aligned with the overall documentation.
32-41
: Universal PoS Section ReviewThe description of the Proof of Stake system is detailed and technically sound. The bullet points clearly delineate its features.
42-51
: Universal EVM Section ReviewThis section accurately describes the Universal EVM’s capabilities. The instructions for developers are clear and well-organized.
62-87
: Solutions Section ReviewThe Solutions section is well-structured and covers the application of ZetaChain across various sectors. The hierarchy and descriptions are coherent and enhance navigability.
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
Outdated
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tested ACK
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
Outdated
Show resolved
Hide resolved
…p.tsx Co-authored-by: Hernan Clich <62221379+hernan-clich@users.noreply.github.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx (1)
18-22
: Use camelCase for SVG attributes.React expects SVG attributes to be in camelCase format.
<path - fill-rule="evenodd" + fillRule="evenodd" fill={color || "currentColor"} />
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
[error] 4-4: Constraining a type parameter to any or unknown is useless.
All types are subtypes of any and unknown.
Safe fix: Remove the constraint.
(lint/complexity/noUselessTypeConstraint)
🪛 ESLint
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
[error] 8-8: Delete ;
(prettier/prettier)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (1)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx (1)
4-8
: Remove unnecessary type constraint.The type constraint
<T extends unknown>
is redundant as all types are subtypes ofunknown
.🧰 Tools
🪛 Biome (1.9.4)
[error] 4-4: Constraining a type parameter to any or unknown is useless.
All types are subtypes of any and unknown.
Safe fix: Remove the constraint.(lint/complexity/noUselessTypeConstraint)
🪛 ESLint
[error] 8-8: Delete
;
(prettier/prettier)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Actionable comments posted: 0
🧹 Nitpick comments (1)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx (1)
20-21
: Use standardized SVG attributes.The
fill-rule
attribute uses hyphenation instead of the standard camelCase format used in React.Apply this diff:
- fill-rule="evenodd" + fillRule="evenodd"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (1)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
(1 hunks)
🧰 Additional context used
🪛 Biome (1.9.4)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx
[error] 4-4: Constraining a type parameter to any or unknown is useless.
All types are subtypes of any and unknown.
Safe fix: Remove the constraint.
(lint/complexity/noUselessTypeConstraint)
⏰ Context from checks skipped due to timeout of 90000ms (1)
- GitHub Check: build
🔇 Additional comments (3)
src/components/shared/components/Icons/components/IconCoffeeCup.tsx (3)
4-8
: Remove unnecessary type constraint.The type constraint
<T extends unknown>
is redundant as all types are subtypes ofunknown
.Apply this diff to simplify the type definition:
-const IconCoffeeCup = <T extends unknown>({ +const IconCoffeeCup = <T>({🧰 Tools
🪛 Biome (1.9.4)
[error] 4-4: Constraining a type parameter to any or unknown is useless.
All types are subtypes of any and unknown.
Safe fix: Remove the constraint.(lint/complexity/noUselessTypeConstraint)
9-17
: Add accessibility attributes to SVG icon.For better accessibility and WCAG compliance, add
role="img"
andaria-label
attributes to the SVG element.Apply this diff:
<svg width={size} height={size} viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" + role="img" + aria-label="Coffee cup icon" {...otherProps} className={clsx(otherProps?.className, { "text-grey-400 dark:text-grey-300": !otherProps?.className })} >
16-16
: Verify color contrast for default text colors.The default colors (
text-grey-400
andtext-grey-300
) might not provide sufficient contrast ratios for accessibility. Please ensure they meet WCAG 2.1 Level AA requirements.❌ Verification inconclusive
🌐 Web query:
What are the WCAG 2.1 color contrast requirements for icons?
💡 Result:
WCAG 2.1 requires a minimum 3:1 contrast ratio for essential icons against adjacent colors under Success Criterion 1.4.11 (Non-text Contrast). This applies when icons convey critical information or represent interactive components[1][8][10]. Here’s a detailed breakdown:
Key Requirements
- Scope: Applies to:
- User interface components (e.g., buttons, checkboxes) in active states
- Graphical objects essential for understanding content (e.g., status indicators, navigation icons)[8][10]
- Exclusions:
- Inactive controls (e.g., disabled buttons)
- Decorative icons with no functional purpose[8]
Implementation Guidelines
- Adjacent Colors: Test contrast against all adjacent colors (e.g., a blue icon on a gradient background must meet 3:1 with both lightest and darkest gradient sections)[1][4].
- Multi-Part Icons: Each critical element (e.g., an exclamation mark inside a triangle) must independently meet the ratio against their backgrounds[4].
- Text vs. Icons:
- Text/icons of text require 4.5:1 contrast (WCAG 1.4.3)[5].
- Icons without text labels rely solely on the 3:1 rule[1].
Examples
- Passing: Dark blue icon (docs: update module specs from node #63) on white background (4.8:1)[4]
- Failing: Light green icon (#6CBF7E) on white background (2.29:1)[10]
Best Practices
- Use tools like WebAIM Contrast Checker or Colour Contrast Analyser to verify ratios[5][6].
- Ensure consistency in icon labeling and sizing (minimum 24x24px for interactive elements)[6].
This standard ensures usability for low-vision users and those with color deficiencies while maintaining design flexibility[8][10].
Citations:
- 1: https://www.w3.org/WAI/WCAG21/Techniques/general/G207
- 2: https://www.accessibleresources.com/post/understanding-wcag-2-1-a-aa-and-aaa-guidelines-for-color-contrast
- 3: https://www.a11y-collective.com/blog/icon-usability-and-accessibility/
- 4: https://webaim.org/articles/contrast/
- 5: https://www.washington.edu/accesstech/checklist/contrast/
- 6: http://kb.daisy.org/publishing/docs/html/images-icons.html
- 7: https://web.accessibility.duke.edu/web-content-accessibility-guidelines-wcag/
- 8: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html
- 9: https://www.w3.org/WAI/WCAG22/quickref/
- 10: https://accessiblewebsiteservices.com/accessible-color-contrast-icons-now-included/
IconCoffeeCup: Verify Icon Default Colors’ Accessibility
The default color classes (
text-grey-400
for light mode anddark:text-grey-300
for dark mode) should be validated against WCAG 2.1 guidelines. For essential icons, a minimum contrast ratio of 3:1 is required against adjacent colors, while text (or text-like icons) must meet a 4.5:1 ratio. Given that the actual contrast depends on the surrounding background, please verify using a contrast checker (e.g., WebAIM Contrast Checker or Colour Contrast Analyser) within the context where the icons are used. If they fall short of the required ratios, consider adjusting the color values accordingly.
- Confirm that
text-grey-400
provides at least a 3:1 ratio on its intended background in light mode.- Verify that
dark:text-grey-300
meets the contrast requirement on dark backgrounds.- Adjust color values if testing indicates insufficient contrast.
Summary by CodeRabbit
Documentation Removal
New Features
IconCoffeeCup
component for enhanced UI elements.Content Update