Skip to content

Commit 7bc0436

Browse files
hartk1213hartk1213
committed
update to the template
1 parent dc30aca commit 7bc0436

File tree

2 files changed

+158
-60
lines changed

2 files changed

+158
-60
lines changed

‎manual/images/Vectors/Icons/github-icon.svg‎

Lines changed: 0 additions & 4 deletions
Loading

‎manual/tool/template/mdbook.html‎

Lines changed: 158 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,58 +1,80 @@
11
<!DOCTYPE html>
2-
<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$"$if(dir)$ dir="$dir$"$endif$>
2+
<html xmlns="http://www.w3.org/1999/xhtml" lang="$lang$" xml:lang="$lang$" $if(dir)$ dir="$dir$" $endif$>
3+
34
<head>
45
<!-- pandoc template based on mdBook theme -->
56
<meta charset="utf-8" />
67
<meta name="generator" content="pandoc" />
78
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes" />
8-
$for(author-meta)$
9+
$for(author-meta)$
910
<meta name="author" content="$author-meta$" />
10-
$endfor$
11-
$if(date-meta)$
11+
$endfor$
12+
$if(date-meta)$
1213
<meta name="dcterms.date" content="$date-meta$" />
13-
$endif$
14-
$if(keywords)$
14+
$endif$
15+
$if(keywords)$
1516
<meta name="keywords" content="$for(keywords)$$keywords$$sep$, $endfor$" />
16-
$endif$
17+
$endif$
1718
<title>$if(title-prefix)$$title-prefix$ – $endif$$pagetitle$</title>
19+
<script src="tool/template/svg-inject.js" type="text/javascript" charset="utf-8"></script>
20+
<script src="tool/template/svg-color.js" type="text/javascript" charset="utf-8"></script>
1821

19-
<link rel="shortcut icon" href="template/favicon.ico">
20-
<link rel="stylesheet" href="template/screen.css" />
21-
<link rel="stylesheet" href="template/print.css" media="print">
22+
<link rel="shortcut icon" href="tool/template/favicon.ico">
23+
<link rel="stylesheet" href="tool/template/screen.css" />
24+
<link rel="stylesheet" href="tool/template/print.css" media="print">
2225
<style>
23-
code{white-space: pre-wrap;}
24-
span.smallcaps{font-variant: small-caps;}
25-
span.underline{text-decoration: underline;}
26-
div.column{display: inline-block; vertical-align: top; width: 50%;}
27-
$if(quotes)$
28-
q { quotes: "“" "”" "‘" "’"; }
29-
$endif$
26+
code {
27+
white-space: pre-wrap;
28+
}
29+
30+
span.smallcaps {
31+
font-variant: small-caps;
32+
}
33+
34+
span.underline {
35+
text-decoration: underline;
36+
}
37+
38+
div.column {
39+
display: inline-block;
40+
vertical-align: top;
41+
width: 50%;
42+
}
43+
44+
$if(quotes)$ q {
45+
quotes: "“" "”" "‘" "’";
46+
}
47+
48+
$endif$
3049
</style>
31-
$if(highlighting-css)$
50+
$if(highlighting-css)$
3251
<style>
33-
$highlighting-css$
52+
$highlighting-css$
3453
</style>
35-
$endif$
36-
$for(css)$
54+
$endif$
55+
$for(css)$
3756
<link rel="stylesheet" href="$css$" />
38-
$endfor$
57+
$endfor$
3958

4059
<!-- Fonts -->
41-
<link rel="stylesheet" href="template/fontawesome/css/all.min.css">
42-
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" rel="stylesheet" type="text/css">
60+
<link rel="stylesheet" href="tool/template/fontawesome/css/all.min.css">
61+
<link
62+
href="https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
63+
rel="stylesheet" type="text/css">
4364
<link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500" rel="stylesheet" type="text/css">
44-
$if(math)$
65+
$if(math)$
4566
$math$
46-
$endif$
47-
$for(header-includes)$
67+
$endif$
68+
$for(header-includes)$
4869
$header-includes$
49-
$endfor$
70+
$endfor$
5071
</head>
72+
5173
<body class="light">
5274

53-
$for(include-before)$
75+
$for(include-before)$
5476
$include-before$
55-
$endfor$
77+
$endfor$
5678

5779
<!-- Provide site root to javascript -->
5880
<script type="text/javascript">
@@ -76,12 +98,10 @@
7698
} catch (e) { }
7799
</script>
78100

79-
80-
81101
<!-- Set the theme before any content is loaded, prevents flash -->
82102
<script type="text/javascript">
83103
var theme;
84-
try { theme = localStorage.getItem('mdbook-theme'); } catch(e) { }
104+
try { theme = localStorage.getItem('mdbook-theme'); } catch (e) { }
85105
if (theme === null || theme === undefined) { theme = default_theme; }
86106
document.body.className = theme;
87107
document.querySelector('html').className = theme + ' js';
@@ -92,13 +112,16 @@
92112
var html = document.querySelector('html');
93113
var sidebar = 'hidden';
94114
if (document.body.clientWidth >= 1080) {
95-
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch(e) { }
115+
try { sidebar = localStorage.getItem('mdbook-sidebar'); } catch (e) { }
96116
sidebar = sidebar || 'visible';
97117
}
98118
html.classList.remove('sidebar-visible');
99119
html.classList.add("sidebar-" + sidebar);
100120
</script>
101121

