@docmd/ui 0.4.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.
Files changed (17) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +8 -0
  3. package/assets/css/docmd-highlight-dark.css +86 -0
  4. package/assets/css/docmd-highlight-light.css +86 -0
  5. package/assets/css/docmd-main.css +1720 -0
  6. package/assets/favicon.ico +0 -0
  7. package/assets/images/docmd-logo-dark.png +0 -0
  8. package/assets/images/docmd-logo-light.png +0 -0
  9. package/assets/js/docmd-image-lightbox.js +74 -0
  10. package/assets/js/docmd-main.js +276 -0
  11. package/index.js +11 -0
  12. package/package.json +12 -0
  13. package/templates/layout.ejs +195 -0
  14. package/templates/navigation.ejs +92 -0
  15. package/templates/no-style.ejs +195 -0
  16. package/templates/partials/theme-init.js +34 -0
  17. package/templates/toc.ejs +38 -0
package/templates/no-style.ejs ADDED
@@ -0,0 +1,195 @@
1
+ <%# Source file from the docmd project — https://github.com/docmd-io/docmd %>
2
+
3
+ <!DOCTYPE html>
4
+ <html lang="en">
5
+ <head>
6
+ <meta charset="UTF-8">
7
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
8
+
9
+ <!-- 1. GLOBALS -->
10
+ <script>
11
+ var root = "<%= relativePathToRoot %>";
12
+ if (root && !root.endsWith('/')) root += '/';
13
+ if (root === '') root = './';
14
+ window.DOCMD_ROOT = root;
15
+ window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";
16
+ </script>
17
+
18
+ <!-- 2. META & TITLE -->
19
+ <% if (frontmatter.components?.meta !== false) { %>
20
+ <%- metaTagsHtml || '' %>
21
+ <title><%= pageTitle %><% if (frontmatter.components?.siteTitle !== false) { %> : <%= siteTitle %><% } %></title>
22
+ <% if (description && !(metaTagsHtml && metaTagsHtml.includes('name="description"'))) { %>
23
+ <meta name="description" content="<%= description %>">
24
+ <% } %>
25
+ <% } %>
26
+
27
+ <!-- 3. FAVICON -->
28
+ <% if (frontmatter.components?.favicon !== false) { %>
29
+ <%- faviconLinkHtml || '' %>
30
+ <% } %>
31
+
32
+ <!-- 4. CORE CSS -->
33
+ <% if (frontmatter.components?.css !== false) { %>
34
+ <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css?v=<%= buildHash %>">
35
+
36
+ <!-- 5. HIGHLIGHT CSS (Toggle Strategy) -->
37
+ <% if (frontmatter.components?.highlight !== false) {
38
+ const isDarkDefault = defaultMode === 'dark';
39
+ %>
40
+ <link rel="stylesheet"
41
+ href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>"
42
+ id="hljs-light"
43
+ <%= isDarkDefault ? 'disabled' : '' %>>
44
+
45
+ <link rel="stylesheet"
46
+ href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>"
47
+ id="hljs-dark"
48
+ <%= isDarkDefault ? '' : 'disabled' %>>
49
+ <% } %>
50
+ <% } %>
51
+
52
+ <!-- 6. PLUGINS & THEMES (Overrides Core) -->
53
+ <% if (frontmatter.components?.pluginHeadScripts !== false) { %>
54
+ <%- pluginHeadScriptsHtml || '' %>
55
+ <% } %>
56
+
57
+ <!-- 7. THEME CSS (Legacy/Specific overrides) -->
58
+ <% if (frontmatter.components?.theme !== false) { %>
59
+ <%- themeCssLinkHtml || '' %>
60
+ <% } %>
61
+
62
+ <!-- 8. CUSTOM CSS (Overrides Everything) -->
63
+ <% if (frontmatter.components?.customCss !== false && customCssFiles && customCssFiles.length > 0) { %>
64
+ <% customCssFiles.forEach(cssFile => { %>
65
+ <link rel="stylesheet" href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>?v=<%= buildHash %>">
66
+ <% }); %>
67
+ <% } %>
68
+
69
+ <!-- 9. PLUGIN STYLES (If separate) -->
70
+ <% if (frontmatter.components?.pluginStyles !== false) { %>
71
+ <%- pluginStylesHtml || '' %>
72
+ <% } %>
73
+
74
+ <!-- 10. THEME INIT (Must be last to apply correct mode immediately) -->
75
+ <% if (frontmatter.components?.themeMode !== false) { %>
76
+ <%- themeInitScript %>
77
+ <% } %>
78
+
79
+ <!-- 11. USER CUSTOM HEAD -->
80
+ <% if (frontmatter.customHead) { %>
81
+ <%- frontmatter.customHead %>
82
+ <% } %>
83
+ </head>
84
+ <body<% if (frontmatter.components?.theme !== false) { %> data-theme="<%= defaultMode %>"<% } %><% if (frontmatter.bodyClass) { %> class="<%= frontmatter.bodyClass %>"<% } %> data-copy-code-enabled="<%= config.copyCode === true %>">
85
+ <% if (frontmatter.components?.layout === true || frontmatter.components?.layout === 'full') { %>
86
+ <div class="main-content-wrapper">
87
+ <% if (frontmatter.components?.header !== false) { %>
88
+ <header class="page-header">
89
+ <% if (frontmatter.components?.pageTitle !== false) { %>
90
+ <h1><%= pageTitle %></h1>
91
+ <% } %>
92
+ </header>
93
+ <% } %>
94
+ <main class="content-area">
95
+ <div class="content-layout">
96
+ <div class="main-content"><%- content %></div>
97
+ <% if (frontmatter.components?.toc !== false && headings && headings.length > 0) { %>
98
+ <div class="toc-sidebar">
99
+ <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
100
+ </div>
101
+ <% } %>
102
+ </div>
103
+ </main>
104
+ <% if (frontmatter.components?.footer !== false) { %>
105
+ <footer class="page-footer">
106
+ <div class="footer-content">
107
+ <div class="user-footer"><%- footerHtml || '' %></div>
108
+ <% if (frontmatter.components?.branding !== false) { %>
109
+ <div class="branding-footer">
110
+ Build with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"></path><path d="m18 15-2-2"></path><path d="m15 18-2-2"></path></svg> <a href="https://docmd.io" target="_blank" rel="noopener">docmd.</a>
111
+ </div>
112
+ <% } %>
113
+ </div>
114
+ </footer>
115
+ <% } %>
116
+ </div>
117
+ <% } else if (frontmatter.components?.sidebar === true) { %>
118
+ <aside class="sidebar">
119
+ <% if (frontmatter.components?.logo !== false && logo && logo.light && logo.dark) { %>
120
+ <div class="sidebar-header">
121
+ <a href="<%= logo.href || (relativePathToRoot + 'index.html') %>" class="logo-link">
122
+ <img src="<%= relativePathToRoot %><%- logo.light.startsWith('/') ? logo.light.substring(1) : logo.light %>" alt="<%= logo.alt || siteTitle %>" class="logo-light" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
123
+ <img src="<%= relativePathToRoot %><%- logo.dark.startsWith('/') ? logo.dark.substring(1) : logo.dark %>" alt="<%= logo.alt || siteTitle %>" class="logo-dark" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
124
+ </a>
125
+ </div>
126
+ <% } %>
127
+ <% if (frontmatter.components?.navigation !== false) { %>
128
+ <%- navigationHtml %>
129
+ <% } %>
130
+ <% if (frontmatter.components?.themeToggle !== false && theme && theme.enableModeToggle) { %>
131
+ <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
132
+ <%- renderIcon('sun', { class: 'icon-sun' }) %> <%- renderIcon('moon', { class: 'icon-moon' }) %>
133
+ </button>
134
+ <% } %>
135
+ </aside>
136
+ <div class="main-content-wrapper">
137
+ <% if (frontmatter.components?.header !== false) { %>
138
+ <header class="page-header">
139
+ <% if (frontmatter.components?.pageTitle !== false) { %>
140
+ <h1><%= pageTitle %></h1>
141
+ <% } %>
142
+ </header>
143
+ <% } %>
144
+ <main class="content-area">
145
+ <div class="content-layout">
146
+ <div class="main-content"><%- content %></div>
147
+ <% if (frontmatter.components?.toc !== false && headings && headings.length > 0) { %>
148
+ <div class="toc-sidebar">
149
+ <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
150
+ </div>
151
+ <% } %>
152
+ </div>
153
+ </main>
154
+ <% if (frontmatter.components?.footer !== false) { %>
155
+ <footer class="page-footer">
156
+ <div class="footer-content">
157
+ <div class="user-footer"><%- footerHtml || '' %></div>
158
+ <% if (frontmatter.components?.branding !== false) { %>
159
+ <div class="branding-footer">
160
+ Build with <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z"></path><path d="M12 5 9.04 7.96a2.17 2.17 0 0 0 0 3.08c.82.82 2.13.85 3 .07l2.07-1.9a2.82 2.82 0 0 1 3.79 0l2.96 2.66"></path><path d="m18 15-2-2"></path><path d="m15 18-2-2"></path></svg> <a href="https://docmd.io" target="_blank" rel="noopener">docmd.</a>
161
+ </div>
162
+ <% } %>
163
+ </div>
164
+ </footer>
165
+ <% } %>
166
+ </div>
167
+ <% } else { %>
168
+ <%- content %>
169
+ <% } %>
170
+
171
+ <% if (frontmatter.components?.scripts === true) { %>
172
+ <% if (frontmatter.components?.mainScripts === true) { %>
173
+ <script>window.DOCMD_ROOT = "<%= relativePathToRoot %>";</script>
174
+ <script src="<%= relativePathToRoot %>assets/js/docmd-main.js"></script>
175
+ <% } %>
176
+
177
+ <% if (frontmatter.components?.lightbox === true && frontmatter.components?.mainScripts === true) { %>
178
+ <script src="<%= relativePathToRoot %>assets/js/docmd-image-lightbox.js"></script>
179
+ <% } %>
180
+
181
+ <% if (frontmatter.components?.customJs === true && customJsFiles && customJsFiles.length > 0) { %>
182
+ <% customJsFiles.forEach(jsFile => { %>
183
+ <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
184
+ <% }); %>
185
+ <% } %>
186
+
187
+ <% if (frontmatter.components?.scripts !== false) { %>
188
+ <%- pluginBodyScriptsHtml || '' %>
189
+ <% } %>
190
+ <% } %>
191
+ <% if (frontmatter.customScripts) { %>
192
+ <%- frontmatter.customScripts %>
193
+ <% } %>
194
+ </body>
195
+ </html>
package/templates/partials/theme-init.js ADDED
@@ -0,0 +1,34 @@
1
+ /* packages/ui/templates/partials/theme-init.js */
2
+
3
+ (function() {
4
+ try {
5
+ // 1. Determine Theme
6
+ var localValue = localStorage.getItem('docmd-theme');
7
+ var configValue = window.DOCMD_DEFAULT_MODE || 'light';
8
+ var theme = localValue ? localValue : configValue;
9
+
10
+ if (theme === 'system') {
11
+ theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
12
+ }
13
+
14
+ // 2. Apply to Root
15
+ document.documentElement.setAttribute('data-theme', theme);
16
+
17
+ // 3. Highlight.js Toggle Strategy
18
+ var lightLink = document.getElementById('hljs-light');
19
+ var darkLink = document.getElementById('hljs-dark');
20
+
21
+ if (lightLink && darkLink) {
22
+ if (theme === 'dark') {
23
+ lightLink.disabled = true;
24
+ darkLink.disabled = false;
25
+ } else {
26
+ lightLink.disabled = false;
27
+ darkLink.disabled = true;
28
+ }
29
+ }
30
+
31
+ } catch (e) {
32
+ console.error('Theme init failed', e);
33
+ }
34
+ })();
package/templates/toc.ejs ADDED
@@ -0,0 +1,38 @@
1
+ <%# Source file from the docmd project — https://github.com/docmd-io/docmd %>
2
+
3
+ <%
4
+ function decodeHtmlEntities(html) {
5
+ return html.replace(/&amp;/g, '&').replace(/&lt;/g, '<').replace(/&gt;/g, '>').replace(/&quot;/g, '"').replace(/&#39;/g, "'").replace(/&nbsp;/g, ' ');
6
+ }
7
+ const shouldShowToc = typeof isActivePage !== 'undefined' ? isActivePage :
8
+ (typeof navigationHtml !== 'undefined' && navigationHtml && navigationHtml.includes('class="active"'));
9
+
10
+ if (shouldShowToc && !frontmatter?.toc || frontmatter?.toc !== 'false') {
11
+ let tocHeadings = [];
12
+ if (headings && headings.length > 0) {
13
+ tocHeadings = headings.filter(h => h.level >= 2 && h.level <= 4);
14
+ } else if (content) {
15
+ const headingRegex = /<h([2-4])[^>]*?(?:id="([^"]*)")?[^>]*?>([\s\S]*?)<\/h\1>/g;
16
+ let match;
17
+ let contentStr = content.toString();
18
+ while ((match = headingRegex.exec(contentStr)) !== null) {
19
+ const level = parseInt(match[1], 10);
20
+ let id = match[2];
21
+ const text = decodeHtmlEntities(match[3].replace(/<\/?\w+[^>]*>/g, '')); // Stripped tags
22
+ if (!id) id = text.toLowerCase().replace(/\s+/g, '-').replace(/[^\w-]/g, '').replace(/--+/g, '-').replace(/^-+|-+$/g, '');
23
+ tocHeadings.push({ id, level, text });
24
+ }
25
+ }
26
+ if (tocHeadings.length > 1) {
27
+ %>
28
+ <div class="toc-container">
29
+ <h2 class="toc-title">On This Page<span class="mobile-view toc-menu-button float-right"><%- renderIcon("chevrons-down-up") %></span></h2>
30
+ <ul class="toc-list">
31
+ <% tocHeadings.forEach(heading => { %>
32
+ <li class="toc-item toc-level-<%= heading.level %>">
33
+ <a href="#<%= heading.id %>" class="toc-link"><%- heading.text %></a>
34
+ </li>
35
+ <% }); %>
36
+ </ul>
37
+ </div>
38
+ <% } } %>