@knowcode/doc-builder 1.8.6 → 1.9.0
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 +33 -0
- package/Screenshot 2025-07-26 at 17.06.49.png +0 -0
- package/assets/css/notion-style.css +141 -0
- package/assets/js/main.js +76 -0
- package/html/README.html +13 -11
- package/html/css/notion-style.css +141 -0
- package/html/documentation-index.html +13 -11
- package/html/guides/authentication-default-change.html +13 -11
- package/html/guides/authentication-guide.html +13 -11
- package/html/guides/claude-workflow-guide.html +13 -11
- package/html/guides/documentation-standards.html +13 -11
- package/html/guides/phosphor-icons-guide.html +13 -11
- package/html/guides/private-directory-authentication.html +13 -11
- package/html/guides/public-site-deployment.html +13 -11
- package/html/guides/search-engine-verification-guide.html +13 -11
- package/html/guides/seo-guide.html +13 -11
- package/html/guides/seo-optimization-guide.html +13 -11
- package/html/guides/troubleshooting-guide.html +13 -11
- package/html/guides/windows-setup-guide.html +13 -11
- package/html/image-modal-test.html +305 -0
- package/html/index.html +13 -11
- package/html/js/main.js +76 -0
- package/html/private/cache-control-anti-pattern.html +13 -11
- package/html/private/launch/README.html +13 -11
- package/html/private/launch/auth-cleanup-summary.html +13 -11
- package/html/private/launch/bubble-plugin-specification.html +13 -11
- package/html/private/launch/go-to-market-strategy.html +13 -11
- package/html/private/launch/launch-announcements.html +13 -11
- package/html/private/launch/vercel-deployment-auth-setup.html +13 -11
- package/html/private/next-steps-walkthrough.html +14 -12
- package/html/private/supabase-auth-implementation-completed.html +13 -11
- package/html/private/supabase-auth-implementation-plan.html +13 -11
- package/html/private/supabase-auth-integration-plan.html +13 -11
- package/html/private/supabase-auth-setup-guide.html +13 -11
- package/html/private/test-private-doc.html +13 -11
- package/html/private/user-management-tooling.html +13 -11
- package/html/prompts/markdown-document-standards.html +409 -0
- package/html/sitemap.xml +56 -44
- package/html/vercel-cli-setup-guide.html +13 -11
- package/html/vercel-first-time-setup-guide.html +13 -11
- package/lib/core-builder.js +34 -9
- package/lib/emoji-mapper.js +13 -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,305 @@
|
|
|
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="This document tests the new image modal functionality in doc-builder.">
|
|
7
|
+
<title>Image Modal Test | @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, image, modal">
|
|
11
|
+
<meta name="robots" content="index, follow">
|
|
12
|
+
<link rel="canonical" href="https://doc-builder-delta.vercel.app/image-modal-test.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/image-modal-test.html">
|
|
17
|
+
<meta property="og:title" content="Image Modal Test | @knowcode/doc-builder">
|
|
18
|
+
<meta property="og:description" content="This document tests the new image modal functionality in doc-builder.">
|
|
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 Test | @knowcode/doc-builder">
|
|
28
|
+
<meta name="twitter:description" content="This document tests the new image modal functionality in doc-builder.">
|
|
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": "Image Modal Test",
|
|
91
|
+
"description": "This document tests the new image modal functionality in doc-builder.",
|
|
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-27T08:30:10.805Z",
|
|
102
|
+
"dateModified": "2025-07-27T08:30:10.805Z",
|
|
103
|
+
"mainEntityOfPage": {
|
|
104
|
+
"@type": "WebPage",
|
|
105
|
+
"@id": "https://doc-builder-delta.vercel.app/image-modal-test.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": "Image Modal Test",
|
|
120
|
+
"item": "https://doc-builder-delta.vercel.app/image-modal-test.html"
|
|
121
|
+
}
|
|
122
|
+
]
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
</script>
|
|
126
|
+
</head>
|
|
127
|
+
<body>
|
|
128
|
+
<!-- Header -->
|
|
129
|
+
<header class="header">
|
|
130
|
+
<div class="header-content">
|
|
131
|
+
<a href="/index.html" class="logo">@knowcode/doc-builder</a>
|
|
132
|
+
|
|
133
|
+
<div class="header-actions">
|
|
134
|
+
<div class="deployment-info">
|
|
135
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.0">Last updated: Jul 27, 2025, 08:30 AM UTC</span>
|
|
136
|
+
</div>
|
|
137
|
+
|
|
138
|
+
|
|
139
|
+
<a href="../login.html" class="auth-btn" title="Login/Logout">
|
|
140
|
+
<i class="fas fa-sign-in-alt"></i>
|
|
141
|
+
</a>
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
<button id="theme-toggle" class="theme-toggle" aria-label="Toggle theme">
|
|
145
|
+
<i class="fas fa-moon"></i>
|
|
146
|
+
</button>
|
|
147
|
+
|
|
148
|
+
<button id="menu-toggle" class="menu-toggle" aria-label="Toggle menu">
|
|
149
|
+
<i class="fas fa-bars"></i>
|
|
150
|
+
</button>
|
|
151
|
+
</div>
|
|
152
|
+
</div>
|
|
153
|
+
</header>
|
|
154
|
+
|
|
155
|
+
<!-- Preview Banner -->
|
|
156
|
+
<div id="preview-banner" class="preview-banner">
|
|
157
|
+
<div class="banner-content">
|
|
158
|
+
<i class="fas fa-exclamation-triangle banner-icon"></i>
|
|
159
|
+
<span class="banner-text">This documentation is a preview version - some content may be incomplete</span>
|
|
160
|
+
<button id="dismiss-banner" class="banner-dismiss" aria-label="Dismiss banner">
|
|
161
|
+
<i class="fas fa-times"></i>
|
|
162
|
+
</button>
|
|
163
|
+
</div>
|
|
164
|
+
</div>
|
|
165
|
+
|
|
166
|
+
<!-- Breadcrumbs -->
|
|
167
|
+
<nav class="breadcrumbs" id="breadcrumbs">
|
|
168
|
+
<!-- Breadcrumbs will be generated by JavaScript -->
|
|
169
|
+
</nav>
|
|
170
|
+
|
|
171
|
+
<!-- Main Content -->
|
|
172
|
+
<div class="main-wrapper">
|
|
173
|
+
<!-- Sidebar -->
|
|
174
|
+
<aside class="sidebar">
|
|
175
|
+
<div class="sidebar-header">
|
|
176
|
+
<div class="filter-box">
|
|
177
|
+
<input type="text" placeholder="Filter items..." class="filter-input" id="nav-filter">
|
|
178
|
+
<i class="fas fa-search filter-icon"></i>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
<nav class="navigation">
|
|
182
|
+
|
|
183
|
+
<div class="nav-section" data-level="0">
|
|
184
|
+
<a class="nav-title" href="/README.html" >
|
|
185
|
+
<i class="fas fa-home"></i> Documentation
|
|
186
|
+
</a>
|
|
187
|
+
<div class="nav-content" >
|
|
188
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
189
|
+
<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>
|
|
190
|
+
<a href="/image-modal-test.html" class="nav-item active" data-tooltip="This document tests the new image modal functionality in doc-builder."><i class="fas fa-file-alt"></i> Image Modal Test</a>
|
|
191
|
+
<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>
|
|
192
|
+
<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>
|
|
193
|
+
<div class="nav-section" data-level="1">
|
|
194
|
+
<a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
|
|
195
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
196
|
+
</a>
|
|
197
|
+
<div class="nav-content collapsed" id="nav-guides-1">
|
|
198
|
+
<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>
|
|
199
|
+
<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>
|
|
200
|
+
<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>
|
|
201
|
+
<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>
|
|
202
|
+
<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>
|
|
203
|
+
<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>
|
|
204
|
+
<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>
|
|
205
|
+
<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>
|
|
206
|
+
<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>
|
|
207
|
+
<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>
|
|
208
|
+
<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>
|
|
209
|
+
<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>
|
|
210
|
+
<div class="nav-section private-nav" data-level="1">
|
|
211
|
+
<a class="nav-title collapsible" href="#" data-target="nav-private-1" >
|
|
212
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Private
|
|
213
|
+
</a>
|
|
214
|
+
<div class="nav-content collapsed" id="nav-private-1">
|
|
215
|
+
<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>
|
|
216
|
+
<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>
|
|
217
|
+
<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>
|
|
218
|
+
<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>
|
|
219
|
+
<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>
|
|
220
|
+
<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>
|
|
221
|
+
<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>
|
|
222
|
+
<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>
|
|
223
|
+
<div class="nav-section private-nav" data-level="2">
|
|
224
|
+
<a class="nav-title collapsible" href="/private/launch/README.html" data-target="nav-private-launch-2" >
|
|
225
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Launch
|
|
226
|
+
</a>
|
|
227
|
+
<div class="nav-content collapsed" id="nav-private-launch-2">
|
|
228
|
+
<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>
|
|
229
|
+
<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>
|
|
230
|
+
<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>
|
|
231
|
+
<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>
|
|
232
|
+
<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>
|
|
233
|
+
<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>
|
|
234
|
+
<div class="nav-section" data-level="1">
|
|
235
|
+
<a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
|
|
236
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
|
|
237
|
+
</a>
|
|
238
|
+
<div class="nav-content collapsed" id="nav-prompts-1">
|
|
239
|
+
<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>
|
|
240
|
+
</nav>
|
|
241
|
+
<div class="resize-handle"></div>
|
|
242
|
+
</aside>
|
|
243
|
+
|
|
244
|
+
<!-- Content Area -->
|
|
245
|
+
<main class="content">
|
|
246
|
+
<div class="content-inner">
|
|
247
|
+
<h1>Image Modal Test</h1>
|
|
248
|
+
<p>This document tests the new image modal functionality in doc-builder.</p>
|
|
249
|
+
<h2>Sample Images</h2>
|
|
250
|
+
<p>Here are some test images to demonstrate the modal functionality:</p>
|
|
251
|
+
<h3>Screenshot with Good Alt Text</h3>
|
|
252
|
+
<p><img src="https://via.placeholder.com/800x600/4F46E5/FFFFFF?text=Sample+Screenshot" alt="Doc-builder navigation showing the sidebar with collapsible sections and search functionality"></p>
|
|
253
|
+
<p>This image should open in a modal when clicked, showing the alt text as a caption.</p>
|
|
254
|
+
<h3>Diagram Example</h3>
|
|
255
|
+
<p><img src="https://via.placeholder.com/600x400/10B981/FFFFFF?text=Authentication+Flow" alt="Flow diagram showing the authentication process from login to dashboard access"></p>
|
|
256
|
+
<h3>Image Without Alt Text</h3>
|
|
257
|
+
<p><img src="https://via.placeholder.com/400x300/EF4444/FFFFFF?text=No+Alt+Text" alt=""></p>
|
|
258
|
+
<p>This image has no alt text, so the caption should be hidden in the modal.</p>
|
|
259
|
+
<h3>Multiple Images in a Row</h3>
|
|
260
|
+
<p><img src="https://via.placeholder.com/200x150/F59E0B/FFFFFF?text=Settings" alt="Small thumbnail showing user profile settings"><br><img src="https://via.placeholder.com/200x150/8B5CF6/FFFFFF?text=API+Keys" alt="Configuration panel displaying API key management options"><br><img src="https://via.placeholder.com/200x150/06B6D4/FFFFFF?text=Dashboard" alt="Dashboard overview with analytics charts and metrics"></p>
|
|
261
|
+
<h2>Features to Test</h2>
|
|
262
|
+
<p>When you click on any image above, you should see:</p>
|
|
263
|
+
<ol>
|
|
264
|
+
<li><strong>Modal Opens</strong>: A dark overlay appears with the image centered</li>
|
|
265
|
+
<li><strong>Large View</strong>: The image scales to fit the screen while maintaining aspect ratio</li>
|
|
266
|
+
<li><strong>Close Button</strong>: An "×" button appears in the top-right corner</li>
|
|
267
|
+
<li><strong>Caption Display</strong>: The alt text appears below the image (if present)</li>
|
|
268
|
+
<li><strong>Close Functionality</strong>: <ul>
|
|
269
|
+
<li>Click the × button to close</li>
|
|
270
|
+
<li>Click outside the image to close</li>
|
|
271
|
+
<li>Press Escape key to close</li>
|
|
272
|
+
</ul>
|
|
273
|
+
</li>
|
|
274
|
+
<li><strong>Hover Effects</strong>: Images should have a subtle hover effect before clicking</li>
|
|
275
|
+
<li><strong>Responsive</strong>: Should work well on different screen sizes</li>
|
|
276
|
+
</ol>
|
|
277
|
+
<h2>Expected Behavior</h2>
|
|
278
|
+
<ul>
|
|
279
|
+
<li>Images should be clickable (cursor changes to pointer)</li>
|
|
280
|
+
<li>Smooth transitions and animations</li>
|
|
281
|
+
<li>No page scrolling when modal is open</li>
|
|
282
|
+
<li>Modal should be accessible and keyboard-friendly</li>
|
|
283
|
+
<li>Works in both light and dark themes</li>
|
|
284
|
+
</ul>
|
|
285
|
+
<p>This test demonstrates the image modal system working with various alt text scenarios and image sizes.</p>
|
|
286
|
+
|
|
287
|
+
</div>
|
|
288
|
+
</main>
|
|
289
|
+
</div>
|
|
290
|
+
|
|
291
|
+
<!-- Scripts -->
|
|
292
|
+
<script>
|
|
293
|
+
// Pass configuration to frontend
|
|
294
|
+
window.docBuilderConfig = {
|
|
295
|
+
features: {
|
|
296
|
+
showPdfDownload: true,
|
|
297
|
+
menuDefaultOpen: false
|
|
298
|
+
}
|
|
299
|
+
};
|
|
300
|
+
</script>
|
|
301
|
+
<script src="/js/main.js"></script>
|
|
302
|
+
<script src="https://unpkg.com/@supabase/supabase-js@2"></script>
|
|
303
|
+
<script src="/js/auth.js"></script>
|
|
304
|
+
</body>
|
|
305
|
+
</html>
|
package/html/index.html
CHANGED
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
"name": "Knowcode Ltd",
|
|
99
99
|
"url": "https://knowcode.tech"
|
|
100
100
|
},
|
|
101
|
-
"datePublished": "2025-07-
|
|
102
|
-
"dateModified": "2025-07-
|
|
101
|
+
"datePublished": "2025-07-27T08:30:10.756Z",
|
|
102
|
+
"dateModified": "2025-07-27T08:30:10.756Z",
|
|
103
103
|
"mainEntityOfPage": {
|
|
104
104
|
"@type": "WebPage",
|
|
105
105
|
"@id": "https://doc-builder-delta.vercel.app/README.html"
|
|
@@ -132,7 +132,7 @@
|
|
|
132
132
|
|
|
133
133
|
<div class="header-actions">
|
|
134
134
|
<div class="deployment-info">
|
|
135
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
135
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.0">Last updated: Jul 27, 2025, 08:30 AM UTC</span>
|
|
136
136
|
</div>
|
|
137
137
|
|
|
138
138
|
|
|
@@ -185,7 +185,11 @@
|
|
|
185
185
|
<i class="fas fa-home"></i> Documentation
|
|
186
186
|
</a>
|
|
187
187
|
<div class="nav-content" >
|
|
188
|
-
<a href="/README.html" class="nav-item active" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a
|
|
188
|
+
<a href="/README.html" class="nav-item active" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
189
|
+
<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>
|
|
190
|
+
<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>
|
|
191
|
+
<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>
|
|
192
|
+
<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>
|
|
189
193
|
<div class="nav-section" data-level="1">
|
|
190
194
|
<a class="nav-title collapsible expanded" href="#" data-target="nav-guides-1" >
|
|
191
195
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
@@ -227,14 +231,12 @@
|
|
|
227
231
|
<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>
|
|
228
232
|
<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>
|
|
229
233
|
<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>
|
|
230
|
-
<div class="nav-section" data-level="
|
|
231
|
-
<a class="nav-title" href="#"
|
|
232
|
-
<i class="fas fa-
|
|
234
|
+
<div class="nav-section" data-level="1">
|
|
235
|
+
<a class="nav-title collapsible expanded" href="#" data-target="nav-prompts-1" >
|
|
236
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
|
|
233
237
|
</a>
|
|
234
|
-
<div class="nav-content" >
|
|
235
|
-
<a href="/
|
|
236
|
-
<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>
|
|
237
|
-
<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>
|
|
238
|
+
<div class="nav-content" id="nav-prompts-1">
|
|
239
|
+
<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>
|
|
238
240
|
</nav>
|
|
239
241
|
<div class="resize-handle"></div>
|
|
240
242
|
</aside>
|
package/html/js/main.js
CHANGED
|
@@ -1475,6 +1475,81 @@ function initMarkdownLinkRedirects() {
|
|
|
1475
1475
|
});
|
|
1476
1476
|
}
|
|
1477
1477
|
|
|
1478
|
+
// Image Modal System
|
|
1479
|
+
function initImageModal() {
|
|
1480
|
+
// Create modal HTML structure
|
|
1481
|
+
const modalHTML = `
|
|
1482
|
+
<div class="image-modal" id="imageModal">
|
|
1483
|
+
<div class="image-modal-content">
|
|
1484
|
+
<div class="image-modal-close" id="imageModalClose">×</div>
|
|
1485
|
+
<img class="image-modal-img" id="imageModalImg" src="" alt="">
|
|
1486
|
+
<div class="image-modal-caption" id="imageModalCaption"></div>
|
|
1487
|
+
</div>
|
|
1488
|
+
</div>
|
|
1489
|
+
`;
|
|
1490
|
+
|
|
1491
|
+
// Add modal to document body
|
|
1492
|
+
document.body.insertAdjacentHTML('beforeend', modalHTML);
|
|
1493
|
+
|
|
1494
|
+
const modal = document.getElementById('imageModal');
|
|
1495
|
+
const modalImg = document.getElementById('imageModalImg');
|
|
1496
|
+
const modalCaption = document.getElementById('imageModalCaption');
|
|
1497
|
+
const closeBtn = document.getElementById('imageModalClose');
|
|
1498
|
+
|
|
1499
|
+
// Add click handlers to all content images
|
|
1500
|
+
const contentImages = document.querySelectorAll('.content img');
|
|
1501
|
+
contentImages.forEach(img => {
|
|
1502
|
+
img.addEventListener('click', function() {
|
|
1503
|
+
modal.classList.add('active');
|
|
1504
|
+
modalImg.src = this.src;
|
|
1505
|
+
modalImg.alt = this.alt;
|
|
1506
|
+
modalCaption.textContent = this.alt;
|
|
1507
|
+
|
|
1508
|
+
// Hide caption if no alt text
|
|
1509
|
+
if (!this.alt) {
|
|
1510
|
+
modalCaption.style.display = 'none';
|
|
1511
|
+
} else {
|
|
1512
|
+
modalCaption.style.display = 'block';
|
|
1513
|
+
}
|
|
1514
|
+
|
|
1515
|
+
// Prevent body scrolling
|
|
1516
|
+
document.body.style.overflow = 'hidden';
|
|
1517
|
+
});
|
|
1518
|
+
});
|
|
1519
|
+
|
|
1520
|
+
// Close modal functions
|
|
1521
|
+
function closeModal() {
|
|
1522
|
+
modal.classList.remove('active');
|
|
1523
|
+
document.body.style.overflow = '';
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
// Close on X button click
|
|
1527
|
+
closeBtn.addEventListener('click', closeModal);
|
|
1528
|
+
|
|
1529
|
+
// Close on overlay click (but not on image click)
|
|
1530
|
+
modal.addEventListener('click', function(e) {
|
|
1531
|
+
if (e.target === modal) {
|
|
1532
|
+
closeModal();
|
|
1533
|
+
}
|
|
1534
|
+
});
|
|
1535
|
+
|
|
1536
|
+
// Close on Escape key
|
|
1537
|
+
document.addEventListener('keydown', function(e) {
|
|
1538
|
+
if (e.key === 'Escape' && modal.classList.contains('active')) {
|
|
1539
|
+
closeModal();
|
|
1540
|
+
}
|
|
1541
|
+
});
|
|
1542
|
+
|
|
1543
|
+
// Prevent modal content from closing modal when clicked
|
|
1544
|
+
modalImg.addEventListener('click', function(e) {
|
|
1545
|
+
e.stopPropagation();
|
|
1546
|
+
});
|
|
1547
|
+
|
|
1548
|
+
document.querySelector('.image-modal-content').addEventListener('click', function(e) {
|
|
1549
|
+
e.stopPropagation();
|
|
1550
|
+
});
|
|
1551
|
+
}
|
|
1552
|
+
|
|
1478
1553
|
// Initialize on DOM Load
|
|
1479
1554
|
document.addEventListener('DOMContentLoaded', () => {
|
|
1480
1555
|
initMarkdownLinkRedirects();
|
|
@@ -1485,5 +1560,6 @@ document.addEventListener('DOMContentLoaded', () => {
|
|
|
1485
1560
|
initNavigationFilter();
|
|
1486
1561
|
addPDFExportButton();
|
|
1487
1562
|
generateBreadcrumbs();
|
|
1563
|
+
initImageModal();
|
|
1488
1564
|
initTooltips();
|
|
1489
1565
|
});
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
"name": "Knowcode Ltd",
|
|
99
99
|
"url": "https://knowcode.tech"
|
|
100
100
|
},
|
|
101
|
-
"datePublished": "2025-07-
|
|
102
|
-
"dateModified": "2025-07-
|
|
101
|
+
"datePublished": "2025-07-27T08:30:10.806Z",
|
|
102
|
+
"dateModified": "2025-07-27T08:30:10.806Z",
|
|
103
103
|
"mainEntityOfPage": {
|
|
104
104
|
"@type": "WebPage",
|
|
105
105
|
"@id": "https://doc-builder-delta.vercel.app/private/cache-control-anti-pattern.html"
|
|
@@ -138,7 +138,7 @@
|
|
|
138
138
|
|
|
139
139
|
<div class="header-actions">
|
|
140
140
|
<div class="deployment-info">
|
|
141
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
141
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.0">Last updated: Jul 27, 2025, 08:30 AM UTC</span>
|
|
142
142
|
</div>
|
|
143
143
|
|
|
144
144
|
|
|
@@ -191,7 +191,11 @@
|
|
|
191
191
|
<i class="fas fa-home"></i> Documentation
|
|
192
192
|
</a>
|
|
193
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
|
|
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>
|
|
195
199
|
<div class="nav-section" data-level="1">
|
|
196
200
|
<a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
|
|
197
201
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
@@ -233,14 +237,12 @@
|
|
|
233
237
|
<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>
|
|
234
238
|
<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>
|
|
235
239
|
<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>
|
|
236
|
-
<div class="nav-section" data-level="
|
|
237
|
-
<a class="nav-title" href="#"
|
|
238
|
-
<i class="fas fa-
|
|
240
|
+
<div class="nav-section" data-level="1">
|
|
241
|
+
<a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
|
|
242
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
|
|
239
243
|
</a>
|
|
240
|
-
<div class="nav-content" >
|
|
241
|
-
<a href="/
|
|
242
|
-
<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>
|
|
243
|
-
<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>
|
|
244
|
+
<div class="nav-content collapsed" id="nav-prompts-1">
|
|
245
|
+
<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>
|
|
244
246
|
</nav>
|
|
245
247
|
<div class="resize-handle"></div>
|
|
246
248
|
</aside>
|
|
@@ -98,8 +98,8 @@
|
|
|
98
98
|
"name": "Knowcode Ltd",
|
|
99
99
|
"url": "https://knowcode.tech"
|
|
100
100
|
},
|
|
101
|
-
"datePublished": "2025-07-
|
|
102
|
-
"dateModified": "2025-07-
|
|
101
|
+
"datePublished": "2025-07-27T08:30:10.808Z",
|
|
102
|
+
"dateModified": "2025-07-27T08:30:10.808Z",
|
|
103
103
|
"mainEntityOfPage": {
|
|
104
104
|
"@type": "WebPage",
|
|
105
105
|
"@id": "https://doc-builder-delta.vercel.app/private/launch/README.html"
|
|
@@ -144,7 +144,7 @@
|
|
|
144
144
|
|
|
145
145
|
<div class="header-actions">
|
|
146
146
|
<div class="deployment-info">
|
|
147
|
-
<span class="deployment-date" title="Built with doc-builder v1.
|
|
147
|
+
<span class="deployment-date" title="Built with doc-builder v1.9.0">Last updated: Jul 27, 2025, 08:30 AM UTC</span>
|
|
148
148
|
</div>
|
|
149
149
|
|
|
150
150
|
|
|
@@ -197,7 +197,11 @@
|
|
|
197
197
|
<i class="fas fa-home"></i> Documentation
|
|
198
198
|
</a>
|
|
199
199
|
<div class="nav-content" >
|
|
200
|
-
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a
|
|
200
|
+
<a href="/README.html" class="nav-item" data-tooltip="@knowcode/doc-builder."><i class="fas fa-file-alt"></i> Overview</a>
|
|
201
|
+
<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>
|
|
202
|
+
<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>
|
|
203
|
+
<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>
|
|
204
|
+
<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>
|
|
201
205
|
<div class="nav-section" data-level="1">
|
|
202
206
|
<a class="nav-title collapsible" href="#" data-target="nav-guides-1" >
|
|
203
207
|
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Guides
|
|
@@ -239,14 +243,12 @@
|
|
|
239
243
|
<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>
|
|
240
244
|
<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>
|
|
241
245
|
<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>
|
|
242
|
-
<div class="nav-section" data-level="
|
|
243
|
-
<a class="nav-title" href="#"
|
|
244
|
-
<i class="fas fa-
|
|
246
|
+
<div class="nav-section" data-level="1">
|
|
247
|
+
<a class="nav-title collapsible" href="#" data-target="nav-prompts-1" >
|
|
248
|
+
<i class="fas fa-chevron-right collapse-icon"></i><i class="fas fa-folder"></i> Prompts
|
|
245
249
|
</a>
|
|
246
|
-
<div class="nav-content" >
|
|
247
|
-
<a href="/
|
|
248
|
-
<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>
|
|
249
|
-
<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>
|
|
250
|
+
<div class="nav-content collapsed" id="nav-prompts-1">
|
|
251
|
+
<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>
|
|
250
252
|
</nav>
|
|
251
253
|
<div class="resize-handle"></div>
|
|
252
254
|
</aside>
|