Skip to content

Commit bbcc40e

Browse files
NichtStudioCodeNichtStudioCode
committed
Migrate to zensical and add width toggle button
1 parent 6c0b1e4 commit bbcc40e

File tree

19 files changed

+528
-474
lines changed

19 files changed

+528
-474
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,14 @@ jobs:
2121
with:
2222
python-version: 3.x
2323

24-
- run: pip install mkdocs-material
24+
- run: pip install zensical
2525

26-
- run: mkdocs build -f docs/nova.yml -d ../build/nova
27-
- run: mkdocs build -f docs/invui.yml -d ../build/invui
28-
- run: mkdocs build -f docs/invui2.yml -d ../build/invui2
29-
- run: mkdocs build -f docs/cbf.yml -d ../build/cbf
26+
- run: zensical build -f docs/nova.yml
27+
- run: zensical build -f docs/invui.yml
28+
- run: zensical build -f docs/invui2.yml
29+
- run: zensical build -f docs/cbf.yml
3030

3131
- name: Deploy Docs
3232
uses: JamesIves/github-pages-deploy-action@v4
3333
with:
34-
folder: build
34+
folder: docs/site/

‎.gitignore‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22
docs/.obsidian
33
/.scripts
44
/build
5+
site/
6+
.cache
57

68
# Mac Stuff
79
.DS_Store

‎docs/base.yml‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,14 @@ theme:
1313
name: material
1414
logo: assets/logo.png
1515
palette:
16-
scheme: slate
16+
- scheme: slate
17+
toggle:
18+
icon: material/brightness-4
19+
name: Switch to light mode
20+
- scheme: default
21+
toggle:
22+
icon: material/brightness-7
23+
name: Switch to dark mode
1724
icon:
1825
repo: fontawesome/brands/github
1926

‎docs/cbf.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
INHERIT: base.yml
22
docs_dir: cbf
3+
site_dir: site/cbf
34
site_name: CBF Documentation
45
site_url: https://xenondevs.xyz/docs/cbf/
56
edit_uri: edit/main/docs/cbf/
67

8+
extra_javascript:
9+
- assets/js/width-toggle.js
10+
711
theme:
12+
custom_dir: cbf/overrides
813
features:
914
- navigation.footer
1015
- content.tabs.link

‎docs/cbf/assets/js/width-toggle.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Width toggle functionality
2+
document.addEventListener("DOMContentLoaded", function() {
3+
const toggleButton = document.getElementById("md-width-toggle");
4+
const icons = window.__mdWidthIcons;
5+
6+
// Width modes cycle: slim -> wide -> full -> slim
7+
const modes = ["slim", "wide", "full"];
8+
9+
function capitalize(str) {
10+
return str.charAt(0).toUpperCase() + str.slice(1);
11+
}
12+
13+
function updateButton(mode) {
14+
toggleButton.innerHTML = mode === "full" ? icons.minimize : icons.maximize;
15+
const nextMode = modes[(modes.indexOf(mode) + 1) % modes.length];
16+
toggleButton.setAttribute("title", `Current: ${capitalize(mode)} - Click for ${capitalize(nextMode)}`);
17+
}
18+
19+
function applyMode(mode) {
20+
if (mode === "slim") {
21+
document.documentElement.removeAttribute("data-md-width");
22+
} else {
23+
document.documentElement.setAttribute("data-md-width", mode);
24+
}
25+
}
26+
27+
// Initialize button with saved preference
28+
const savedWidth = localStorage.getItem("md-width") || "slim";
29+
updateButton(savedWidth);
30+
31+
// Toggle handler - cycle through modes
32+
toggleButton.addEventListener("click", function() {
33+
const currentMode = localStorage.getItem("md-width") || "slim";
34+
const nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
35+
36+
applyMode(nextMode);
37+
localStorage.setItem("md-width", nextMode);
38+
updateButton(nextMode);
39+
});
40+
});
41+

‎docs/cbf/assets/stylesheets/extra.css‎

