@knowcode/doc-builder 1.5.12 β 1.5.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +31 -0
- package/assets/css/notion-style.css +32 -0
- package/doc-builder.config.js +2 -1
- package/html/README.html +26 -24
- package/html/css/notion-style.css +32 -0
- package/html/documentation-index.html +23 -9
- package/html/guides/authentication-guide.html +20 -18
- package/html/guides/claude-workflow-guide.html +25 -23
- package/html/guides/documentation-standards.html +22 -20
- package/html/guides/google-site-verification-guide.html +7 -5
- package/html/guides/phosphor-icons-guide.html +487 -0
- package/html/guides/seo-guide.html +11 -9
- package/html/guides/seo-optimization-guide.html +40 -38
- package/html/guides/troubleshooting-guide.html +40 -28
- package/html/index.html +26 -24
- package/html/sitemap.xml +21 -15
- package/html/vercel-cli-setup-guide.html +115 -174
- package/html/vercel-first-time-setup-guide.html +135 -217
- package/lib/config.js +8 -2
- package/lib/core-builder.js +7 -2
- package/lib/emoji-mapper.js +267 -0
- package/package.json +1 -1
|
@@ -0,0 +1,487 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<meta name="description" content="Generated: 2025-07-22 11:00 UTC">
|
|
7
|
+
<title>Phosphor Icons Integration Guide | Doc Builder</title>
|
|
8
|
+
|
|
9
|
+
<meta name="author" content="Lindsay Smith">
|
|
10
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, icon, icons">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html">
|
|
13
|
+
|
|
14
|
+
<!-- Open Graph / Facebook -->
|
|
15
|
+
<meta property="og:type" content="article">
|
|
16
|
+
<meta property="og:url" content="https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html">
|
|
17
|
+
<meta property="og:title" content="Phosphor Icons Integration Guide | Doc Builder">
|
|
18
|
+
<meta property="og:description" content="Generated: 2025-07-22 11:00 UTC">
|
|
19
|
+
<meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
20
|
+
<meta property="og:site_name" content="Doc Builder">
|
|
21
|
+
<meta property="og:locale" content="en_US">
|
|
22
|
+
|
|
23
|
+
<!-- Twitter Card -->
|
|
24
|
+
<meta name="twitter:card" content="summary_large_image">
|
|
25
|
+
<meta name="twitter:site" content="@planbbackups">
|
|
26
|
+
<meta name="twitter:creator" content="@planbbackups">
|
|
27
|
+
<meta name="twitter:title" content="Phosphor Icons Integration Guide | Doc Builder">
|
|
28
|
+
<meta name="twitter:description" content="Generated: 2025-07-22 11:00 UTC">
|
|
29
|
+
<meta name="twitter:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
30
|
+
|
|
31
|
+
<!-- Custom Meta Tags -->
|
|
32
|
+
<meta name="google-site-verification" content="FtzcDTf5BQ9K5EfnGazQkgU2U4FiN3ITzM7gHwqUAqQ">
|
|
33
|
+
|
|
34
|
+
<!-- Fonts -->
|
|
35
|
+
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
36
|
+
|
|
37
|
+
<!-- Icons -->
|
|
38
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
39
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
|
|
40
|
+
|
|
41
|
+
<!-- Mermaid -->
|
|
42
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
43
|
+
|
|
44
|
+
<!-- Styles -->
|
|
45
|
+
<link rel="stylesheet" href="/css/notion-style.css">
|
|
46
|
+
|
|
47
|
+
<!-- Favicon -->
|
|
48
|
+
<link rel="icon" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>π</text></svg>">
|
|
49
|
+
|
|
50
|
+
<script type="application/ld+json">
|
|
51
|
+
{
|
|
52
|
+
"@context": "https://schema.org",
|
|
53
|
+
"@type": "TechArticle",
|
|
54
|
+
"headline": "Phosphor Icons Integration Guide",
|
|
55
|
+
"description": "Generated: 2025-07-22 11:00 UTC",
|
|
56
|
+
"author": {
|
|
57
|
+
"@type": "Person",
|
|
58
|
+
"name": "Lindsay Smith"
|
|
59
|
+
},
|
|
60
|
+
"publisher": {
|
|
61
|
+
"@type": "Organization",
|
|
62
|
+
"name": "Knowcode Ltd",
|
|
63
|
+
"url": "https://knowcode.tech"
|
|
64
|
+
},
|
|
65
|
+
"datePublished": "2025-07-22T11:08:52.127Z",
|
|
66
|
+
"dateModified": "2025-07-22T11:08:52.127Z",
|
|
67
|
+
"mainEntityOfPage": {
|
|
68
|
+
"@type": "WebPage",
|
|
69
|
+
"@id": "https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html"
|
|
70
|
+
},
|
|
71
|
+
"breadcrumb": {
|
|
72
|
+
"@type": "BreadcrumbList",
|
|
73
|
+
"itemListElement": [
|
|
74
|
+
{
|
|
75
|
+
"@type": "ListItem",
|
|
76
|
+
"position": 1,
|
|
77
|
+
"name": "Doc Builder",
|
|
78
|
+
"item": "https://doc-builder-delta.vercel.app"
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
"@type": "ListItem",
|
|
82
|
+
"position": 2,
|
|
83
|
+
"name": "Guides",
|
|
84
|
+
"item": "https://doc-builder-delta.vercel.app/guides/"
|
|
85
|
+
},
|
|
86
|
+
{
|
|
87
|
+
"@type": "ListItem",
|
|
88
|
+
"position": 3,
|
|
89
|
+
"name": "Phosphor Icons Guide",
|
|
90
|
+
"item": "https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html"
|
|
91
|
+
}
|
|
92
|
+
]
|
|
93
|
+
}
|
|
94
|
+
}
|
|
95
|
+
</script>
|
|
96
|
+
</head>
|
|
97
|
+
<body>
|
|
98
|
+
<!-- Header -->
|
|
99
|
+
<header class="header">
|
|
100
|
+
<div class="header-content">
|
|
101
|
+
<a href="/index.html" class="logo">Doc Builder</a>
|
|
102
|
+
|
|
103
|
+
<div class="header-actions">
|
|
104
|
+
<div class="deployment-info">
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.13">Last updated: Jul 22, 2025, 11:08 AM UTC</span>
|
|
106
|
+
</div>
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
111
|
+
<i class="fas fa-moon"></i>
|
|
112
|
+
</button>
|
|
113
|
+
|
|
114
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
115
|
+
<i class="fas fa-bars"></i>
|
|
116
|
+
</button>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</header>
|
|
120
|
+
|
|
121
|
+
<!-- Preview Banner -->
|
|
122
|
+
<div id="preview-banner" class="preview-banner">
|
|
123
|
+
<div class="banner-content">
|
|
124
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
125
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
126
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
127
|
+
<i class="fas fa-times"></i>
|
|
128
|
+
</button>
|
|
129
|
+
</div>
|
|
130
|
+
</div>
|
|
131
|
+
|
|
132
|
+
<!-- Breadcrumbs -->
|
|
133
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
134
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
135
|
+
</nav>
|
|
136
|
+
|
|
137
|
+
<!-- Main Content -->
|
|
138
|
+
<div class="main-wrapper">
|
|
139
|
+
<!-- Sidebar -->
|
|
140
|
+
<aside class="sidebar">
|
|
141
|
+
<div class="sidebar-header">
|
|
142
|
+
<div class="filter-box">
|
|
143
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
144
|
+
<i class="fas fa-search filter-icon"></i>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
<nav class="navigation">
|
|
148
|
+
|
|
149
|
+
<div class="nav-section" data-level="0">
|
|
150
|
+
<a class="nav-title" href="/README.html" >
|
|
151
|
+
<i class="fas fa-home"></i> Documentation
|
|
152
|
+
</a>
|
|
153
|
+
<div class="nav-content" >
|
|
154
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
155
|
+
<a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
|
|
156
|
+
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
157
|
+
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the streamlined Vercel deployment process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
158
|
+
<div class="nav-section" data-level="1">
|
|
159
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
160
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
161
|
+
</a>
|
|
162
|
+
<div class="nav-content" id="nav-guides-1">
|
|
163
|
+
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="This guide explains how to configure and use the built-in authentication feature in @knowcode/doc-builder to protect your documentation with basic..."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
164
|
+
<a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
165
|
+
<a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
|
|
166
|
+
<a href="/guides/google-site-verification-guide.html" class="nav-item" data-tooltip="Google Search Console verification allows you to: Monitor your site's performance in Google Search Submit sitemaps for better indexing View search..."><i class="fas fa-file-alt"></i> Google Site Verification Guide</a>
|
|
167
|
+
<a href="/guides/phosphor-icons-guide.html" class="nav-item active" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
|
|
168
|
+
<a href="/guides/seo-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
|
|
169
|
+
<a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
|
|
170
|
+
<a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
|
|
171
|
+
</nav>
|
|
172
|
+
<div class="resize-handle"></div>
|
|
173
|
+
</aside>
|
|
174
|
+
|
|
175
|
+
<!-- Content Area -->
|
|
176
|
+
<main class="content">
|
|
177
|
+
<div class="content-inner">
|
|
178
|
+
<h1>Phosphor Icons Integration Guide</h1>
|
|
179
|
+
<p><strong>Generated</strong>: 2025-07-22 11:00 UTC<br><strong>Status</strong>: Complete<br><strong>Verified</strong>: <i class="ph ph-check-circle" aria-label="checked"></i></p>
|
|
180
|
+
<h2>Overview</h2>
|
|
181
|
+
<p>@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML. This provides professional, consistent icon rendering across all platforms while keeping your markdown files readable with familiar emojis.</p>
|
|
182
|
+
<h2>How It Works</h2>
|
|
183
|
+
<h3>Automatic Conversion</h3>
|
|
184
|
+
<p>When you write emojis in your markdown:</p>
|
|
185
|
+
<pre><code class="language-markdown"><i class="ph ph-check-circle" aria-label="checked"></i> Task completed
|
|
186
|
+
<i class="ph ph-x-circle" aria-label="error"></i> Issue found
|
|
187
|
+
<i class="ph ph-rocket-launch" aria-label="launch"></i> Launching feature
|
|
188
|
+
</code></pre>
|
|
189
|
+
<p>They are automatically converted to Phosphor icons in HTML:</p>
|
|
190
|
+
<ul>
|
|
191
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> β Check circle icon</li>
|
|
192
|
+
<li><i class="ph ph-x-circle" aria-label="error"></i> β X circle icon </li>
|
|
193
|
+
<li><i class="ph ph-rocket-launch" aria-label="launch"></i> β Rocket launch icon</li>
|
|
194
|
+
</ul>
|
|
195
|
+
<h3>Benefits</h3>
|
|
196
|
+
<ul>
|
|
197
|
+
<li><strong>Professional appearance</strong> - Consistent icon style across your documentation</li>
|
|
198
|
+
<li><strong>Better performance</strong> - Icons load as web fonts, not Unicode characters</li>
|
|
199
|
+
<li><strong>Cross-platform consistency</strong> - Same appearance on all devices</li>
|
|
200
|
+
<li><strong>Accessibility</strong> - All icons include proper aria-labels</li>
|
|
201
|
+
<li><strong>No source changes needed</strong> - Keep using emojis in your markdown</li>
|
|
202
|
+
</ul>
|
|
203
|
+
<h2>Configuration</h2>
|
|
204
|
+
<p>Enable Phosphor Icons in your <code>doc-builder.config.js</code>:</p>
|
|
205
|
+
<pre><code class="language-javascript">module.exports = {
|
|
206
|
+
features: {
|
|
207
|
+
phosphorIcons: true, // Enable/disable icon conversion
|
|
208
|
+
phosphorWeight: 'regular', // Icon style: thin, light, regular, bold, fill, duotone
|
|
209
|
+
phosphorSize: '1.2em' // Icon size relative to text
|
|
210
|
+
}
|
|
211
|
+
};
|
|
212
|
+
</code></pre>
|
|
213
|
+
<h3>Icon Weights</h3>
|
|
214
|
+
<p>Phosphor offers different visual weights:</p>
|
|
215
|
+
<ul>
|
|
216
|
+
<li><strong>thin</strong> - Delicate, minimal style</li>
|
|
217
|
+
<li><strong>light</strong> - Subtle, refined appearance</li>
|
|
218
|
+
<li><strong>regular</strong> - Balanced, default weight (recommended)</li>
|
|
219
|
+
<li><strong>bold</strong> - Strong, prominent style</li>
|
|
220
|
+
<li><strong>fill</strong> - Solid filled icons</li>
|
|
221
|
+
<li><strong>duotone</strong> - Two-tone style with accent color</li>
|
|
222
|
+
</ul>
|
|
223
|
+
<h2>Supported Emoji Mappings</h2>
|
|
224
|
+
<h3>Status & Validation</h3>
|
|
225
|
+
<table>
|
|
226
|
+
<thead>
|
|
227
|
+
<tr>
|
|
228
|
+
<th>Emoji</th>
|
|
229
|
+
<th>Icon</th>
|
|
230
|
+
<th>Description</th>
|
|
231
|
+
</tr>
|
|
232
|
+
</thead>
|
|
233
|
+
<tbody><tr>
|
|
234
|
+
<td><i class="ph ph-check-circle" aria-label="checked"></i></td>
|
|
235
|
+
<td>Check circle</td>
|
|
236
|
+
<td>Success, completed, verified</td>
|
|
237
|
+
</tr>
|
|
238
|
+
<tr>
|
|
239
|
+
<td><i class="ph ph-x-circle" aria-label="error"></i></td>
|
|
240
|
+
<td>X circle</td>
|
|
241
|
+
<td>Error, failed, incorrect</td>
|
|
242
|
+
</tr>
|
|
243
|
+
<tr>
|
|
244
|
+
<td><i class="ph ph-question" aria-label="question"></i></td>
|
|
245
|
+
<td>Question mark</td>
|
|
246
|
+
<td>Unknown, uncertain</td>
|
|
247
|
+
</tr>
|
|
248
|
+
<tr>
|
|
249
|
+
<td><i class="ph ph-warning-circle" aria-label="warning"></i></td>
|
|
250
|
+
<td>Warning circle</td>
|
|
251
|
+
<td>Caution, important note</td>
|
|
252
|
+
</tr>
|
|
253
|
+
<tr>
|
|
254
|
+
<td><i class="ph ph-prohibit-inset" aria-label="not allowed"></i></td>
|
|
255
|
+
<td>Prohibit</td>
|
|
256
|
+
<td>Not allowed, forbidden</td>
|
|
257
|
+
</tr>
|
|
258
|
+
</tbody></table>
|
|
259
|
+
<h3>Development & Tech</h3>
|
|
260
|
+
<table>
|
|
261
|
+
<thead>
|
|
262
|
+
<tr>
|
|
263
|
+
<th>Emoji</th>
|
|
264
|
+
<th>Icon</th>
|
|
265
|
+
<th>Description</th>
|
|
266
|
+
</tr>
|
|
267
|
+
</thead>
|
|
268
|
+
<tbody><tr>
|
|
269
|
+
<td><i class="ph ph-laptop" aria-label="laptop"></i></td>
|
|
270
|
+
<td>Laptop</td>
|
|
271
|
+
<td>Development, coding</td>
|
|
272
|
+
</tr>
|
|
273
|
+
<tr>
|
|
274
|
+
<td><i class="ph ph-wrench" aria-label="settings"></i></td>
|
|
275
|
+
<td>Wrench</td>
|
|
276
|
+
<td>Configuration, settings</td>
|
|
277
|
+
</tr>
|
|
278
|
+
<tr>
|
|
279
|
+
<td><i class="ph ph-bug" aria-label="bug"></i></td>
|
|
280
|
+
<td>Bug</td>
|
|
281
|
+
<td>Issues, debugging</td>
|
|
282
|
+
</tr>
|
|
283
|
+
<tr>
|
|
284
|
+
<td><i class="ph ph-rocket-launch" aria-label="launch"></i></td>
|
|
285
|
+
<td>Rocket</td>
|
|
286
|
+
<td>Launch, deploy, release</td>
|
|
287
|
+
</tr>
|
|
288
|
+
<tr>
|
|
289
|
+
<td><i class="ph ph-lightning" aria-label="fast"></i></td>
|
|
290
|
+
<td>Lightning</td>
|
|
291
|
+
<td>Performance, speed</td>
|
|
292
|
+
</tr>
|
|
293
|
+
</tbody></table>
|
|
294
|
+
<h3>Documents & Content</h3>
|
|
295
|
+
<table>
|
|
296
|
+
<thead>
|
|
297
|
+
<tr>
|
|
298
|
+
<th>Emoji</th>
|
|
299
|
+
<th>Icon</th>
|
|
300
|
+
<th>Description</th>
|
|
301
|
+
</tr>
|
|
302
|
+
</thead>
|
|
303
|
+
<tbody><tr>
|
|
304
|
+
<td><i class="ph ph-note-pencil" aria-label="edit"></i></td>
|
|
305
|
+
<td>Note pencil</td>
|
|
306
|
+
<td>Edit, write</td>
|
|
307
|
+
</tr>
|
|
308
|
+
<tr>
|
|
309
|
+
<td><i class="ph ph-books" aria-label="documentation"></i></td>
|
|
310
|
+
<td>Books</td>
|
|
311
|
+
<td>Documentation, guides</td>
|
|
312
|
+
</tr>
|
|
313
|
+
<tr>
|
|
314
|
+
<td><i class="ph ph-folder" aria-label="folder"></i></td>
|
|
315
|
+
<td>Folder</td>
|
|
316
|
+
<td>Directory, category</td>
|
|
317
|
+
</tr>
|
|
318
|
+
<tr>
|
|
319
|
+
<td><i class="ph ph-link" aria-label="link"></i></td>
|
|
320
|
+
<td>Link</td>
|
|
321
|
+
<td>URL, connection</td>
|
|
322
|
+
</tr>
|
|
323
|
+
</tbody></table>
|
|
324
|
+
<h3>Communication</h3>
|
|
325
|
+
<table>
|
|
326
|
+
<thead>
|
|
327
|
+
<tr>
|
|
328
|
+
<th>Emoji</th>
|
|
329
|
+
<th>Icon</th>
|
|
330
|
+
<th>Description</th>
|
|
331
|
+
</tr>
|
|
332
|
+
</thead>
|
|
333
|
+
<tbody><tr>
|
|
334
|
+
<td><i class="ph ph-chat-circle" aria-label="chat"></i></td>
|
|
335
|
+
<td>Chat circle</td>
|
|
336
|
+
<td>Comments, discussion</td>
|
|
337
|
+
</tr>
|
|
338
|
+
<tr>
|
|
339
|
+
<td><i class="ph ph-envelope" aria-label="email"></i></td>
|
|
340
|
+
<td>Envelope</td>
|
|
341
|
+
<td>Email, message</td>
|
|
342
|
+
</tr>
|
|
343
|
+
<tr>
|
|
344
|
+
<td><i class="ph ph-bell" aria-label="notification"></i></td>
|
|
345
|
+
<td>Bell</td>
|
|
346
|
+
<td>Notification, alert</td>
|
|
347
|
+
</tr>
|
|
348
|
+
</tbody></table>
|
|
349
|
+
<h3>Complete Mapping</h3>
|
|
350
|
+
<p>The system supports 200+ emoji-to-icon mappings covering:</p>
|
|
351
|
+
<ul>
|
|
352
|
+
<li>Status indicators</li>
|
|
353
|
+
<li>Development tools</li>
|
|
354
|
+
<li>File types</li>
|
|
355
|
+
<li>Actions</li>
|
|
356
|
+
<li>Nature elements</li>
|
|
357
|
+
<li>People & activities</li>
|
|
358
|
+
<li>Objects & symbols</li>
|
|
359
|
+
</ul>
|
|
360
|
+
<h2>Usage Examples</h2>
|
|
361
|
+
<h3>In Markdown Headers</h3>
|
|
362
|
+
<pre><code class="language-markdown">## <i class="ph ph-rocket-launch" aria-label="launch"></i> Getting Started
|
|
363
|
+
## <i class="ph ph-wrench" aria-label="settings"></i> Configuration
|
|
364
|
+
## <i class="ph ph-books" aria-label="documentation"></i> API Reference
|
|
365
|
+
## <i class="ph ph-x-circle" aria-label="error"></i> Common Errors
|
|
366
|
+
</code></pre>
|
|
367
|
+
<h3>In Lists</h3>
|
|
368
|
+
<pre><code class="language-markdown">- <i class="ph ph-check-circle" aria-label="checked"></i> Feature implemented
|
|
369
|
+
- π§ Work in progress
|
|
370
|
+
- <i class="ph ph-x-circle" aria-label="error"></i> Deprecated
|
|
371
|
+
- <i class="ph ph-lightbulb" aria-label="idea"></i> Pro tip
|
|
372
|
+
</code></pre>
|
|
373
|
+
<h3>In Tables</h3>
|
|
374
|
+
<pre><code class="language-markdown">| Status | Feature | Notes |
|
|
375
|
+
|--------|---------|-------|
|
|
376
|
+
| <i class="ph ph-check-circle" aria-label="checked"></i> | Search | Ready |
|
|
377
|
+
| π§ | Auth | In progress |
|
|
378
|
+
| <i class="ph ph-x-circle" aria-label="error"></i> | Legacy API | Deprecated |
|
|
379
|
+
</code></pre>
|
|
380
|
+
<h2>Customization</h2>
|
|
381
|
+
<h3>Custom Icon Sizes</h3>
|
|
382
|
+
<p>Override icon size for specific use cases:</p>
|
|
383
|
+
<pre><code class="language-css">/* In your custom CSS */
|
|
384
|
+
.content h1 .ph {
|
|
385
|
+
font-size: 1.5em;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.content li .ph {
|
|
389
|
+
font-size: 1.1em;
|
|
390
|
+
}
|
|
391
|
+
</code></pre>
|
|
392
|
+
<h3>Custom Icon Colors</h3>
|
|
393
|
+
<p>Icons inherit text color by default, but can be styled:</p>
|
|
394
|
+
<pre><code class="language-css">.ph-check-circle {
|
|
395
|
+
color: #10b981; /* Green for success */
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
.ph-x-circle {
|
|
399
|
+
color: #ef4444; /* Red for errors */
|
|
400
|
+
}
|
|
401
|
+
</code></pre>
|
|
402
|
+
<h2>Performance Considerations</h2>
|
|
403
|
+
<ul>
|
|
404
|
+
<li>Icons are loaded via CDN with long cache headers</li>
|
|
405
|
+
<li>Only the selected weight (e.g., regular) is loaded</li>
|
|
406
|
+
<li>Web font format ensures fast rendering</li>
|
|
407
|
+
<li>Approximately 300KB for a full icon set</li>
|
|
408
|
+
</ul>
|
|
409
|
+
<h2>Accessibility</h2>
|
|
410
|
+
<p>All converted icons include:</p>
|
|
411
|
+
<ul>
|
|
412
|
+
<li>Proper <code>aria-label</code> attributes</li>
|
|
413
|
+
<li>Semantic HTML (<code><i></code> tags)</li>
|
|
414
|
+
<li>Screen reader friendly descriptions</li>
|
|
415
|
+
<li>Keyboard navigation support</li>
|
|
416
|
+
</ul>
|
|
417
|
+
<h2>Troubleshooting</h2>
|
|
418
|
+
<h3>Icons Not Showing</h3>
|
|
419
|
+
<ol>
|
|
420
|
+
<li>Check if <code>phosphorIcons: true</code> in config</li>
|
|
421
|
+
<li>Verify internet connection (CDN access)</li>
|
|
422
|
+
<li>Check browser console for errors</li>
|
|
423
|
+
<li>Try clearing browser cache</li>
|
|
424
|
+
</ol>
|
|
425
|
+
<h3>Wrong Icon Weight</h3>
|
|
426
|
+
<p>Update config and rebuild:</p>
|
|
427
|
+
<pre><code class="language-javascript">features: {
|
|
428
|
+
phosphorWeight: 'bold' // Change to desired weight
|
|
429
|
+
}
|
|
430
|
+
</code></pre>
|
|
431
|
+
<h3>Emoji Not Converting</h3>
|
|
432
|
+
<ul>
|
|
433
|
+
<li>Ensure emoji is in the supported mapping list</li>
|
|
434
|
+
<li>Some complex emojis may not have icon equivalents</li>
|
|
435
|
+
<li>File an issue for missing emoji mappings</li>
|
|
436
|
+
</ul>
|
|
437
|
+
<h2>Best Practices</h2>
|
|
438
|
+
<ol>
|
|
439
|
+
<li><strong>Use semantic emojis</strong> - Choose emojis that match their purpose</li>
|
|
440
|
+
<li><strong>Be consistent</strong> - Use the same emoji for the same meaning</li>
|
|
441
|
+
<li><strong>Don't overuse</strong> - Icons should enhance, not clutter</li>
|
|
442
|
+
<li><strong>Test rendering</strong> - Preview how icons look in your docs</li>
|
|
443
|
+
<li><strong>Consider context</strong> - Some emojis work better as icons than others</li>
|
|
444
|
+
</ol>
|
|
445
|
+
<h2>Technical Details</h2>
|
|
446
|
+
<h3>Implementation</h3>
|
|
447
|
+
<ul>
|
|
448
|
+
<li>Post-processes HTML after markdown conversion</li>
|
|
449
|
+
<li>Uses regex pattern matching for efficiency</li>
|
|
450
|
+
<li>Preserves all other HTML intact</li>
|
|
451
|
+
<li>Falls back gracefully if CDN fails</li>
|
|
452
|
+
</ul>
|
|
453
|
+
<h3>Browser Support</h3>
|
|
454
|
+
<p>Phosphor Icons work in all modern browsers:</p>
|
|
455
|
+
<ul>
|
|
456
|
+
<li>Chrome/Edge 88+</li>
|
|
457
|
+
<li>Firefox 78+</li>
|
|
458
|
+
<li>Safari 14+</li>
|
|
459
|
+
<li>Mobile browsers</li>
|
|
460
|
+
</ul>
|
|
461
|
+
<h2>Future Enhancements</h2>
|
|
462
|
+
<p>Planned improvements:</p>
|
|
463
|
+
<ul>
|
|
464
|
+
<li>Custom emoji-to-icon mappings</li>
|
|
465
|
+
<li>Multiple icon libraries support</li>
|
|
466
|
+
<li>Icon search/picker tool</li>
|
|
467
|
+
<li>Animation support</li>
|
|
468
|
+
<li>SVG icon option</li>
|
|
469
|
+
</ul>
|
|
470
|
+
<h2>Resources</h2>
|
|
471
|
+
<ul>
|
|
472
|
+
<li><a href="https://phosphoricons.com/">Phosphor Icons</a> - Browse all available icons</li>
|
|
473
|
+
<li><a href="https://phosphoricons.com/?weight=regular">Icon Weights Demo</a> - Compare different weights</li>
|
|
474
|
+
<li><a href="https://github.com/phosphor-icons/web">GitHub Repository</a> - Source code and issues</li>
|
|
475
|
+
</ul>
|
|
476
|
+
<hr>
|
|
477
|
+
<p><em>This feature enhances the visual consistency of your documentation while maintaining the simplicity of writing with emojis.</em></p>
|
|
478
|
+
|
|
479
|
+
</div>
|
|
480
|
+
</main>
|
|
481
|
+
</div>
|
|
482
|
+
|
|
483
|
+
<!-- Scripts -->
|
|
484
|
+
<script src="/js/main.js"></script>
|
|
485
|
+
|
|
486
|
+
</body>
|
|
487
|
+
</html>
|
|
@@ -36,6 +36,7 @@
|
|
|
36
36
|
|
|
37
37
|
<!-- Icons -->
|
|
38
38
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
39
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
|
|
39
40
|
|
|
40
41
|
<!-- Mermaid -->
|
|
41
42
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
@@ -61,8 +62,8 @@
|
|
|
61
62
|
"name": "Knowcode Ltd",
|
|
62
63
|
"url": "https://knowcode.tech"
|
|
63
64
|
},
|
|
64
|
-
"datePublished": "2025-07-
|
|
65
|
-
"dateModified": "2025-07-
|
|
65
|
+
"datePublished": "2025-07-22T11:08:52.130Z",
|
|
66
|
+
"dateModified": "2025-07-22T11:08:52.130Z",
|
|
66
67
|
"mainEntityOfPage": {
|
|
67
68
|
"@type": "WebPage",
|
|
68
69
|
"@id": "https://doc-builder-delta.vercel.app/guides/seo-guide.html"
|
|
@@ -101,7 +102,7 @@
|
|
|
101
102
|
|
|
102
103
|
<div class="header-actions">
|
|
103
104
|
<div class="deployment-info">
|
|
104
|
-
<span class="deployment-date" title="Built with doc-builder v1.5.
|
|
105
|
+
<span class="deployment-date" title="Built with doc-builder v1.5.13">Last updated: Jul 22, 2025, 11:08 AM UTC</span>
|
|
105
106
|
</div>
|
|
106
107
|
|
|
107
108
|
|
|
@@ -152,8 +153,8 @@
|
|
|
152
153
|
<div class="nav-content" >
|
|
153
154
|
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
154
155
|
<a href="/documentation-index.html" class="nav-item" data-tooltip="This directory contains additional documentation for the @knowcode/doc-builder project, organized by topic and purpose."><i class="fas fa-file-alt"></i> Documentation Index</a>
|
|
155
|
-
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing
|
|
156
|
-
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide
|
|
156
|
+
<a href="/vercel-cli-setup-guide.html" class="nav-item" data-tooltip="This guide provides comprehensive instructions for installing the Vercel CLI across different operating systems."><i class="fas fa-file-alt"></i> Vercel Cli Setup Guide</a>
|
|
157
|
+
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the streamlined Vercel deployment process when using."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
157
158
|
<div class="nav-section" data-level="1">
|
|
158
159
|
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
159
160
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
@@ -163,6 +164,7 @@
|
|
|
163
164
|
<a href="/guides/claude-workflow-guide.html" class="nav-item" data-tooltip="This guide demonstrates an efficient workflow for using Claude Code with a refined CLAUDE.md file to create high-quality documentation and deploy it..."><i class="fas fa-file-alt"></i> Claude Workflow Guide</a>
|
|
164
165
|
<a href="/guides/documentation-standards.html" class="nav-item" data-tooltip="This document defines the documentation standards and conventions for the @knowcode/doc-builder project."><i class="fas fa-file-alt"></i> Documentation Standards</a>
|
|
165
166
|
<a href="/guides/google-site-verification-guide.html" class="nav-item" data-tooltip="Google Search Console verification allows you to: Monitor your site's performance in Google Search Submit sitemaps for better indexing View search..."><i class="fas fa-file-alt"></i> Google Site Verification Guide</a>
|
|
167
|
+
<a href="/guides/phosphor-icons-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML."><i class="fas fa-file-alt"></i> Phosphor Icons Guide</a>
|
|
166
168
|
<a href="/guides/seo-guide.html" class="nav-item active" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features to help your documentation rank better in search results and..."><i class="fas fa-file-alt"></i> Seo Guide</a>
|
|
167
169
|
<a href="/guides/seo-optimization-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder includes comprehensive SEO (Search Engine Optimization) features that automatically optimize your documentation for search..."><i class="fas fa-file-alt"></i> Seo Optimization Guide</a>
|
|
168
170
|
<a href="/guides/troubleshooting-guide.html" class="nav-item" data-tooltip="This guide helps you resolve common issues when using @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Troubleshooting Guide</a></div></div>
|
|
@@ -412,10 +414,10 @@ author: Different Author
|
|
|
412
414
|
<pre><code class="language-bash">npx @knowcode/doc-builder build
|
|
413
415
|
</code></pre>
|
|
414
416
|
<p>You'll see SEO generation in the output:</p>
|
|
415
|
-
<pre><code
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
417
|
+
<pre><code><i class="ph ph-map-trifold" aria-label="map"></i> Generating sitemap.xml...
|
|
418
|
+
<i class="ph ph-check-circle" aria-label="checked"></i> Generated sitemap.xml with 23 URLs
|
|
419
|
+
<i class="ph ph-robot" aria-label="automation"></i> Generating robots.txt...
|
|
420
|
+
<i class="ph ph-check-circle" aria-label="checked"></i> Generated robots.txt
|
|
419
421
|
</code></pre>
|
|
420
422
|
<h3>2. Check Generated Files</h3>
|
|
421
423
|
<ul>
|