@knowcode/doc-builder 1.9.1 → 1.9.3
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/CLAUDE.md +35 -0
- package/README.md +1 -0
- package/assets/css/notion-style.css +2 -2
- package/html/README.html +151 -33
- package/html/auth.js +4 -3
- package/html/css/notion-style.css +394 -13
- package/html/documentation-index.html +134 -10
- package/html/guides/authentication-default-change.html +132 -7
- package/html/guides/authentication-guide.html +143 -19
- package/html/guides/claude-workflow-guide.html +139 -22
- package/html/guides/documentation-standards.html +135 -11
- package/html/guides/html-embedding-guide.html +451 -0
- package/html/guides/image-modal-guide.html +134 -10
- package/html/guides/phosphor-icons-guide.html +152 -27
- package/html/guides/private-directory-authentication-troubleshooting.html +545 -0
- package/html/guides/private-directory-authentication.html +132 -7
- package/html/guides/public-site-deployment.html +132 -7
- package/html/guides/search-engine-verification-guide.html +132 -7
- package/html/guides/seo-guide.html +132 -7
- package/html/guides/seo-optimization-guide.html +161 -38
- package/html/guides/troubleshooting-guide.html +143 -19
- package/html/guides/windows-setup-guide.html +163 -38
- package/html/image-modal-test.html +127 -8
- package/html/index.html +151 -33
- package/html/js/auth.js +119 -39
- package/html/js/main.js +259 -25
- package/html/private/cache-control-anti-pattern.html +137 -12
- package/html/private/launch/README.html +146 -15
- package/html/private/launch/auth-cleanup-summary.html +155 -24
- package/html/private/launch/bubble-plugin-specification.html +138 -7
- package/html/private/launch/go-to-market-strategy.html +140 -9
- package/html/private/launch/launch-announcements.html +154 -24
- package/html/private/launch/vercel-deployment-auth-setup.html +140 -9
- package/html/private/next-steps-walkthrough.html +139 -14
- package/html/private/supabase-auth-implementation-completed.html +145 -21
- package/html/private/supabase-auth-implementation-plan.html +138 -14
- package/html/private/supabase-auth-integration-plan.html +144 -21
- package/html/private/supabase-auth-setup-guide.html +141 -16
- package/html/private/test-private-doc.html +132 -7
- package/html/private/user-management-tooling.html +132 -7
- package/html/prompts/markdown-document-standards.html +136 -12
- package/html/sitemap.xml +70 -46
- package/html/vercel-cli-setup-guide.html +130 -11
- package/html/vercel-first-time-setup-guide.html +127 -8
- package/lib/config.js +2 -0
- package/lib/emoji-mapper.js +2 -0
- package/lib/supabase-auth.js +4 -3
- 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-28T16:34:27.926Z",
|
|
102
|
+
"dateModified": "2025-07-28T16:34:27.926Z",
|
|
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.3">Last updated: Jul 28, 2025, 04:34 PM 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,16 +205,18 @@
|
|
|
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>
|
|
212
|
+
<a href="/guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="fas fa-file-alt"></i> Private Directory Authentication Troubleshooting</a>
|
|
98
213
|
<a href="/guides/public-site-deployment.html" class="nav-item" data-tooltip="The @knowcode/doc-builder now supports deploying public documentation sites without authentication."><i class="fas fa-file-alt"></i> Public Site Deployment</a>
|
|
99
214
|
<a href="/guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="fas fa-file-alt"></i> Search Engine Verification Guide</a>
|
|
100
215
|
<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>
|
|
101
216
|
<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
217
|
<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
218
|
<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">
|
|
219
|
+
<div class="nav-section private-nav" data-level="1">
|
|
105
220
|
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
106
221
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
107
222
|
</a>
|
|
@@ -114,7 +229,7 @@
|
|
|
114
229
|
<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
230
|
<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
231
|
<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">
|
|
232
|
+
<div class="nav-section private-nav" data-level="2">
|
|
118
233
|
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
119
234
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
120
235
|
</a>
|
|
@@ -180,14 +295,14 @@
|
|
|
180
295
|
</code></pre>
|
|
181
296
|
<h3>Best Practices for Alt Text</h3>
|
|
182
297
|
<p>Since alt text becomes the modal caption, write descriptive, meaningful descriptions:</p>
|
|
183
|
-
<p><strong
|
|
298
|
+
<p><strong><i class="ph ph-check-circle" aria-label="checked"></i> Good Alt Text:</strong></p>
|
|
184
299
|
<pre><code class="language-markdown">
|
|
185
300
|
|
|
186
301
|
|
|
187
302
|
|
|
188
303
|
|
|
189
304
|
</code></pre>
|
|
190
|
-
<p><strong
|
|
305
|
+
<p><strong><i class="ph ph-x-circle" aria-label="error"></i> Poor Alt Text:</strong></p>
|
|
191
306
|
<pre><code class="language-markdown">
|
|
192
307
|
|
|
193
308
|
|
|
@@ -338,7 +453,6 @@ We've redesigned the dashboard for better usability:
|
|
|
338
453
|
<h3>Mermaid Diagrams</h3>
|
|
339
454
|
<p>Mermaid diagrams can also benefit from the modal system when exported as images:</p>
|
|
340
455
|
<pre><code class="language-markdown"><div class="mermaid-wrapper">
|
|
341
|
-
<div class="mermaid-title">Diagram</div>
|
|
342
456
|
<div class="mermaid">graph TD
|
|
343
457
|
A[User Request] --> B{Authentication}
|
|
344
458
|
B -->|Valid| C[Process Request]
|
|
@@ -375,7 +489,17 @@ For more advanced customization options or troubleshooting, refer to the main do
|
|
|
375
489
|
</div>
|
|
376
490
|
|
|
377
491
|
<!-- Scripts -->
|
|
492
|
+
<script>
|
|
493
|
+
// Pass configuration to frontend
|
|
494
|
+
window.docBuilderConfig = {
|
|
495
|
+
features: {
|
|
496
|
+
showPdfDownload: true,
|
|
497
|
+
menuDefaultOpen: false
|
|
498
|
+
}
|
|
499
|
+
};
|
|
500
|
+
</script>
|
|
378
501
|
<script src="/js/main.js"></script>
|
|
379
|
-
|
|
502
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
503
|
+
<script src="/js/auth.js"></script>
|
|
380
504
|
</body>
|
|
381
505
|
</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-28T16:34:27.929Z",
|
|
102
|
+
"dateModified": "2025-07-28T16:34:27.929Z",
|
|
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.3">Last updated: Jul 28, 2025, 04:34 PM 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,16 +205,18 @@
|
|
|
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>
|
|
212
|
+
<a href="/guides/private-directory-authentication-troubleshooting.html" class="nav-item" data-tooltip="Private Directory Authentication Troubleshooting."><i class="fas fa-file-alt"></i> Private Directory Authentication Troubleshooting</a>
|
|
98
213
|
<a href="/guides/public-site-deployment.html" class="nav-item" data-tooltip="The @knowcode/doc-builder now supports deploying public documentation sites without authentication."><i class="fas fa-file-alt"></i> Public Site Deployment</a>
|
|
99
214
|
<a href="/guides/search-engine-verification-guide.html" class="nav-item" data-tooltip="Search engine verification provides access to powerful webmaster tools:."><i class="fas fa-file-alt"></i> Search Engine Verification Guide</a>
|
|
100
215
|
<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>
|
|
101
216
|
<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
217
|
<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
218
|
<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">
|
|
219
|
+
<div class="nav-section private-nav" data-level="1">
|
|
105
220
|
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
106
221
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
107
222
|
</a>
|
|
@@ -114,7 +229,7 @@
|
|
|
114
229
|
<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
230
|
<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
231
|
<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">
|
|
232
|
+
<div class="nav-section private-nav" data-level="2">
|
|
118
233
|
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
119
234
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
120
235
|
</a>
|
|
@@ -150,9 +265,9 @@
|
|
|
150
265
|
</code></pre>
|
|
151
266
|
<p>They are automatically converted to Phosphor icons in HTML:</p>
|
|
152
267
|
<ul>
|
|
153
|
-
<li
|
|
154
|
-
<li
|
|
155
|
-
<li
|
|
268
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> → Check circle icon</li>
|
|
269
|
+
<li><i class="ph ph-x-circle" aria-label="error"></i> → X circle icon </li>
|
|
270
|
+
<li><i class="ph ph-rocket-launch" aria-label="launch"></i> → Rocket launch icon</li>
|
|
156
271
|
</ul>
|
|
157
272
|
<h3>Benefits</h3>
|
|
158
273
|
<ul>
|
|
@@ -193,27 +308,27 @@
|
|
|
193
308
|
</tr>
|
|
194
309
|
</thead>
|
|
195
310
|
<tbody><tr>
|
|
196
|
-
<td
|
|
311
|
+
<td><i class="ph ph-check-circle" aria-label="checked"></i></td>
|
|
197
312
|
<td>Check circle</td>
|
|
198
313
|
<td>Success, completed, verified</td>
|
|
199
314
|
</tr>
|
|
200
315
|
<tr>
|
|
201
|
-
<td
|
|
316
|
+
<td><i class="ph ph-x-circle" aria-label="error"></i></td>
|
|
202
317
|
<td>X circle</td>
|
|
203
318
|
<td>Error, failed, incorrect</td>
|
|
204
319
|
</tr>
|
|
205
320
|
<tr>
|
|
206
|
-
<td
|
|
321
|
+
<td><i class="ph ph-question" aria-label="question"></i></td>
|
|
207
322
|
<td>Question mark</td>
|
|
208
323
|
<td>Unknown, uncertain</td>
|
|
209
324
|
</tr>
|
|
210
325
|
<tr>
|
|
211
|
-
<td
|
|
326
|
+
<td><i class="ph ph-warning-circle" aria-label="warning"></i></td>
|
|
212
327
|
<td>Warning circle</td>
|
|
213
328
|
<td>Caution, important note</td>
|
|
214
329
|
</tr>
|
|
215
330
|
<tr>
|
|
216
|
-
<td
|
|
331
|
+
<td><i class="ph ph-prohibit-inset" aria-label="not allowed"></i></td>
|
|
217
332
|
<td>Prohibit</td>
|
|
218
333
|
<td>Not allowed, forbidden</td>
|
|
219
334
|
</tr>
|
|
@@ -228,27 +343,27 @@
|
|
|
228
343
|
</tr>
|
|
229
344
|
</thead>
|
|
230
345
|
<tbody><tr>
|
|
231
|
-
<td
|
|
346
|
+
<td><i class="ph ph-laptop" aria-label="laptop"></i></td>
|
|
232
347
|
<td>Laptop</td>
|
|
233
348
|
<td>Development, coding</td>
|
|
234
349
|
</tr>
|
|
235
350
|
<tr>
|
|
236
|
-
<td
|
|
351
|
+
<td><i class="ph ph-wrench" aria-label="settings"></i></td>
|
|
237
352
|
<td>Wrench</td>
|
|
238
353
|
<td>Configuration, settings</td>
|
|
239
354
|
</tr>
|
|
240
355
|
<tr>
|
|
241
|
-
<td
|
|
356
|
+
<td><i class="ph ph-bug" aria-label="bug"></i></td>
|
|
242
357
|
<td>Bug</td>
|
|
243
358
|
<td>Issues, debugging</td>
|
|
244
359
|
</tr>
|
|
245
360
|
<tr>
|
|
246
|
-
<td
|
|
361
|
+
<td><i class="ph ph-rocket-launch" aria-label="launch"></i></td>
|
|
247
362
|
<td>Rocket</td>
|
|
248
363
|
<td>Launch, deploy, release</td>
|
|
249
364
|
</tr>
|
|
250
365
|
<tr>
|
|
251
|
-
<td
|
|
366
|
+
<td><i class="ph ph-lightning" aria-label="fast"></i></td>
|
|
252
367
|
<td>Lightning</td>
|
|
253
368
|
<td>Performance, speed</td>
|
|
254
369
|
</tr>
|
|
@@ -263,22 +378,22 @@
|
|
|
263
378
|
</tr>
|
|
264
379
|
</thead>
|
|
265
380
|
<tbody><tr>
|
|
266
|
-
<td
|
|
381
|
+
<td><i class="ph ph-note-pencil" aria-label="edit"></i></td>
|
|
267
382
|
<td>Note pencil</td>
|
|
268
383
|
<td>Edit, write</td>
|
|
269
384
|
</tr>
|
|
270
385
|
<tr>
|
|
271
|
-
<td
|
|
386
|
+
<td><i class="ph ph-books" aria-label="documentation"></i></td>
|
|
272
387
|
<td>Books</td>
|
|
273
388
|
<td>Documentation, guides</td>
|
|
274
389
|
</tr>
|
|
275
390
|
<tr>
|
|
276
|
-
<td
|
|
391
|
+
<td><i class="ph ph-folder" aria-label="folder"></i></td>
|
|
277
392
|
<td>Folder</td>
|
|
278
393
|
<td>Directory, category</td>
|
|
279
394
|
</tr>
|
|
280
395
|
<tr>
|
|
281
|
-
<td
|
|
396
|
+
<td><i class="ph ph-link" aria-label="link"></i></td>
|
|
282
397
|
<td>Link</td>
|
|
283
398
|
<td>URL, connection</td>
|
|
284
399
|
</tr>
|
|
@@ -293,17 +408,17 @@
|
|
|
293
408
|
</tr>
|
|
294
409
|
</thead>
|
|
295
410
|
<tbody><tr>
|
|
296
|
-
<td
|
|
411
|
+
<td><i class="ph ph-chat-circle" aria-label="chat"></i></td>
|
|
297
412
|
<td>Chat circle</td>
|
|
298
413
|
<td>Comments, discussion</td>
|
|
299
414
|
</tr>
|
|
300
415
|
<tr>
|
|
301
|
-
<td
|
|
416
|
+
<td><i class="ph ph-envelope" aria-label="email"></i></td>
|
|
302
417
|
<td>Envelope</td>
|
|
303
418
|
<td>Email, message</td>
|
|
304
419
|
</tr>
|
|
305
420
|
<tr>
|
|
306
|
-
<td
|
|
421
|
+
<td><i class="ph ph-bell" aria-label="notification"></i></td>
|
|
307
422
|
<td>Bell</td>
|
|
308
423
|
<td>Notification, alert</td>
|
|
309
424
|
</tr>
|
|
@@ -443,7 +558,17 @@
|
|
|
443
558
|
</div>
|
|
444
559
|
|
|
445
560
|
<!-- Scripts -->
|
|
561
|
+
<script>
|
|
562
|
+
// Pass configuration to frontend
|
|
563
|
+
window.docBuilderConfig = {
|
|
564
|
+
features: {
|
|
565
|
+
showPdfDownload: true,
|
|
566
|
+
menuDefaultOpen: false
|
|
567
|
+
}
|
|
568
|
+
};
|
|
569
|
+
</script>
|
|
446
570
|
<script src="/js/main.js"></script>
|
|
447
|
-
|
|
571
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
572
|
+
<script src="/js/auth.js"></script>
|
|
448
573
|
</body>
|
|
449
574
|
</html>
|