Skip to content

Commit 52670b6

Browse files
actions-useractions-user
committed
Deployed 2b4f3d7 to dev with MkDocs 1.6.1 and mike 2.1.3
1 parent 7298175 commit 52670b6

38 files changed

Lines changed: 38131 additions & 190 deletions

File tree

‎dev/404.html‎

Lines changed: 550 additions & 0 deletions
Large diffs are not rendered by default.

‎dev/assets/mkdocs_puml/interaction.css‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
:root {
2+
--btn-bg-color: #fff;
3+
--btn-border-color: #dbdbdb;
4+
--btn-text-color: #363636;
5+
6+
--btn-hover-border-color: #b5b5b5;
7+
--btn-active-border-color: #3d54b7;
8+
--btn-focus-border-color: #485fc7;
9+
10+
--stroke-green: #308553;
11+
}
12+
13+
@media (prefers-color-scheme: dark) {
14+
:root {
15+
--btn-bg-color: #1c1919;
16+
--btn-border-color: #1c1919;
17+
--btn-text-color: #c0c0c0;
18+
19+
--btn-hover-border-color: #7f7f7f;
20+
--btn-active-border-color: #303f83;
21+
--btn-focus-border-color: #3a4c9d;
22+
}
23+
}
24+
25+
html[data-bs-theme="light"] {
26+
--btn-bg-color: #fff;
27+
--btn-border-color: #dbdbdb;
28+
--btn-text-color: #363636;
29+
30+
--btn-hover-border-color: #b5b5b5;
31+
--btn-active-border-color: #3d54b7;
32+
--btn-focus-border-color: #485fc7;
33+
}
34+
35+
html[data-bs-theme="dark"] {
36+
--btn-bg-color: #1c1919;
37+
--btn-border-color: #393939;
38+
--btn-text-color: #c0c0c0;
39+
40+
--btn-hover-border-color: #7f7f7f;
41+
--btn-active-border-color: #303f83;
42+
--btn-focus-border-color: #3a4c9d;
43+
}
44+
45+
body[data-md-color-scheme="default"] {
46+
--btn-bg-color: #fff;
47+
--btn-border-color: #dbdbdb;
48+
--btn-text-color: #363636;
49+
50+
--btn-hover-border-color: #b5b5b5;
51+
--btn-active-border-color: #3d54b7;
52+
--btn-focus-border-color: #485fc7;
53+
}
54+
55+
body[data-md-color-scheme="slate"] {
56+
--btn-bg-color: #1c1919;
57+
--btn-border-color: #393939;
58+
--btn-text-color: #c0c0c0;
59+
60+
--btn-hover-border-color: #7f7f7f;
61+
--btn-active-border-color: #303f83;
62+
--btn-focus-border-color: #3a4c9d;
63+
}
64+
65+
66+
.puml .control {
67+
display: none;
68+
flex-direction: column;
69+
gap: 0.2em;
70+
71+
position: absolute;
72+
top: 0;
73+
left: 0;
74+
margin: 0.5em;
75+
z-index: 2;
76+
}
77+
78+
.puml:hover .control {
79+
display: flex;
80+
}
81+
82+
.puml .control hr {
83+
margin-top: 0.5em;
84+
margin-bottom: 0.5em;
85+
}
86+
87+
.icon-button {
88+
display: inline-flex;
89+
width: 24px;
90+
height: 24px;
91+
align-items: center;
92+
appearance: none;
93+
background-color: var(--btn-bg-color);
94+
border: 1px solid var(--btn-border-color);
95+
color: var(--btn-text-color);
96+
border-radius: 5px;
97+
box-shadow: none;
98+
box-sizing: border-box;
99+
cursor: pointer;
100+
justify-content: center;
101+
text-align: center;
102+
user-select: none;
103+
-webkit-user-select: none;
104+
touch-action: manipulation;
105+
white-space: nowrap;
106+
}
107+
108+
.icon-button .lucide {
109+
width: 70%;
110+
height: auto;
111+
stroke: var(--btn-text-color);
112+
}
113+
114+
.icon-button .lucide.green {
115+
stroke: var(--stroke-green);
116+
}
117+
118+
.icon-button:hover {
119+
border-color: var(--btn-hover-border-color);
120+
}
121+
122+
.icon-button:focus {
123+
border-color: var(--btn-focus-border-color);
124+
outline: 0;
125+
}
126+
127+
.icon-button:active {
128+
border-color: var(--btn-active-border-color);
129+
outline: 0;
130+
}

