diff --git a/website/app/docs/[[...slug]]/page.tsx b/website/app/docs/[[...slug]]/page.tsx index 7754268..665816a 100644 --- a/website/app/docs/[[...slug]]/page.tsx +++ b/website/app/docs/[[...slug]]/page.tsx @@ -7,6 +7,21 @@ import { } from 'fumadocs-ui/page'; import { notFound } from 'next/navigation'; import defaultMdxComponents from 'fumadocs-ui/mdx'; +import { Tab, Tabs } from 'fumadocs-ui/components/tabs'; +import { Callout } from 'fumadocs-ui/components/callout'; +import { Step, Steps } from 'fumadocs-ui/components/steps'; +import { Accordion, Accordions } from 'fumadocs-ui/components/accordion'; + +const mdxComponents = { + ...defaultMdxComponents, + Tab, + Tabs, + Callout, + Step, + Steps, + Accordion, + Accordions, +}; export default async function Page(props: { params: Promise<{ slug?: string[] }>; @@ -22,7 +37,7 @@ export default async function Page(props: { {page.data.title} {page.data.description} - + ); diff --git a/website/app/docs/layout.tsx b/website/app/docs/layout.tsx index 1e58b34..f5e5d2e 100644 --- a/website/app/docs/layout.tsx +++ b/website/app/docs/layout.tsx @@ -27,7 +27,7 @@ export default function Layout({ children }: { children: ReactNode }) { hk - Harness Kit + Harness Kit ), }} diff --git a/website/app/global.css b/website/app/global.css index e6aeae5..fa9fe47 100644 --- a/website/app/global.css +++ b/website/app/global.css @@ -1,40 +1,180 @@ @import 'tailwindcss'; @import 'fumadocs-ui/style.css'; +/* ── Font system ── */ +body { + font-family: var(--font-inter), ui-sans-serif, system-ui, sans-serif; +} + +.font-display { + font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif; +} + +/* ── Light theme ── */ :root { --color-fd-primary: 256 80% 58%; --color-fd-primary-foreground: 0 0% 100%; - --color-fd-background: 0 0% 100%; - --color-fd-foreground: 240 10% 10%; - --color-fd-card: 240 5% 96%; - --color-fd-card-foreground: 240 10% 10%; - --color-fd-muted: 240 5% 92%; - --color-fd-muted-foreground: 240 4% 46%; - --color-fd-border: 240 6% 90%; - --color-fd-accent: 256 60% 95%; + --color-fd-background: 240 20% 99%; + --color-fd-foreground: 230 15% 10%; + --color-fd-card: 240 10% 96%; + --color-fd-card-foreground: 230 15% 10%; + --color-fd-muted: 240 8% 93%; + --color-fd-muted-foreground: 230 8% 42%; + --color-fd-border: 240 8% 88%; + --color-fd-accent: 256 60% 96%; --color-fd-accent-foreground: 256 80% 44%; --color-fd-popover: 0 0% 100%; - --color-fd-popover-foreground: 240 10% 10%; - --color-fd-secondary: 240 5% 94%; - --color-fd-secondary-foreground: 240 10% 10%; + --color-fd-popover-foreground: 230 15% 10%; + --color-fd-secondary: 240 8% 95%; + --color-fd-secondary-foreground: 230 15% 10%; --color-fd-ring: 256 80% 58%; + --fd-layout-width: 1400px; } +/* ── Dark theme — deep, blue-tinted ── */ .dark { - --color-fd-primary: 256 80% 72%; + --color-fd-primary: 256 85% 72%; --color-fd-primary-foreground: 0 0% 100%; - --color-fd-background: 240 10% 4%; + --color-fd-background: 230 15% 4%; --color-fd-foreground: 0 0% 93%; - --color-fd-card: 240 6% 8%; + --color-fd-card: 230 10% 7%; --color-fd-card-foreground: 0 0% 93%; - --color-fd-muted: 240 4% 14%; - --color-fd-muted-foreground: 240 4% 58%; - --color-fd-border: 240 4% 16%; + --color-fd-muted: 230 8% 13%; + --color-fd-muted-foreground: 230 6% 55%; + --color-fd-border: 230 15% 14%; --color-fd-accent: 256 30% 14%; --color-fd-accent-foreground: 256 60% 80%; - --color-fd-popover: 240 6% 6%; + --color-fd-popover: 230 10% 6%; --color-fd-popover-foreground: 0 0% 93%; - --color-fd-secondary: 240 4% 12%; + --color-fd-secondary: 230 8% 10%; --color-fd-secondary-foreground: 0 0% 93%; - --color-fd-ring: 256 80% 72%; + --color-fd-ring: 256 85% 72%; +} + +/* ── Utility classes ── */ +.glow-purple { + box-shadow: 0 0 40px -10px hsla(256, 80%, 60%, 0.3); +} + +.gradient-border { + border: 1px solid transparent; + background-clip: padding-box; + position: relative; +} +.gradient-border::before { + content: ''; + position: absolute; + inset: 0; + border-radius: inherit; + padding: 1px; + background: linear-gradient(164deg, rgba(255,255,255,0.1), rgba(255,255,255,0.02)); + -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); + -webkit-mask-composite: xor; + mask-composite: exclude; + pointer-events: none; +} + +.glass { + backdrop-filter: blur(12px); + background: hsla(230, 15%, 92%, 0.7); +} +.dark .glass { + background: hsla(230, 15%, 8%, 0.7); +} + +/* ── Page fade-in ── */ +@keyframes fadeInUp { + from { + opacity: 0; + transform: translateY(8px); + } + to { + opacity: 1; + transform: translateY(0); + } +} + +.animate-fade-in { + animation: fadeInUp 0.5s ease-out both; +} + +@media (prefers-reduced-motion: reduce) { + .animate-fade-in { + animation: none; + } +} + +/* ── Heading typography ── */ +h1, h2, h3 { + letter-spacing: -0.03em; +} + +/* ── Nav bar gradient border ── */ +.dark [data-fumadocs-nav] { + position: relative; + border-bottom: none; + background: hsla(230, 15%, 4%, 0.85); + backdrop-filter: blur(16px); +} +.dark [data-fumadocs-nav]::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + right: 0; + height: 1px; + background: linear-gradient(90deg, transparent, hsla(256, 85%, 72%, 0.2), transparent); +} + +/* ── Sidebar active item ── */ +.dark [data-fumadocs-sidebar] [aria-current="page"], +.dark [data-fumadocs-sidebar] [data-active="true"] { + border-left: 2px solid hsl(256, 85%, 72%); + background: hsla(256, 30%, 14%, 0.5); + padding-left: 10px; +} + +/* ── TOC active item ── */ +.dark [data-fumadocs-toc] [data-active="true"] { + color: hsl(256, 85%, 72%); +} + +/* ── Code blocks ── */ +.dark pre { + background: hsl(230, 12%, 6%) !important; + border: 1px solid hsla(230, 15%, 20%, 0.3); + border-radius: 0.75rem; +} + +/* ── Blockquotes as callouts ── */ +.dark blockquote { + border-left: 3px solid hsl(256, 85%, 72%); + background: hsla(256, 20%, 12%, 0.3); + border-radius: 0 0.5rem 0.5rem 0; + padding: 0.75rem 1rem; +} + +/* ── Tables ── */ +.dark table { + border: 1px solid hsla(230, 15%, 20%, 0.3); + border-radius: 0.5rem; + overflow: hidden; +} +.dark table thead { + background: hsla(230, 10%, 10%, 0.8); +} +.dark table tbody tr:nth-child(even) { + background: hsla(230, 10%, 8%, 0.5); +} +.dark table td, +.dark table th { + border-color: hsla(230, 15%, 20%, 0.2); +} + +/* ── Docs headings — display font ── */ +.dark [data-fumadocs-body] h1, +.dark [data-fumadocs-body] h2, +.dark [data-fumadocs-body] h3 { + font-family: var(--font-display), ui-sans-serif, system-ui, sans-serif; + letter-spacing: -0.03em; } diff --git a/website/app/layout.tsx b/website/app/layout.tsx index d9c1176..47cbcfb 100644 --- a/website/app/layout.tsx +++ b/website/app/layout.tsx @@ -1,7 +1,18 @@ import './global.css'; import { RootProvider } from 'fumadocs-ui/provider'; +import { Inter, Space_Grotesk } from 'next/font/google'; import type { ReactNode } from 'react'; +const inter = Inter({ + subsets: ['latin'], + variable: '--font-inter', +}); + +const spaceGrotesk = Space_Grotesk({ + subsets: ['latin'], + variable: '--font-display', +}); + export const metadata = { title: { template: '%s | Harness Kit', @@ -12,13 +23,12 @@ export const metadata = { export default function Layout({ children }: { children: ReactNode }) { return ( - - + + ( + +); + +const WorkflowIcon = () => ( + +); + +const ShareIcon = () => ( + +); + const features = [ { title: 'Install once, use everywhere', description: 'Install by name. Plugins follow you across every project without manual setup.', - icon: '→', + icon: , }, { title: 'More than prompts', description: 'Each plugin encodes a complete workflow — what to gather, how to analyze it, what to produce.', - icon: '◈', + icon: , }, { title: 'Share your setup', description: "Export your full setup as a harness.yaml. Share it with a teammate and they're running the same workflows.", - icon: '⇄', + icon: , }, ]; @@ -71,33 +98,29 @@ const heroCards = [ title: 'Getting Started', description: 'Install your first plugin in under a minute.', href: '/docs/getting-started/installation', - gradient: 'from-violet-500/20 to-purple-600/20', }, { title: 'Browse Plugins', description: '7 plugins shipping today. Each packages a proven workflow.', href: '/docs/plugins/overview', - gradient: 'from-purple-500/20 to-indigo-600/20', }, { title: 'Architecture', description: 'How skills, plugins, and the registry fit together.', href: '/docs/concepts/architecture', - gradient: 'from-indigo-500/20 to-blue-600/20', }, { title: 'Cross-Harness', description: 'One config, every tool. Designed for portability across Claude Code, Copilot, Cursor, and more.', href: '/docs/cross-harness/setup-guide', - gradient: 'from-blue-500/20 to-cyan-600/20', }, ]; export default function HomePage() { return ( -
+
{/* Nav */} -
diff --git a/website/content/docs/getting-started/installation.md b/website/content/docs/getting-started/installation.mdx similarity index 80% rename from website/content/docs/getting-started/installation.md rename to website/content/docs/getting-started/installation.mdx index e0b6afc..f3c2665 100644 --- a/website/content/docs/getting-started/installation.md +++ b/website/content/docs/getting-started/installation.mdx @@ -7,8 +7,8 @@ title: Installation The primary distribution channel is [Claude Code](https://claude.ai/claude-code)'s plugin marketplace. For other tools, see [Using with other tools](#using-with-other-tools) below. -## Plugin Marketplace (Claude Code) - + + Add the marketplace once, then install plugins by name: ``` @@ -26,9 +26,9 @@ Repeat for any plugin you want: /plugin install review@harness-kit /plugin install docgen@harness-kit ``` + -## Fallback: Install Script - + If your Claude Code build doesn't support the plugin marketplace yet: ```bash @@ -36,6 +36,8 @@ curl -fsSL https://raw.githubusercontent.com/harnessprotocol/harness-kit/main/in ``` This downloads skill files to `~/.claude/skills/` over HTTPS. It installs **only the skill files** — bundled scripts (like the research index rebuilder) require the full marketplace install. + + ## Verify @@ -46,7 +48,9 @@ After installing, invoke any skill to confirm it loaded: /explain src/main.ts ``` -If the skill responds with its workflow, you're set. + + If the skill responds with its workflow, you're set. + ## Using with other tools @@ -66,4 +70,6 @@ For per-tool setup instructions (Copilot, Cursor, Windsurf, MCP wiring), see [Us | review | `gh` CLI (PR review only) | | docgen | None | -Some plugins require environment variables for optional features. See the [Secrets Management guide](/docs/guides/secrets-management) for how to configure them. + + Some plugins require environment variables for optional features. See the [Secrets Management guide](/docs/guides/secrets-management) for how to configure them. + diff --git a/website/content/docs/getting-started/quick-start.md b/website/content/docs/getting-started/quick-start.mdx similarity index 85% rename from website/content/docs/getting-started/quick-start.md rename to website/content/docs/getting-started/quick-start.mdx index e01e570..e2c846c 100644 --- a/website/content/docs/getting-started/quick-start.md +++ b/website/content/docs/getting-started/quick-start.mdx @@ -7,21 +7,27 @@ title: Quick Start Install a plugin and try it in under a minute. -## 1. Add the marketplace + + +### Add the marketplace ``` /plugin marketplace add harnessprotocol/harness-kit ``` + -## 2. Install a plugin + +### Install a plugin Start with `explain` — it works in any codebase with no setup: ``` /plugin install explain@harness-kit ``` + -## 3. Use it + +### Use it Point it at any file in your project: @@ -30,9 +36,15 @@ Point it at any file in your project: ``` You'll get a structured breakdown: summary, key components, how it connects, patterns, gotchas, and entry points for change. + + ## Try more plugins + + All plugins work out of the box. Install and invoke — that's it. + + ### Research a topic ```