122+
123+
124+
102125
<nav id="sidebar" class="sidebar" aria-label="Table of contents">
103126
<div class="toc">
104127
$toc$
@@ -112,51 +135,130 @@
112135
<div id="menu-bar" class="menu-bar">
113136
<div id="menu-bar-sticky-container">
114137
<div class="left-buttons">
115-
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents" aria-label="Toggle Table of Contents" aria-controls="sidebar">
116-
<i class="fas fa-bars"></i>
138+
<button id="sidebar-toggle" class="icon-button" type="button" title="Toggle Table of Contents"
139+
aria-label="Toggle Table of Contents" aria-controls="sidebar">
140+
<i class="fas fa-bars" style="cursor: pointer; color: var(--accent)"></i>
117141
</button>
118142
</div>
119143

120144
<h1 class="menu-title">$title$</h1>
121145

122146
<div class="right-buttons">
147+
<!-- Print Button -->
123148
<a onclick="window.print()" title="Print this book" aria-label="Print this book">
124-
<i id="print-button" class="fas fa-print"></i>
149+
<i id="print-button" class="fas fa-print" style="cursor: pointer; color: var(--accent)"></i>
125150
</a>
151+
152+
<!-- PDF Download Button -->
126153
<a href="manual.pdf" title="View PDF file" aria-label="View PDF file">
127-
<i class="fas fa-file-pdf"></i>
154+
<i class="fas fa-file-pdf" style="cursor: pointer; color: var(--accent)"></i>
128155
</a>
129-
</div>
156+
157+
<!-- ACCENT -->
158+
<a id="colorPickerAccentButton">
159+
<i class="fas fa-palette" style="color: var(--accent);"></i>
160+
</a>
161+
<input type="color" id="colorPickerAccent" value="#97fa98" style="display:none;">
130162
</div>
131-
</div>
132163

133164

134-
<div id="content" class="content">
135-
<main>
136-
$body$
137-
</main>
165+
<div id="content" class="content">
166+
<main>
167+
$body$
168+
</main>
138169

139-
<nav class="nav-wrapper" aria-label="Page navigation">
140-
<!-- Mobile navigation buttons -->
170+
<nav class="nav-wrapper" aria-label="Page navigation">
171+
<!-- Mobile navigation buttons -->
141172

142173

143174

144175

145-
<div style="clear: both"></div>
146-
</nav>
176+
<div style="clear: both"></div>
177+
</nav>
178+
</div>
147179
</div>
180+
181+
<nav class="nav-wide-wrapper" aria-label="Page navigation">
182+
183+
</nav>
184+
148185
</div>
149186

150-
<nav class="nav-wide-wrapper" aria-label="Page navigation">
187+
<script src="tool/template/book.js" type="text/javascript" charset="utf-8"></script>
188+
$for(include-after)$
189+
$include-after$
190+
$endfor$
191+
192+
<script>
193+
input.addEventListener("input", function () {
194+
const newColor = input.value;
195+
button.querySelector("i").style.color = newColor;
196+
197+
// Only target paths for the current picker (main or accent)
198+
document.querySelectorAll('svg[color]').forEach(svg => {
199+
const svgColor = svg.getAttribute('color');
200+
if (svgColor !== type) return;
151201

152-
</nav>
202+
// TYPE 1: Paths inside any <g id^="fill">
203+
const groupPaths = svg.querySelectorAll('g[id^="fill"] path');
204+
205+
// TYPE 2: Any <path> with matching color attribute
206+
const coloredPaths = svg.querySelectorAll(`path[color="${type}"]`);
153207

154-
</div>
208+
// Combine into a Set to avoid duplicates if any path matches both
209+
const allPaths = new Set([...groupPaths, ...coloredPaths]);
155210

156-
<script src="template/book.js" type="text/javascript" charset="utf-8"></script>
211+
allPaths.forEach(path => {
212+
path.removeAttribute('class'); // Remove class like .st0
213+
path.style.fill = newColor; // Apply inline fill
214+
});
215+
});
216+
});
157217

158-
$for(include-after)$
159-
$include-after$
160-
$endfor$
218+
</script>
219+
220+
221+
222+
<script>
223+
SVGInject.setOptions({
224+
useCache: false, // no caching
225+
copyAttributes: true, // do not copy attributes from `<img>` to `<svg>`
226+
makeIdsUnique: false, // do not make ids used within the SVG unique
227+
afterInject: function(img, svg) {
228+
const targetFill = 'fill:#97fa98';
229+
svg.querySelectorAll('path[style]').forEach(path => {
230+
const style = path.getAttribute('style');
231+
if (style.includes(targetFill)) {
232+
// Remove the fill from style string
233+
const newStyle = style
234+
.split(';')
235+
.filter(part => !part.trim().startsWith('fill:#97fa98'))
236+
.join(';')
237+
.trim();
238+
239+
if (newStyle) {
240+
path.setAttribute('style', newStyle);
241+
} else {
242+
path.removeAttribute('style');
243+
}
244+
245+
// Add color="accent"
246+
path.setAttribute('color', 'accent');
247+
}
248+
});
249+
},
250+
251+
252+
beforeLoad: function(img) {
253+
var path = "https://raw.githubusercontent.com/PrintersForAnts/MicronManual/refs/heads/main/manual/"
254+
const rawSrc = img.getAttribute('src') || '';
255+
console.log(rawSrc);
256+
console.log(path);
257+
return path + rawSrc;
258+
}
259+
});
260+
</script>
161261
</body>
162-
</html>
262+
263+
264+
</html>

0 commit comments

Comments
 (0)