@docmd/ui 0.5.2 → 0.5.4

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.
@@ -7,107 +7,90 @@
7
7
 
8
8
  <nav class="sidebar-nav" aria-label="Main Navigation">
9
9
  <ul>
10
- <%
11
- function normalizePath(p) {
12
- if (!p || p === '#') return '#';
13
- if (p.startsWith('http')) return p;
14
-
15
- // 1. Strip dot-slash and leading slash
16
- let path = p.replace(/^(\.\/|\/)+/, '');
17
-
18
- // 2. Remove extensions and index
19
- path = path.replace(/(\/index\.html|index\.html|\.html|\.md)$/, '');
20
-
21
- // 3. Remove trailing slash
22
- path = path.replace(/\/$/, '');
23
-
24
- // 4. Return with leading slash for comparison
25
- return '/' + path;
26
- }
27
-
28
- function isChildActive(item, currentPath) {
29
- if (!item.children) return false;
30
- const currentNorm = normalizePath(currentPath);
31
- return item.children.some(child => {
32
- const childNorm = normalizePath(child.path);
33
- if (childNorm === currentNorm) return true;
34
- return isChildActive(child, currentPath);
35
- });
10
+ <% function normalizePath(p) { if (!p || p==='#' ) return '#' ; if (p.startsWith('http')) return p; let
11
+ path=p.replace(/^(\.\/|\/)+/, '' ); path=path.replace(/(\/index\.html|index\.html|\.html|\.md)$/, '' );
12
+ path=path.replace(/\/$/, '' ); return '/' + path; } function isChildActive(item, currentPath) { if
13
+ (!item.children) return false; const currentNorm=normalizePath(currentPath); return item.children.some(child=> {
14
+ const childNorm = normalizePath(child.path);
15
+ if (childNorm === currentNorm) return true;
16
+ return isChildActive(child, currentPath);
17
+ });
36
18
  }
37
19
 
38
20
  function renderNav(items) {
39
21
  if (!items || !Array.isArray(items)) return;
40
-
22
+
41
23
  items.forEach(item => {
42
- const isExternal = item.external || false;
43
- const hasChildren = item.children && item.children.length > 0;
44
-
45
- // Determine interactions
46
- // It is collapsible ONLY if it has children AND config doesn't say 'false'
47
- const isInteractive = hasChildren && item.collapsible !== false;
48
-
49
- const itemNorm = normalizePath(item.path);
50
- const currentNorm = normalizePath(currentPagePath);
51
-
52
- const isDummyLink = !item.path || item.path === '#' || item.path === 'javascript:;';
53
- const isActive = itemNorm === currentNorm;
54
- const isParentOfActive = !isActive && isChildActive(item, currentPagePath);
55
-
56
- // Expand Logic:
57
- // 1. If Interactive: Expand if parent of active, or if it was previously toggled open.
58
- // 2. If NOT Interactive (collapsible: false): ALWAYS expand.
59
- const isOpen = isInteractive
60
- ? (isParentOfActive || (isActive && isInteractive))
61
- : true;
24
+ const isExternal = item.external || false;
25
+ const hasChildren = item.children && item.children.length > 0;
26
+ const isInteractive = hasChildren && item.collapsible !== false;
27
+
28
+ const itemNorm = normalizePath(item.path);
29
+ const currentNorm = normalizePath(currentPagePath);
30
+
31
+ const isDummyLink = !item.path || item.path === '#' || item.path === 'javascript:;';
32
+ const isActive = itemNorm === currentNorm;
33
+ const isParentOfActive = !isActive && isChildActive(item, currentPagePath);
34
+
35
+ const isOpen = isInteractive
36
+ ? (isParentOfActive || (isActive && isInteractive))
37
+ : true;
62
38
 
63
- const liClasses = [];
64
- if (isActive) liClasses.push('active');
65
- if (isParentOfActive) liClasses.push('active-parent');
66
-
67
- // Only add 'collapsible' class if we want the arrow and click behavior
68
- if (isInteractive) liClasses.push('collapsible');
69
-
70
- // Add 'expanded' to show children (via CSS)
71
- if (hasChildren && isOpen) liClasses.push('expanded');
72
-
73
- let href = item.path || '#';
74
- if (!isExternal && !isDummyLink && !href.startsWith('http')) {
75
- let cleanPath = href.replace(/^(\.\/|\/)+/, '');
76
- href = relativePathToRoot + cleanPath;
77
- if (isOfflineMode) {
78
- if (href.endsWith('/')) href += 'index.html';
79
- else if (!href.endsWith('.html')) href += '/index.html';
80
- } else {
81
- if (href.endsWith('/index.html')) href = href.slice(0, -10);
82
- }
83
- }
84
- %>
85
- <li class="<%= liClasses.join(' ') %>" <% if(isInteractive) { %> aria-expanded="<%= isOpen %>" <% } %>>
39
+ const liClasses = [];
40
+ if (isActive) liClasses.push('active');
41
+ if (isParentOfActive) liClasses.push('active-parent');
42
+ if (isInteractive) liClasses.push('collapsible');
43
+ if (hasChildren && isOpen) liClasses.push('expanded');
44
+ if (hasChildren) liClasses.push('nav-group');
45
+
46
+ let href = item.path || '#';
47
+ if (!isExternal && !isDummyLink && !href.startsWith('http')) {
48
+ let cleanPath = href.replace(/^(\.\/|\/)+/, '');
49
+ href = relativePathToRoot + cleanPath;
50
+ if (isOfflineMode) {
51
+ if (href.endsWith('/')) href += 'index.html';
52
+ else if (!href.endsWith('.html')) href += '/index.html';
53
+ } else {
54
+ if (href.endsWith('/index.html')) href = href.slice(0, -10);
55
+ }
56
+ }
57
+ %>
58
+ <li class="<%= liClasses.join(' ') %>" <% if(isInteractive) { %> aria-expanded="<%= isOpen %>" <% } %>>
86
59
  <% if (isDummyLink) { %>
87
- <span class="nav-label">
88
- <% if (item.icon) { %> <%- renderIcon(item.icon) %> <% } %>
89
- <span class="nav-item-title"><%= item.title %></span>
90
- <% if (isInteractive) { %>
91
- <span class="collapse-icon-wrapper"><%- renderIcon('chevron-right', { class: 'collapse-icon' }) %></span>
60
+ <span class="nav-label <%= hasChildren ? 'nav-group' : '' %>">
61
+ <% if (item.icon) { %> <%- renderIcon(item.icon) %>
62
+ <% } %>
63
+ <span class="nav-item-title">
64
+ <%= item.title %>
65
+ </span>
66
+ <% if (isInteractive) { %>
67
+ <span class="collapse-icon-wrapper"><%- renderIcon('chevron-right', { class: 'collapse-icon'
68
+ }) %></span>
92
69
  <% } %>
93
70
  </span>
94
- <% } else { %>
95
- <a href="<%= href %>" class="<%= isActive ? 'active' : '' %>" <%= isExternal ? 'target="_blank" rel="noopener"' : '' %>>
96
- <% if (item.icon) { %> <%- renderIcon(item.icon) %> <% } %>
97
- <span class="nav-item-title"><%= item.title %></span>
98
- <% if (isInteractive) { %>
99
- <span class="collapse-icon-wrapper"><%- renderIcon('chevron-right', { class: 'collapse-icon' }) %></span>
71
+ <% } else { %>
72
+ <a href="<%= href %>" class="<%= isActive ? 'active' : '' %> <%= hasChildren ? 'nav-group' : '' %>"
73
+ <%=isExternal ? 'target="_blank" rel="noopener"' : '' %>>
74
+ <% if (item.icon) { %> <%- renderIcon(item.icon) %>
75
+ <% } %>
76
+ <span class="nav-item-title">
77
+ <%= item.title %>
78
+ </span>
79
+ <% if (isInteractive) { %>
80
+ <span class="collapse-icon-wrapper"><%- renderIcon('chevron-right', { class: 'collapse-icon'
81
+ }) %></span>
82
+ <% } %>
83
+ <% if (isExternal) { %> <%- renderIcon('external-link', { class: 'nav-external-icon' }) %>
100
84
  <% } %>
101
- <% if (isExternal) { %> <%- renderIcon('external-link', { class: 'nav-external-icon' }) %> <% } %>
102
85
  </a>
103
- <% } %>
104
-
105
- <% if (hasChildren) { %>
106
- <ul class="submenu">
107
- <% renderNav(item.children); %>
108
- </ul>
109
- <% } %>
110
- </li>
86
+ <% } %>
87
+
88
+ <% if (hasChildren) { %>
89
+ <ul class="submenu">
90
+ <% renderNav(item.children); %>
91
+ </ul>
92
+ <% } %>
93
+ </li>
111
94
  <% }); } renderNav(navItems); %>
112
95
  </ul>
113
96
  </nav>
@@ -8,195 +8,220 @@
8
8
 
9
9
  <!DOCTYPE html>
10
10
  <html lang="en">
11
+
11
12
  <head>
12
- <meta charset="UTF-8">
13
- <meta name="generator" content="docmd v0.5.x">
14
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
15
-
16
- <!-- 1. GLOBALS -->
17
- <script>
18
- var root = "<%= relativePathToRoot %>";
19
- if (root && !root.endsWith('/')) root += '/';
20
- if (root === '') root = './';
21
- window.DOCMD_ROOT = root;
22
- window.DOCMD_DEFAULT_MODE = "<%= defaultMode %>";
23
- </script>
24
-
25
- <!-- 2. META & TITLE -->
26
- <% if (frontmatter.components?.meta !== false) { %>
13
+ <meta charset="UTF-8">
14
+ <meta name="generator" content="docmd v0.5.x">
15
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
16
+
17
+ <script>
18
+ var root = "<%= relativePathToRoot %>";
19
+ if (root && !root.endsWith('/')) root += '/';
20
+ if (root === '') root = './';
21
+ window.DOCMD_ROOT = root;
22
+ window.DOCMD_APPEARANCE = "<%= appearance %>";
23
+ </script>
24
+
25
+ <!-- 2. META & TITLE -->
26
+ <% if (frontmatter.components?.meta !==false) { %>
27
27
  <%- metaTagsHtml || '' %>
28
- <title><%= pageTitle %><% if (frontmatter.components?.siteTitle !== false) { %> : <%= siteTitle %><% } %></title>
29
- <% if (description && !(metaTagsHtml && metaTagsHtml.includes('name="description"'))) { %>
30
- <meta name="description" content="<%= description %>">
31
- <% } %>
32
- <% } %>
28
+ <title>
29
+ <%= pageTitle %>
30
+ <% if (frontmatter.components?.siteTitle !==false) { %> : <%= siteTitle %>
31
+ <% } %>
32
+ </title>
33
+ <% if (description && !(metaTagsHtml && metaTagsHtml.includes('name="description"'))) { %>
34
+ <meta name="description" content="<%= description %>">
35
+ <% } %>
36
+ <% } %>
33
37
 
34
- <!-- 3. FAVICON -->
35
- <% if (frontmatter.components?.favicon !== false) { %>
38
+ <!-- 3. FAVICON -->
39
+ <% if (frontmatter.components?.favicon !== false) { %>
36
40
  <%- faviconLinkHtml || '' %>
37
- <% } %>
41
+ <% } %>
38
42
 
39
- <!-- 4. CORE CSS -->
40
- <% if (frontmatter.components?.css !== false) { %>
43
+ <!-- 4. CORE CSS -->
44
+ <% if (frontmatter.components?.css !== false) { %>
41
45
  <link rel="stylesheet" href="<%= relativePathToRoot %>assets/css/docmd-main.css?v=<%= buildHash %>">
42
46
 
43
- <!-- 5. HIGHLIGHT CSS (Toggle Strategy) -->
44
- <% if (frontmatter.components?.highlight !== false) {
45
- const isDarkDefault = defaultMode === 'dark';
46
- %>
47
- <link rel="stylesheet"
48
- href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>"
49
- id="hljs-light"
50
- <%= isDarkDefault ? 'disabled' : '' %>>
51
-
52
- <link rel="stylesheet"
53
- href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>"
54
- id="hljs-dark"
55
- <%= isDarkDefault ? '' : 'disabled' %>>
56
- <% } %>
47
+ <!-- 5. HIGHLIGHT CSS (Toggle Strategy) -->
48
+ <% if (frontmatter.components?.highlight !== false) {
49
+ const isDarkDefault = defaultMode === ' dark'; %>
50
+ <link rel="stylesheet"
51
+ href="<%= relativePathToRoot %>assets/css/docmd-highlight-light.css?v=<%= buildHash %>"
52
+ id="hljs-light" <%=isDarkDefault ? 'disabled' : '' %>>
53
+
54
+ <link rel="stylesheet"
55
+ href="<%= relativePathToRoot %>assets/css/docmd-highlight-dark.css?v=<%= buildHash %>"
56
+ id="hljs-dark" <%=isDarkDefault ? '' : 'disabled' %>>
57
57
  <% } %>
58
+ <% } %>
58
59
 
59
- <!-- 6. PLUGINS & THEMES (Overrides Core) -->
60
- <% if (frontmatter.components?.pluginHeadScripts !== false) { %>
60
+ <!-- 6. PLUGINS & THEMES (Overrides Core) -->
61
+ <% if (frontmatter.components?.pluginHeadScripts !==false) { %>
61
62
  <%- pluginHeadScriptsHtml || '' %>
62
- <% } %>
63
+ <% } %>
63
64
 
64
- <!-- 7. THEME CSS (Legacy/Specific overrides) -->
65
- <% if (frontmatter.components?.theme !== false) { %>
65
+ <!-- 7. THEME CSS (Legacy/Specific overrides) -->
66
+ <% if (frontmatter.components?.theme !==false) { %>
66
67
  <%- themeCssLinkHtml || '' %>
67
- <% } %>
68
+ <% } %>
68
69
 
69
- <!-- 8. CUSTOM CSS (Overrides Everything) -->
70
- <% if (frontmatter.components?.customCss !== false && customCssFiles && customCssFiles.length > 0) { %>
71
- <% customCssFiles.forEach(cssFile => { %>
72
- <link rel="stylesheet" href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>?v=<%= buildHash %>">
70
+ <!-- 8. CUSTOM CSS (Overrides Everything) -->
71
+ <% if (frontmatter.components?.customCss !==false && customCssFiles && customCssFiles.length> 0) { %>
72
+ <% customCssFiles.forEach(cssFile=> { %>
73
+ <link rel="stylesheet"
74
+ href="<%= relativePathToRoot %><%- cssFile.startsWith('/') ? cssFile.substring(1) : cssFile %>?v=<%= buildHash %>">
73
75
  <% }); %>
74
- <% } %>
76
+ <% } %>
75
77
 
76
- <!-- 9. PLUGIN STYLES (If separate) -->
77
- <% if (frontmatter.components?.pluginStyles !== false) { %>
78
+ <!-- 9. PLUGIN STYLES (If separate) -->
79
+ <% if (frontmatter.components?.pluginStyles !==false) { %>
78
80
  <%- pluginStylesHtml || '' %>
79
- <% } %>
81
+ <% } %>
80
82
 
81
- <!-- 10. THEME INIT (Must be last to apply correct mode immediately) -->
82
- <% if (frontmatter.components?.themeMode !== false) { %>
83
+ <!-- 10. THEME INIT (Must be last to apply correct mode immediately) -->
84
+ <% if (frontmatter.components?.themeMode !==false) { %>
83
85
  <%- themeInitScript %>
84
- <% } %>
86
+ <% } %>
85
87
 
86
- <!-- 11. USER CUSTOM HEAD -->
87
- <% if (frontmatter.customHead) { %>
88
+ <!-- 11. USER CUSTOM HEAD -->
89
+ <% if (frontmatter.customHead) { %>
88
90
  <%- frontmatter.customHead %>
89
- <% } %>
91
+ <% } %>
90
92
  </head>
91
- <body<% if (frontmatter.components?.theme !== false) { %> data-theme="<%= defaultMode %>"<% } %><% if (frontmatter.bodyClass) { %> class="<%= frontmatter.bodyClass %>"<% } %> data-copy-code-enabled="<%= config.copyCode === true %>">
92
- <% if (frontmatter.components?.layout === true || frontmatter.components?.layout === 'full') { %>
93
- <div class="main-content-wrapper">
94
- <% if (frontmatter.components?.header !== false) { %>
95
- <header class="page-header">
96
- <% if (frontmatter.components?.pageTitle !== false) { %>
97
- <h1><%= pageTitle %></h1>
93
+ <body<% if (frontmatter.components?.theme !==false) { %> data-theme="<%= defaultMode %>"<% } %>
94
+ <% if (frontmatter.bodyClass) { %> class="<%= frontmatter.bodyClass %>"<% } %> data-copy-code-enabled="<%=
95
+ config.copyCode===true %>">
96
+ <% if (frontmatter.components?.layout===true || frontmatter.components?.layout==='full' ) { %>
97
+ <div class="main-content-wrapper">
98
+ <% if (frontmatter.components?.header !==false) { %>
99
+ <header class="page-header">
100
+ <% if (frontmatter.components?.pageTitle !==false) { %>
101
+ <h1>
102
+ <%= pageTitle %>
103
+ </h1>
98
104
  <% } %>
99
- </header>
105
+ </header>
100
106
  <% } %>
101
107
  <main class="content-area">
102
- <div class="content-layout">
103
- <div class="main-content"><%- content %></div>
104
- <% if (frontmatter.components?.toc !== false && headings && headings.length > 0) { %>
105
- <div class="toc-sidebar">
106
- <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
107
- </div>
108
- <% } %>
109
- </div>
108
+ <div class="content-layout">
109
+ <div class="main-content"><%- content %></div>
110
+ <% if (frontmatter.components?.toc !==false && headings && headings.length> 0) { %>
111
+ <div class="toc-sidebar">
112
+ <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
113
+ </div>
114
+ <% } %>
115
+ </div>
110
116
  </main>
111
- <% if (frontmatter.components?.footer !== false) { %>
112
- <footer class="page-footer">
117
+ <% if (frontmatter.components?.footer !==false) { %>
118
+ <footer class="page-footer">
113
119
  <div class="footer-content">
114
- <div class="user-footer"><%- footerHtml || '' %></div>
115
- <% if (frontmatter.components?.branding !== false) { %>
120
+ <div class="user-footer"><%- footerHtml || '' %></div>
121
+ <% if (frontmatter.components?.branding !==false) { %>
116
122
  <div class="branding-footer">
117
- 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>
123
+ Build with <svg xmlns="http://www.w3.org/2000/svg"
124
+ width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
125
+ stroke-linecap="round" stroke-linejoin="round">
126
+ <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">
127
+ </path>
128
+ <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">
129
+ </path>
130
+ <path d="m18 15-2-2"></path>
131
+ <path d="m15 18-2-2"></path>
132
+ </svg> <a href="https://docmd.io" target="_blank" rel="noopener">docmd.</a>
118
133
  </div>
119
- <% } %>
134
+ <% } %>
120
135
  </div>
121
- </footer>
136
+ </footer>
122
137
  <% } %>
123
- </div>
124
- <% } else if (frontmatter.components?.sidebar === true) { %>
125
- <aside class="sidebar">
126
- <% if (frontmatter.components?.logo !== false && logo && logo.light && logo.dark) { %>
127
- <div class="sidebar-header">
138
+ </div>
139
+ <% } else if (frontmatter.components?.sidebar===true) { %>
140
+ <aside class="sidebar">
141
+ <% if (frontmatter.components?.logo !==false && logo && logo.light && logo.dark) { %>
142
+ <div class="sidebar-header">
128
143
  <a href="<%= logo.href || (relativePathToRoot + 'index.html') %>" class="logo-link">
129
- <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 %>;"<% } %>>
130
- <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 %>;"<% } %>>
144
+ <img src="<%= relativePathToRoot %><%- logo.light.startsWith('/') ? logo.light.substring(1) : logo.light %>"
145
+ alt="<%= logo.alt || siteTitle %>" class="logo-light" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
146
+ <img src="<%= relativePathToRoot %><%- logo.dark.startsWith('/') ? logo.dark.substring(1) : logo.dark %>"
147
+ alt="<%= logo.alt || siteTitle %>" class="logo-dark" <% if (logo.height) { %>style="height: <%= logo.height %>;"<% } %>>
131
148
  </a>
132
- </div>
149
+ </div>
133
150
  <% } %>
134
- <% if (frontmatter.components?.navigation !== false) { %>
135
- <%- navigationHtml %>
151
+ <% if (frontmatter.components?.navigation !==false) { %>
152
+ <%- navigationHtml %>
136
153
  <% } %>
137
- <% if (frontmatter.components?.themeToggle !== false && theme && theme.enableModeToggle) { %>
138
- <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
154
+ <% if (frontmatter.components?.themeToggle !==false && theme && theme.enableModeToggle) { %>
155
+ <button id="theme-toggle-button" aria-label="Toggle theme" class="theme-toggle-button">
139
156
  <%- renderIcon('sun', { class: 'icon-sun' }) %> <%- renderIcon('moon', { class: 'icon-moon' }) %>
140
- </button>
157
+ </button>
141
158
  <% } %>
142
- </aside>
143
- <div class="main-content-wrapper">
144
- <% if (frontmatter.components?.header !== false) { %>
145
- <header class="page-header">
146
- <% if (frontmatter.components?.pageTitle !== false) { %>
147
- <h1><%= pageTitle %></h1>
159
+ </aside>
160
+ <div class="main-content-wrapper">
161
+ <% if (frontmatter.components?.header !==false) { %>
162
+ <header class="page-header">
163
+ <% if (frontmatter.components?.pageTitle !==false) { %>
164
+ <h1>
165
+ <%= pageTitle %>
166
+ </h1>
148
167
  <% } %>
149
- </header>
168
+ </header>
150
169
  <% } %>
151
170
  <main class="content-area">
152
- <div class="content-layout">
153
- <div class="main-content"><%- content %></div>
154
- <% if (frontmatter.components?.toc !== false && headings && headings.length > 0) { %>
155
- <div class="toc-sidebar">
156
- <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
157
- </div>
158
- <% } %>
159
- </div>
171
+ <div class="content-layout">
172
+ <div class="main-content"><%- content %></div>
173
+ <% if (frontmatter.components?.toc !==false && headings && headings.length> 0) { %>
174
+ <div class="toc-sidebar">
175
+ <%- include('toc', { content, headings, navigationHtml, isActivePage }) %>
176
+ </div>
177
+ <% } %>
178
+ </div>
160
179
  </main>
161
- <% if (frontmatter.components?.footer !== false) { %>
162
- <footer class="page-footer">
180
+ <% if (frontmatter.components?.footer !==false) { %>
181
+ <footer class="page-footer">
163
182
  <div class="footer-content">
164
- <div class="user-footer"><%- footerHtml || '' %></div>
165
- <% if (frontmatter.components?.branding !== false) { %>
183
+ <div class="user-footer"><%- footerHtml || '' %></div>
184
+ <% if (frontmatter.components?.branding !==false) { %>
166
185
  <div class="branding-footer">
167
- 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>
186
+ 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">
187
+ <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>
188
+ <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>
189
+ <path d="m18 15-2-2"></path>
190
+ <path d="m15 18-2-2"></path>
191
+ </svg> <a href="https://docmd.io" target="_blank" rel="noopener">docmd.</a>
168
192
  </div>
169
- <% } %>
193
+ <% } %>
170
194
  </div>
171
- </footer>
195
+ </footer>
172
196
  <% } %>
173
- </div>
197
+ </div>
174
198
  <% } else { %>
175
- <%- content %>
199
+ <%- content %>
176
200
  <% } %>
177
201
 
178
- <% if (frontmatter.components?.scripts === true) { %>
179
- <% if (frontmatter.components?.mainScripts === true) { %>
202
+ <% if (frontmatter.components?.scripts===true) { %>
203
+ <% if (frontmatter.components?.mainScripts===true) { %>
180
204
  <script>window.DOCMD_ROOT = "<%= relativePathToRoot %>";</script>
181
205
  <script src="<%= relativePathToRoot %>assets/js/docmd-main.js"></script>
182
- <% } %>
183
-
184
- <% if (frontmatter.components?.lightbox === true && frontmatter.components?.mainScripts === true) { %>
206
+ <% } %>
207
+
208
+ <% if (frontmatter.components?.lightbox===true && frontmatter.components?.mainScripts===true) { %>
185
209
  <script src="<%= relativePathToRoot %>assets/js/docmd-image-lightbox.js"></script>
186
- <% } %>
210
+ <% } %>
187
211
 
188
- <% if (frontmatter.components?.customJs === true && customJsFiles && customJsFiles.length > 0) { %>
189
- <% customJsFiles.forEach(jsFile => { %>
190
- <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
212
+ <% if (frontmatter.components?.customJs===true && customJsFiles && customJsFiles.length> 0) { %>
213
+ <% customJsFiles.forEach(jsFile=> { %>
214
+ <script src="<%= relativePathToRoot %><%- jsFile.startsWith('/') ? jsFile.substring(1) : jsFile %>"></script>
191
215
  <% }); %>
192
- <% } %>
193
-
194
- <% if (frontmatter.components?.scripts !== false) { %>
195
- <%- pluginBodyScriptsHtml || '' %>
196
- <% } %>
216
+ <% } %>
217
+
218
+ <% if (frontmatter.components?.scripts !==false) { %>
219
+ <%- pluginBodyScriptsHtml || '' %>
220
+ <% } %>
197
221
  <% } %>
222
+
198
223
  <% if (frontmatter.customScripts) { %>
199
- <%- frontmatter.customScripts %>
224
+ <%- frontmatter.customScripts %>
200
225
  <% } %>
201
- </body>
226
+ </body>
202
227
  </html>
@@ -12,35 +12,37 @@
12
12
  * --------------------------------------------------------------------
13
13
  */
14
14
 
15
- (function() {
15
+ (function () {
16
16
  try {
17
17
  // 1. Determine Theme
18
18
  var localValue = localStorage.getItem('docmd-theme');
19
- var configValue = window.DOCMD_DEFAULT_MODE || 'light';
19
+ var configValue = window.DOCMD_DEFAULT_MODE || 'light';
20
20
  var theme = localValue ? localValue : configValue;
21
-
21
+
22
22
  if (theme === 'system') {
23
23
  theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
24
24
  }
25
25
 
26
26
  // 2. Apply to Root
27
27
  document.documentElement.setAttribute('data-theme', theme);
28
-
28
+
29
29
  // 3. Highlight.js Toggle Strategy
30
30
  var lightLink = document.getElementById('hljs-light');
31
31
  var darkLink = document.getElementById('hljs-dark');
32
-
32
+
33
33
  if (lightLink && darkLink) {
34
- if (theme === 'dark') {
35
- lightLink.disabled = true;
36
- darkLink.disabled = false;
37
- } else {
38
- lightLink.disabled = false;
39
- darkLink.disabled = true;
40
- }
34
+ if (theme === 'dark') {
35
+ lightLink.disabled = true;
36
+ darkLink.disabled = false;
37
+ } else {
38
+ lightLink.disabled = false;
39
+ darkLink.disabled = true;
40
+ }
41
41
  }
42
42
 
43
+ document.documentElement.style.visibility = "visible";
43
44
  } catch (e) {
45
+ document.documentElement.style.visibility = "visible";
44
46
  console.error('Theme init failed', e);
45
47
  }
46
48
  })();