Add roadmap link to header and footer navigation#700
Conversation
|
|
Important Review skippedBot user detected. To trigger a single review, invoke the You can disable this status message by setting the WalkthroughThis PR adds a Roadmap link to navigation by replacing the GitHub link in home layout with a Roadmap link (GitHub issue 683), removing the GitHub link from docs layout, adding it to base config, and expanding external-link styling in CSS for dark mode and navigation contexts. Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~22 minutes Possibly related PRs
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
Comment |
Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
@copilot good work so far, however, I expect it to have the "External link" icon (top right arrow). See the |
Co-authored-by: yamcodes <2014360+yamcodes@users.noreply.github.com>
Added the external link icon (↗) by setting Homepage with external link icon: Docs page with external link icon: Warning Firewall rules blocked me from connecting to one or more addresses (expand for details)I tried to connect to the following addresses, but was blocked by firewall rules:
If you need me to access, download, or install something from one of these locations, you can either:
|
- Centralize GitHub link in base options - Refactor external link CSS selector - Update home page roadmap link display
…, and add roadmap link to documentation.
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (1)
apps/www/app/globals.css (1)
71-138: Consider consolidating duplicate selector blocks.The sidebar and navigation external link styling repeats similar rule sets across three contexts (
[data-radix-scroll-area-viewport],#nd-nav,#nd-subnav). While functional, this increases maintenance effort—changes to icon styling require updates in multiple locations.🔎 Refactoring approach
Consider grouping selectors with comma separation or extracting common properties into CSS custom properties:
/* Example: Combine common base rules */ [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)), #nd-nav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)), #nd-subnav a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)) { background-image: none !important; padding-right: 0 !important; display: inline-flex; align-items: center; gap: 0 !important; } /* Then handle layout-specific differences if needed */ [data-radix-scroll-area-viewport] a[target="_blank"]:not([data-no-arrow]):not(:has(img)):not(:has(> svg:only-child)) { display: flex; /* sidebar-specific */ }Alternatively, use a shared CSS custom property for the icon SVG data URI to reduce duplication in the
::afterrules.
📜 Review details
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (5)
apps/www/app/(home)/layout.tsxapps/www/app/docs/layout.tsxapps/www/app/globals.cssapps/www/app/layout.config.tsxapps/www/content/docs/arkenv/meta.json
💤 Files with no reviewable changes (1)
- apps/www/app/docs/layout.tsx
🧰 Additional context used
📓 Path-based instructions (3)
**/*.{ts,tsx}
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
**/*.{ts,tsx}: Prefertypeoverinterfacefor type definitions in TypeScript
Use TypeScript 5.1+ features when appropriate
Leverageconsttype parameters for better inference in TypeScript
Use JSDoc comments for public APIs
Use tabs for indentation (configured in Biome)
Use double quotes for strings (configured in Biome)
Organize imports automatically (Biome handles this)
Avoid explicit types when TypeScript can infer them (noInferrableTypeserror)
Useas constwhere appropriate for immutable values (useAsConstAssertionerror)
Don't reassign function parameters (noParameterAssignerror)
Place default parameters last in function signatures (useDefaultParameterLasterror)
Always initialize enum values (useEnumInitializerserror)
Declare one variable per statement (useSingleVarDeclaratorerror)
Avoid unnecessary template literals (noUnusedTemplateLiteralerror)
PreferNumber.parseIntover globalparseInt(useNumberNamespaceerror)
Use kebab-case for TypeScript filenames (e.g.,create-env.ts)
Use camelCase for function names (e.g.,createEnv)
Use PascalCase for type names (e.g.,ArkEnvError)
Use UPPER_SNAKE_CASE for environment variables and constants
Include examples in JSDoc comments when helpful for public APIs
Document complex type logic with JSDoc comments
UseArkEnvErrorfor environment variable validation errors
Provide clear, actionable error messages that include the variable name and expected type
**/*.{ts,tsx}: UsecreateEnv(schema)function (or default import asarkenv) to create validated environment objects in TypeScript
Use built-in validators (host, port, url, email) from ArkEnv when available instead of custom ArkType schemas
Provide default values for optional environment variables using ArkType syntax (e.g., 'boolean = false')
Use ArkEnvError for environment variable errors instead of generic Error types
For environment schema definition, use ArkType string literal syntax for enumerated values (e.g., "'deve...
Files:
apps/www/app/layout.config.tsxapps/www/app/(home)/layout.tsx
**/*.tsx
📄 CodeRabbit inference engine (.cursor/rules/coding-guidelines.mdc)
Use self-closing JSX elements (
useSelfClosingElementserror)
Files:
apps/www/app/layout.config.tsxapps/www/app/(home)/layout.tsx
apps/www/**/*.{ts,tsx,js,jsx}
📄 CodeRabbit inference engine (apps/www/.cursor/rules/posthog-integration.mdc)
apps/www/**/*.{ts,tsx,js,jsx}: If using TypeScript, use an enum to store feature flag names. If using JavaScript, store feature flag names as strings to an object declared as a constant to simulate an enum. Use UPPERCASE_WITH_UNDERSCORE naming convention for enum/const object members.
If a custom property for a person or event is referenced in two or more files or two or more callsites in the same file, use an enum or const object with UPPERCASE_WITH_UNDERSCORE naming convention, similar to feature flags.
Files:
apps/www/app/layout.config.tsxapps/www/app/(home)/layout.tsx
🧠 Learnings (1)
📚 Learning: 2025-12-25T21:14:15.510Z
Learnt from: yamcodes
Repo: yamcodes/arkenv PR: 616
File: apps/www/app/(home)/page.tsx:18-18
Timestamp: 2025-12-25T21:14:15.510Z
Learning: In projects using fumadocs-ui's HomeLayout, do not render a top-level <main> inside page components because HomeLayout already provides a main landmark with id="nd-home-layout". Ensure that page.tsx (and other pages that compose HomeLayout) return content without wrapping a new <main>, and rely on HomeLayout's landmark for accessibility. If a page needs a landmark, use subregions like <section> or <div role="region"> inside the existing main, but avoid duplicate main elements. Verify that HomeLayout is used and that the id remains unique.
Applied to files:
apps/www/app/(home)/layout.tsx
🧬 Code graph analysis (1)
apps/www/app/(home)/layout.tsx (1)
apps/www/app/layout.config.tsx (1)
baseOptions(13-29)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (6)
- GitHub Check: test-e2e (e2e)
- GitHub Check: test-e2e (a11y)
- GitHub Check: test-build (latest)
- GitHub Check: test-build (lts/*)
- GitHub Check: test-typesafety
- GitHub Check: Deploy-Preview
🔇 Additional comments (6)
apps/www/content/docs/arkenv/meta.json (1)
21-23: LGTM! Clean addition of the Roadmap link.The separator and Roadmap link follow the existing navigation structure and syntax conventions in this file.
apps/www/app/globals.css (2)
25-42: LGTM! Consistent underline styling for external links.The
[data-external-link]selectors properly extend the underline treatment to match article links.
46-69: LGTM! External link arrow icons properly styled.The
[data-external-link]attribute support is consistently integrated with existing external link styling, including proper dark mode variants.apps/www/app/layout.config.tsx (2)
20-28: LGTM! Well-structured and accessible link configuration.The centralized GitHub link configuration follows fumadocs-ui conventions, and the
aria-labelon the icon ensures proper accessibility for screen reader users.
1-1: No action needed; package is already at the latest version.The import statement is correct, and
@icons-pack/react-simple-icons@13.8.0is already the latest available version on npm. No update or security concern to address.apps/www/app/(home)/layout.tsx (1)
9-21: LGTM! Clean integration of Roadmap link with centralized navigation.The Roadmap link is properly configured with
external: trueto trigger external link styling, and the spread ofbaseOptions.linkscleanly incorporates the centralized GitHub link. The nullish coalescing operator provides safe fallback handling.
…variables and adjust flex display for links.
Add Roadmap Link with External Link Icon ✅
Summary
Successfully added the roadmap link (#683) with external link icons to the site navigation and footer, addressing all feedback.
Changes Made:
Commit 1 (6546c5c): Initial implementation
Commit 2 (826c256): Added external link icons
external: trueproperty to home layout roadmap linkexternal: trueproperty to docs layout roadmap linkVisual Confirmation:
Homepage with external link icon:
Docs page with external link icon in sidebar:
The roadmap link now appears with the external link icon (↗) in:
Quality Checks:
✅ All 107 tests passed
✅ Code review passed with no comments
✅ Security scan passed with 0 alerts
✅ All feedback addressed
Original prompt
💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.
Summary by CodeRabbit
New Features
Style
✏️ Tip: You can customize this high-level summary in your review settings.