Lines changed: 35 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,4 @@
1-
/*noinspection CssUnresolvedCustomProperty*/
2-
:root > * {
3-
--md-primary-fg-color: #1B1D1F;
4-
--md-primary-bg-color: #FFFFFF;
5-
--md-default-bg-color: #151719;
6-
--md-typeset-a-color: var(--md-code-hl-function-color);
7-
--md-default-fg-color--light: #abb9cb;
8-
1+
[data-md-color-scheme="slate"] {
92
--md-code-hl-color: hsla(163, 34%, 67%, 0.5);
103
--md-code-hl-number-color: #0aa370;
114
--md-code-hl-special-color: #73a0d3;
@@ -21,125 +14,50 @@
2114
--md-code-hl-variable-color: #7eb6f6;
2215
}
2316

24-
@media only screen and (min-width: 76.25em) {
25-
.md-nav--lifted>.md-nav__list>.md-nav__item--active>.md-nav__link:not(.md-nav__container) {
26-
width: 90%;
27-
}
28-
29-
.md-main__inner {
30-
max-width: none;
31-
}
32-
33-
.md-content {
34-
max-width: 56.5%;
35-
}
36-
37-
.md-sidebar--primary {
38-
margin-left: 3.75%;
39-
margin-right: 3.75%;
40-
}
41-
42-
.md-sidebar--secondary {
43-
margin-left: 3.75%;
44-
margin-right: 3.75%;
45-
-webkit-transform: none;
46-
transform: none;
47-
}
48-
49-
body::-webkit-scrollbar {
50-
width: 15px;
51-
height: 15px;
52-
}
53-
54-
body::-webkit-scrollbar-thumb {
55-
background-color: #21222c;
56-
border-radius: 15px;
57-
}
58-
59-
body::-webkit-scrollbar-track {
60-
background-color: #2e303e;
61-
}
62-
63-
body {
64-
scrollbar-color: #21222c #2e303e;
65-
}
66-
67-
}
68-
69-
.md-nav {
70-
font-size: 14px;
71-
line-height: 1.4;
72-
}
73-
74-
.md-nav__link {
75-
display: inline-flex;
76-
}
77-
78-
.md-typeset {
79-
font-size: .7rem;
80-
line-height: 1.5;
81-
}
82-
83-
.md-typeset :not(pre) > code {
84-
background-color: #23262b;
85-
}
86-
87-
.text-center {
88-
text-align: center !important;
89-
}
90-
91-
.md-tabs {
92-
box-shadow: rgba(0, 0, 0, 0.1) 0px 0px 0.2rem, rgba(0, 0, 0, 0.2) 0px 0.2rem 0.4rem;
93-
transition: transform 0.25s cubic-bezier(0.1, 0.7, 0.1, 1) 0s, box-shadow 0.25s ease 0s;
94-
}
95-
96-
.md-nav__item .md-nav__link--active {
97-
color: #768390;
98-
}
99-
100-
.md-typeset .admonition {
101-
background-color: var(--md-primary-fg-color);
102-
border-width: 0;
103-
border-left-width: 4px;
104-
}
105-
106-
.md-typeset details {
107-
background-color: var(--md-primary-fg-color);
108-
border-width: 0;
109-
border-left-width: 4px;
110-
}
111-
112-
.md-typeset table:not([class]) {
113-
border-width: 0;
114-
box-shadow: 0 0.2rem 0.5rem hsla(0, 0%, 0%, 0.3),0 0 0.05rem hsla(0, 0%, 0%, 0.2);
115-
border-radius: 5px;
17+
[data-md-color-scheme="default"] {
18+
--md-code-hl-color: hsla(163, 40%, 50%, 0.3);
19+
--md-code-hl-number-color: #087f56;
20+
--md-code-hl-special-color: #4a78a8;
21+
--md-code-hl-function-color: #3a7fc9;
22+
--md-code-hl-constant-color: #6b7a8a;
23+
--md-code-hl-keyword-color: #0e9e72;
24+
--md-code-hl-string-color: #3a7fc9;
25+
--md-code-hl-name-color: var(--md-code-fg-color);
26+
--md-code-hl-operator-color: #0e9e72;
27+
--md-code-hl-punctuation-color: #5a6a7a;
28+
--md-code-hl-comment-color: #7a8a9a;
29+
--md-code-hl-generic-color: var(--md-default-fg-color--light);
30+
--md-code-hl-variable-color: #3a7fc9;
11631
}
11732

118-
.md-typeset th {
119-
background-color: #111111;
33+
.md-grid {
34+
max-width: 200ch;
35+
transition: max-width 0.3s ease;
12036
}
12137

122-
.md-typeset td {
123-
background-color: #1b1d1f;
38+
[data-md-width="wide"] .md-grid {
39+
max-width: 270ch;
12440
}
12541

126-
.md-typeset tbody tr:first-child td {
127-
border-color: #3593ff;
42+
[data-md-width="full"] .md-grid {
43+
max-width: 98%;
12844
}
12945

130-
.md-footer {
131-
background-color: var(--md-primary-fg-color);
46+
.md-header__button.md-width-toggle {
47+
cursor: pointer;
48+
margin-left: 0.2rem;
13249
}
13350

134-
.md-footer-meta {
135-
background: none;
51+
.md-header__button.md-width-toggle svg {
52+
fill: currentcolor;
53+
display: block;
54+
height: 1.2rem;
55+
width: 1.2rem;
13656
}
13757

138-
.md-typeset .md-button {
139-
color: #fff;
58+
/* Hide width toggle on smaller screens where it doesn't make a difference */
59+
@media (max-width: 76.25em) {
60+
.md-header__button.md-width-toggle {
61+
display: none;
62+
}
14063
}
141-
142-
.md-typeset .md-button:hover {
143-
background-color: rgba(255, 255, 255, 0.1);
144-
border-color: rgba(255, 255, 255, 0);
145-
}

‎docs/cbf/overrides/main.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
{% extends "base.html" %}
2+
{% endblock %}
3+
{{ super() }}
4+
</script>
5+
})();
6+
}
7+
}
8+
header.appendChild(btn);
9+
} else {
10+
searchButton.parentNode.insertBefore(btn, searchButton);
11+
if (searchButton) {
12+
|| header.querySelector("label.md-header__button");
13+
const searchButton = header.querySelector(".md-header__button.md-icon[for='__search']")
14+
if (header) {
15+
const header = document.querySelector(".md-header__inner");
16+
17+
btn.innerHTML = mode === "full" ? window.__mdWidthIcons.minimize : window.__mdWidthIcons.maximize;
18+
btn.setAttribute("aria-label", "Toggle page width");
19+
btn.className = "md-header__button md-width-toggle";
20+
btn.id = "md-width-toggle";
21+
const btn = document.createElement("button");
22+
const mode = window.__mdWidthMode || "slim";
23+
24+
};
25+
minimize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="m14 10 7-7"/><path d="M20 10h-6V4"/><path d="m3 21 7-7"/><path d="M4 14h6v6"/></g></svg>'
26+
maximize: '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="-2 -2 28 28" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><g transform="rotate(45 12 12)"><path d="M15 3h6v6"/><path d="m21 3-7 7"/><path d="m3 21 7-7"/><path d="M9 21H3v-6"/></g></svg>',
27+
window.__mdWidthIcons = {
28+
(function() {
29+
// Inject toggle button immediately when header is available
30+
<script>
31+
{% block content %}
32+
33+
{% endblock %}
34+
{{ super() }}
35+
</script>
36+
})();
37+
window.__mdWidthMode = savedWidth;
38+
// Store for width-toggle.js to use
39+
}
40+
document.documentElement.setAttribute("data-md-width", savedWidth);
41+
if (savedWidth === "wide" || savedWidth === "full") {
42+
const savedWidth = localStorage.getItem("md-width") || "slim";
43+
(function() {
44+
<script>
45+
{% block styles %}
46+
47+

‎docs/invui.yml‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
INHERIT: base.yml
22
docs_dir: invui
3+
site_dir: site/invui
34
site_name: InvUI Documentation
45
site_url: https://xenondevs.xyz/docs/invui/
56
edit_uri: edit/main/docs/invui/
67

8+
extra_javascript:
9+
- assets/js/width-toggle.js
10+
711
theme:
12+
custom_dir: invui/overrides
813
features:
914
- navigation.footer
1015
- content.tabs.link

‎docs/invui/assets/js/width-toggle.js‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
// Width toggle functionality
2+
document.addEventListener("DOMContentLoaded", function() {
3+
const toggleButton = document.getElementById("md-width-toggle");
4+
const icons = window.__mdWidthIcons;
5+
6+
// Width modes cycle: slim -> wide -> full -> slim
7+
const modes = ["slim", "wide", "full"];
8+
9+
function capitalize(str) {
10+
return str.charAt(0).toUpperCase() + str.slice(1);
11+
}
12+
13+
function updateButton(mode) {
14+
toggleButton.innerHTML = mode === "full" ? icons.minimize : icons.maximize;
15+
const nextMode = modes[(modes.indexOf(mode) + 1) % modes.length];
16+
toggleButton.setAttribute("title", `Current: ${capitalize(mode)} - Click for ${capitalize(nextMode)}`);
17+
}
18+
19+
function applyMode(mode) {
20+
if (mode === "slim") {
21+
document.documentElement.removeAttribute("data-md-width");
22+
} else {
23+
document.documentElement.setAttribute("data-md-width", mode);
24+
}
25+
}
26+
27+
// Initialize button with saved preference
28+
const savedWidth = localStorage.getItem("md-width") || "slim";
29+
updateButton(savedWidth);
30+
31+
// Toggle handler - cycle through modes
32+
toggleButton.addEventListener("click", function() {
33+
const currentMode = localStorage.getItem("md-width") || "slim";
34+
const nextMode = modes[(modes.indexOf(currentMode) + 1) % modes.length];
35+
36+
applyMode(nextMode);
37+
localStorage.setItem("md-width", nextMode);
38+
updateButton(nextMode);
39+
});
40+
});
41+

0 commit comments

Comments
 (0)