@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
|
@@ -0,0 +1,451 @@
|
|
|
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="@knowcode/doc-builder now supports embedding custom HTML files in your documentation, enabling you to include interactive demos, widgets, and other web...">
|
|
7
|
+
<title>HTML Embedding 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, html, your">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/guides/html-embedding-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/html-embedding-guide.html">
|
|
17
|
+
<meta property="og:title" content="HTML Embedding Guide | @knowcode/doc-builder">
|
|
18
|
+
<meta property="og:description" content="@knowcode/doc-builder now supports embedding custom HTML files in your documentation, enabling you to include interactive demos, widgets, and other web...">
|
|
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="HTML Embedding Guide | @knowcode/doc-builder">
|
|
28
|
+
<meta name="twitter:description" content="@knowcode/doc-builder now supports embedding custom HTML files in your documentation, enabling you to include interactive demos, widgets, and other web...">
|
|
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">
|
|
34
|
+
|
|
35
|
+
<!-- Fonts -->
|
|
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">
|
|
37
|
+
|
|
38
|
+
<!-- Icons -->
|
|
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">
|
|
41
|
+
|
|
42
|
+
<!-- Mermaid -->
|
|
43
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
44
|
+
|
|
45
|
+
<!-- Styles -->
|
|
46
|
+
<link rel="stylesheet" href="/css/notion-style.css">
|
|
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
|
+
|
|
83
|
+
<!-- Favicon -->
|
|
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": "HTML Embedding Guide",
|
|
91
|
+
"description": "@knowcode/doc-builder now supports embedding custom HTML files in your documentation, enabling you to include interactive demos, widgets, and other web...",
|
|
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.924Z",
|
|
102
|
+
"dateModified": "2025-07-28T16:34:27.924Z",
|
|
103
|
+
"mainEntityOfPage": {
|
|
104
|
+
"@type": "WebPage",
|
|
105
|
+
"@id": "https://doc-builder-delta.vercel.app/guides/html-embedding-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": "Html Embedding Guide",
|
|
126
|
+
"item": "https://doc-builder-delta.vercel.app/guides/html-embedding-guide.html"
|
|
127
|
+
}
|
|
128
|
+
]
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
</script>
|
|
132
|
+
</head>
|
|
133
|
+
<body>
|
|
134
|
+
<!-- Header -->
|
|
135
|
+
<header class="header">
|
|
136
|
+
<div class="header-content">
|
|
137
|
+
<a href="/index.html" class="logo">@knowcode/doc-builder</a>
|
|
138
|
+
|
|
139
|
+
<div class="header-actions">
|
|
140
|
+
<div class="deployment-info">
|
|
141
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.3">Last updated: Jul 28, 2025, 04:34 PM UTC</span>
|
|
142
|
+
</div>
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
<a href="../../login.html" class="auth-btn" title="Login/Logout">
|
|
146
|
+
<i class="fas fa-sign-in-alt"></i>
|
|
147
|
+
</a>
|
|
148
|
+
|
|
149
|
+
|
|
150
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
151
|
+
<i class="fas fa-moon"></i>
|
|
152
|
+
</button>
|
|
153
|
+
|
|
154
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
155
|
+
<i class="fas fa-bars"></i>
|
|
156
|
+
</button>
|
|
157
|
+
</div>
|
|
158
|
+
</div>
|
|
159
|
+
</header>
|
|
160
|
+
|
|
161
|
+
<!-- Preview Banner -->
|
|
162
|
+
<div id="preview-banner" class="preview-banner">
|
|
163
|
+
<div class="banner-content">
|
|
164
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
165
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
166
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
167
|
+
<i class="fas fa-times"></i>
|
|
168
|
+
</button>
|
|
169
|
+
</div>
|
|
170
|
+
</div>
|
|
171
|
+
|
|
172
|
+
<!-- Breadcrumbs -->
|
|
173
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
174
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
175
|
+
</nav>
|
|
176
|
+
|
|
177
|
+
<!-- Main Content -->
|
|
178
|
+
<div class="main-wrapper">
|
|
179
|
+
<!-- Sidebar -->
|
|
180
|
+
<aside class="sidebar">
|
|
181
|
+
<div class="sidebar-header">
|
|
182
|
+
<div class="filter-box">
|
|
183
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
184
|
+
<i class="fas fa-search filter-icon"></i>
|
|
185
|
+
</div>
|
|
186
|
+
</div>
|
|
187
|
+
<nav class="navigation">
|
|
188
|
+
|
|
189
|
+
<div class="nav-section" data-level="0">
|
|
190
|
+
<a class="nav-title" href="/README.html" >
|
|
191
|
+
<i class="fas fa-home"></i> Documentation
|
|
192
|
+
</a>
|
|
193
|
+
<div class="nav-content" >
|
|
194
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
195
|
+
<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>
|
|
196
|
+
<a href="/image-modal-test.html" class="nav-item" data-tooltip="This document tests the new image modal functionality in doc-builder."><i class="fas fa-file-alt"></i> Image Modal Test</a>
|
|
197
|
+
<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>
|
|
198
|
+
<a href="/vercel-first-time-setup-guide.html" class="nav-item" data-tooltip="This guide walks you through the Vercel deployment process when using ."><i class="fas fa-file-alt"></i> Vercel First Time Setup Guide</a></div></div>
|
|
199
|
+
<div class="nav-section" data-level="1">
|
|
200
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
201
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
202
|
+
</a>
|
|
203
|
+
<div class="nav-content" id="nav-guides-1">
|
|
204
|
+
<a href="/guides/authentication-default-change.html" class="nav-item" data-tooltip="Starting from version 1.7.4, @knowcode/doc-builder now defaults to no authentication for all documentation sites."><i class="fas fa-file-alt"></i> Authentication Default Change</a>
|
|
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>
|
|
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>
|
|
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 active" 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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
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>
|
|
219
|
+
<div class="nav-section private-nav" data-level="1">
|
|
220
|
+
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
221
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
222
|
+
</a>
|
|
223
|
+
<div class="nav-content collapsed" id="nav-private-1">
|
|
224
|
+
<a href="/private/cache-control-anti-pattern.html" class="nav-item" data-tooltip="Cache Control Anti-Pattern: Why Aggressive Cache-Busting is Bad for Documentation Sites."><i class="fas fa-file-alt"></i> Cache Control Anti Pattern</a>
|
|
225
|
+
<a href="/private/next-steps-walkthrough.html" class="nav-item" data-tooltip="Now that we've implemented Supabase authentication, let's walk through testing the implementation and preparing for deployment."><i class="fas fa-file-alt"></i> Next Steps Walkthrough</a>
|
|
226
|
+
<a href="/private/supabase-auth-implementation-completed.html" class="nav-item" data-tooltip="This document records the successful implementation of Supabase authentication in @knowcode/doc-builder v1.7.5+."><i class="fas fa-file-alt"></i> Supabase Auth Implementation Completed</a>
|
|
227
|
+
<a href="/private/supabase-auth-implementation-plan.html" class="nav-item" data-tooltip="Supabase Auth Implementation Plan for @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Supabase Auth Implementation Plan</a>
|
|
228
|
+
<a href="/private/supabase-auth-integration-plan.html" class="nav-item" data-tooltip="Supabase Authentication Integration Plan for @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Supabase Auth Integration Plan</a>
|
|
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>
|
|
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>
|
|
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>
|
|
232
|
+
<div class="nav-section private-nav" data-level="2">
|
|
233
|
+
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
234
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
235
|
+
</a>
|
|
236
|
+
<div class="nav-content collapsed" id="nav-private-launch-2">
|
|
237
|
+
<a href="/private/launch/README.html" class="nav-item" data-tooltip="This directory contains all documentation related to the commercial launch of @knowcode/doc-builder, including go-to-market strategy, platform..."><i class="fas fa-file-alt"></i> Launch Overview</a>
|
|
238
|
+
<a href="/private/launch/auth-cleanup-summary.html" class="nav-item" data-tooltip="All references to the old client-side authentication system have been removed from @knowcode/doc-builder."><i class="fas fa-file-alt"></i> Auth Cleanup Summary</a>
|
|
239
|
+
<a href="/private/launch/bubble-plugin-specification.html" class="nav-item" data-tooltip="This document outlines the technical specification for creating a Bubble.io plugin that integrates @knowcode/doc-builder, enabling Bubble developers..."><i class="fas fa-file-alt"></i> Bubble Plugin Specification</a>
|
|
240
|
+
<a href="/private/launch/go-to-market-strategy.html" class="nav-item" data-tooltip="Go-to-Market Strategy & Product Launch Plan."><i class="fas fa-file-alt"></i> Go To Market Strategy</a>
|
|
241
|
+
<a href="/private/launch/launch-announcements.html" class="nav-item" data-tooltip="This document contains ready-to-use announcement templates for launching @knowcode/doc-builder across various platforms and channels."><i class="fas fa-file-alt"></i> Launch Announcements</a>
|
|
242
|
+
<a href="/private/launch/vercel-deployment-auth-setup.html" class="nav-item" data-tooltip="Vercel Deployment Authentication Setup Guide."><i class="fas fa-file-alt"></i> Vercel Deployment Auth Setup</a></div></div>
|
|
243
|
+
<div class="nav-section" data-level="1">
|
|
244
|
+
<a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
|
|
245
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
|
|
246
|
+
</a>
|
|
247
|
+
<div class="nav-content collapsed" id="nav-prompts-1">
|
|
248
|
+
<a href="/prompts/markdown-document-standards.html" class="nav-item" data-tooltip="Detailed introduction to the topic..."><i class="fas fa-file-alt"></i> Markdown Document Standards</a></div></div>
|
|
249
|
+
</nav>
|
|
250
|
+
<div class="resize-handle"></div>
|
|
251
|
+
</aside>
|
|
252
|
+
|
|
253
|
+
<!-- Content Area -->
|
|
254
|
+
<main class="content">
|
|
255
|
+
<div class="content-inner">
|
|
256
|
+
<h1>HTML Embedding Guide</h1>
|
|
257
|
+
<p>@knowcode/doc-builder now supports embedding custom HTML files in your documentation, enabling you to include interactive demos, widgets, and other web content using iframes.</p>
|
|
258
|
+
<h2>Overview</h2>
|
|
259
|
+
<p>Starting from version 1.9.2, doc-builder treats HTML files (<code>.html</code> and <code>.htm</code>) as attachments that are automatically copied to your output directory during the build process. This allows you to:</p>
|
|
260
|
+
<ul>
|
|
261
|
+
<li><i class="ph ph-globe" aria-label="global"></i> Include interactive demos and examples</li>
|
|
262
|
+
<li><i class="ph ph-chart-bar" aria-label="chart"></i> Embed custom visualizations or dashboards </li>
|
|
263
|
+
<li><i class="ph ph-wrench" aria-label="settings"></i> Add third-party widgets or tools</li>
|
|
264
|
+
<li><i class="ph ph-game-controller" aria-label="gaming"></i> Create interactive tutorials or games</li>
|
|
265
|
+
<li><i class="ph ph-device-mobile" aria-label="mobile"></i> Include responsive web applications</li>
|
|
266
|
+
</ul>
|
|
267
|
+
<h2>How It Works</h2>
|
|
268
|
+
<ol>
|
|
269
|
+
<li><strong>Place HTML files</strong> anywhere in your <code>docs</code> directory</li>
|
|
270
|
+
<li><strong>Build your documentation</strong> using <code>npx @knowcode/doc-builder build</code></li>
|
|
271
|
+
<li><strong>Reference the HTML files</strong> in your markdown using iframes or direct links</li>
|
|
272
|
+
</ol>
|
|
273
|
+
<p>The HTML files maintain their relative paths from the docs directory, making it easy to organize and reference them.</p>
|
|
274
|
+
<h2>Basic Usage</h2>
|
|
275
|
+
<h3>Step 1: Create Your HTML File</h3>
|
|
276
|
+
<p>Create an HTML file in your docs directory:</p>
|
|
277
|
+
<pre><code>docs/
|
|
278
|
+
├── README.md
|
|
279
|
+
├── guides/
|
|
280
|
+
│ └── html-embedding-guide.md
|
|
281
|
+
└── examples/
|
|
282
|
+
└── interactive-demo.html
|
|
283
|
+
</code></pre>
|
|
284
|
+
<h3>Step 2: Embed in Markdown</h3>
|
|
285
|
+
<p>Use an iframe to embed the HTML file in your markdown documentation:</p>
|
|
286
|
+
<pre><code class="language-html"><iframe src="/examples/interactive-demo.html"
|
|
287
|
+
width="100%"
|
|
288
|
+
height="600"
|
|
289
|
+
frameborder="0"
|
|
290
|
+
style="border: 1px solid #e5e7eb; border-radius: 8px;">
|
|
291
|
+
</iframe>
|
|
292
|
+
</code></pre>
|
|
293
|
+
<h3>Step 3: Build and Deploy</h3>
|
|
294
|
+
<p>Run the build command:</p>
|
|
295
|
+
<pre><code class="language-bash">npx @knowcode/doc-builder build
|
|
296
|
+
</code></pre>
|
|
297
|
+
<p>The HTML file will be copied to <code>html/examples/interactive-demo.html</code> and will be accessible when you deploy your documentation.</p>
|
|
298
|
+
<h2>Live Example</h2>
|
|
299
|
+
<p>Here's an embedded interactive demo:</p>
|
|
300
|
+
<iframe src="/examples/interactive-demo.html"
|
|
301
|
+
width="100%"
|
|
302
|
+
height="700"
|
|
303
|
+
frameborder="0"
|
|
304
|
+
style="border: 1px solid #e5e7eb; border-radius: 8px; margin: 20px 0;">
|
|
305
|
+
</iframe>
|
|
306
|
+
|
|
307
|
+
<h2>Advanced Usage</h2>
|
|
308
|
+
<h3>Responsive Iframes</h3>
|
|
309
|
+
<p>Make your embedded content responsive using a wrapper div:</p>
|
|
310
|
+
<pre><code class="language-html"><div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
|
|
311
|
+
<iframe src="/examples/dashboard.html"
|
|
312
|
+
style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0;">
|
|
313
|
+
</iframe>
|
|
314
|
+
</div>
|
|
315
|
+
</code></pre>
|
|
316
|
+
<h3>Direct Links</h3>
|
|
317
|
+
<p>You can also link directly to HTML files:</p>
|
|
318
|
+
<pre><code class="language-markdown">[Open Interactive Demo](/examples/interactive-demo.html)
|
|
319
|
+
</code></pre>
|
|
320
|
+
<h3>Multiple HTML Files</h3>
|
|
321
|
+
<p>Organize complex projects with multiple HTML files:</p>
|
|
322
|
+
<pre><code>docs/
|
|
323
|
+
├── demos/
|
|
324
|
+
│ ├── chart-demo.html
|
|
325
|
+
│ ├── form-demo.html
|
|
326
|
+
│ └── assets/
|
|
327
|
+
│ ├── demo.css
|
|
328
|
+
│ └── demo.js
|
|
329
|
+
└── widgets/
|
|
330
|
+
├── calculator.html
|
|
331
|
+
└── converter.html
|
|
332
|
+
</code></pre>
|
|
333
|
+
<h2>Security Considerations</h2>
|
|
334
|
+
<p>When embedding HTML content, consider these security best practices:</p>
|
|
335
|
+
<ol>
|
|
336
|
+
<li><strong>Trust Your Content</strong>: Only embed HTML files from trusted sources</li>
|
|
337
|
+
<li><strong>Sandbox Iframes</strong>: Use the <code>sandbox</code> attribute for additional security:<pre><code class="language-html"><iframe src="/examples/demo.html"
|
|
338
|
+
sandbox="allow-scripts allow-same-origin">
|
|
339
|
+
</iframe>
|
|
340
|
+
</code></pre>
|
|
341
|
+
</li>
|
|
342
|
+
<li><strong>HTTPS Only</strong>: Ensure your documentation is served over HTTPS</li>
|
|
343
|
+
<li><strong>Content Security Policy</strong>: Consider implementing CSP headers on your server</li>
|
|
344
|
+
</ol>
|
|
345
|
+
<h2>Best Practices</h2>
|
|
346
|
+
<h3>1. Keep It Lightweight</h3>
|
|
347
|
+
<ul>
|
|
348
|
+
<li>Minimize external dependencies in your HTML files</li>
|
|
349
|
+
<li>Optimize images and assets</li>
|
|
350
|
+
<li>Use inline styles and scripts when possible</li>
|
|
351
|
+
</ul>
|
|
352
|
+
<h3>2. Make It Responsive</h3>
|
|
353
|
+
<pre><code class="language-html"><meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
354
|
+
</code></pre>
|
|
355
|
+
<h3>3. Match Your Theme</h3>
|
|
356
|
+
<p>Use CSS that complements your documentation's design:</p>
|
|
357
|
+
<pre><code class="language-css">body {
|
|
358
|
+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
|
|
359
|
+
background-color: #f5f5f5;
|
|
360
|
+
color: #333;
|
|
361
|
+
}
|
|
362
|
+
</code></pre>
|
|
363
|
+
<h3>4. Provide Fallbacks</h3>
|
|
364
|
+
<p>Include a message for users who can't view iframes:</p>
|
|
365
|
+
<pre><code class="language-html"><iframe src="/examples/demo.html">
|
|
366
|
+
<p>Your browser doesn't support iframes.
|
|
367
|
+
<a href="/examples/demo.html">View the demo directly</a>.</p>
|
|
368
|
+
</iframe>
|
|
369
|
+
</code></pre>
|
|
370
|
+
<h2>Common Use Cases</h2>
|
|
371
|
+
<h3>Interactive Code Playgrounds</h3>
|
|
372
|
+
<p>Embed code editors or REPLs for hands-on learning:</p>
|
|
373
|
+
<pre><code class="language-html"><iframe src="/playground/javascript-basics.html"
|
|
374
|
+
width="100%" height="500">
|
|
375
|
+
</iframe>
|
|
376
|
+
</code></pre>
|
|
377
|
+
<h3>API Documentation</h3>
|
|
378
|
+
<p>Include interactive API explorers:</p>
|
|
379
|
+
<pre><code class="language-html"><iframe src="/api-explorer/rest-api.html"
|
|
380
|
+
width="100%" height="600">
|
|
381
|
+
</iframe>
|
|
382
|
+
</code></pre>
|
|
383
|
+
<h3>Data Visualizations</h3>
|
|
384
|
+
<p>Embed charts, graphs, or dashboards:</p>
|
|
385
|
+
<pre><code class="language-html"><iframe src="/visualizations/sales-dashboard.html"
|
|
386
|
+
width="100%" height="400">
|
|
387
|
+
</iframe>
|
|
388
|
+
</code></pre>
|
|
389
|
+
<h3>Form Examples</h3>
|
|
390
|
+
<p>Show working form implementations:</p>
|
|
391
|
+
<pre><code class="language-html"><iframe src="/forms/contact-form.html"
|
|
392
|
+
width="100%" height="500">
|
|
393
|
+
</iframe>
|
|
394
|
+
</code></pre>
|
|
395
|
+
<h2>Troubleshooting</h2>
|
|
396
|
+
<h3>HTML File Not Found</h3>
|
|
397
|
+
<ul>
|
|
398
|
+
<li>Ensure the HTML file is in your <code>docs</code> directory</li>
|
|
399
|
+
<li>Check the file path in your iframe <code>src</code> attribute</li>
|
|
400
|
+
<li>Verify the file was copied during build (check <code>html</code> output directory)</li>
|
|
401
|
+
</ul>
|
|
402
|
+
<h3>Styling Issues</h3>
|
|
403
|
+
<ul>
|
|
404
|
+
<li>Use viewport meta tag for mobile compatibility</li>
|
|
405
|
+
<li>Test in both light and dark themes</li>
|
|
406
|
+
<li>Consider iframe border and padding</li>
|
|
407
|
+
</ul>
|
|
408
|
+
<h3>Performance Concerns</h3>
|
|
409
|
+
<ul>
|
|
410
|
+
<li>Lazy load iframes that are below the fold</li>
|
|
411
|
+
<li>Minimize external resource requests</li>
|
|
412
|
+
<li>Optimize images and assets</li>
|
|
413
|
+
</ul>
|
|
414
|
+
<h2>Limitations</h2>
|
|
415
|
+
<ul>
|
|
416
|
+
<li>HTML files are copied as-is without processing</li>
|
|
417
|
+
<li>Relative links in HTML files should account for the output structure</li>
|
|
418
|
+
<li>Large HTML files may impact build time</li>
|
|
419
|
+
<li>Some hosting providers may have iframe restrictions</li>
|
|
420
|
+
</ul>
|
|
421
|
+
<h2>Summary</h2>
|
|
422
|
+
<p>HTML embedding support in @knowcode/doc-builder provides a powerful way to enhance your documentation with interactive content. By treating HTML files as attachments, you can easily include demos, widgets, and custom web content while maintaining the simplicity of markdown-based documentation.</p>
|
|
423
|
+
<p>Remember to:</p>
|
|
424
|
+
<ul>
|
|
425
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> Place HTML files in your docs directory</li>
|
|
426
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> Use iframes to embed content</li>
|
|
427
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> Follow security best practices</li>
|
|
428
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> Test responsive behavior</li>
|
|
429
|
+
<li><i class="ph ph-check-circle" aria-label="checked"></i> Keep performance in mind</li>
|
|
430
|
+
</ul>
|
|
431
|
+
<p>This feature opens up endless possibilities for creating rich, interactive documentation that goes beyond static content!</p>
|
|
432
|
+
|
|
433
|
+
</div>
|
|
434
|
+
</main>
|
|
435
|
+
</div>
|
|
436
|
+
|
|
437
|
+
<!-- Scripts -->
|
|
438
|
+
<script>
|
|
439
|
+
// Pass configuration to frontend
|
|
440
|
+
window.docBuilderConfig = {
|
|
441
|
+
features: {
|
|
442
|
+
showPdfDownload: true,
|
|
443
|
+
menuDefaultOpen: false
|
|
444
|
+
}
|
|
445
|
+
};
|
|
446
|
+
</script>
|
|
447
|
+
<script src="/js/main.js"></script>
|
|
448
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
449
|
+
<script src="/js/auth.js"></script>
|
|
450
|
+
</body>
|
|
451
|
+
</html>
|