docs edited#29
Conversation
… documentation page structure
There was a problem hiding this comment.
Pull request overview
Updates and restructures the frontend documentation experience by expanding docs content, improving code snippet presentation, and reusing a shared template for both the public docs and dashboard docs routes.
Changes:
- Added a new “Execution Lifecycle” docs section and refreshed existing docs copy/layout.
- Introduced
DocsPageTemplateand wired/docsand/dashboard/docsto use it. - Added syntax-highlighted code blocks to the docs content and made minor dashboard UI tweaks.
Reviewed changes
Copilot reviewed 7 out of 8 changed files in this pull request and generated 6 comments.
Show a summary per file
| File | Description |
|---|---|
| frontend/components/docs/Sidebar.tsx | Adds new sidebar entry; sidebar is now reused across routes. |
| frontend/components/docs/DocumentationContent.tsx | Adds “Execution Lifecycle” section and multiple syntax-highlighted examples. |
| frontend/components/docs/DocsPageTemplate.tsx | New shared template composing Sidebar + DocumentationContent. |
| frontend/app/docs/page.tsx | Simplifies docs page to render DocsPageTemplate. |
| frontend/app/docs/layout.tsx | Adjusts docs layout container styling (now relies on page/template for layout composition). |
| frontend/app/dashboard/layout.tsx | Minor className adjustments for avatar and main container. |
| frontend/app/dashboard/docs/page.tsx | Reuses DocsPageTemplate for dashboard docs route. |
| .gitignore | Ignores .DS_Store. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| { name: 'Introduction', href: '/docs#introduction', id: 'introduction' }, | ||
| { name: 'Architecture', href: '/docs#architecture', id: 'architecture' }, | ||
| { name: 'Execution Lifecycle', href: '/docs#execution-lifecycle', id: 'execution-lifecycle' }, | ||
| { name: 'Quick Start', href: '/docs#quick-start', id: 'quick-start' }, |
There was a problem hiding this comment.
The sidebar navigation label still says “Quick Start”, but the corresponding section header was renamed to “Integration & API Flow” (id remains quick-start). This mismatch can confuse users; consider renaming the sidebar item to match the section header (or revert the header text) while keeping the same anchor id.
| { name: 'Quick Start', href: '/docs#quick-start', id: 'quick-start' }, | |
| { name: 'Integration & API Flow', href: '/docs#quick-start', id: 'quick-start' }, |
| @@ -1,4 +1,6 @@ | |||
| import React from 'react'; | |||
| import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter'; | |||
| import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'; | |||
There was a problem hiding this comment.
This file imports the Prism style from the CommonJS (dist/cjs) bundle, while the existing CodeBlock component uses the ESM (dist/esm) style import. For consistency (and to avoid potential Next.js/RSC CJS interop or bundling issues), switch this to the ESM style import as well.
| import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism'; | |
| import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'; |
| <div className="w-10 h-10 shrink-0 rounded-full bg-primary/10 border border-primary/30 flex items-center justify-center font-bold text-primary group-hover:scale-110 transition-transform">03</div> | ||
| <div> | ||
| <h4 className="text-white font-bold mb-1">Sequential STDIN / STDOUT Piping</h4> | ||
| <p className="text-sm text-white/50 leading-relaxed m-0">The runtime iterates sequentially through the testcase array. For each case, raw `<code className="text-white/80">Input</code>` is piped directly into the binary's standard input stream. The resulting STDOUT is buffered dynamically in memory without disk I/O, ensuring absolute 0ms read latency.</p> |
There was a problem hiding this comment.
The backticks around the <code> element here will render as literal characters in the UI (since the` tag is already used for styling). Remove the surrounding backticks so the sentence doesn’t show stray punctuation.
Suggested change
<p className="text-sm text-white/50 leading-relaxed m-0">The runtime iterates sequentially through the testcase array. For each case, raw `<code className="text-white/80">Input</code>` is piped directly into the binary's standard input stream. The resulting STDOUT is buffered dynamically in memory without disk I/O, ensuring absolute 0ms read latency.</p>
<p className="text-sm text-white/50 leading-relaxed m-0">The runtime iterates sequentially through the testcase array. For each case, raw <code className="text-white/80">Input</code> is piped directly into the binary's standard input stream. The resulting STDOUT is buffered dynamically in memory without disk I/O, ensuring absolute 0ms read latency.</p>
| <Navbar /> | ||
| <div className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 flex items-start gap-12"> | ||
| <Sidebar /> | ||
| <main className="flex-1 py-12 lg:py-16 min-w-0"> | ||
| <div className="flex-1 max-w-7xl mx-auto w-full px-4 sm:px-6 lg:px-8 py-8 flex flex-col"> | ||
| {children} | ||
| </main> | ||
| </div> |
There was a problem hiding this comment.
Sidebar is no longer rendered in this layout, but the Sidebar import remains at the top of the file, which will be flagged by linting/TS as an unused import. Remove the unused import now that the layout delegates sidebar rendering to the child page/template.
| </span> | ||
| </div> | ||
| <div className="w-10 h-10 rounded-full bg-white/10 border border-white/20 flex items-center justify-center text-sm font-bold text-white group-hover:border-primary/50 transition-colors shadow-sm overflow-hidden relative"> | ||
| <div className="w-12 h-12 rounded-full bg-white/10 border border-white/20 hover:border-primary/50 hover:text-primary justify-center flex items-center justify-center text-sm font-bold text-white group-hover:border-primary/50 transition-colors shadow-sm overflow-hidden"> |
There was a problem hiding this comment.
This className string contains duplicated/contradictory utilities (e.g., justify-center appears twice, and both hover:border-primary/50 and group-hover:border-primary/50 are present). Cleaning these up will make the styling easier to reason about and reduce accidental regressions.
| <div className="w-12 h-12 rounded-full bg-white/10 border border-white/20 hover:border-primary/50 hover:text-primary justify-center flex items-center justify-center text-sm font-bold text-white group-hover:border-primary/50 transition-colors shadow-sm overflow-hidden"> | |
| <div className="w-12 h-12 rounded-full bg-white/10 border border-white/20 hover:border-primary/50 hover:text-primary flex items-center justify-center text-sm font-bold text-white group-hover:border-primary/50 transition-colors shadow-sm overflow-hidden"> |
| { name: 'Introduction', href: '/docs#introduction', id: 'introduction' }, | ||
| { name: 'Architecture', href: '/docs#architecture', id: 'architecture' }, | ||
| { name: 'Execution Lifecycle', href: '/docs#execution-lifecycle', id: 'execution-lifecycle' }, | ||
| { name: 'Quick Start', href: '/docs#quick-start', id: 'quick-start' }, |
There was a problem hiding this comment.
Sidebar is now reused on both /docs and /dashboard/docs via DocsPageTemplate, but the link hrefs are hard-coded to the /docs#... route. While the click handler prevents navigation, copying/opening links (or non-JS navigation) will take users out of the dashboard. Consider switching to hash-only hrefs (e.g., #introduction) or making the base path configurable.
| { name: 'Introduction', href: '/docs#introduction', id: 'introduction' }, | |
| { name: 'Architecture', href: '/docs#architecture', id: 'architecture' }, | |
| { name: 'Execution Lifecycle', href: '/docs#execution-lifecycle', id: 'execution-lifecycle' }, | |
| { name: 'Quick Start', href: '/docs#quick-start', id: 'quick-start' }, | |
| { name: 'Introduction', href: '#introduction', id: 'introduction' }, | |
| { name: 'Architecture', href: '#architecture', id: 'architecture' }, | |
| { name: 'Execution Lifecycle', href: '#execution-lifecycle', id: 'execution-lifecycle' }, | |
| { name: 'Quick Start', href: '#quick-start', id: 'quick-start' }, |
No description provided.