refactor(docs): Replace Sphinx based home page with redesigned typescript home page.#56
Open
AVMatthews wants to merge 1 commit intoy-scope:mainfrom
Open
refactor(docs): Replace Sphinx based home page with redesigned typescript home page.#56AVMatthews wants to merge 1 commit intoy-scope:mainfrom
AVMatthews wants to merge 1 commit intoy-scope:mainfrom
Conversation
WalkthroughThe PR adds a complete Next.js documentation site as the primary entry point, featuring theme switching, responsive navigation, contact sections, and UI components. It integrates with existing Sphinx documentation through build orchestration, merging Next.js homepage output with Sphinx-generated content. Changes
Sequence Diagram(s)sequenceDiagram
participant Client as Client Browser
participant RootLayout as Root Layout
participant ThemeProvider as ThemeProvider
participant Storage as localStorage
participant SystemPref as System Preference
participant Page as Home Page
participant Navbar as Navbar
Client->>RootLayout: Load app/layout.tsx
RootLayout->>ThemeProvider: Wrap with ThemeProvider
ThemeProvider->>ThemeProvider: Call getInitialTheme()
ThemeProvider->>Storage: Check "ui-theme" key
alt Theme found in localStorage
Storage-->>ThemeProvider: "light" or "dark"
else Theme not found
ThemeProvider->>SystemPref: Query prefers-color-scheme
SystemPref-->>ThemeProvider: System theme or default "light"
end
ThemeProvider->>Client: Set document.body[data-bs-theme]
RootLayout->>RootLayout: Load Navbar + Page + Footer
Page->>Page: Call useTheme() hook
Page->>Page: Render theme-aware assets (prestoSrc, mcpSrc)
Navbar->>Navbar: useTheme() to check current theme
Navbar->>Navbar: Fetch GitHub stars on mount
Client->>ThemeProvider: User toggles theme
ThemeProvider->>Storage: Update "ui-theme" value
ThemeProvider->>Client: Update document.body[data-bs-theme]
Page->>Page: Re-render with new theme assets
Navbar->>Navbar: Update theme icon/label
Estimated code review effort🎯 4 (Complex) | ⏱️ ~65 minutes 🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 Stylelint (17.4.0)docs/app/assets/css/colors.cssConfigurationError: Could not find "stylelint-config-clean-order/error". Do you need to install the package or use the "configBasedir" option? docs/app/assets/scss/styles.scssConfigurationError: Could not find "stylelint-config-clean-order/error". Do you need to install the package or use the "configBasedir" option? Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment Tip CodeRabbit can enforce grammar and style rules using `languagetool`.Configure the |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 27
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/app/content.ts`:
- Line 144: Define a concrete item contract and replace the loose Array<any> to
restore type-safety: create an Item type/interface (e.g., Item with required
fields like title:string and common optional fields such as href?:string,
description?:string, external?:boolean, img?:string, imgStyle?:string), then
change the Category type to use items: Item[] instead of Array<any>; also update
any nearby usages to accept Category[] where the list of categories is used.
Ensure the unique symbols Category, items, Item, external, and imgStyle are used
so callers and imports can be updated accordingly.
In `@docs/app/layout.tsx`:
- Line 40: The ThemeProvider import is located after the exported constants
(metadata, viewport); move the line importing ThemeProvider so all imports are
grouped at the top of the file in layout.tsx—place the import alongside the
other imports above the exports (e.g., above the metadata and viewport
declarations) to follow conventional ordering and improve readability; ensure
you only relocate the import statement for ThemeProvider and do not change its
identifier.
In `@docs/app/page.tsx`:
- Around line 134-137: The current items.map callback uses the array index (i)
as the React key when rendering <IconLink> which can break state when items
reorder; update the map to use a stable unique identifier from the item (e.g.,
use items.map((it) => <IconLink key={it.href} ... />) or fallback to it.id or
another unique property on the item) so replace the key={i} with key={it.href}
(or key={it.id} / other stable unique field) inside the items.map that renders
IconLink.
- Line 125: The Category component currently types its items prop as Array<any>;
define a concrete interface (e.g., interface CategoryItem { id: string; title:
string; href?: string; icon?: React.ReactNode; /* add fields used in rendering
*/ }) and replace the prop type in the Category declaration (Category({title,
items}: {title: string; items: Array<any>}) => ...) with items: CategoryItem[]
(or readonly CategoryItem[]), updating any usages and imports to match the new
structure for full type safety.
- Line 78: The prop declaration imgStyle?: any should be changed to a specific
style type to preserve TypeScript checks; replace the any with an appropriate
type such as React.CSSProperties (or a framework-specific type like ImageStyle
if applicable) and import the type if necessary, updating the props/interface
that declares imgStyle to use that type so consumers get proper autocomplete and
type safety for CSS properties.
- Around line 22-32: Extract the duplicated GITHUB_ICON_PATH constant into a new
shared module (e.g., export const GITHUB_ICON_PATH from a file in
docs/app/shared or docs/lib) and replace the inline string in both page.tsx and
Navbar.tsx with an import of that constant; update references to the symbol
GITHUB_ICON_PATH in page.tsx and in the Navbar component (where it's currently
duplicated around the 202 and 326 usages) to use the imported value, and ensure
the new module exports the exact same string so SVGs render identically.
In `@docs/app/shared/ThemeProvider.tsx`:
- Around line 40-49: The ThemeProvider currently calls
useState(getInitialTheme()) which returns "light" during SSR, causing a flash
before client theme is applied; to fix, move initial theme sync out of React
render by adding a small blocking script in the app head that reads
localStorage/ui-theme or prefers-color-scheme and sets
document.body.setAttribute("data-bs-theme", ...) before hydration, and keep
ThemeProvider's getInitialTheme and useEffect as fallback (or add
suppressHydrationWarning on the body if you opt to allow mismatch); update
references in ThemeProvider, getInitialTheme, and the useEffect that sets
document.body and localStorage to ensure consistent behavior.
In `@docs/components/sections/ContactSection.tsx`:
- Around line 184-187: Delete the commented-out iframe block inside the
ContactSection component (the commented lines containing the iframe with
className "w-full h-[230px] border-0" and the MailList src URL) so no
dead/commented code remains; if the iframe approach should be preserved for
future reference, create a short issue or add a one-line comment referencing
that issue number instead of leaving the full iframe commented in
ContactSection.tsx.
- Around line 27-56: Replace the inline style props on the icon components with
Tailwind utility classes: remove style={{width: "24px", height: "24px"}} and add
a className such as "w-6 h-6" (or equivalent sizing) to each of DiscordIcon,
SlackIcon, and ZulipIcon so they use Tailwind for dimensions while keeping the
existing alt and src attributes unchanged.
- Line 85: Remove the unused ref by deleting the containerRef declaration (const
containerRef = useRef<HTMLDivElement>(null)) and removing any JSX ref usage
(e.g., ref={containerRef}) inside the ContactSection component; also drop the
useRef import if it becomes unused. This cleans up the ContactSection component
where containerRef is created and attached but never used.
In `@docs/components/sections/Footer.tsx`:
- Line 88: The footer currently hard-codes "2015-2026" which will become stale;
update the Footer component to compute the end year at render time by using
JavaScript Date (e.g., const currentYear = new Date().getFullYear()) and render
either a single year or a range (e.g., startYear === currentYear ?
`${startYear}` : `${startYear}-${currentYear}`) instead of the literal "2026";
make this change inside the Footer (exported Footer component / JSX where the
copyright string is composed).
- Around line 40-65: The anchor tags in Footer.tsx that render icon-only links
(the anchors containing SiLinkedin, SiYoutube, and Mail) lack accessible names;
add an accessible label to each link by adding an aria-label (or include
visually hidden text) describing the destination (e.g., aria-label="Yscope on
LinkedIn", aria-label="Yscope on YouTube", aria-label="Email Yscope") to the
three anchors so screen readers can announce their purpose; update the anchors
where SiLinkedin, SiYoutube, and Mail are used.
In `@docs/components/sections/Navbar.tsx`:
- Line 176: The Navbar component has inconsistent Dev Docs links: the desktop
link (href="/dev-guide/") and the mobile link (href="/dev-docs") should match;
update the href in the Navbar component (both the desktop anchor/render where
href is "/dev-guide/" and the mobile/menu render where href is "/dev-docs") to
use the same canonical path (pick one, e.g. "/dev-docs") so both Desktop and
Mobile buttons point to the identical route.
- Around line 276-280: The mapped link elements render duplicate key props —
remove the redundant key on the inner anchor and keep the key on the outer
wrapper (SheetClose) so React receives a single key per list item; update the
JSX in Navbar.tsx by deleting the key={link.href} from the <a> element (leaving
key={link.href} on SheetClose) to eliminate the duplicate key warning.
- Around line 70-83: The useEffect fetch in Navbar.tsx can update state after
unmount; add an AbortController: create controller inside useEffect, pass
controller.signal to fetch("https://api.github.com/repos/y-scope/clp"), and in
the catch ignore abort errors (check error.name === 'AbortError') so
setGithubStars is not called for aborted requests; return a cleanup function
that calls controller.abort() to cancel the fetch on unmount. Ensure the
existing response.ok/data handling remains but gate setGithubStars behind
non-aborted completion.
- Around line 60-64: The timeout set by projectDocsTimeoutRef in
handleProjectDocsLeave is never cleared on unmount (or when a new timeout is
created); add a React useEffect cleanup that clears the timeout via
clearTimeout(projectDocsTimeoutRef.current) and sets
projectDocsTimeoutRef.current = null on component unmount, and also ensure any
existing timeout is cleared before assigning a new one in handleProjectDocsLeave
to avoid stray state updates to setProjectDocsOpen and potential memory leaks
(PROJECT_DOCS_MENU_CLOSE_DELAY_MS, projectDocsTimeoutRef,
handleProjectDocsLeave, setProjectDocsOpen).
In `@docs/components/sections/ZohoSignupForm.tsx`:
- Around line 83-92: The onLoad handler currently treats any iframe load during
submission (in the onLoad callback) as a successful submit by calling
setSuccessVisible(true), clearing inputs (setEmail, setFirstName) and resetting
submitting; add a brief inline comment above this logic in the onLoad handler
explaining that iframe load detection is fragile for cross-origin forms because
the iframe may load on error pages or redirects, and that the message listener
is used as a secondary/authoritative check for success/failure—reference the
onLoad handler, submitting state, setSuccessVisible, and the existing message
listener so future maintainers understand the limitation and why both checks
exist.
- Around line 62-66: The handleMessage listener currently accepts any
postMessage and can be spoofed; update handleMessage to first validate ev.origin
against the expected Zoho iframe origin (or a configured allowed-origin value)
before inspecting ev.data, and only call setSuccessVisible(true) when origin
matches and ev.data is the expected success payload; also ensure the
window.addEventListener("message", handleMessage) registration is paired with a
removal in the component cleanup so the origin check is effective and no stale
listeners remain.
- Around line 134-142: The email input lacks the HTML email type which enables
native validation and mobile keyboards; update the input element used with state
variable email (and setEmail) in ZohoSignupForm to include type="email" (i.e.,
add the type attribute on the <input ... /> that has id "EMBED_FORM_EMAIL_LABEL"
and name "CONTACT_EMAIL") so browsers validate format and show the correct
keyboard on mobile.
In `@docs/lib/utils.ts`:
- Around line 15-17: The cn helper currently uses unsafe casts and an eslint
suppression; remove the eslint-disable comment and the (any) casts and simply
return twMerge(clsx(inputs)) typed as string if necessary. Update the function
named cn to call twMerge(clsx(inputs)) directly (no casting), relying on the
existing types from clsx and tailwind-merge, and only add an explicit return
type annotation for cn if you need to ensure the function signature is
string-returning. Ensure references to twMerge, clsx, and the inputs parameter
are used exactly as in the current helper.
In `@docs/next-sitemap.config.mjs`:
- Around line 1-7: The JSDoc type for the sitemap configuration is wrong:
replace the current Next.js type with next-sitemap's IConfig by updating the
JSDoc to reference import('next-sitemap').IConfig (e.g., change /** `@type`
{next.NextConfig} */ to /** `@type` {import('next-sitemap').IConfig} */) so the
config object named config (which contains changefreq, generateRobotsTxt,
transform, etc.) is validated against the correct next-sitemap v4 IConfig type;
ensure any leftover incorrect import/comment for next is removed or updated
accordingly.
In `@docs/next.config.ts`:
- Around line 3-19: The config sets output: "export" while also defining async
rewrites(), which conflicts because rewrites require a server runtime; remove
the rewrites() block or switch the export mode off (remove or change output:
"export") so rewrites can run — locate the output: "export" setting and the
async rewrites() function in the file and either delete/disable rewrites() or
change output to a non-static/server-capable mode.
- Around line 5-7: The config uses experimental.turboPack (camelCase) which is
incorrect for Next.js — update the key to the documented lowercase form
experimental.turbopack (or remove/replace it if Next.js 16 deprecated this
switch); locate the experimental.turboPack entry in next.config.ts and change it
to experimental.turbopack (verify against the official Next.js 16 docs and
adjust if the API expects a different structure or removal).
In `@docs/package.json`:
- Line 26: The next dependency is at major version 16 while eslint-config-next
is at major version 15; update the eslint-config-next entry to use the same
major (e.g., change "eslint-config-next" to ^16.x to match "next": "^16.0.7") so
both packages share the same major version and avoid incompatible lint/parser
behavior.
- Line 15: The lint script "lint:check:js" currently targets only "app" so new
TS/TSX files under components/ and config files aren’t checked; update the
"lint:check:js" package script to broaden ESLint targets (e.g., include
components and config and/or a project-wide glob) and add --ext
.js,.jsx,.ts,.tsx so ESLint runs on JS/TS/TSX files (adjust the "lint:check:js"
value to something like running eslint across app components config or a src/**
pattern with the proper --ext flag).
In `@README.md`:
- Around line 19-21: The fenced code block containing the submodule command (```
... git submodule update --init --recursive ... ```) needs blank lines before
and after it to satisfy markdownlint MD031; edit the README.md list item to
ensure there is an empty line immediately above the opening triple backticks and
an empty line immediately below the closing triple backticks so the fenced block
is separated from surrounding list text.
In `@taskfiles/docs.yaml`:
- Around line 72-80: The script block that runs the Next.js build uses fragile
shell steps (cd docs, npm install, npm run build, rsync) but does not fail fast;
add robust error handling by enabling a fail-fast shell (e.g., set -euo
pipefail) at the start of the block or explicitly check the exit status after
critical commands (check the result of cd docs, npm install, and npm run build)
and abort with a clear error if any step fails; ensure commands referenced (cd
docs, npm install --no-audit --no-fund, npm run build, rsync -a docs/out/
"{{.G_NEXT_OUTPUT_DIR}}/") run only after verifying previous steps succeeded so
the task stops on failure instead of continuing silently.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro
Run ID: be7626bf-3175-41cf-b634-7b51e640e108
⛔ Files ignored due to path filters (27)
docs/app/favicon.icois excluded by!**/*.icodocs/package-lock.jsonis excluded by!**/package-lock.jsondocs/public/assets/images/api-server.svgis excluded by!**/*.svgdocs/public/assets/images/benchmarks.svgis excluded by!**/*.svgdocs/public/assets/images/blog.svgis excluded by!**/*.svgdocs/public/assets/images/clp-logo.pngis excluded by!**/*.pngdocs/public/assets/images/datasets.svgis excluded by!**/*.svgdocs/public/assets/images/discord.svgis excluded by!**/*.svgdocs/public/assets/images/docker-compose_icon.svgis excluded by!**/*.svgdocs/public/assets/images/json.svgis excluded by!**/*.svgdocs/public/assets/images/kubernetes.svgis excluded by!**/*.svgdocs/public/assets/images/log-ingestor.svgis excluded by!**/*.svgdocs/public/assets/images/log-viewer_icon.svgis excluded by!**/*.svgdocs/public/assets/images/mcp_dark.svgis excluded by!**/*.svgdocs/public/assets/images/mcp_light.svgis excluded by!**/*.svgdocs/public/assets/images/presto_dark.svgis excluded by!**/*.svgdocs/public/assets/images/presto_light.svgis excluded by!**/*.svgdocs/public/assets/images/publications.svgis excluded by!**/*.svgdocs/public/assets/images/python.svgis excluded by!**/*.svgdocs/public/assets/images/s3.svgis excluded by!**/*.svgdocs/public/assets/images/schema-file-syntax.svgis excluded by!**/*.svgdocs/public/assets/images/scripts.svgis excluded by!**/*.svgdocs/public/assets/images/single-node.svgis excluded by!**/*.svgdocs/public/assets/images/slack.svgis excluded by!**/*.svgdocs/public/assets/images/text.svgis excluded by!**/*.svgdocs/public/assets/images/zulip.svgis excluded by!**/*.svgdocs/public/bootstrap.bundle.min.jsis excluded by!**/*.min.js
📒 Files selected for processing (28)
README.mddocs/.gitignoredocs/.prettyierrc.yamldocs/.stylelintrc.jsondocs/app/assets/css/colors.cssdocs/app/assets/scss/styles.scssdocs/app/content.tsdocs/app/layout.tsxdocs/app/page.tsxdocs/app/shared/ThemeProvider.tsxdocs/components/sections/ContactSection.tsxdocs/components/sections/Footer.tsxdocs/components/sections/Navbar.tsxdocs/components/sections/ZohoSignupForm.tsxdocs/components/ui/button.tsxdocs/components/ui/card.tsxdocs/components/ui/sheet.tsxdocs/conf.pydocs/eslint.config.mjsdocs/index.rstdocs/lib/utils.tsdocs/next-sitemap.config.mjsdocs/next.config.tsdocs/package.jsondocs/postcss.config.mjsdocs/tailwind.config.cjsdocs/tsconfig.jsontaskfiles/docs.yaml
| ]; | ||
| }; | ||
|
|
||
| export type Category = {title: string; items: Array<any>}; |
There was a problem hiding this comment.
🛠️ Refactor suggestion | 🟠 Major
Replace Array<any> with a typed item contract.
Line 144 disables useful type-safety on a central content structure. Define an explicit item type (including optional external and imgStyle) and use Category[].
Proposed fix
+import type {CSSProperties} from "react";
+
+export type CategoryItem = {
+ href: string;
+ imgAlt: string;
+ imgSrc: string;
+ label: string;
+ external?: boolean;
+ imgStyle?: CSSProperties;
+};
+
-export type Category = {title: string; items: Array<any>};
+export type Category = {title: string; items: Array<CategoryItem>};📝 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.
Suggested change
| export type Category = {title: string; items: Array<any>}; | |
| import type {CSSProperties} from "react"; | |
| export type CategoryItem = { | |
| href: string; | |
| imgAlt: string; | |
| imgSrc: string; | |
| label: string; | |
| external?: boolean; | |
| imgStyle?: CSSProperties; | |
| }; | |
| export type Category = {title: string; items: Array<CategoryItem>}; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/app/content.ts` at line 144, Define a concrete item contract and replace
the loose Array<any> to restore type-safety: create an Item type/interface
(e.g., Item with required fields like title:string and common optional fields
such as href?:string, description?:string, external?:boolean, img?:string,
imgStyle?:string), then change the Category type to use items: Item[] instead of
Array<any>; also update any nearby usages to accept Category[] where the list of
categories is used. Ensure the unique symbols Category, items, Item, external,
and imgStyle are used so callers and imports can be updated accordingly.
| initialScale: 1, | ||
| }; | ||
|
|
||
| import {ThemeProvider} from "./shared/ThemeProvider"; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Move import statement to the top of the file.
The ThemeProvider import is placed in the middle of the file after the exports (metadata, viewport). This is unconventional and reduces readability. By convention, all imports should be grouped at the top of the file.
♻️ Suggested fix
Move this import to join the other imports at the top of the file (after line 14):
import Footer from "../components/sections/Footer";
import Navbar from "../components/sections/Navbar";
+import {ThemeProvider} from "./shared/ThemeProvider";
import "./assets/scss/styles.scss";
-
-...
-
-import {ThemeProvider} from "./shared/ThemeProvider";🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/app/layout.tsx` at line 40, The ThemeProvider import is located after
the exported constants (metadata, viewport); move the line importing
ThemeProvider so all imports are grouped at the top of the file in
layout.tsx—place the import alongside the other imports above the exports (e.g.,
above the metadata and viewport declarations) to follow conventional ordering
and improve readability; ensure you only relocate the import statement for
ThemeProvider and do not change its identifier.
Comment on lines
+22
to
+32
| const GITHUB_ICON_PATH = ( | ||
| "M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285" + | ||
| "-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61-.546-1.387-1.333-1.757-1.333-1.757-1.08" + | ||
| "9-.745.083-.729.083-.729 1.205.084 1.84 1.236 1.84 1.236 1.07 1.834 2.809 1.304 3.495.997.1" + | ||
| "08-.775.418-1.305.762-1.605-2.665-.305-5.466-1.334-5.466-5.93 0-1.31.469-2.381 1.236-3.221-" + | ||
| ".124-.303-.535-1.523.117-3.176 0 0 1.008-.322 3.301 1.23a11.52 11.52 0 0 1 3.003-.404c1.018" + | ||
| ".005 2.045.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.873.118 3.176.77" + | ||
| ".84 1.235 1.911 1.235 3.221 0 4.609-2.803 5.624 -5.475 5.921.43.371.823 1.102.823 2.222 0 1" + | ||
| ".606-.014 2.898-.014 3.293 0 .322.218.694.825.576C20.565 22.092 24 17.592 24 12.297c0-6.627" + | ||
| "-5.373-12-12-12" | ||
| ); |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Find all occurrences of the GitHub icon path to confirm duplication
rg -n "M12 .297c-6.63" --type=tsx --type=tsRepository: y-scope/yscope-docs
Length of output: 90
🏁 Script executed:
#!/bin/bash
# Find the GitHub icon path in TypeScript/JavaScript files without file type restrictions
rg -n "M12 .297c-6.63" .
# Also search for GITHUB_ICON_PATH constant references
rg -n "GITHUB_ICON_PATH" .Repository: y-scope/yscope-docs
Length of output: 603
🏁 Script executed:
#!/bin/bash
# Locate the specific files mentioned
find . -name "page.tsx" -o -name "Navbar.tsx"Repository: y-scope/yscope-docs
Length of output: 120
🏁 Script executed:
#!/bin/bash
# Check the content around the icon path in Navbar.tsx to see full context
sed -n '200,210p' ./docs/components/sections/Navbar.tsx
sed -n '324,334p' ./docs/components/sections/Navbar.tsxRepository: y-scope/yscope-docs
Length of output: 1993
🏁 Script executed:
#!/bin/bash
# Extract the complete GITHUB_ICON_PATH from page.tsx
sed -n '22,32p' ./docs/app/page.tsx
# Extract the complete icon path from Navbar.tsx around line 202
sed -n '202,211p' ./docs/components/sections/Navbar.tsx
# Extract the complete icon path from Navbar.tsx around line 326
sed -n '326,335p' ./docs/components/sections/Navbar.tsxRepository: y-scope/yscope-docs
Length of output: 2860
🏁 Script executed:
#!/bin/bash
# Check if GITHUB_ICON_PATH is exported from page.tsx
grep -n "export" ./docs/app/page.tsx | head -20
# Check imports in Navbar.tsx to see if it imports from page.tsx
grep -n "import" ./docs/components/sections/Navbar.tsx | head -20
# Look for a constants directory or constants file
find ./docs -type f -name "*constant*" -o -type d -name "*constant*"
find ./docs -type f -name "consts*"Repository: y-scope/yscope-docs
Length of output: 228
🏁 Script executed:
#!/bin/bash
# Check the shared directory structure
find ./docs/app/shared -type f | head -20
# Check if there's a constants or utils file in the project
find ./docs -type f \( -name "*.ts" -o -name "*.tsx" \) -path "*/shared/*" | head -20Repository: y-scope/yscope-docs
Length of output: 134
🏁 Script executed:
#!/bin/bash
# Check the directory structure to understand how files are organized
ls -la ./docs/app/shared/
# Check if there's a constants or utils folder elsewhere
find ./docs -type d -name "shared" -o -name "constants" -o -name "utils" | head -10
# Look at what's in the docs directory
ls -la ./docs/Repository: y-scope/yscope-docs
Length of output: 1654
Extract the duplicated GitHub icon path to a shared constant.
The GitHub icon path is hardcoded in both page.tsx (lines 22–32) and Navbar.tsx (lines 202 and 326). Move GITHUB_ICON_PATH to docs/app/shared/ or docs/lib/ and import it in both files to maintain DRY principles.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/app/page.tsx` around lines 22 - 32, Extract the duplicated
GITHUB_ICON_PATH constant into a new shared module (e.g., export const
GITHUB_ICON_PATH from a file in docs/app/shared or docs/lib) and replace the
inline string in both page.tsx and Navbar.tsx with an import of that constant;
update references to the symbol GITHUB_ICON_PATH in page.tsx and in the Navbar
component (where it's currently duplicated around the 202 and 326 usages) to use
the imported value, and ensure the new module exports the exact same string so
SVGs render identically.
| href: string; | ||
| imgAlt: string; | ||
| imgSrc: string; | ||
| imgStyle?: any; |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Avoid using any type.
Using any defeats TypeScript's type checking. Define a proper type for the image style prop.
♻️ Suggested fix
- imgStyle?: any;
+ imgStyle?: React.CSSProperties;📝 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.
Suggested change
| imgStyle?: any; | |
| imgStyle?: React.CSSProperties; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/app/page.tsx` at line 78, The prop declaration imgStyle?: any should be
changed to a specific style type to preserve TypeScript checks; replace the any
with an appropriate type such as React.CSSProperties (or a framework-specific
type like ImageStyle if applicable) and import the type if necessary, updating
the props/interface that declares imgStyle to use that type so consumers get
proper autocomplete and type safety for CSS properties.
| * @param root.items array of icon links | ||
| * @return the category component | ||
| */ | ||
| const Category = ({title, items}: {title: string; items: Array<any>}) => ( |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Avoid using any type for items array.
Define a proper interface for the category items to improve type safety and developer experience.
♻️ Suggested fix
+interface IconLinkItem {
+ external?: boolean;
+ href: string;
+ imgAlt: string;
+ imgSrc: string;
+ imgStyle?: React.CSSProperties;
+ label: string;
+}
+
-const Category = ({title, items}: {title: string; items: Array<any>}) => (
+const Category = ({title, items}: {title: string; items: IconLinkItem[]}) => (
<div className={"row align-items-center justify-content-center"}>
...
- {items.map((it: any, i: number) => (
+ {items.map((it, i) => (📝 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.
Suggested change
| const Category = ({title, items}: {title: string; items: Array<any>}) => ( | |
| interface IconLinkItem { | |
| external?: boolean; | |
| href: string; | |
| imgAlt: string; | |
| imgSrc: string; | |
| imgStyle?: React.CSSProperties; | |
| label: string; | |
| } | |
| const Category = ({title, items}: {title: string; items: IconLinkItem[]}) => ( | |
| <div className={"row align-items-center justify-content-center"}> | |
| ... | |
| {items.map((it, i) => ( |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/app/page.tsx` at line 125, The Category component currently types its
items prop as Array<any>; define a concrete interface (e.g., interface
CategoryItem { id: string; title: string; href?: string; icon?: React.ReactNode;
/* add fields used in rendering */ }) and replace the prop type in the Category
declaration (Category({title, items}: {title: string; items: Array<any>}) =>
...) with items: CategoryItem[] (or readonly CategoryItem[]), updating any
usages and imports to match the new structure for full type safety.
Comment on lines
+5
to
+7
| experimental: { | ||
| turboPack: true, // Enable Turbopack | ||
| }, |
There was a problem hiding this comment.
Verify Turbopack option key/casing in next.config.ts.
Line 6 uses experimental.turboPack; Next config keys are case-sensitive, and this key may be ignored if it doesn’t match the documented API.
For Next.js 16 `next.config.ts`, what is the correct Turbopack configuration key and casing (`turbopack`, `experimental.turbo`, or another key)?
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/next.config.ts` around lines 5 - 7, The config uses
experimental.turboPack (camelCase) which is incorrect for Next.js — update the
key to the documented lowercase form experimental.turbopack (or remove/replace
it if Next.js 16 deprecated this switch); locate the experimental.turboPack
entry in next.config.ts and change it to experimental.turbopack (verify against
the official Next.js 16 docs and adjust if the API expects a different structure
or removal).
| "lint": "npm run lint:check", | ||
| "lint:check": "npm-run-all --sequential --continue-on-error lint:check:*", | ||
| "lint:check:css": "stylelint app/**/*.scss app/**/*.css --allow-empty-input", | ||
| "lint:check:js": "eslint app --max-warnings 0", |
There was a problem hiding this comment.
🧹 Nitpick | 🔵 Trivial
Expand ESLint scope beyond app/.
Line 15 lints only app, but this PR adds TS/TSX under components/ and config files. Broaden lint targets so new surface area is checked in CI.
Proposed fix
- "lint:check:js": "eslint app --max-warnings 0",
+ "lint:check:js": "eslint . --max-warnings 0",📝 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.
Suggested change
| "lint:check:js": "eslint app --max-warnings 0", | |
| "lint:check:js": "eslint . --max-warnings 0", |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/package.json` at line 15, The lint script "lint:check:js" currently
targets only "app" so new TS/TSX files under components/ and config files aren’t
checked; update the "lint:check:js" package script to broaden ESLint targets
(e.g., include components and config and/or a project-wide glob) and add --ext
.js,.jsx,.ts,.tsx so ESLint runs on JS/TS/TSX files (adjust the "lint:check:js"
value to something like running eslint across app components config or a src/**
pattern with the proper --ext flag).
| "class-variance-authority": "^0.7.1", | ||
| "clsx": "^2.1.1", | ||
| "lucide-react": "^0.563.0", | ||
| "next": "^16.0.7", |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python - <<'PY'
import json, re
with open("docs/package.json", "r", encoding="utf-8") as f:
pkg = json.load(f)
def major(version: str):
m = re.search(r'(\d+)', version or "")
return int(m.group(1)) if m else None
next_v = pkg.get("dependencies", {}).get("next", "")
eslint_next_v = pkg.get("devDependencies", {}).get("eslint-config-next", "")
print("next:", next_v, "major=", major(next_v))
print("eslint-config-next:", eslint_next_v, "major=", major(eslint_next_v))
print("major_versions_match:", major(next_v) == major(eslint_next_v))
PYRepository: y-scope/yscope-docs
Length of output: 152
Update eslint-config-next to match the next major version.
The next dependency (line 26) is pinned to version 16, whilst eslint-config-next (line 42) uses version 15. Align them to the same major version to avoid incompatible lint rules and parser behaviour.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@docs/package.json` at line 26, The next dependency is at major version 16
while eslint-config-next is at major version 15; update the eslint-config-next
entry to use the same major (e.g., change "eslint-config-next" to ^16.x to match
"next": "^16.0.7") so both packages share the same major version and avoid
incompatible lint/parser behavior.
Comment on lines
+19
to
+21
| ```shell | ||
| git submodule update --init --recursive | ||
| ``` |
There was a problem hiding this comment.
Add blank lines around the fenced block in the list item (markdownlint MD031).
The fence under the submodule step should be surrounded by blank lines to satisfy linting.
Proposed fix
* Initialize, update, and clone any submodules within a Git repository
+
```shell
git submodule update --init --recursive</details>
<!-- suggestion_start -->
<details>
<summary>📝 Committable suggestion</summary>
> ‼️ **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.
```suggestion
* Initialize, update, and clone any submodules within a Git repository
🧰 Tools
🪛 markdownlint-cli2 (0.21.0)
[warning] 19-19: Fenced code blocks should be surrounded by blank lines
(MD031, blanks-around-fences)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@README.md` around lines 19 - 21, The fenced code block containing the
submodule command (``` ... git submodule update --init --recursive ... ```)
needs blank lines before and after it to satisfy markdownlint MD031; edit the
README.md list item to ensure there is an empty line immediately above the
opening triple backticks and an empty line immediately below the closing triple
backticks so the fenced block is separated from surrounding list text.
Comment on lines
+72
to
+80
| - |- | ||
| # Build Next.js homepage | ||
| rm -rf docs/out docs/.next | ||
| cd docs | ||
| npm install --no-audit --no-fund | ||
| npm run build | ||
| cd - | ||
| mkdir -p "{{.G_NEXT_OUTPUT_DIR}}" | ||
| rsync -a docs/out/ "{{.G_NEXT_OUTPUT_DIR}}/" |
There was a problem hiding this comment.
Add error handling for directory changes and npm commands.
The cd docs command could fail silently, and npm install/npm run build failures would not stop the task. Consider using set -e or checking exit codes.
🛡️ Suggested fix with error handling
- |-
# Build Next.js homepage
+ set -e
rm -rf docs/out docs/.next
- cd docs
- npm install --no-audit --no-fund
- npm run build
- cd -
+ (
+ cd docs || exit 1
+ npm install --no-audit --no-fund
+ npm run build
+ )
mkdir -p "{{.G_NEXT_OUTPUT_DIR}}"
rsync -a docs/out/ "{{.G_NEXT_OUTPUT_DIR}}/"📝 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.
Suggested change
| - |- | |
| # Build Next.js homepage | |
| rm -rf docs/out docs/.next | |
| cd docs | |
| npm install --no-audit --no-fund | |
| npm run build | |
| cd - | |
| mkdir -p "{{.G_NEXT_OUTPUT_DIR}}" | |
| rsync -a docs/out/ "{{.G_NEXT_OUTPUT_DIR}}/" | |
| - |- | |
| # Build Next.js homepage | |
| set -e | |
| rm -rf docs/out docs/.next | |
| ( | |
| cd docs || exit 1 | |
| npm install --no-audit --no-fund | |
| npm run build | |
| ) | |
| mkdir -p "{{.G_NEXT_OUTPUT_DIR}}" | |
| rsync -a docs/out/ "{{.G_NEXT_OUTPUT_DIR}}/" |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@taskfiles/docs.yaml` around lines 72 - 80, The script block that runs the
Next.js build uses fragile shell steps (cd docs, npm install, npm run build,
rsync) but does not fail fast; add robust error handling by enabling a fail-fast
shell (e.g., set -euo pipefail) at the start of the block or explicitly check
the exit status after critical commands (check the result of cd docs, npm
install, and npm run build) and abort with a clear error if any step fails;
ensure commands referenced (cd docs, npm install --no-audit --no-fund, npm run
build, rsync -a docs/out/ "{{.G_NEXT_OUTPUT_DIR}}/") run only after verifying
previous steps succeeded so the task stops on failure instead of continuing
silently.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR refactors the main YScope docs pages to have a custom typescript home page. We refocussed the main page to a simplified grid of categorized icons which link to key docs pages, resources, guides, references, etc. We focus on CLP and how out other projects interact with CLP. It's designed to be visual cohesive with the yscope.com main page.
Started as PR #52, but to started new PR to properly merge after PR #54 was merged into main.
Checklist
breaking change.
Validation performed
Built and served webpage locally
task docs:buildtask docs:serveSummary by CodeRabbit
Release Notes
New Features
Documentation
Chores