feat(docs): revamp homepage demo + SDD documentation#324
Conversation
- Replace GIF-based DemoShowcase with terminal-style code demos - Add OpenSpec as 5th tab (OpenSpec, Figma, GitHub, Linear, Notion) - Rename section from "One CLI, Four Integrations" to "One CLI, Five Sources" - Add SDD comparison table (ralph-starter vs OpenSpec vs Spec-Kit vs Kiro) - New docs: Spec Driven Development guide, OpenSpec source, spec CLI reference - Add figma, spec, openspec pages to sidebar navigation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
Issue Linking ReminderThis PR doesn't appear to have a linked issue. Consider linking to:
Using If this PR doesn't need an issue, you can ignore this message. |
🔗 Docs PreviewPreview URL: https://feat-sdd-homepage-and-docs.ralph-starter-docs.pages.dev This preview was deployed from the latest commit on this PR. |
Greptile SummaryThis PR revamps the homepage Confidence Score: 5/5Safe to merge — documentation and UI-only changes with a single minor style rule violation. All findings are P2. The only code issue is using docs/src/components/DemoShowcase/index.tsx — minor
|
| Filename | Overview |
|---|---|
| docs/src/components/DemoShowcase/index.tsx | Replaces GIF-based demo with a terminal-style component; uses interface instead of type for the Demo shape (minor rule violation). Dynamic CSS module lookup styles[line_${line.type}] is valid at runtime. Logic and structure are otherwise clean. |
| docs/src/components/DemoShowcase/styles.module.css | Adds terminal UI styles (header dots, body, line-type variants, caption link) and adjusts responsive breakpoints; well-structured with no issues. |
| docs/sidebars.ts | Adds sources/openspec (first in Input Sources), cli/figma, cli/spec, and guides/spec-driven-development — all correctly map to new or existing doc pages. |
| docs/docs/sources/openspec.md | New OpenSpec source documentation; directory structure, all fetch modes, output format, and metadata table are accurate and internally consistent. |
| docs/docs/guides/spec-driven-development.md | New SDD guide with workflow diagram, spec scoring table, comparison table, example spec, and supported formats — well-written and cross-linked correctly. |
| docs/docs/cli/spec.md | New CLI reference for ralph-starter spec; validate/list/summary subcommands, scoring breakdown table, and examples are clear and consistent with the SDD guide. |
Flowchart
%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[DemoShowcase component] --> B{activeTab index}
B --> C[demos array - 5 entries]
C --> D[OpenSpec]
C --> E[Figma]
C --> F[GitHub]
C --> G[Linear]
C --> H[Notion]
D & E & F & G & H --> I[Terminal UI]
I --> I1[terminalHeader - dots + title]
I --> I2[commandLine - prompt + command]
I --> I3[output lines - typed by dim/normal/success/accent/warn]
I --> J[Caption + Link to source docs]
Prompt To Fix All With AI
This is a comment left during a code review.
Path: docs/src/components/DemoShowcase/index.tsx
Line: 5-12
Comment:
**Use `type` instead of `interface` for plain data shapes**
`Demo` is a simple data structure with no inheritance or extension, so it should be declared as a `type` alias per the project's TypeScript convention.
```suggestion
type Demo = {
id: string;
label: string;
command: string;
lines: { text: string; type: 'dim' | 'normal' | 'success' | 'accent' | 'warn' }[];
caption: string;
link: string;
};
```
**Rule Used:** Use `type` by default in TypeScript unless you spe... ([source](https://app.greptile.com/review/custom-context?memory=c862f053-5655-4b41-be69-c840e3c9f280))
**Learnt From**
[cytonic-network/ai-frontend#48](https://github.com/cytonic-network/ai-frontend/pull/48)
How can I resolve this? If you propose a fix, please make it concise.Reviews (1): Last reviewed commit: "feat(docs): revamp homepage demo section..." | Re-trigger Greptile
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: aa8ec621cf
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
![claude[bot]](https://avatars.githubusercontent.com/in/1236702?s=60&v=4){kind=small}
- Add OpenSpec to IntegrationShowcase (first position) - Add OpenSpec "Spec Driven Development" use case card - Add OpenSpec scenario to HeroSection rotation - Add OpenSpec logo to hero integration logos bar - Create openspec-logo.svg icon Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
- Add OpenSpec card to /integrations page with features, setup steps, and docs link - Add OpenSpec "Spec to Implementation" use case to /use-cases page with workflow steps - Update page meta descriptions to include OpenSpec Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: cc5ba7be5c
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
Delete TodoistSource, TodoistOAuthProvider, and all references across src, docs, CLAUDE.md, CONTRIBUTING.md, and marketplace.json. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
✔️ Bundle Size Analysis
Bundle breakdown |
- Add `ralph-starter openspec` interactive wizard that detects/creates openspec/ directories, browses changes with validation scores, scaffolds new changes, and delegates to the run command - Update all homepage CLI examples (HeroSection, DemoShowcase, FeatureSections, QuickStart) to use wizard commands instead of verbose --from flags - Center-align last card on integrations and use-cases pages when odd count Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
- Change `interface Demo` to `type Demo` in DemoShowcase (P2) - Fix `spec validate --path` to handle directory paths, not just files - Fix `spec summary` to read specs/*/spec.md matching validate behavior - Update scoring tables to show partial credit tiers (RFC 2119: 25/10, Depth: 10/5) - Fix invalid file source syntax in SDD guide (--from ./path not --from file path) Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
|
You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard. |
1 participant
Summary
Homepage revamp
New documentation pages (3)
Sidebar updates
openspecto Input Sources (first position)figmaandspecto CLI Referencespec-driven-developmentto GuidesTest plan
pnpm buildin docs/ passes (no broken links)🤖 Generated with Claude Code