‎dev/assets/mkdocs_puml/interaction.js‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
let copySvg = `
2+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-copy">
3+
<rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/>
4+
</svg>
5+
`;
6+
7+
let checkSvg = `
8+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check green">
9+
<path d="M20 6 9 17l-5-5"/>
10+
</svg>
11+
`;
12+
13+
let downloadSvg = `
14+
<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" class="lucide lucide-download">
15+
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" x2="12" y1="15" y2="3"/>
16+
</svg>
17+
`;
18+
19+
let controls = `
20+
<div class="control">
21+
<button class="icon-button puml-copy">
22+
${copySvg}
23+
</button>
24+
<button class="icon-button puml-download">
25+
${downloadSvg}
26+
</button>
27+
<hr />
28+
<button class="icon-button puml-zoom-in">
29+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-plus">
30+
<path d="M5 12h14"/><path d="M12 5v14"/>
31+
</svg>
32+
</button>
33+
<button class="icon-button puml-zoom-reset">
34+
<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" class="lucide lucide-house">
35+
<path d="M15 21v-8a1 1 0 0 0-1-1h-4a1 1 0 0 0-1 1v8"/><path d="M3 10a2 2 0 0 1 .709-1.528l7-5.999a2 2 0 0 1 2.582 0l7 5.999A2 2 0 0 1 21 10v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z"/>
36+
</svg>
37+
</button>
38+
<button class="icon-button puml-zoom-out">
39+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-minus">
40+
<path d="M5 12h14"/>
41+
</svg>
42+
</button>
43+
</div>
44+
`;
45+
46+
function processDiagrams() {
47+
const svgs = document.querySelectorAll('.puml .diagram');
48+
svgs.forEach(svg => {
49+
// Get the computed width and height of each SVG
50+
// const rect = svg.querySelector('rect');
51+
let width = svg.getAttribute('width');
52+
let height = svg.getAttribute('height');
53+
54+
width = parseInt(width);
55+
height = parseInt(height);
56+
57+
if(isNaN(width) || isNaN(height)) {
58+
return
59+
}
60+
61+
if (width > height) {
62+
svg.classList.add('wide-svg');
63+
}
64+
65+
const g = svg.querySelector('g');
66+
const panzoom = Panzoom(g, {canvas: true});
67+
68+
g.parentElement.addEventListener('wheel', function (event) {
69+
if (!event.shiftKey) return
70+
// Panzoom will automatically use `deltaX` here instead
71+
// of `deltaY`. On a mac, the shift modifier usually
72+
// translates to horizontal scrolling, but Panzoom assumes
73+
// the desired behavior is zooming.
74+
panzoom.zoomWithWheel(event)
75+
});
76+
77+
svg.insertAdjacentHTML("beforebegin", controls);
78+
79+
const control = svg.parentElement.querySelector(".control");
80+
const copyBtn = control.querySelector(".puml-copy");
81+
const downloadBtn = control.querySelector(".puml-download");
82+
const zoomResetBtn = control.querySelector(".puml-zoom-reset");
83+
const zoomInBtn = control.querySelector(".puml-zoom-in");
84+
const zoomOutBtn = control.querySelector(".puml-zoom-out");
85+
86+
zoomResetBtn.addEventListener("click", event => {
87+
panzoom.reset({animate: false});
88+
});
89+
zoomInBtn.addEventListener("click", event => {
90+
panzoom.zoomIn();
91+
});
92+
zoomOutBtn.addEventListener("click", event => {
93+
panzoom.zoomOut();
94+
});
95+
96+
let timeout = null;
97+
copyBtn.addEventListener("click", event => {
98+
clearTimeout(timeout);
99+
100+
let btn = event.target.closest('button');
101+
btn.innerHTML = checkSvg;
102+
103+
timeout = setTimeout(() => {
104+
btn.innerHTML = copySvg;
105+
}, 1500);
106+
});
107+
copyBtn.addEventListener("click", e => {
108+
const svgString = new XMLSerializer().serializeToString(svg);
109+
// Copy svg as text
110+
navigator.clipboard.writeText(svgString);
111+
});
112+
downloadBtn.addEventListener("click", e => {
113+
const svgString = new XMLSerializer().serializeToString(svg);
114+
let blob = new Blob([svgString], { type: 'image/svg+xml' });
115+
let link = document.createElement('a');
116+
link.href = URL.createObjectURL(blob);
117+
link.download = 'diagram.svg';
118+
link.click();
119+
URL.revokeObjectURL(link.href);
120+
});
121+
});
122+
}
123+
124+
// This checks if mkdocs-material is installed, use document$.subscribe.
125+
// Otherwise, add listener to DOMContentLoaded
126+
if (typeof document$ !== 'undefined' && document$.subscribe){
127+
document$.subscribe(processDiagrams);
128+
} else {
129+
document.addEventListener('DOMContentLoaded', processDiagrams);
130+
}

