Skip to content

Commit f25d2ab

Browse files
ZheruelZheruel
committed
Update docs
1 parent 518a66a commit f25d2ab

File tree

4 files changed

+111
-60
lines changed

4 files changed

+111
-60
lines changed

‎docs-src/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@
1616
<div class="header-content">
1717
<h1 class="logo">
1818
<span class="logo-text">nano-string-utils</span>
19-
<span class="version">v0.18.0</span>
19+
<span class="version">v0.19.0</span>
2020
</h1>
2121
<nav class="nav">
2222
<a href="#playground" class="nav-link active">Playground</a>

‎docs-src/src/migration-guide.ts‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,8 @@ export const migrationMappings: MigrationMapping[] = [
100100
},
101101
{
102102
lodash: "_.words",
103-
nano: "words",
103+
nano: null,
104+
notes: "Use native: str.split(/\\s+/) or str.match(/\\w+/g)",
104105
},
105106

106107
// Native replacements
@@ -235,14 +236,19 @@ export const underscoreMappings: MigrationMapping[] = [
235236
];
236237

237238
export const additionalFeatures = [
239+
{
240+
name: "pascalCase / dotCase / pathCase",
241+
description: "Additional case conversions beyond lodash",
242+
example: "pascalCase('hello-world') // 'HelloWorld'",
243+
},
238244
{
239245
name: "slugify",
240-
description: "URL-safe string generation",
246+
description: "URL-safe string generation with extensive options",
241247
example: "slugify('Hello World!') // 'hello-world'",
242248
},
243249
{
244250
name: "hashString",
245-
description: "Fast string hashing",
251+
description: "Fast 32-bit hash for strings",
246252
example: "hashString('hello') // 99162322",
247253
},
248254
{
@@ -252,39 +258,54 @@ export const additionalFeatures = [
252258
},
253259
{
254260
name: "levenshtein",
255-
description: "Calculate edit distance between strings",
261+
description: "Edit distance calculation",
256262
example: "levenshtein('kitten', 'sitting') // 3",
257263
},
258264
{
259265
name: "stripHtml",
260-
description: "Remove HTML tags from string",
266+
description: "Remove HTML tags safely",
261267
example: "stripHtml('<p>Hello</p>') // 'Hello'",
262268
},
263269
{
264-
name: "isEmail",
265-
description: "Validate email addresses",
266-
example: "isEmail('[email protected]') // true",
270+
name: "sanitize",
271+
description: "Sanitize HTML content",
272+
example: "sanitize('<script>alert(1)</script>') // ''",
267273
},
268274
{
269-
name: "isUrl",
270-
description: "Validate URLs",
271-
example: "isUrl('https://example.com') // true",
275+
name: "redact",
276+
description: "Mask sensitive data (SSN, credit cards)",
277+
example: "redact('SSN: 123-45-6789') // 'SSN: ***-**-****'",
278+
},
279+
{
280+
name: "isEmail / isUrl",
281+
description: "Email and URL validation",
282+
example: "isEmail('[email protected]') // true",
272283
},
273284
{
274285
name: "excerpt",
275-
description: "Create excerpts with ellipsis",
286+
description: "Smart text excerpts",
276287
example: "excerpt('Long text here', 10) // 'Long text...'",
277288
},
278289
{
279290
name: "randomString",
280-
description: "Generate random strings",
291+
description: "Generate random alphanumeric strings",
281292
example: "randomString(8) // 'a7b3x9k2'",
282293
},
283294
{
284295
name: "pluralize/singularize",
285-
description: "Handle pluralization",
296+
description: "English pluralization rules",
286297
example: "pluralize('person') // 'people'",
287298
},
299+
{
300+
name: "extractEntities",
301+
description: "Extract emails, URLs, hashtags, mentions",
302+
example: "extractEntities('Email: [email protected]')",
303+
},
304+
{
305+
name: "detectScript",
306+
description: "Detect Unicode script types",
307+
example: "detectScript('こんにちは') // 'Hiragana'",
308+
},
288309
];
289310

290311
export const bundleSizeComparison = {
@@ -298,7 +319,7 @@ export const bundleSizeComparison = {
298319
string: "N/A (no modular imports)",
299320
},
300321
nanoStringUtils: {
301-
full: "6.5 KB",
322+
full: "~9 KB",
302323
perFunction: "<1 KB",
303324
treeShakeable: true,
304325
},
@@ -322,7 +343,7 @@ import { camelCase, kebabCase } from 'nano-string-utils';
322343
const formatted = camelCase('hello-world');
323344
const slugged = kebabCase('HelloWorld');
324345
325-
// Bundle size reduction: ~24KB → <1KB (96% smaller!)`;
346+
// Bundle size reduction: ~73KB → ~9KB (88% smaller!)`;
326347
}
327348

328349
export function getMigrationSteps() {

‎docs-src/src/migration.ts‎

Lines changed: 69 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,29 @@ export function initMigrationGuide() {
1111
if (!migrationContainer) return;
1212

1313
migrationContainer.innerHTML = `
14-
<div class="migration-nav">
15-
<button class="migration-nav-btn active" data-section="overview">Overview</button>
16-
<button class="migration-nav-btn" data-section="mapping">Function Mapping</button>
17-
<button class="migration-nav-btn" data-section="steps">Migration Steps</button>
18-
</div>
14+
<div class="bundle-size-container">
15+
<h2>Migration Guide</h2>
16+
<p class="intro">
17+
Migrate from lodash or underscore to nano-string-utils and reduce your bundle size by up to 88% while maintaining functionality.
18+
</p>
19+
20+
<div class="migration-nav">
21+
<button class="migration-nav-btn active" data-section="overview">Overview</button>
22+
<button class="migration-nav-btn" data-section="mapping">Function Mapping</button>
23+
<button class="migration-nav-btn" data-section="steps">Migration Steps</button>
24+
</div>
1925
20-
<div class="migration-content">
21-
<section id="overview" class="migration-panel active">
22-
${renderOverview()}
23-
</section>
24-
<section id="mapping" class="migration-panel">
25-
${renderMappingTable()}
26-
</section>
27-
<section id="steps" class="migration-panel">
28-
${renderMigrationSteps()}
29-
</section>
26+
<div class="migration-content">
27+
<section id="overview" class="migration-panel active">
28+
${renderOverview()}
29+
</section>
30+
<section id="mapping" class="migration-panel">
31+
${renderMappingTable()}
32+
</section>
33+
<section id="steps" class="migration-panel">
34+
${renderMigrationSteps()}
35+
</section>
36+
</div>
3037
</div>
3138
`;
3239

@@ -89,29 +96,50 @@ export function initMigrationGuide() {
8996

9097
function renderOverview() {
9198
return `
99+
<div class="bundle-summary">
100+
<div class="summary-stats">
101+
<div class="stat-card">
102+
<div class="stat-value">58</div>
103+
<div class="stat-label">Functions Available</div>
104+
</div>
105+
<div class="stat-card nano-win">
106+
<div class="stat-value">88%</div>
107+
<div class="stat-label">Smaller Bundle</div>
108+
</div>
109+
<div class="stat-card">
110+
<div class="stat-value">0</div>
111+
<div class="stat-label">Dependencies</div>
112+
</div>
113+
<div class="stat-card nano-win">
114+
<div class="stat-value">~9KB</div>
115+
<div class="stat-label">Total Size (brotli)</div>
116+
</div>
117+
</div>
118+
</div>
119+
92120
<div class="comparison-section">
93121
<h2>Why Migrate?</h2>
94122
<div class="size-comparison">
95123
<div class="size-bars">
96124
<div class="size-bar">
97125
<span class="size-label">lodash (full)</span>
98-
<div class="size-bar-fill" style="width: 100%; background: #e74c3c;">
126+
<div class="size-bar-fill" style="width: 100%; background: linear-gradient(90deg, #ef4444, #dc2626);">
99127
<span class="size-value">${
100128
bundleSizeComparison.lodash.full
101129
}</span>
102130
</div>
103131
</div>
104132
<div class="size-bar">
105133
<span class="size-label">lodash (string only)</span>
106-
<div class="size-bar-fill" style="width: 34%; background: #f39c12;">
134+
<div class="size-bar-fill" style="width: 34%; background: linear-gradient(90deg, #f59e0b, #f97316);">
107135
<span class="size-value">${
108136
bundleSizeComparison.lodash.string
109137
}</span>
110138
</div>
111139
</div>
112140
<div class="size-bar">
113141
<span class="size-label">nano-string-utils</span>
114-
<div class="size-bar-fill" style="width: max(9%, 60px); background: #27ae60;">
142+
<div class="size-bar-fill" style="width: max(12%, 80px); background: linear-gradient(90deg, #34d399, #10b981);">
115143
<span class="size-value">${
116144
bundleSizeComparison.nanoStringUtils.full
117145
}</span>
@@ -120,8 +148,8 @@ function renderOverview() {
120148
</div>
121149
122150
<div class="size-summary">
123-
<span class="size-reduction">96% smaller</span>
124-
<span class="size-details">than lodash • Zero dependencies</span>
151+
<span class="size-reduction">88% smaller</span>
152+
<span class="size-details">than lodash • Zero dependencies • Tree-shakeable</span>
125153
</div>
126154
</div>
127155
@@ -158,11 +186,11 @@ function renderMappingTable() {
158186
const mappings = [...migrationMappings];
159187

160188
return `
161-
<h2>Function Mapping Reference</h2>
162-
<p>Find the nano-string-utils equivalent for your lodash/underscore functions:</p>
189+
<h3 style="margin-bottom: 1rem; color: var(--color-text);">Function Mapping Reference</h3>
190+
<p style="color: var(--color-text-secondary); margin-bottom: 2rem;">Find the nano-string-utils equivalent for your lodash/underscore functions:</p>
163191
164-
<div class="mapping-filter">
165-
<input type="text" id="mapping-search" placeholder="Search functions..." />
192+
<div class="bundle-controls" style="margin-bottom: 1.5rem;">
193+
<input type="text" id="mapping-search" placeholder="Search functions..." class="search-input" />
166194
<div class="filter-tags">
167195
<button class="filter-tag active" data-filter="all">All</button>
168196
<button class="filter-tag" data-filter="direct">Direct Replacement</button>
@@ -171,29 +199,29 @@ function renderMappingTable() {
171199
</div>
172200
</div>
173201
174-
<div class="mapping-table-container">
175-
<table class="mapping-table">
202+
<div class="table-container">
203+
<table class="bundle-table">
176204
<thead>
177205
<tr>
178-
<th>lodash/underscore</th>
179-
<th>nano-string-utils</th>
180-
<th>Notes</th>
206+
<th><span class="th-text">lodash/underscore</span></th>
207+
<th><span class="th-text">nano-string-utils</span></th>
208+
<th><span class="th-text">Notes</span></th>
181209
</tr>
182210
</thead>
183211
<tbody>
184212
${mappings
185213
.map(
186214
(m) => `
187215
<tr data-type="${getFilterType(m)}">
188-
<td><code>${m.lodash}</code></td>
189-
<td>
216+
<td class="function-name"><code>${m.lodash}</code></td>
217+
<td class="size-cell">
190218
${
191219
m.nano
192-
? `<code class="highlight-green">${m.nano}</code>`
193-
: '<span class="text-muted">—</span>'
220+
? `<code style="color: var(--color-success); font-weight: 600;">${m.nano}</code>`
221+
: '<span class="no-data">—</span>'
194222
}
195223
</td>
196-
<td>${m.notes || "Direct replacement"}</td>
224+
<td style="color: var(--color-text-secondary); font-size: 0.875rem;">${m.notes || "Direct replacement"}</td>
197225
</tr>
198226
`
199227
)
@@ -208,8 +236,8 @@ function renderMigrationSteps() {
208236
const steps = getMigrationSteps();
209237

210238
return `
211-
<h2>Step-by-Step Migration</h2>
212-
<p>Follow these steps to migrate your project:</p>
239+
<h3 style="margin-bottom: 1rem; color: var(--color-text);">Step-by-Step Migration</h3>
240+
<p style="color: var(--color-text-secondary); margin-bottom: 2rem;">Follow these steps to migrate your project:</p>
213241
214242
<div class="migration-steps">
215243
${steps
@@ -229,20 +257,21 @@ function renderMigrationSteps() {
229257
.join("")}
230258
</div>
231259
232-
<div class="migration-tips">
260+
<div class="footer-note">
233261
<h3>💡 Pro Tips</h3>
234262
<ul>
235263
<li>Start with a single file or module to test the migration</li>
236264
<li>Use your test suite to verify functionality after each change</li>
237265
<li>Consider using the automated script below for large codebases</li>
238266
<li>Check the bundle size improvement with your build tools</li>
267+
<li>Use tree-shaking to ensure only used functions are bundled</li>
239268
</ul>
240269
</div>
241270
242-
<div class="codemod-section">
271+
<div class="footer-note" style="margin-top: 2rem;">
243272
<h3>Automated Migration Script</h3>
244273
<p>For large codebases, use this simple Node.js script to automate common replacements:</p>
245-
<pre><code class="language-javascript">${generateCodemodScript()}</code></pre>
274+
<pre style="background: #0f172a; border: 1px solid rgba(148, 163, 184, 0.1); border-radius: var(--radius); padding: 1.5rem; margin: 1rem 0; overflow-x: auto;"><code class="language-javascript">${generateCodemodScript()}</code></pre>
246275
<button class="btn-secondary" id="copy-codemod">📋 Copy Script</button>
247276
</div>
248277
`;
@@ -256,7 +285,7 @@ function filterMappingTable() {
256285
const searchTerm = searchInput?.value.toLowerCase() || "";
257286
const filterType = (activeFilter as HTMLElement)?.dataset.filter || "all";
258287

259-
const rows = document.querySelectorAll(".mapping-table tbody tr");
288+
const rows = document.querySelectorAll(".bundle-table tbody tr");
260289

261290
rows.forEach((row) => {
262291
const text = (row as HTMLElement).textContent?.toLowerCase() || "";

‎docs-src/src/styles/migration.css‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -294,6 +294,7 @@
294294
font-size: 0.875rem;
295295
font-weight: 500;
296296
transition: var(--transition);
297+
white-space: nowrap;
297298
}
298299

299300
.filter-tag:hover {
@@ -304,9 +305,9 @@
304305
}
305306

306307
.filter-tag.active {
307-
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
308-
color: white;
309-
border-color: transparent;
308+
background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
309+
color: white !important;
310+
border-color: transparent !important;
310311
box-shadow: var(--shadow-md);
311312
}
312313

0 commit comments

Comments
 (0)