Skip to content

Commit dae1b7c

Browse files
ZheruelZheruel
authored
Add API Documentation Generation (#21)
* Add documentation * update jsr
1 parent 2247b40 commit dae1b7c

File tree

19 files changed

+2966
-4
lines changed

19 files changed

+2966
-4
lines changed

‎.github/workflows/docs.yml‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
name: Deploy Documentation
2+
3+
on:
4+
push:
5+
branches: [main]
6+
paths:
7+
- "docs-src/**"
8+
- "src/**"
9+
- ".github/workflows/docs.yml"
10+
workflow_dispatch:
11+
12+
permissions:
13+
contents: write
14+
pages: write
15+
id-token: write
16+
17+
jobs:
18+
deploy:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: "20"
28+
cache: "npm"
29+
30+
- name: Install dependencies (root)
31+
run: npm ci
32+
33+
- name: Build library
34+
run: npm run build
35+
36+
- name: Install dependencies (docs)
37+
working-directory: ./docs-src
38+
run: npm ci
39+
40+
- name: Build documentation site
41+
working-directory: ./docs-src
42+
run: npm run build
43+
44+
- name: Upload artifact
45+
uses: actions/upload-pages-artifact@v3
46+
with:
47+
path: ./docs
48+
49+
- name: Deploy to GitHub Pages
50+
id: deployment
51+
uses: actions/deploy-pages@v4

‎CHANGELOG.md‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,20 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
77

88
## [Unreleased]
99

10+
## [0.10.0] - 2025-09-16
11+
12+
### Added
13+
14+
- **API Documentation Generation** - Comprehensive TypeDoc-powered API documentation
15+
- Added TypeDoc configuration for generating API documentation from JSDoc comments
16+
- Created GitHub Actions workflow for automatic deployment to GitHub Pages
17+
- Added documentation site structure with Vite for future enhancements
18+
- New npm scripts: `docs`, `docs:dev`, `docs:build`, `docs:preview`
19+
- All existing functions have complete JSDoc with descriptions, parameters, returns, and examples
20+
- Documentation automatically deployed at https://zheruel.github.io/nano-string-utils/
21+
- Added README to docs-src directory with documentation maintenance instructions
22+
- Updated CLAUDE.md with documentation generation guidelines for new functions
23+
1024
## [0.9.1] - 2025-09-07
1125

1226
### Documentation
@@ -262,6 +276,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
262276
- 100% test coverage for utility functions
263277
- Modern build tooling with tsup and Vitest
264278

279+
[0.10.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.10.0
280+
[0.9.1]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.9.1
281+
[0.9.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.9.0
282+
[0.8.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.8.0
283+
[0.7.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.7.0
284+
[0.6.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.6.0
285+
[0.5.2]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.5.2
286+
[0.5.1]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.5.1
287+
[0.5.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.5.0
265288
[0.4.1]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.4.1
266289
[0.4.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.4.0
267290
[0.3.0]: https://github.com/Zheruel/nano-string-utils/releases/tag/v0.3.0

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,10 @@ Ultra-lightweight string utilities with zero dependencies. Tree-shakeable, fully
99
[![CI/CD](https://github.com/Zheruel/nano-string-utils/actions/workflows/ci.yml/badge.svg)](https://github.com/Zheruel/nano-string-utils/actions/workflows/ci.yml)
1010
[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
1111

12+
## Documentation
13+
14+
📚 **[View Full API Documentation](https://zheruel.github.io/nano-string-utils/)**
15+
1216
## Features
1317

1418
- 🚀 **Zero dependencies** - No bloat, just pure functions

‎docs-src/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
# Documentation Site
2+
3+
This directory contains the documentation site for nano-string-utils. The site is built with Vite and can be used to preview documentation locally or serve as a landing page alongside the TypeDoc-generated API documentation.
4+
5+
## Structure
6+
7+
- `/src` - Source files for the documentation site
8+
- `/index.html` - Main entry point
9+
- TypeDoc API docs are generated to the `/docs` folder in the root directory
10+
11+
## Commands
12+
13+
```bash
14+
# Development server
15+
npm run docs:dev
16+
17+
# Build documentation site
18+
npm run docs:build
19+
20+
# Preview built site
21+
npm run docs:preview
22+
23+
# Generate TypeDoc API documentation
24+
npm run docs
25+
```
26+
27+
## API Documentation Generation
28+
29+
The API documentation is automatically generated from JSDoc comments in the source code using TypeDoc. When adding new functions or updating existing ones:
30+
31+
1. Ensure all functions have complete JSDoc comments with:
32+
33+
- Description
34+
- `@param` tags for all parameters
35+
- `@returns` tag for return value
36+
- `@example` blocks showing usage
37+
38+
2. Run `npm run docs` to regenerate the API documentation
39+
40+
The TypeDoc output is configured to generate to `/docs` which is deployed to GitHub Pages automatically when changes are pushed to the main branch.

‎docs-src/index.html‎

Lines changed: 200 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,200 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta name="description" content="Interactive documentation and playground for nano-string-utils - Ultra-lightweight string utilities with zero dependencies" />
8+
<title>nano-string-utils - Interactive Playground</title>
9+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/themes/prism-tomorrow.min.css" rel="stylesheet" />
10+
<link rel="stylesheet" href="/src/styles/main.css" />
11+
</head>
12+
<body>
13+
<div id="app">
14+
<header class="header">
15+
<div class="container">
16+
<div class="header-content">
17+
<h1 class="logo">
18+
<span class="logo-text">nano-string-utils</span>
19+
<span class="version">v0.9.1</span>
20+
</h1>
21+
<nav class="nav">
22+
<a href="#playground" class="nav-link active">Playground</a>
23+
<a href="https://github.com/Zheruel/nano-string-utils" class="nav-link" target="_blank">GitHub</a>
24+
<a href="https://www.npmjs.com/package/nano-string-utils" class="nav-link" target="_blank">NPM</a>
25+
<a href="https://jsr.io/@zheruel/nano-string-utils" class="nav-link" target="_blank">JSR</a>
26+
</nav>
27+
<button class="theme-toggle" aria-label="Toggle theme">
28+
<svg class="sun-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
29+
<circle cx="12" cy="12" r="5"></circle>
30+
<line x1="12" y1="1" x2="12" y2="3"></line>
31+
<line x1="12" y1="21" x2="12" y2="23"></line>
32+
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"></line>
33+
<line x1="18.36" y1="18.36" x2="19.78" y2="19.78"></line>
34+
<line x1="1" y1="12" x2="3" y2="12"></line>
35+
<line x1="21" y1="12" x2="23" y2="12"></line>
36+
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"></line>
37+
<line x1="18.36" y1="5.64" x2="19.78" y2="4.22"></line>
38+
</svg>
39+
<svg class="moon-icon" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="display: none;">
40+
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"></path>
41+
</svg>
42+
</button>
43+
</div>
44+
</div>
45+
</header>
46+
47+
<main class="main">
48+
<div class="container">
49+
<section id="playground" class="playground-section">
50+
<div class="playground-layout">
51+
<aside class="function-sidebar">
52+
<div class="search-box">
53+
<input
54+
type="text"
55+
id="function-search"
56+
placeholder="Search functions..."
57+
class="search-input"
58+
/>
59+
</div>
60+
<div class="function-categories">
61+
<div class="category">
62+
<h3 class="category-title">
63+
<span style="opacity: 0.7">🔤</span> Case Conversion
64+
</h3>
65+
<ul class="function-list" data-category="case">
66+
<li class="function-item" data-function="camelCase">camelCase</li>
67+
<li class="function-item" data-function="kebabCase">kebabCase</li>
68+
<li class="function-item" data-function="snakeCase">snakeCase</li>
69+
<li class="function-item" data-function="pascalCase">pascalCase</li>
70+
<li class="function-item" data-function="constantCase">constantCase</li>
71+
<li class="function-item" data-function="dotCase">dotCase</li>
72+
<li class="function-item" data-function="pathCase">pathCase</li>
73+
<li class="function-item" data-function="sentenceCase">sentenceCase</li>
74+
<li class="function-item" data-function="titleCase">titleCase</li>
75+
</ul>
76+
</div>
77+
<div class="category">
78+
<h3 class="category-title">
79+
<span style="opacity: 0.7">✂️</span> String Manipulation
80+
</h3>
81+
<ul class="function-list" data-category="manipulation">
82+
<li class="function-item" data-function="slugify">slugify</li>
83+
<li class="function-item" data-function="truncate">truncate</li>
84+
<li class="function-item" data-function="capitalize">capitalize</li>
85+
<li class="function-item" data-function="reverse">reverse</li>
86+
<li class="function-item" data-function="pad">pad</li>
87+
<li class="function-item" data-function="padStart">padStart</li>
88+
<li class="function-item" data-function="padEnd">padEnd</li>
89+
<li class="function-item" data-function="excerpt">excerpt</li>
90+
<li class="function-item" data-function="stripHtml">stripHtml</li>
91+
<li class="function-item" data-function="randomString">randomString</li>
92+
<li class="function-item" data-function="wordCount">wordCount</li>
93+
</ul>
94+
</div>
95+
<div class="category">
96+
<h3 class="category-title">
97+
<span style="opacity: 0.7">✅</span> Validation
98+
</h3>
99+
<ul class="function-list" data-category="validation">
100+
<li class="function-item" data-function="isEmail">isEmail</li>
101+
<li class="function-item" data-function="isUrl">isUrl</li>
102+
<li class="function-item" data-function="isASCII">isASCII</li>
103+
</ul>
104+
</div>
105+
<div class="category">
106+
<h3 class="category-title">
107+
<span style="opacity: 0.7">⚡</span> Advanced
108+
</h3>
109+
<ul class="function-list" data-category="advanced">
110+
<li class="function-item" data-function="template">template</li>
111+
<li class="function-item" data-function="templateSafe">templateSafe</li>
112+
<li class="function-item" data-function="fuzzyMatch">fuzzyMatch</li>
113+
<li class="function-item" data-function="levenshtein">levenshtein</li>
114+
<li class="function-item" data-function="diff">diff</li>
115+
<li class="function-item" data-function="highlight">highlight</li>
116+
<li class="function-item" data-function="deburr">deburr</li>
117+
<li class="function-item" data-function="escapeHtml">escapeHtml</li>
118+
<li class="function-item" data-function="hashString">hashString</li>
119+
<li class="function-item" data-function="memoize">memoize</li>
120+
</ul>
121+
</div>
122+
<div class="category">
123+
<h3 class="category-title">
124+
<span style="opacity: 0.7">🌍</span> Unicode
125+
</h3>
126+
<ul class="function-list" data-category="unicode">
127+
<li class="function-item" data-function="graphemes">graphemes</li>
128+
<li class="function-item" data-function="codePoints">codePoints</li>
129+
<li class="function-item" data-function="normalizeWhitespace">normalizeWhitespace</li>
130+
<li class="function-item" data-function="removeNonPrintable">removeNonPrintable</li>
131+
<li class="function-item" data-function="toASCII">toASCII</li>
132+
</ul>
133+
</div>
134+
<div class="category">
135+
<h3 class="category-title">
136+
<span style="opacity: 0.7">📝</span> Text Processing
137+
</h3>
138+
<ul class="function-list" data-category="text">
139+
<li class="function-item" data-function="pluralize">pluralize</li>
140+
<li class="function-item" data-function="singularize">singularize</li>
141+
</ul>
142+
</div>
143+
</div>
144+
</aside>
145+
146+
<div class="playground-main">
147+
<div class="function-header">
148+
<h3 id="current-function-name">Select a function</h3>
149+
<div class="function-meta">
150+
<span class="bundle-size" id="bundle-size"></span>
151+
<button class="copy-import" id="copy-import" style="display: none;">
152+
Copy Import
153+
</button>
154+
</div>
155+
</div>
156+
157+
<div class="function-description" id="function-description">
158+
Choose a function from the sidebar to see it in action
159+
</div>
160+
161+
<div class="playground-editor" id="playground-editor" style="display: none;">
162+
<div class="editor-section">
163+
<h4>Input</h4>
164+
<div id="input-fields" class="input-fields"></div>
165+
</div>
166+
167+
<div class="editor-section">
168+
<h4>Code</h4>
169+
<pre class="code-block"><code id="code-preview" class="language-javascript"></code></pre>
170+
</div>
171+
172+
<div class="editor-section">
173+
<h4>Output</h4>
174+
<div class="output-display">
175+
<pre id="output-result" class="output-result"></pre>
176+
</div>
177+
</div>
178+
179+
<div class="editor-section">
180+
<h4>Examples</h4>
181+
<div id="examples-list" class="examples-list"></div>
182+
</div>
183+
</div>
184+
</div>
185+
</div>
186+
</section>
187+
</div>
188+
</main>
189+
190+
<footer class="footer">
191+
<div class="container">
192+
<p>© 2025 nano-string-utils · MIT License · <a href="https://github.com/Zheruel/nano-string-utils">GitHub</a></p>
193+
</div>
194+
</footer>
195+
</div>
196+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/prism.min.js"></script>
197+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/components/prism-javascript.min.js"></script>
198+
<script type="module" src="/src/main.ts"></script>
199+
</body>
200+
</html>

0 commit comments

Comments
 (0)