@knowcode/doc-builder 1.9.1 → 1.9.2
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 +29 -0
- package/README.md +1 -0
- package/html/README.html +150 -33
- package/html/css/notion-style.css +394 -13
- package/html/documentation-index.html +128 -10
- package/html/guides/authentication-default-change.html +131 -7
- package/html/guides/authentication-guide.html +142 -19
- package/html/guides/claude-workflow-guide.html +138 -22
- package/html/guides/documentation-standards.html +134 -11
- package/html/guides/html-embedding-guide.html +450 -0
- package/html/guides/image-modal-guide.html +133 -10
- package/html/guides/phosphor-icons-guide.html +151 -27
- package/html/guides/private-directory-authentication.html +131 -7
- package/html/guides/public-site-deployment.html +131 -7
- package/html/guides/search-engine-verification-guide.html +131 -7
- package/html/guides/seo-guide.html +131 -7
- package/html/guides/seo-optimization-guide.html +160 -38
- package/html/guides/troubleshooting-guide.html +142 -19
- package/html/guides/windows-setup-guide.html +162 -38
- package/html/image-modal-test.html +126 -8
- package/html/index.html +150 -33
- package/html/js/auth.js +118 -39
- package/html/js/main.js +259 -25
- package/html/private/cache-control-anti-pattern.html +136 -12
- package/html/private/launch/README.html +145 -15
- package/html/private/launch/auth-cleanup-summary.html +154 -24
- package/html/private/launch/bubble-plugin-specification.html +137 -7
- package/html/private/launch/go-to-market-strategy.html +139 -9
- package/html/private/launch/launch-announcements.html +153 -24
- package/html/private/launch/vercel-deployment-auth-setup.html +139 -9
- package/html/private/next-steps-walkthrough.html +138 -14
- package/html/private/supabase-auth-implementation-completed.html +144 -21
- package/html/private/supabase-auth-implementation-plan.html +137 -14
- package/html/private/supabase-auth-integration-plan.html +143 -21
- package/html/private/supabase-auth-setup-guide.html +140 -16
- package/html/private/test-private-doc.html +131 -7
- package/html/private/user-management-tooling.html +131 -7
- package/html/prompts/markdown-document-standards.html +135 -12
- package/html/sitemap.xml +58 -46
- package/html/vercel-cli-setup-guide.html +129 -11
- package/html/vercel-first-time-setup-guide.html +126 -8
- package/lib/config.js +2 -0
- package/package.json +1 -1
|
@@ -3,14 +3,41 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta name="description" content="
|
|
7
|
-
<title>Image Modal Guide
|
|
6
|
+
<meta name="description" content="The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...">
|
|
7
|
+
<title>Image Modal Guide | @knowcode/doc-builder</title>
|
|
8
|
+
|
|
9
|
+
<meta name="author" content="Lindsay Smith">
|
|
10
|
+
<meta name="keywords" content="documentation, markdown, static site generator, vercel, notion-style, images, modal">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/image-modal-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/image-modal-guide.html">
|
|
17
|
+
<meta property="og:title" content="Image Modal Guide | @knowcode/doc-builder">
|
|
18
|
+
<meta property="og:description" content="The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...">
|
|
19
|
+
<meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
20
|
+
<meta property="og:site_name" content="@knowcode/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="Image Modal Guide | @knowcode/doc-builder">
|
|
28
|
+
<meta name="twitter:description" content="The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...">
|
|
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
|
+
<meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
|
|
8
34
|
|
|
9
35
|
<!-- Fonts -->
|
|
10
36
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
11
37
|
|
|
12
38
|
<!-- Icons -->
|
|
13
39
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
|
|
14
41
|
|
|
15
42
|
<!-- Mermaid -->
|
|
16
43
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
@@ -18,8 +45,90 @@
|
|
|
18
45
|
<!-- Styles -->
|
|
19
46
|
<link rel="stylesheet" href="/css/notion-style.css">
|
|
20
47
|
|
|
48
|
+
|
|
49
|
+
<!-- Hide content until auth check -->
|
|
50
|
+
<style>
|
|
51
|
+
body {
|
|
52
|
+
visibility: hidden;
|
|
53
|
+
opacity: 0;
|
|
54
|
+
transition: opacity 0.3s ease;
|
|
55
|
+
}
|
|
56
|
+
body.authenticated {
|
|
57
|
+
visibility: visible;
|
|
58
|
+
opacity: 1;
|
|
59
|
+
}
|
|
60
|
+
/* Show login/logout pages immediately */
|
|
61
|
+
body.auth-page {
|
|
62
|
+
visibility: visible;
|
|
63
|
+
opacity: 1;
|
|
64
|
+
}
|
|
65
|
+
/* Style auth button consistently */
|
|
66
|
+
.auth-btn {
|
|
67
|
+
background: none;
|
|
68
|
+
border: none;
|
|
69
|
+
color: var(--text-secondary);
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
padding: 0.5rem;
|
|
72
|
+
border-radius: 0.5rem;
|
|
73
|
+
transition: all 0.2s;
|
|
74
|
+
font-size: 1.1rem;
|
|
75
|
+
}
|
|
76
|
+
.auth-btn:hover {
|
|
77
|
+
background: var(--bg-secondary);
|
|
78
|
+
color: var(--text-primary);
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
|
|
82
|
+
|
|
21
83
|
<!-- Favicon -->
|
|
22
|
-
<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
|
|
84
|
+
<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>">
|
|
85
|
+
|
|
86
|
+
<script type="application/ld+json">
|
|
87
|
+
{
|
|
88
|
+
"@context": "https://schema.org",
|
|
89
|
+
"@type": "TechArticle",
|
|
90
|
+
"headline": "Image Modal Guide",
|
|
91
|
+
"description": "The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen...",
|
|
92
|
+
"author": {
|
|
93
|
+
"@type": "Person",
|
|
94
|
+
"name": "Lindsay Smith"
|
|
95
|
+
},
|
|
96
|
+
"publisher": {
|
|
97
|
+
"@type": "Organization",
|
|
98
|
+
"name": "Knowcode Ltd",
|
|
99
|
+
"url": "https://knowcode.tech"
|
|
100
|
+
},
|
|
101
|
+
"datePublished": "2025-07-28T10:31:53.200Z",
|
|
102
|
+
"dateModified": "2025-07-28T10:31:53.200Z",
|
|
103
|
+
"mainEntityOfPage": {
|
|
104
|
+
"@type": "WebPage",
|
|
105
|
+
"@id": "https://doc-builder-delta.vercel.app/guides/image-modal-guide.html"
|
|
106
|
+
},
|
|
107
|
+
"breadcrumb": {
|
|
108
|
+
"@type": "BreadcrumbList",
|
|
109
|
+
"itemListElement": [
|
|
110
|
+
{
|
|
111
|
+
"@type": "ListItem",
|
|
112
|
+
"position": 1,
|
|
113
|
+
"name": "@knowcode/doc-builder",
|
|
114
|
+
"item": "https://doc-builder-delta.vercel.app"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"@type": "ListItem",
|
|
118
|
+
"position": 2,
|
|
119
|
+
"name": "Guides",
|
|
120
|
+
"item": "https://doc-builder-delta.vercel.app/guides/"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"@type": "ListItem",
|
|
124
|
+
"position": 3,
|
|
125
|
+
"name": "Image Modal Guide",
|
|
126
|
+
"item": "https://doc-builder-delta.vercel.app/guides/image-modal-guide.html"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</script>
|
|
23
132
|
</head>
|
|
24
133
|
<body>
|
|
25
134
|
<!-- Header -->
|
|
@@ -29,10 +138,14 @@
|
|
|
29
138
|
|
|
30
139
|
<div class="header-actions">
|
|
31
140
|
<div class="deployment-info">
|
|
32
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
141
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.1">Last updated: Jul 28, 2025, 10:31 AM UTC</span>
|
|
33
142
|
</div>
|
|
34
143
|
|
|
35
144
|
|
|
145
|
+
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
146
|
+
<i class="fas fa-sign-in-alt"></i>
|
|
147
|
+
</a>
|
|
148
|
+
|
|
36
149
|
|
|
37
150
|
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
38
151
|
<i class="fas fa-moon"></i>
|
|
@@ -92,6 +205,7 @@
|
|
|
92
205
|
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase - a secure, scalable authentication platform."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
93
206
|
<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>
|
|
94
207
|
<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>
|
|
208
|
+
<a href="/guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="fas fa-file-alt"></i> Html Embedding Guide</a>
|
|
95
209
|
<a href="/guides/image-modal-guide.html" class="nav-item active" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="fas fa-file-alt"></i> Image Modal Guide</a>
|
|
96
210
|
<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>
|
|
97
211
|
<a href="/guides/private-directory-authentication.html" class="nav-item" data-tooltip="The @knowcode/doc-builder provides flexible authentication options to protect your documentation."><i class="fas fa-file-alt"></i> Private Directory Authentication</a>
|
|
@@ -101,7 +215,7 @@
|
|
|
101
215
|
<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>
|
|
102
216
|
<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>
|
|
103
217
|
<a href="/guides/windows-setup-guide.html" class="nav-item" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="fas fa-file-alt"></i> Windows Setup Guide</a></div></div>
|
|
104
|
-
<div class="nav-section" data-level="1">
|
|
218
|
+
<div class="nav-section private-nav" data-level="1">
|
|
105
219
|
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
106
220
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
107
221
|
</a>
|
|
@@ -114,7 +228,7 @@
|
|
|
114
228
|
<a href="/private/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
|
|
115
229
|
<a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="fas fa-file-alt"></i> Test Private Doc</a>
|
|
116
230
|
<a href="/private/user-management-tooling.html" class="nav-item" data-tooltip="The user management system is a set of tools designed to manage user access to Supabase-authenticated documentation sites built with."><i class="fas fa-file-alt"></i> User Management Tooling</a></div></div>
|
|
117
|
-
<div class="nav-section" data-level="2">
|
|
231
|
+
<div class="nav-section private-nav" data-level="2">
|
|
118
232
|
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
119
233
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
120
234
|
</a>
|
|
@@ -180,14 +294,14 @@
|
|
|
180
294
|
</code></pre>
|
|
181
295
|
<h3>Best Practices for Alt Text</h3>
|
|
182
296
|
<p>Since alt text becomes the modal caption, write descriptive, meaningful descriptions:</p>
|
|
183
|
-
<p><strong
|
|
297
|
+
<p><strong><i class="ph ph-check-circle" aria-label="checked"></i> Good Alt Text:</strong></p>
|
|
184
298
|
<pre><code class="language-markdown">
|
|
185
299
|
|
|
186
300
|
|
|
187
301
|
|
|
188
302
|
|
|
189
303
|
</code></pre>
|
|
190
|
-
<p><strong
|
|
304
|
+
<p><strong><i class="ph ph-x-circle" aria-label="error"></i> Poor Alt Text:</strong></p>
|
|
191
305
|
<pre><code class="language-markdown">
|
|
192
306
|
|
|
193
307
|
|
|
@@ -338,7 +452,6 @@ We've redesigned the dashboard for better usability:
|
|
|
338
452
|
<h3>Mermaid Diagrams</h3>
|
|
339
453
|
<p>Mermaid diagrams can also benefit from the modal system when exported as images:</p>
|
|
340
454
|
<pre><code class="language-markdown"><div class="mermaid-wrapper">
|
|
341
|
-
<div class="mermaid-title">Diagram</div>
|
|
342
455
|
<div class="mermaid">graph TD
|
|
343
456
|
A[User Request] --> B{Authentication}
|
|
344
457
|
B -->|Valid| C[Process Request]
|
|
@@ -375,7 +488,17 @@ For more advanced customization options or troubleshooting, refer to the main do
|
|
|
375
488
|
</div>
|
|
376
489
|
|
|
377
490
|
<!-- Scripts -->
|
|
491
|
+
<script>
|
|
492
|
+
// Pass configuration to frontend
|
|
493
|
+
window.docBuilderConfig = {
|
|
494
|
+
features: {
|
|
495
|
+
showPdfDownload: true,
|
|
496
|
+
menuDefaultOpen: false
|
|
497
|
+
}
|
|
498
|
+
};
|
|
499
|
+
</script>
|
|
378
500
|
<script src="/js/main.js"></script>
|
|
379
|
-
|
|
501
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
502
|
+
<script src="/js/auth.js"></script>
|
|
380
503
|
</body>
|
|
381
504
|
</html>
|
|
@@ -3,14 +3,41 @@
|
|
|
3
3
|
<head>
|
|
4
4
|
<meta charset="UTF-8">
|
|
5
5
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<meta name="description" content="
|
|
7
|
-
<title>Phosphor Icons Integration Guide
|
|
6
|
+
<meta name="description" content="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML. This provides...">
|
|
7
|
+
<title>Phosphor Icons Integration Guide | @knowcode/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 | @knowcode/doc-builder">
|
|
18
|
+
<meta property="og:description" content="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML. This provides...">
|
|
19
|
+
<meta property="og:image" content="https://doc-builder-delta.vercel.app/og-default.png">
|
|
20
|
+
<meta property="og:site_name" content="@knowcode/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 | @knowcode/doc-builder">
|
|
28
|
+
<meta name="twitter:description" content="@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML. This provides...">
|
|
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
|
+
<meta name="msvalidate.01" content="B2D8C4C12C530D47AA962B24CAA09630">
|
|
8
34
|
|
|
9
35
|
<!-- Fonts -->
|
|
10
36
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
|
|
11
37
|
|
|
12
38
|
<!-- Icons -->
|
|
13
39
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
40
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.1/src/regular/style.css">
|
|
14
41
|
|
|
15
42
|
<!-- Mermaid -->
|
|
16
43
|
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
@@ -18,8 +45,90 @@
|
|
|
18
45
|
<!-- Styles -->
|
|
19
46
|
<link rel="stylesheet" href="/css/notion-style.css">
|
|
20
47
|
|
|
48
|
+
|
|
49
|
+
<!-- Hide content until auth check -->
|
|
50
|
+
<style>
|
|
51
|
+
body {
|
|
52
|
+
visibility: hidden;
|
|
53
|
+
opacity: 0;
|
|
54
|
+
transition: opacity 0.3s ease;
|
|
55
|
+
}
|
|
56
|
+
body.authenticated {
|
|
57
|
+
visibility: visible;
|
|
58
|
+
opacity: 1;
|
|
59
|
+
}
|
|
60
|
+
/* Show login/logout pages immediately */
|
|
61
|
+
body.auth-page {
|
|
62
|
+
visibility: visible;
|
|
63
|
+
opacity: 1;
|
|
64
|
+
}
|
|
65
|
+
/* Style auth button consistently */
|
|
66
|
+
.auth-btn {
|
|
67
|
+
background: none;
|
|
68
|
+
border: none;
|
|
69
|
+
color: var(--text-secondary);
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
padding: 0.5rem;
|
|
72
|
+
border-radius: 0.5rem;
|
|
73
|
+
transition: all 0.2s;
|
|
74
|
+
font-size: 1.1rem;
|
|
75
|
+
}
|
|
76
|
+
.auth-btn:hover {
|
|
77
|
+
background: var(--bg-secondary);
|
|
78
|
+
color: var(--text-primary);
|
|
79
|
+
}
|
|
80
|
+
</style>
|
|
81
|
+
|
|
82
|
+
|
|
21
83
|
<!-- Favicon -->
|
|
22
|
-
<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
|
|
84
|
+
<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>">
|
|
85
|
+
|
|
86
|
+
<script type="application/ld+json">
|
|
87
|
+
{
|
|
88
|
+
"@context": "https://schema.org",
|
|
89
|
+
"@type": "TechArticle",
|
|
90
|
+
"headline": "Phosphor Icons Integration Guide",
|
|
91
|
+
"description": "@knowcode/doc-builder automatically converts Unicode emojis in your markdown files to beautiful Phosphor icons in the generated HTML. This provides...",
|
|
92
|
+
"author": {
|
|
93
|
+
"@type": "Person",
|
|
94
|
+
"name": "Lindsay Smith"
|
|
95
|
+
},
|
|
96
|
+
"publisher": {
|
|
97
|
+
"@type": "Organization",
|
|
98
|
+
"name": "Knowcode Ltd",
|
|
99
|
+
"url": "https://knowcode.tech"
|
|
100
|
+
},
|
|
101
|
+
"datePublished": "2025-07-28T10:31:53.202Z",
|
|
102
|
+
"dateModified": "2025-07-28T10:31:53.202Z",
|
|
103
|
+
"mainEntityOfPage": {
|
|
104
|
+
"@type": "WebPage",
|
|
105
|
+
"@id": "https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html"
|
|
106
|
+
},
|
|
107
|
+
"breadcrumb": {
|
|
108
|
+
"@type": "BreadcrumbList",
|
|
109
|
+
"itemListElement": [
|
|
110
|
+
{
|
|
111
|
+
"@type": "ListItem",
|
|
112
|
+
"position": 1,
|
|
113
|
+
"name": "@knowcode/doc-builder",
|
|
114
|
+
"item": "https://doc-builder-delta.vercel.app"
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
"@type": "ListItem",
|
|
118
|
+
"position": 2,
|
|
119
|
+
"name": "Guides",
|
|
120
|
+
"item": "https://doc-builder-delta.vercel.app/guides/"
|
|
121
|
+
},
|
|
122
|
+
{
|
|
123
|
+
"@type": "ListItem",
|
|
124
|
+
"position": 3,
|
|
125
|
+
"name": "Phosphor Icons Guide",
|
|
126
|
+
"item": "https://doc-builder-delta.vercel.app/guides/phosphor-icons-guide.html"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</script>
|
|
23
132
|
</head>
|
|
24
133
|
<body>
|
|
25
134
|
<!-- Header -->
|
|
@@ -29,10 +138,14 @@
|
|
|
29
138
|
|
|
30
139
|
<div class="header-actions">
|
|
31
140
|
<div class="deployment-info">
|
|
32
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
141
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.1">Last updated: Jul 28, 2025, 10:31 AM UTC</span>
|
|
33
142
|
</div>
|
|
34
143
|
|
|
35
144
|
|
|
145
|
+
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
146
|
+
<i class="fas fa-sign-in-alt"></i>
|
|
147
|
+
</a>
|
|
148
|
+
|
|
36
149
|
|
|
37
150
|
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
38
151
|
<i class="fas fa-moon"></i>
|
|
@@ -92,6 +205,7 @@
|
|
|
92
205
|
<a href="/guides/authentication-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase - a secure, scalable authentication platform."><i class="fas fa-file-alt"></i> Authentication Guide</a>
|
|
93
206
|
<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>
|
|
94
207
|
<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>
|
|
208
|
+
<a href="/guides/html-embedding-guide.html" class="nav-item" data-tooltip="Starting from version 1.9.2, doc-builder treats HTML files ( and ) as attachments that are automatically copied to your output directory during the..."><i class="fas fa-file-alt"></i> Html Embedding Guide</a>
|
|
95
209
|
<a href="/guides/image-modal-guide.html" class="nav-item" data-tooltip="When users click on any image in your generated documentation, it opens in a professional modal overlay with: Full-screen viewing experience Smooth..."><i class="fas fa-file-alt"></i> Image Modal Guide</a>
|
|
96
210
|
<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>
|
|
97
211
|
<a href="/guides/private-directory-authentication.html" class="nav-item" data-tooltip="The @knowcode/doc-builder provides flexible authentication options to protect your documentation."><i class="fas fa-file-alt"></i> Private Directory Authentication</a>
|
|
@@ -101,7 +215,7 @@
|
|
|
101
215
|
<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>
|
|
102
216
|
<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>
|
|
103
217
|
<a href="/guides/windows-setup-guide.html" class="nav-item" data-tooltip="This guide helps Windows users set up the complete AI-powered documentation workflow using Claude Code, @knowcode/doc-builder, and Vercel."><i class="fas fa-file-alt"></i> Windows Setup Guide</a></div></div>
|
|
104
|
-
<div class="nav-section" data-level="1">
|
|
218
|
+
<div class="nav-section private-nav" data-level="1">
|
|
105
219
|
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
106
220
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
107
221
|
</a>
|
|
@@ -114,7 +228,7 @@
|
|
|
114
228
|
<a href="/private/supabase-auth-setup-guide.html" class="nav-item" data-tooltip="@knowcode/doc-builder supports enterprise-grade authentication through Supabase."><i class="fas fa-file-alt"></i> Supabase Auth Setup Guide</a>
|
|
115
229
|
<a href="/private/test-private-doc.html" class="nav-item" data-tooltip="Test Private Document."><i class="fas fa-file-alt"></i> Test Private Doc</a>
|
|
116
230
|
<a href="/private/user-management-tooling.html" class="nav-item" data-tooltip="The user management system is a set of tools designed to manage user access to Supabase-authenticated documentation sites built with."><i class="fas fa-file-alt"></i> User Management Tooling</a></div></div>
|
|
117
|
-
<div class="nav-section" data-level="2">
|
|
231
|
+
<div class="nav-section private-nav" data-level="2">
|
|
118
232
|
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
119
233
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
120
234
|
</a>
|
|
@@ -150,9 +264,9 @@
|
|
|
150
264
|
</code></pre>
|
|
151
265
|
<p>They are automatically converted to Phosphor icons in HTML:</p>
|
|
152
266
|
<ul>
|
|
153
|
-
<li
|
|
154
|
-
<li
|
|
155
|
-
<li
|
|
267
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> → Check circle icon</li>
|
|
268
|
+
<li><i class="ph ph-x-circle" aria-label="error"></i> → X circle icon </li>
|
|
269
|
+
<li><i class="ph ph-rocket-launch" aria-label="launch"></i> → Rocket launch icon</li>
|
|
156
270
|
</ul>
|
|
157
271
|
<h3>Benefits</h3>
|
|
158
272
|
<ul>
|
|
@@ -193,27 +307,27 @@
|
|
|
193
307
|
</tr>
|
|
194
308
|
</thead>
|
|
195
309
|
<tbody><tr>
|
|
196
|
-
<td
|
|
310
|
+
<td><i class="ph ph-check-circle" aria-label="checked"></i></td>
|
|
197
311
|
<td>Check circle</td>
|
|
198
312
|
<td>Success, completed, verified</td>
|
|
199
313
|
</tr>
|
|
200
314
|
<tr>
|
|
201
|
-
<td
|
|
315
|
+
<td><i class="ph ph-x-circle" aria-label="error"></i></td>
|
|
202
316
|
<td>X circle</td>
|
|
203
317
|
<td>Error, failed, incorrect</td>
|
|
204
318
|
</tr>
|
|
205
319
|
<tr>
|
|
206
|
-
<td
|
|
320
|
+
<td><i class="ph ph-question" aria-label="question"></i></td>
|
|
207
321
|
<td>Question mark</td>
|
|
208
322
|
<td>Unknown, uncertain</td>
|
|
209
323
|
</tr>
|
|
210
324
|
<tr>
|
|
211
|
-
<td
|
|
325
|
+
<td><i class="ph ph-warning-circle" aria-label="warning"></i></td>
|
|
212
326
|
<td>Warning circle</td>
|
|
213
327
|
<td>Caution, important note</td>
|
|
214
328
|
</tr>
|
|
215
329
|
<tr>
|
|
216
|
-
<td
|
|
330
|
+
<td><i class="ph ph-prohibit-inset" aria-label="not allowed"></i></td>
|
|
217
331
|
<td>Prohibit</td>
|
|
218
332
|
<td>Not allowed, forbidden</td>
|
|
219
333
|
</tr>
|
|
@@ -228,27 +342,27 @@
|
|
|
228
342
|
</tr>
|
|
229
343
|
</thead>
|
|
230
344
|
<tbody><tr>
|
|
231
|
-
<td
|
|
345
|
+
<td><i class="ph ph-laptop" aria-label="laptop"></i></td>
|
|
232
346
|
<td>Laptop</td>
|
|
233
347
|
<td>Development, coding</td>
|
|
234
348
|
</tr>
|
|
235
349
|
<tr>
|
|
236
|
-
<td
|
|
350
|
+
<td><i class="ph ph-wrench" aria-label="settings"></i></td>
|
|
237
351
|
<td>Wrench</td>
|
|
238
352
|
<td>Configuration, settings</td>
|
|
239
353
|
</tr>
|
|
240
354
|
<tr>
|
|
241
|
-
<td
|
|
355
|
+
<td><i class="ph ph-bug" aria-label="bug"></i></td>
|
|
242
356
|
<td>Bug</td>
|
|
243
357
|
<td>Issues, debugging</td>
|
|
244
358
|
</tr>
|
|
245
359
|
<tr>
|
|
246
|
-
<td
|
|
360
|
+
<td><i class="ph ph-rocket-launch" aria-label="launch"></i></td>
|
|
247
361
|
<td>Rocket</td>
|
|
248
362
|
<td>Launch, deploy, release</td>
|
|
249
363
|
</tr>
|
|
250
364
|
<tr>
|
|
251
|
-
<td
|
|
365
|
+
<td><i class="ph ph-lightning" aria-label="fast"></i></td>
|
|
252
366
|
<td>Lightning</td>
|
|
253
367
|
<td>Performance, speed</td>
|
|
254
368
|
</tr>
|
|
@@ -263,22 +377,22 @@
|
|
|
263
377
|
</tr>
|
|
264
378
|
</thead>
|
|
265
379
|
<tbody><tr>
|
|
266
|
-
<td
|
|
380
|
+
<td><i class="ph ph-note-pencil" aria-label="edit"></i></td>
|
|
267
381
|
<td>Note pencil</td>
|
|
268
382
|
<td>Edit, write</td>
|
|
269
383
|
</tr>
|
|
270
384
|
<tr>
|
|
271
|
-
<td
|
|
385
|
+
<td><i class="ph ph-books" aria-label="documentation"></i></td>
|
|
272
386
|
<td>Books</td>
|
|
273
387
|
<td>Documentation, guides</td>
|
|
274
388
|
</tr>
|
|
275
389
|
<tr>
|
|
276
|
-
<td
|
|
390
|
+
<td><i class="ph ph-folder" aria-label="folder"></i></td>
|
|
277
391
|
<td>Folder</td>
|
|
278
392
|
<td>Directory, category</td>
|
|
279
393
|
</tr>
|
|
280
394
|
<tr>
|
|
281
|
-
<td
|
|
395
|
+
<td><i class="ph ph-link" aria-label="link"></i></td>
|
|
282
396
|
<td>Link</td>
|
|
283
397
|
<td>URL, connection</td>
|
|
284
398
|
</tr>
|
|
@@ -293,17 +407,17 @@
|
|
|
293
407
|
</tr>
|
|
294
408
|
</thead>
|
|
295
409
|
<tbody><tr>
|
|
296
|
-
<td
|
|
410
|
+
<td><i class="ph ph-chat-circle" aria-label="chat"></i></td>
|
|
297
411
|
<td>Chat circle</td>
|
|
298
412
|
<td>Comments, discussion</td>
|
|
299
413
|
</tr>
|
|
300
414
|
<tr>
|
|
301
|
-
<td
|
|
415
|
+
<td><i class="ph ph-envelope" aria-label="email"></i></td>
|
|
302
416
|
<td>Envelope</td>
|
|
303
417
|
<td>Email, message</td>
|
|
304
418
|
</tr>
|
|
305
419
|
<tr>
|
|
306
|
-
<td
|
|
420
|
+
<td><i class="ph ph-bell" aria-label="notification"></i></td>
|
|
307
421
|
<td>Bell</td>
|
|
308
422
|
<td>Notification, alert</td>
|
|
309
423
|
</tr>
|
|
@@ -443,7 +557,17 @@
|
|
|
443
557
|
</div>
|
|
444
558
|
|
|
445
559
|
<!-- Scripts -->
|
|
560
|
+
<script>
|
|
561
|
+
// Pass configuration to frontend
|
|
562
|
+
window.docBuilderConfig = {
|
|
563
|
+
features: {
|
|
564
|
+
showPdfDownload: true,
|
|
565
|
+
menuDefaultOpen: false
|
|
566
|
+
}
|
|
567
|
+
};
|
|
568
|
+
</script>
|
|
446
569
|
<script src="/js/main.js"></script>
|
|
447
|
-
|
|
570
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
571
|
+
<script src="/js/auth.js"></script>
|
|
448
572
|
</body>
|
|
449
573
|
</html>
|