‎dev/assets/mkdocs_puml/puml.css‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
@media (prefers-color-scheme: dark) {
2+
body .puml.light {
3+
display: none;
4+
}
5+
6+
body .puml.dark {
7+
display: block;
8+
}
9+
}
10+
11+
html[data-bs-theme="light"] .puml.light {
12+
display: block;
13+
}
14+
html[data-bs-theme="dark"] .puml.light {
15+
display: none;
16+
}
17+
18+
html[data-bs-theme="light"] .puml.dark {
19+
display: none;
20+
}
21+
html[data-md-color-scheme="dark"] .puml.dark {
22+
display: block;
23+
}
24+
25+
26+
body[data-md-color-scheme="default"] .puml.light {
27+
display: block;
28+
}
29+
body[data-md-color-scheme="slate"] .puml.light {
30+
display: none;
31+
}
32+
33+
body[data-md-color-scheme="default"] .puml.dark {
34+
display: none;
35+
}
36+
body[data-md-color-scheme="slate"] .puml.dark {
37+
display: block;
38+
}
39+
40+
.puml {
41+
display: block;
42+
position: relative;
43+
}
44+
45+
.puml .diagram {
46+
width: 100% !important;
47+
min-height: 300px !important;
48+
}
49+
50+
.puml .diagram.wide-svg {
51+
height: auto !important;
52+
}

‎dev/assets/mkdocs_puml/puml.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
// Wide diagrams receive enormously big height. This code
2+
// assigns a special class .wide-svg to each svg where width > height
3+
// and CSS fixes the problem.
4+
document.addEventListener("DOMContentLoaded", function() {
5+
const svgs = document.querySelectorAll('.puml .diagram');
6+
svgs.forEach(svg => {
7+
// Get the computed width and height of each SVG
8+
// const rect = svg.querySelector('rect');
9+
let width = svg.getAttribute('width');
10+
let height = svg.getAttribute('height');
11+
12+
width = parseInt(width);
13+
height = parseInt(height);
14+
15+
if(isNaN(width) || isNaN(height)) {
16+
return
17+
}
18+
19+
if (width > height) {
20+
svg.classList.add('wide-svg');
21+
}
22+
});
23+
});

0 commit comments

Comments
 (0)