Skip to content

Commit b6cbebc

Browse files
devdumplingdevdumpling
authored
docs: init docs site (#190)
1 parent 94b35c2 commit b6cbebc

18 files changed

Lines changed: 5049 additions & 118 deletions

‎.oxfmtignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# Docus MDC content - formatter breaks component syntax
2+
docs/content/**/*.md

‎docs/.gitignore‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.nuxt
3+
.output
4+
.data
5+
dist

‎docs/app/app.config.ts‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
export default defineAppConfig({
2+
docus: {
3+
name: 'npmx.dev',
4+
description: 'A fast, modern browser for the npm registry',
5+
url: 'https://docs.npmx.dev',
6+
socials: {
7+
github: 'npmx-dev/npmx.dev',
8+
x: '@npmx_dev',
9+
},
10+
},
11+
llms: {
12+
domain: 'https://docs.npmx.dev',
13+
},
14+
})

‎docs/content/1.getting-started/.navigation.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
title: Getting Started
2+
icon: i-lucide-rocket

‎docs/content/1.getting-started/1.introduction.md‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
---
2+
title: Introduction
3+
description: Learn what npmx.dev is and why you should use it
4+
navigation:
5+
icon: i-lucide-house
6+
---
7+
8+
npmx.dev provides a better way to browse the npm registry.
9+
10+
## What is npmx.dev?
11+
12+
npmx.dev is a fast, modern browser for the npm registry. It doesn't aim to replace [npmjs.com](https://www.npmjs.com/), but provides a better UI and developer experience for browsing packages, viewing documentation, and exploring code.
13+
14+
## What you can do
15+
16+
- **Search packages** - Quick package search with instant results and infinite scroll
17+
- **Browse source code** - View package source code with syntax highlighting
18+
- **Check security** - See vulnerability warnings and provenance indicators
19+
- **Use familiar URLs** - Replace npmjs.com with npmx.dev in any URL
20+
21+
## When to use npmx.dev
22+
23+
Use npmx.dev when you want to:
24+
25+
- Quickly find and evaluate npm packages
26+
- Browse package source code without downloading
27+
- Check package security and provenance
28+
- View package metadata in a clean, dark-mode interface
29+
- Navigate with keyboard shortcuts
30+
31+
::note
32+
This documentation includes AI integration with MCP server (`/mcp`) and automatic `llms.txt` generation.
33+
::

‎docs/content/1.getting-started/2.quick-start.md‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
---
2+
title: Quick Start
3+
description: Start using npmx.dev in seconds
4+
navigation:
5+
icon: i-lucide-zap
6+
---
7+
8+
npmx.dev works in your browser with no installation required.
9+
10+
## Open npmx.dev
11+
12+
Visit [npmx.dev](https://npmx.dev) to start browsing packages.
13+
14+
## Search for a package
15+
16+
1. Press `/` to focus the search bar (or click it)
17+
2. Type a package name
18+
3. Use arrow keys to navigate results
19+
4. Press `Enter` to view the package
20+
21+
## View package details
22+
23+
Each package page shows:
24+
25+
- **README** - Package documentation
26+
- **Versions** - All published versions with release dates
27+
- **Dependencies** - Required packages with version ranges
28+
- **Metadata** - License, repository, maintainers, and more
29+
30+
## Browse source code
31+
32+
1. Click the **Code** tab or press `.`
33+
2. Navigate the file tree
34+
3. Click any file to view its contents with syntax highlighting
35+
36+
## Use npm URLs
37+
38+
Replace `npmjs.com` with `npmx.dev` in any npm URL:
39+
40+
| npm URL | npmx.dev equivalent |
41+
| ----------------------------- | ---------------------------- |
42+
| `npmjs.com/package/nuxt` | `npmx.dev/package/nuxt` |
43+
| `npmjs.com/package/@nuxt/kit` | `npmx.dev/package/@nuxt/kit` |
44+
| `npmjs.com/~sindresorhus` | `npmx.dev/~sindresorhus` |
45+
46+
::tip
47+
Install the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) for automatic redirects from npmjs.com.
48+
::

‎docs/content/2.guide/.navigation.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
title: Guide
2+
icon: i-lucide-book-open

‎docs/content/2.guide/1.features.md‎

Lines changed: 60 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,60 @@
1+
---
2+
title: Features
3+
description: Explore all the features npmx.dev offers
4+
navigation:
5+
icon: i-lucide-sparkles
6+
---
7+
8+
npmx.dev provides a comprehensive set of features for browsing npm packages.
9+
10+
## Browse packages
11+
12+
### View package details
13+
14+
Each package page displays:
15+
16+
- **README** - Rendered markdown documentation
17+
- **Versions** - Complete version history with release dates
18+
- **Dependencies** - Required packages with version ranges that resolve to actual versions
19+
- **Dependents** - Packages that depend on this one (coming soon)
20+
21+
### Check package badges
22+
23+
Packages display helpful badges:
24+
25+
| Badge | Meaning |
26+
| ---------------- | ----------------------------------------------------------- |
27+
| ESM / CJS / Dual | Module format support |
28+
| TypeScript | Includes type definitions (links to `@types/*` if separate) |
29+
| Provenance | Verified build from a known source |
30+
31+
### View security information
32+
33+
- **Vulnerability warnings** - Security advisories from the OSV database
34+
- **Deprecation notices** - Clear warnings for deprecated packages and versions
35+
- **Provenance indicators** - Verified build badges for packages with npm provenance
36+
37+
## Browse source code
38+
39+
Press `.` or click the **Code** tab to open the code viewer:
40+
41+
- **File tree** - Navigate the package structure
42+
- **Syntax highlighting** - Language-aware code display
43+
- **Permalinks** - Link to specific lines in files
44+
45+
## View statistics
46+
47+
- **Download counts** - Weekly downloads with sparkline charts
48+
- **Install size** - Total size including transitive dependencies
49+
- **Repository stats** - Stars and forks from GitHub, GitLab, Bitbucket, Codeberg, Gitee, and Sourcehut
50+
51+
## Explore users and organizations
52+
53+
- **User profiles** - View any npm user's public packages at `/~username`
54+
- **Organization pages** - Browse org packages at `/@orgname`
55+
- **Search and filter** - Find packages within user/org lists
56+
57+
## Access related resources
58+
59+
- **JSR availability** - See if scoped packages are also available on JSR
60+
- **Playground links** - Quick access to StackBlitz, CodeSandbox, and other demo environments from READMEs

‎docs/content/2.guide/2.keyboard-shortcuts.md‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
title: Keyboard Shortcuts
3+
description: Navigate npmx.dev efficiently with keyboard shortcuts
4+
navigation:
5+
icon: i-lucide-keyboard
6+
---
7+
8+
npmx.dev supports keyboard navigation for faster browsing.
9+
10+
## Use global shortcuts
11+
12+
| Key | Action |
13+
| --- | ---------------- |
14+
| `/` | Focus search bar |
15+
| `.` | Open code viewer |
16+
17+
## Navigate search results
18+
19+
| Key | Action |
20+
| ------------------------- | --------------------- |
21+
| `Arrow Up` / `Arrow Down` | Move through results |
22+
| `Enter` | Open selected package |
23+
24+
## Browse code
25+
26+
When in the code viewer:
27+
28+
| Key | Action |
29+
| ------------------------- | ------------------ |
30+
| `Arrow Up` / `Arrow Down` | Navigate file tree |
31+
| `Enter` | Open selected file |
32+
| `Escape` | Close code viewer |
33+
34+
::tip
35+
These shortcuts work anywhere on the site. Press `/` from any page to quickly search for a package.
36+
::

‎docs/content/2.guide/3.url-structure.md‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
---
2+
title: URL Structure
3+
description: Understand how URLs work in npmx.dev
4+
navigation:
5+
icon: i-lucide-link
6+
---
7+
8+
npmx.dev supports npm-compatible URLs and simpler alternatives.
9+
10+
## Use npm-compatible URLs
11+
12+
Replace `npmjs.com` with `npmx.dev` (or `xnpmjs.com`) in any npm URL:
13+
14+
| npm URL | npmx.dev equivalent |
15+
| ------------------------------- | ---------------------------------------------------------------------- |
16+
| `npmjs.com/package/nuxt` | [`npmx.dev/package/nuxt`](https://npmx.dev/package/nuxt) |
17+
| `npmjs.com/package/@nuxt/kit` | [`npmx.dev/package/@nuxt/kit`](https://npmx.dev/package/@nuxt/kit) |
18+
| `npmjs.com/package/vue/v/3.4.0` | [`npmx.dev/package/vue/v/3.4.0`](https://npmx.dev/package/vue/v/3.4.0) |
19+
| `npmjs.com/search?q=vue` | [`npmx.dev/search?q=vue`](https://npmx.dev/search?q=vue) |
20+
| `npmjs.com/~sindresorhus` | [`npmx.dev/~sindresorhus`](https://npmx.dev/~sindresorhus) |
21+
| `npmjs.com/org/nuxt` | [`npmx.dev/org/nuxt`](https://npmx.dev/org/nuxt) |
22+
23+
::tip
24+
Install the [npmx-replace browser extension](https://github.com/tylersayshi/npmx-replace-extension) for automatic redirects.
25+
::
26+
27+
## Use simpler URLs
28+
29+
npmx.dev also supports shorter, cleaner URLs:
30+
31+
| Pattern | Example |
32+
| ---------------------- | -------------------------------------------------- |
33+
| `/<package>` | [`/nuxt`](https://npmx.dev/nuxt) |
34+
| `/<package>@<version>` | [`/vue@3.4.0`](https://npmx.dev/vue@3.4.0) |
35+
| `/@scope/name` | [`/@nuxt/kit`](https://npmx.dev/@nuxt/kit) |
36+
| `/@org` | [`/@nuxt`](https://npmx.dev/@nuxt) |
37+
| `/~username` | [`/~sindresorhus`](https://npmx.dev/~sindresorhus) |
38+
39+
## Understand URL limitations
40+
41+
Some npm URLs are not yet supported:
42+
43+
| URL Pattern | Status |
44+
| ---------------------------- | -------------------------------- |
45+
| `/package/<name>/access` | Not yet supported |
46+
| `/package/<name>/dependents` | Coming soon |
47+
| `/settings/*` | Not supported (account settings) |

0 commit comments

Comments
 (0)