@knowcode/doc-builder 1.8.7 → 1.9.1
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/.claude/settings.local.json +2 -1
- package/CHANGELOG.md +27 -0
- package/README.md +2 -0
- package/assets/css/notion-style.css +141 -0
- package/assets/js/main.js +76 -0
- package/html/README.html +41 -149
- package/html/css/notion-style.css +13 -253
- package/html/documentation-index.html +24 -127
- package/html/guides/authentication-default-change.html +15 -130
- package/html/guides/authentication-guide.html +27 -141
- package/html/guides/claude-workflow-guide.html +30 -137
- package/html/guides/documentation-standards.html +19 -133
- package/html/guides/image-modal-guide.html +381 -0
- package/html/guides/phosphor-icons-guide.html +35 -150
- package/html/guides/private-directory-authentication.html +15 -130
- package/html/guides/public-site-deployment.html +15 -130
- package/html/guides/search-engine-verification-guide.html +15 -130
- package/html/guides/seo-guide.html +15 -130
- package/html/guides/seo-optimization-guide.html +46 -159
- package/html/guides/troubleshooting-guide.html +27 -141
- package/html/guides/windows-setup-guide.html +46 -161
- package/html/image-modal-test.html +189 -0
- package/html/index.html +41 -149
- package/html/js/auth.js +39 -118
- package/html/js/main.js +25 -183
- package/html/private/cache-control-anti-pattern.html +20 -135
- package/html/private/launch/README.html +23 -144
- package/html/private/launch/auth-cleanup-summary.html +32 -153
- package/html/private/launch/bubble-plugin-specification.html +15 -136
- package/html/private/launch/go-to-market-strategy.html +17 -138
- package/html/private/launch/launch-announcements.html +31 -151
- package/html/private/launch/vercel-deployment-auth-setup.html +17 -138
- package/html/private/next-steps-walkthrough.html +21 -136
- package/html/private/supabase-auth-implementation-completed.html +29 -143
- package/html/private/supabase-auth-implementation-plan.html +22 -136
- package/html/private/supabase-auth-integration-plan.html +29 -142
- package/html/private/supabase-auth-setup-guide.html +24 -139
- package/html/private/test-private-doc.html +15 -130
- package/html/private/user-management-tooling.html +15 -130
- package/html/prompts/markdown-document-standards.html +288 -0
- package/html/sitemap.xml +56 -44
- package/html/vercel-cli-setup-guide.html +19 -128
- package/html/vercel-first-time-setup-guide.html +16 -125
- package/lib/core-builder.js +1 -0
- package/lib/emoji-mapper.js +25 -0
- package/package/assets/css/notion-style.css +432 -135
- package/package/assets/js/main.js +259 -25
- package/package.json +1 -1
|
@@ -0,0 +1,381 @@
|
|
|
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="Beautiful documentation with the least effort possible">
|
|
7
|
+
<title>Image Modal Guide - @knowcode/doc-builder</title>
|
|
8
|
+
|
|
9
|
+
<!-- Fonts -->
|
|
10
|
+
<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
|
+
|
|
12
|
+
<!-- Icons -->
|
|
13
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
|
|
14
|
+
|
|
15
|
+
<!-- Mermaid -->
|
|
16
|
+
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.6.1/dist/mermaid.min.js"></script>
|
|
17
|
+
|
|
18
|
+
<!-- Styles -->
|
|
19
|
+
<link rel="stylesheet" href="/css/notion-style.css">
|
|
20
|
+
|
|
21
|
+
<!-- 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>📚</text></svg>">
|
|
23
|
+
</head>
|
|
24
|
+
<body>
|
|
25
|
+
<!-- Header -->
|
|
26
|
+
<header class="header">
|
|
27
|
+
<div class="header-content">
|
|
28
|
+
<a href="/index.html" class="logo">@knowcode/doc-builder</a>
|
|
29
|
+
|
|
30
|
+
<div class="header-actions">
|
|
31
|
+
<div class="deployment-info">
|
|
32
|
+
<span class="deployment-date" title="Built with doc-builder v1.4.21">Last updated: Jul 27, 2025, 08:32 AM UTC</span>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
38
|
+
<i class="fas fa-moon"></i>
|
|
39
|
+
</button>
|
|
40
|
+
|
|
41
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
42
|
+
<i class="fas fa-bars"></i>
|
|
43
|
+
</button>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
</header>
|
|
47
|
+
|
|
48
|
+
<!-- Preview Banner -->
|
|
49
|
+
<div id="preview-banner" class="preview-banner">
|
|
50
|
+
<div class="banner-content">
|
|
51
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
52
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
53
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
54
|
+
<i class="fas fa-times"></i>
|
|
55
|
+
</button>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
|
|
59
|
+
<!-- Breadcrumbs -->
|
|
60
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
61
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
62
|
+
</nav>
|
|
63
|
+
|
|
64
|
+
<!-- Main Content -->
|
|
65
|
+
<div class="main-wrapper">
|
|
66
|
+
<!-- Sidebar -->
|
|
67
|
+
<aside class="sidebar">
|
|
68
|
+
<div class="sidebar-header">
|
|
69
|
+
<div class="filter-box">
|
|
70
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
71
|
+
<i class="fas fa-search filter-icon"></i>
|
|
72
|
+
</div>
|
|
73
|
+
</div>
|
|
74
|
+
<nav class="navigation">
|
|
75
|
+
|
|
76
|
+
<div class="nav-section" data-level="0">
|
|
77
|
+
<a class="nav-title" href="/README.html" >
|
|
78
|
+
<i class="fas fa-home"></i> Documentation
|
|
79
|
+
</a>
|
|
80
|
+
<div class="nav-content" >
|
|
81
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
82
|
+
<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>
|
|
83
|
+
<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>
|
|
84
|
+
<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>
|
|
85
|
+
<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>
|
|
86
|
+
<div class="nav-section" data-level="1">
|
|
87
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
88
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
89
|
+
</a>
|
|
90
|
+
<div class="nav-content" id="nav-guides-1">
|
|
91
|
+
<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>
|
|
92
|
+
<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
|
+
<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
|
+
<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>
|
|
95
|
+
<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
|
+
<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
|
+
<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>
|
|
98
|
+
<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
|
+
<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
|
+
<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
|
+
<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
|
+
<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
|
+
<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">
|
|
105
|
+
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
106
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
107
|
+
</a>
|
|
108
|
+
<div class="nav-content collapsed" id="nav-private-1">
|
|
109
|
+
<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>
|
|
110
|
+
<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>
|
|
111
|
+
<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>
|
|
112
|
+
<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>
|
|
113
|
+
<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>
|
|
114
|
+
<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
|
+
<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
|
+
<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">
|
|
118
|
+
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
119
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
120
|
+
</a>
|
|
121
|
+
<div class="nav-content collapsed" id="nav-private-launch-2">
|
|
122
|
+
<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>
|
|
123
|
+
<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>
|
|
124
|
+
<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>
|
|
125
|
+
<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>
|
|
126
|
+
<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>
|
|
127
|
+
<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>
|
|
128
|
+
<div class="nav-section" data-level="1">
|
|
129
|
+
<a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
|
|
130
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
|
|
131
|
+
</a>
|
|
132
|
+
<div class="nav-content collapsed" id="nav-prompts-1">
|
|
133
|
+
<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>
|
|
134
|
+
</nav>
|
|
135
|
+
<div class="resize-handle"></div>
|
|
136
|
+
</aside>
|
|
137
|
+
|
|
138
|
+
<!-- Content Area -->
|
|
139
|
+
<main class="content">
|
|
140
|
+
<div class="content-inner">
|
|
141
|
+
<h1>Image Modal Guide</h1>
|
|
142
|
+
<p>The @knowcode/doc-builder includes a powerful image modal system that automatically transforms all images in your documentation into clickable, full-screen experiences.</p>
|
|
143
|
+
<h2>Overview</h2>
|
|
144
|
+
<p>When users click on any image in your generated documentation, it opens in a professional modal overlay with:</p>
|
|
145
|
+
<ul>
|
|
146
|
+
<li>Full-screen viewing experience</li>
|
|
147
|
+
<li>Smooth animations and transitions</li>
|
|
148
|
+
<li>Multiple close methods</li>
|
|
149
|
+
<li>Alt text displayed as captions</li>
|
|
150
|
+
<li>Responsive design for all devices</li>
|
|
151
|
+
<li>Dark theme support</li>
|
|
152
|
+
</ul>
|
|
153
|
+
<h2>Features</h2>
|
|
154
|
+
<h3>Automatic Enhancement</h3>
|
|
155
|
+
<ul>
|
|
156
|
+
<li><strong>Zero Configuration</strong>: All content images automatically become clickable</li>
|
|
157
|
+
<li><strong>Hover Effects</strong>: Images show subtle hover animations to indicate they're interactive</li>
|
|
158
|
+
<li><strong>Professional Styling</strong>: Rounded corners, shadows, and smooth transitions</li>
|
|
159
|
+
</ul>
|
|
160
|
+
<h3>Modal Experience</h3>
|
|
161
|
+
<ul>
|
|
162
|
+
<li><strong>Full-Screen Display</strong>: Images scale to fit the screen while maintaining aspect ratio</li>
|
|
163
|
+
<li><strong>Professional Overlay</strong>: Dark backdrop with blur effects</li>
|
|
164
|
+
<li><strong>Caption Support</strong>: Alt text appears as captions below the modal image</li>
|
|
165
|
+
<li><strong>Responsive Design</strong>: Optimized for desktop, tablet, and mobile devices</li>
|
|
166
|
+
</ul>
|
|
167
|
+
<h3>Accessibility</h3>
|
|
168
|
+
<ul>
|
|
169
|
+
<li><strong>Keyboard Navigation</strong>: Press Escape to close the modal</li>
|
|
170
|
+
<li><strong>Multiple Close Methods</strong>: Click X button, click outside image, or press Escape</li>
|
|
171
|
+
<li><strong>Alt Text Integration</strong>: Screen readers can access image descriptions</li>
|
|
172
|
+
<li><strong>Focus Management</strong>: Proper focus handling when modal opens/closes</li>
|
|
173
|
+
</ul>
|
|
174
|
+
<h2>How to Use</h2>
|
|
175
|
+
<h3>Basic Usage</h3>
|
|
176
|
+
<p>Simply include images in your markdown files as normal:</p>
|
|
177
|
+
<pre><code class="language-markdown">
|
|
178
|
+
|
|
179
|
+
|
|
180
|
+
</code></pre>
|
|
181
|
+
<h3>Best Practices for Alt Text</h3>
|
|
182
|
+
<p>Since alt text becomes the modal caption, write descriptive, meaningful descriptions:</p>
|
|
183
|
+
<p><strong>✅ Good Alt Text:</strong></p>
|
|
184
|
+
<pre><code class="language-markdown">
|
|
185
|
+
|
|
186
|
+
|
|
187
|
+
|
|
188
|
+
|
|
189
|
+
</code></pre>
|
|
190
|
+
<p><strong>❌ Poor Alt Text:</strong></p>
|
|
191
|
+
<pre><code class="language-markdown">
|
|
192
|
+
|
|
193
|
+
|
|
194
|
+
</code></pre>
|
|
195
|
+
<h3>Image Organization</h3>
|
|
196
|
+
<p>Organize your images in dedicated folders for better maintenance:</p>
|
|
197
|
+
<pre><code>docs/
|
|
198
|
+
├── images/
|
|
199
|
+
│ ├── screenshots/
|
|
200
|
+
│ │ ├── dashboard.png
|
|
201
|
+
│ │ └── settings.png
|
|
202
|
+
│ └── diagrams/
|
|
203
|
+
│ ├── architecture.svg
|
|
204
|
+
│ └── workflow.png
|
|
205
|
+
└── guides/
|
|
206
|
+
└── setup-guide.md
|
|
207
|
+
</code></pre>
|
|
208
|
+
<p>Then reference them in your markdown:</p>
|
|
209
|
+
<pre><code class="language-markdown">
|
|
210
|
+
</code></pre>
|
|
211
|
+
<h2>Styling and Theming</h2>
|
|
212
|
+
<h3>CSS Customization</h3>
|
|
213
|
+
<p>The modal system uses CSS variables that you can customize:</p>
|
|
214
|
+
<pre><code class="language-css">:root {
|
|
215
|
+
/* Modal overlay background */
|
|
216
|
+
--color-bg-overlay: rgba(0, 0, 0, 0.9);
|
|
217
|
+
|
|
218
|
+
/* Animation timing */
|
|
219
|
+
--duration-normal: 0.3s;
|
|
220
|
+
--easing-out: cubic-bezier(0.16, 1, 0.3, 1);
|
|
221
|
+
|
|
222
|
+
/* Border radius for modal image */
|
|
223
|
+
--radius-lg: 12px;
|
|
224
|
+
}
|
|
225
|
+
</code></pre>
|
|
226
|
+
<h3>Dark Theme Support</h3>
|
|
227
|
+
<p>The modal automatically adapts to dark theme:</p>
|
|
228
|
+
<ul>
|
|
229
|
+
<li>Darker overlay background</li>
|
|
230
|
+
<li>Adjusted close button styling</li>
|
|
231
|
+
<li>Proper contrast for captions</li>
|
|
232
|
+
</ul>
|
|
233
|
+
<h2>Technical Implementation</h2>
|
|
234
|
+
<h3>Automatic Initialization</h3>
|
|
235
|
+
<p>The modal system initializes automatically when the page loads:</p>
|
|
236
|
+
<pre><code class="language-javascript">// Automatically called on DOM ready
|
|
237
|
+
initImageModal();
|
|
238
|
+
</code></pre>
|
|
239
|
+
<h3>Event Handling</h3>
|
|
240
|
+
<p>The system uses efficient event delegation:</p>
|
|
241
|
+
<ul>
|
|
242
|
+
<li>Single event listener on the document</li>
|
|
243
|
+
<li>Dynamically handles all current and future images</li>
|
|
244
|
+
<li>Proper cleanup when modal closes</li>
|
|
245
|
+
</ul>
|
|
246
|
+
<h3>Performance Optimizations</h3>
|
|
247
|
+
<ul>
|
|
248
|
+
<li><strong>CSS-First Approach</strong>: Minimal JavaScript for better performance</li>
|
|
249
|
+
<li><strong>Event Delegation</strong>: Efficient handling of multiple images</li>
|
|
250
|
+
<li><strong>Smooth Animations</strong>: Hardware-accelerated CSS transitions</li>
|
|
251
|
+
<li><strong>Memory Management</strong>: Proper event cleanup</li>
|
|
252
|
+
</ul>
|
|
253
|
+
<h2>Supported Image Formats</h2>
|
|
254
|
+
<p>The modal works with all web-compatible image formats:</p>
|
|
255
|
+
<ul>
|
|
256
|
+
<li><strong>Raster Images</strong>: PNG, JPG, JPEG, GIF, WEBP</li>
|
|
257
|
+
<li><strong>Vector Images</strong>: SVG</li>
|
|
258
|
+
<li><strong>Animated Images</strong>: Animated GIFs, WEBP animations</li>
|
|
259
|
+
</ul>
|
|
260
|
+
<h2>Mobile Experience</h2>
|
|
261
|
+
<h3>Touch-Friendly Interface</h3>
|
|
262
|
+
<ul>
|
|
263
|
+
<li><strong>Large Close Button</strong>: Easy to tap on mobile devices</li>
|
|
264
|
+
<li><strong>Gesture Support</strong>: Tap outside image to close</li>
|
|
265
|
+
<li><strong>Responsive Sizing</strong>: Images scale appropriately for screen size</li>
|
|
266
|
+
<li><strong>Optimized Layout</strong>: Adjusted button and caption sizes for mobile</li>
|
|
267
|
+
</ul>
|
|
268
|
+
<h3>Performance on Mobile</h3>
|
|
269
|
+
<ul>
|
|
270
|
+
<li><strong>Lightweight Implementation</strong>: Minimal impact on mobile performance</li>
|
|
271
|
+
<li><strong>Touch Optimizations</strong>: Proper touch event handling</li>
|
|
272
|
+
<li><strong>Viewport Considerations</strong>: Respects device viewport settings</li>
|
|
273
|
+
</ul>
|
|
274
|
+
<h2>Examples</h2>
|
|
275
|
+
<h3>Documentation Screenshots</h3>
|
|
276
|
+
<pre><code class="language-markdown"># Setup Guide
|
|
277
|
+
|
|
278
|
+
Follow these steps to configure your application:
|
|
279
|
+
|
|
280
|
+
1. **Access Settings**
|
|
281
|
+
|
|
282
|
+
|
|
283
|
+
|
|
284
|
+
2. **Configure API Keys**
|
|
285
|
+
|
|
286
|
+
|
|
287
|
+
|
|
288
|
+
3. **Save and Deploy**
|
|
289
|
+
|
|
290
|
+
|
|
291
|
+
</code></pre>
|
|
292
|
+
<h3>Technical Diagrams</h3>
|
|
293
|
+
<pre><code class="language-markdown"># System Architecture
|
|
294
|
+
|
|
295
|
+
Our system follows a microservices architecture:
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
|
|
299
|
+
The authentication flow works as follows:
|
|
300
|
+
|
|
301
|
+
|
|
302
|
+
</code></pre>
|
|
303
|
+
<h3>Before/After Comparisons</h3>
|
|
304
|
+
<pre><code class="language-markdown"># UI Improvements
|
|
305
|
+
|
|
306
|
+
We've redesigned the dashboard for better usability:
|
|
307
|
+
|
|
308
|
+
**Before:**
|
|
309
|
+
|
|
310
|
+
|
|
311
|
+
**After:**
|
|
312
|
+
|
|
313
|
+
</code></pre>
|
|
314
|
+
<h2>Troubleshooting</h2>
|
|
315
|
+
<h3>Images Not Clickable</h3>
|
|
316
|
+
<p><strong>Problem</strong>: Images don't show hover effects or modal<br><strong>Solution</strong>: Ensure images are within content areas with the <code>.content</code> class</p>
|
|
317
|
+
<h3>Modal Not Opening</h3>
|
|
318
|
+
<p><strong>Problem</strong>: Clicking images doesn't open modal<br><strong>Solution</strong>: Check that main.js is properly loaded and no JavaScript errors exist</p>
|
|
319
|
+
<h3>Caption Not Showing</h3>
|
|
320
|
+
<p><strong>Problem</strong>: Alt text doesn't appear as caption<br><strong>Solution</strong>: Verify alt text is present in the markdown image syntax</p>
|
|
321
|
+
<h3>Styling Issues</h3>
|
|
322
|
+
<p><strong>Problem</strong>: Modal appears broken or unstyled<br><strong>Solution</strong>: Ensure notion-style.css is properly loaded</p>
|
|
323
|
+
<h2>Advanced Usage</h2>
|
|
324
|
+
<h3>Custom Image Classes</h3>
|
|
325
|
+
<p>Add custom classes to images for special styling:</p>
|
|
326
|
+
<pre><code class="language-markdown">![Large hero image of the product dashboard](){.hero-image}
|
|
327
|
+
</code></pre>
|
|
328
|
+
<h3>Image Galleries</h3>
|
|
329
|
+
<p>Create image galleries with multiple related images:</p>
|
|
330
|
+
<pre><code class="language-markdown">## Product Screenshots
|
|
331
|
+
|
|
332
|
+
|
|
333
|
+
|
|
334
|
+
|
|
335
|
+
|
|
336
|
+
</code></pre>
|
|
337
|
+
<h2>Integration with Other Features</h2>
|
|
338
|
+
<h3>Mermaid Diagrams</h3>
|
|
339
|
+
<p>Mermaid diagrams can also benefit from the modal system when exported as images:</p>
|
|
340
|
+
<pre><code class="language-markdown"><div class="mermaid-wrapper">
|
|
341
|
+
<div class="mermaid-title">Diagram</div>
|
|
342
|
+
<div class="mermaid">graph TD
|
|
343
|
+
A[User Request] --> B{Authentication}
|
|
344
|
+
B -->|Valid| C[Process Request]
|
|
345
|
+
B -->|Invalid| D[Return Error]
|
|
346
|
+
C --> E[Return Response]</div>
|
|
347
|
+
</div>
|
|
348
|
+
|
|
349
|
+
### PDF Export
|
|
350
|
+
|
|
351
|
+
When using PDF export features, images maintain their quality and alt text information.
|
|
352
|
+
|
|
353
|
+
### Search Integration
|
|
354
|
+
|
|
355
|
+
Alt text content is indexed for search functionality, making images discoverable.
|
|
356
|
+
|
|
357
|
+
## Best Practices Summary
|
|
358
|
+
|
|
359
|
+
1. **Write Descriptive Alt Text**: Use meaningful descriptions that work as captions
|
|
360
|
+
2. **Organize Images**: Keep images in dedicated folders with logical structure
|
|
361
|
+
3. **Optimize File Sizes**: Use appropriate image compression for web delivery
|
|
362
|
+
4. **Consider Accessibility**: Ensure alt text provides value for screen readers
|
|
363
|
+
5. **Test Responsiveness**: Verify images work well on different device sizes
|
|
364
|
+
6. **Use Appropriate Formats**: Choose the right image format for your content type
|
|
365
|
+
|
|
366
|
+
## Conclusion
|
|
367
|
+
|
|
368
|
+
The image modal system in @knowcode/doc-builder provides a professional, accessible way to showcase images in your documentation. With zero configuration required, it automatically enhances the user experience while maintaining excellent performance and accessibility standards.
|
|
369
|
+
|
|
370
|
+
For more advanced customization options or troubleshooting, refer to the main documentation or reach out to the community for support.
|
|
371
|
+
</code></pre>
|
|
372
|
+
|
|
373
|
+
</div>
|
|
374
|
+
</main>
|
|
375
|
+
</div>
|
|
376
|
+
|
|
377
|
+
<!-- Scripts -->
|
|
378
|
+
<script src="/js/main.js"></script>
|
|
379
|
+
|
|
380
|
+
</body>
|
|
381
|
+
</html>
|