Skip to content

feat: restore Fumadocs source + visual enhancements (OD-734) #7

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
CLCrawford-dev merged 1 commit into from
Feb 18, 2026
Merged

feat: restore Fumadocs source + visual enhancements (OD-734) #7

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
140 changes: 140 additions & 0 deletions apps/docs/app/global.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,143 @@
@import "tailwindcss";
@import "fumadocs-ui/css/neutral.css";
@import "fumadocs-ui/css/preset.css";

/* GitMem brand: emerald/teal accent */
@theme {
--color-fd-primary: hsl(158, 64%, 32%);
--color-fd-primary-foreground: hsl(0, 0%, 98%);
--color-fd-ring: hsl(158, 64%, 42%);
}

.dark {
--color-fd-primary: hsl(158, 64%, 62%);
--color-fd-primary-foreground: hsl(0, 0%, 9%);
--color-fd-ring: hsl(158, 64%, 62%);
}

/* Subtle gradient in dark mode like ocean preset */
.dark body {
background-image: linear-gradient(
rgba(16, 185, 129, 0.08),
transparent 20rem,
transparent
);
background-repeat: no-repeat;
}

/* Hero section styles for docs landing */
.gitmem-hero {
text-align: center;
padding: 2rem 0 3rem;
}

.gitmem-hero h1 {
font-size: 2.5rem;
font-weight: 800;
letter-spacing: -0.025em;
margin-bottom: 0.75rem;
}

.gitmem-hero p {
font-size: 1.125rem;
max-width: 36rem;
margin: 0 auto;
opacity: 0.8;
}

.gitmem-hero .hero-cta {
display: flex;
gap: 0.75rem;
justify-content: center;
margin-top: 1.5rem;
flex-wrap: wrap;
}

.gitmem-hero .hero-cta a {
display: inline-flex;
align-items: center;
padding: 0.5rem 1.25rem;
border-radius: 0.5rem;
font-weight: 600;
font-size: 0.875rem;
transition: all 0.15s;
text-decoration: none;
}

.gitmem-hero .hero-cta a.primary {
background: hsl(158, 64%, 32%);
color: white;
}

.gitmem-hero .hero-cta a.primary:hover {
background: hsl(158, 64%, 28%);
}

.dark .gitmem-hero .hero-cta a.primary {
background: hsl(158, 64%, 52%);
color: hsl(0, 0%, 9%);
}

.dark .gitmem-hero .hero-cta a.primary:hover {
background: hsl(158, 64%, 58%);
}

.gitmem-hero .hero-cta a.secondary {
border: 1px solid hsl(0, 0%, 80%);
color: inherit;
}

.gitmem-hero .hero-cta a.secondary:hover {
background: hsl(0, 0%, 96%);
}

.dark .gitmem-hero .hero-cta a.secondary {
border-color: hsl(0, 0%, 25%);
}

.dark .gitmem-hero .hero-cta a.secondary:hover {
background: hsl(0, 0%, 15%);
}

/* Memory loop diagram */
.memory-loop {
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
margin: 1.5rem auto;
font-size: 0.875rem;
font-weight: 600;
flex-wrap: wrap;
}

.memory-loop .step {
padding: 0.375rem 0.75rem;
border-radius: 0.375rem;
background: hsl(158, 64%, 92%);
color: hsl(158, 64%, 22%);
}

.dark .memory-loop .step {
background: hsla(158, 64%, 30%, 0.3);
color: hsl(158, 64%, 72%);
}

.memory-loop .arrow {
color: hsl(0, 0%, 60%);
font-weight: 400;
}

/* Quick install block emphasis */
.install-block {
margin: 1.5rem 0;
padding: 1.5rem;
border-radius: 0.75rem;
border: 1px solid hsl(158, 64%, 80%);
background: hsl(158, 64%, 97%);
}

.dark .install-block {
border-color: hsla(158, 64%, 40%, 0.3);
background: hsla(158, 64%, 15%, 0.15);
}
130 changes: 111 additions & 19 deletions apps/docs/content/docs/getting-started/installation.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,54 @@
---
title: Installation
description: Install GitMem via npx, global install, or MCP configuration.
description: Install GitMem via the init wizard, manual MCP config, or global install.
---

import { Tabs, Tab } from 'fumadocs-ui/components/tabs'
import { Steps, Step } from 'fumadocs-ui/components/steps'
import { Callout } from 'fumadocs-ui/components/callout'
import { Files, File, Folder } from 'fumadocs-ui/components/files'
import { Accordions, Accordion } from 'fumadocs-ui/components/accordion'

# Installation

## Option 1: Init Wizard (Recommended)
<Tabs items={["Init Wizard (Recommended)", "Manual MCP Config", "Global Install"]}>
<Tab value="Init Wizard (Recommended)">

## Init Wizard

The recommended way to install GitMem. One command, interactive setup, safe to re-run.

```bash
cd your-project
npx gitmem init
```

The interactive wizard walks you through 6 steps:

1. **Memory Store** — Creates `.gitmem/` with 12 starter scars
2. **MCP Server** — Adds gitmem to `.mcp.json`
3. **Project Instructions** — Appends memory protocols to `CLAUDE.md`
4. **Tool Permissions** — Adds `mcp__gitmem__*` to `.claude/settings.json`
5. **Lifecycle Hooks** — Merges session/recall hooks (preserves your existing hooks)
6. **Gitignore** — Adds `.gitmem/` to `.gitignore`
<Steps>
<Step>
### Memory Store
Creates `.gitmem/` directory with 12 starter scars covering common mistakes.
</Step>
<Step>
### MCP Server
Adds gitmem to `.mcp.json` so your AI client can discover it.
</Step>
<Step>
### Project Instructions
Appends memory protocols to `CLAUDE.md` (or your client's instruction file).
</Step>
<Step>
### Tool Permissions
Adds `mcp__gitmem__*` to `.claude/settings.json` so tools work without manual approval.
</Step>
<Step>
### Lifecycle Hooks
Merges session start and recall hooks. Preserves your existing hooks.
</Step>
<Step>
### Gitignore
Adds `.gitmem/` to `.gitignore` — memory data stays local.
</Step>
</Steps>

### Flags

Expand All @@ -34,9 +63,28 @@ npx gitmem init --dry-run
npx gitmem init --project my-app
```

### Idempotent

<Callout type="info" title="Idempotent">
Re-running `npx gitmem init` is safe — completed steps are skipped with "Already configured."
</Callout>

### What Gets Created

<Files>
<Folder name="your-project" defaultOpen>
<Folder name=".gitmem" defaultOpen>
<Folder name="scars">
<File name="starter-scars.json" />
</Folder>
<File name="active-sessions.json" />
</Folder>
<Folder name=".claude">
<File name="settings.json" />
</Folder>
<File name=".mcp.json" />
<File name="CLAUDE.md" />
<File name=".gitignore" />
</Folder>
</Files>

### Uninstall

Expand All @@ -51,17 +99,22 @@ Cleanly reverses everything init did. Your `.gitmem/` data is preserved by defau
npx gitmem uninstall --all
```

## Option 2: MCP Server Only
</Tab>
<Tab value="Manual MCP Config">

## Manual MCP Configuration

If you want to configure the MCP server manually without the init wizard:
If you want to configure the MCP server without the init wizard.

### Claude Code
<Tabs items={["Claude Code", "Claude Desktop", "Cursor"]}>
<Tab value="Claude Code">

```bash
claude mcp add gitmem -- npx -y gitmem-mcp
```

### Claude Desktop
</Tab>
<Tab value="Claude Desktop">

Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:

Expand All @@ -76,9 +129,12 @@ Add to `~/Library/Application Support/Claude/claude_desktop_config.json`:
}
```

Restart Claude Desktop after saving.
<Callout type="warn">
Restart Claude Desktop after saving the config file.
</Callout>

### Cursor
</Tab>
<Tab value="Cursor">

Add to `.cursor/mcp.json` in your project:

Expand All @@ -93,7 +149,13 @@ Add to `.cursor/mcp.json` in your project:
}
```

## Option 3: Global Install
</Tab>
</Tabs>

</Tab>
<Tab value="Global Install">

## Global Install

```bash
npm install -g gitmem-mcp
Expand All @@ -111,6 +173,15 @@ Then reference the global binary in your MCP config:
}
```

<Callout type="info">
Global install avoids the `npx` startup delay on each session. Useful for heavy users.
</Callout>

</Tab>
</Tabs>

---

## Verify Installation

After setup, ask your AI agent:
Expand All @@ -119,6 +190,10 @@ After setup, ask your AI agent:

You should see a list of available commands with your current tier and tool count.

<Callout type="success" title="Working correctly?">
If `gitmem-help` returns a command list showing **23 tools (free tier)** or **29 tools (pro tier)**, you're good to go. Head to [Your First Session](/docs/getting-started/first-session) next.
</Callout>

## Environment Variables

| Variable | Default | Purpose |
Expand All @@ -127,3 +202,20 @@ You should see a list of available commands with your current tier and tool coun
| `GITMEM_DEFAULT_PROJECT` | `default` | Project namespace for scoping |

See [Configuration](/docs/getting-started/configuration) for full details.

## Troubleshooting

<Accordions type="single">
<Accordion title="npx gitmem init hangs or fails">
Ensure Node.js 18+ is installed (`node --version`). If behind a corporate proxy, try `npm install -g gitmem-mcp` first, then use `gitmem init` without npx.
</Accordion>
<Accordion title="Agent can't find gitmem tools">
Check that `.mcp.json` exists in your project root and contains the gitmem server entry. For Claude Desktop, verify the config path matches your OS. Restart the client after config changes.
</Accordion>
<Accordion title="Permission errors on tool calls">
Run `npx gitmem init` to add tool permissions to `.claude/settings.json`, or manually add `mcp__gitmem__*` to the `allow` array.
</Accordion>
<Accordion title="Starter scars show wrong age">
Starter scars use fixed creation dates. This is cosmetic — the scars function correctly regardless of displayed age.
</Accordion>
</Accordions>
Loading