Skip to content

Commit e849f24

Browse files
SamBarkerSamBarker
authored
Merge pull request #111 from gracegrimwood/docs-formatting-fixes
Fix formatting of docs
2 parents 6f873eb + 6a36392 commit e849f24

File tree

4 files changed

+180
-14
lines changed

4 files changed

+180
-14
lines changed

‎_includes/asciidoctor-scripts/icons.html

+77
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!-- The following script adds bootstrap classes to Asciidoc "admonitionblock" elements i.e. text blocks labelled info, warning, etc. -->
2+
<!-- Without this script they just appear as weirdly-formatted paragraphs, however it does add a little bit to page load time. -->
3+
<!-- There's some styles at the bottom of _sass/kroxylicious.scss to make this all work nicely and look good. -->
4+
<script>
5+
document.addEventListener("DOMContentLoaded", function () {
6+
document.querySelectorAll(".admonitionblock.note").forEach((blockElem) => {
7+
blockElem.classList.add("alert");
8+
blockElem.setAttribute("role", "alert");
9+
blockElem.classList.add("alert-info");
10+
blockElem.querySelectorAll("i").forEach((iconElem) => {
11+
var elemClassList = iconElem.classList;
12+
// FontAwesome .fa -> Bootstrap Icons .bi
13+
elemClassList.replace("fa", "bi");
14+
// FontAwesome .icon-note -> Bootstrap Icons .bi-info-circle-fill
15+
elemClassList.replace("icon-note", "bi-info-circle-fill");
16+
// add layout and util classes
17+
elemClassList.add("krx-docs-note", "ms-2", "me-4", "fs-5");
18+
});
19+
});
20+
document.querySelectorAll(".admonitionblock.tip").forEach((blockElem) => {
21+
blockElem.classList.add("alert");
22+
blockElem.setAttribute("role", "alert");
23+
blockElem.classList.add("alert-primary");
24+
blockElem.querySelectorAll("i").forEach((iconElem) => {
25+
var elemClassList = iconElem.classList;
26+
// FontAwesome .fa -> Bootstrap Icons .bi
27+
elemClassList.replace("fa", "bi");
28+
// FontAwesome .icon-tip -> Bootstrap Icons .bi-lightbulb
29+
elemClassList.replace("icon-tip", "bi-lightbulb");
30+
// add layout and util classes
31+
elemClassList.add("krx-docs-tip", "ms-2", "me-4", "fs-5");
32+
});
33+
})
34+
document.querySelectorAll(".admonitionblock.warning").forEach((blockElem) => {
35+
blockElem.classList.add("alert");
36+
blockElem.setAttribute("role", "alert");
37+
blockElem.classList.add("alert-warning");
38+
blockElem.querySelectorAll("i").forEach((iconElem) => {
39+
var elemClassList = iconElem.classList;
40+
// FontAwesome .fa -> Bootstrap Icons .bi
41+
elemClassList.replace("fa", "bi");
42+
// FontAwesome .icon-warning -> Bootstrap Icons .bi-exclamation-triangle-fill
43+
elemClassList.replace("icon-warning", "bi-exclamation-triangle-fill");
44+
// add layout and util classes
45+
elemClassList.add("krx-docs-warning", "ms-2", "me-4", "fs-5");
46+
});
47+
});
48+
document.querySelectorAll(".admonitionblock.caution").forEach((blockElem) => {
49+
blockElem.classList.add("alert");
50+
blockElem.setAttribute("role", "alert");
51+
blockElem.classList.add("alert-danger");
52+
blockElem.querySelectorAll("i").forEach((iconElem) => {
53+
var elemClassList = iconElem.classList;
54+
// FontAwesome .fa -> Bootstrap Icons .bi
55+
elemClassList.replace("fa", "bi");
56+
// FontAwesome .icon-caution -> Bootstrap Icons .bi-dash-circle-fill
57+
elemClassList.replace("icon-caution", "bi-dash-circle-fill");
58+
// add layout and util classes
59+
elemClassList.add("krx-docs-caution", "ms-2", "me-4", "fs-5");
60+
});
61+
});
62+
document.querySelectorAll(".admonitionblock.important").forEach((blockElem) => {
63+
blockElem.classList.add("alert");
64+
blockElem.setAttribute("role", "alert");
65+
blockElem.classList.add("alert-danger");
66+
blockElem.querySelectorAll("i").forEach((iconElem) => {
67+
var elemClassList = iconElem.classList;
68+
// FontAwesome .fa -> Bootstrap Icons .bi
69+
elemClassList.replace("fa", "bi");
70+
// FontAwesome .icon-important -> Bootstrap Icons .bi-exclamation-circle-fill
71+
elemClassList.replace("icon-important", "bi-exclamation-circle-fill");
72+
// add layout and util classes
73+
elemClassList.add("krx-docs-important", "ms-2", "me-4", "fs-5");
74+
});
75+
});
76+
});
77+
</script>

‎_includes/asciidoctor-scripts/sectanchors.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!-- The following script fixes an accessibility issue with the sectanchors injected by AsciiDoc not containing any content. -->
2+
<!-- The script adds a span which the anchor CSS applies to, then moves the header text inside the anchor element. -->
3+
<script>
4+
document.addEventListener("DOMContentLoaded", function () {
5+
document.querySelectorAll("a.anchor").forEach((anchorElem) => {
6+
var anchorSpan = document.createElement('span');
7+
anchorSpan.setAttribute("class", "anchor-icon");
8+
anchorElem.appendChild(anchorSpan);
9+
anchorElem.appendChild(anchorElem.nextSibling);
10+
anchorElem.setAttribute("class", anchorElem.getAttribute("class") + " text-decoration-none text-reset")
11+
})
12+
})
13+
</script>

‎_layouts/docs.html

+2-13
Original file line numberDiff line numberDiff line change
@@ -33,16 +33,5 @@ <h1 class="card-title fs-3">
3333
</div>
3434
</div>
3535
</div>
36-
<!-- The following script fixes an accessibility issue with the sectanchors injected by AsciiDoc not containing any content. -->
37-
<!-- The script adds a span which the anchor CSS applies to, then moves the header text inside the anchor element. -->
38-
<script>
39-
document.addEventListener("DOMContentLoaded", function () {
40-
document.querySelectorAll("a.anchor").forEach((anchorElem) => {
41-
var anchorSpan = document.createElement('span');
42-
anchorSpan.setAttribute("class", "anchor-icon");
43-
anchorElem.appendChild(anchorSpan);
44-
anchorElem.appendChild(anchorElem.nextSibling);
45-
anchorElem.setAttribute("class", anchorElem.getAttribute("class") + " text-decoration-none text-reset")
46-
})
47-
})
48-
</script>
36+
{% include asciidoctor-scripts/icons.html %}
37+
{% include asciidoctor-scripts/sectanchors.html %}

‎_sass/kroxylicious.scss

+88-1
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,12 @@ a {
4242
color: $kroxy-dark-green;
4343
}
4444

45+
// Override default Bootstrap icon sizing and positioning for alerts
46+
.alert .bi {
47+
font-size: xx-large!important;
48+
vertical-align: middle!important;
49+
}
50+
4551
.nav-item > .dropdown-menu {
4652
min-width: 200px;
4753
}
@@ -161,7 +167,7 @@ div.highlighter-rouge {
161167
}
162168
}
163169

164-
// Anchor Links
170+
// [DOCS] Anchor Links
165171

166172
h2>a.anchor>span, h3>a.anchor>span, h4>a.anchor>span, h5>a.anchor>span, h6>a.anchor>span {
167173
font-family: bootstrap-icons!important;
@@ -189,3 +195,84 @@ h2:hover>a.anchor>span, h3:hover>a.anchor>span, h4:hover>a.anchor>span, h5:hover
189195
h2:hover>a.anchor>span:hover, h3:hover>a.anchor>span:hover, h4:hover>a.anchor>span:hover, h5:hover>a.anchor>span:hover, h6:hover>a.anchor>span:hover {
190196
color: rgba($secondary, 1);
191197
}
198+
199+
// [DOCS] Asciidoc formatting fixes
200+
201+
.admonitionblock {
202+
width: 100%;
203+
margin: 10px 0 20px 0;
204+
}
205+
206+
.admonitionblock > table {
207+
width: 100%;
208+
height: 100%;
209+
}
210+
211+
.admonitionblock > table td {
212+
padding-left: 1.125em;
213+
padding-right: 1.25em;
214+
height: 100%;
215+
align-content: center;
216+
}
217+
218+
.admonitionblock > table td.icon {
219+
text-align: center;
220+
width: 5em!important;
221+
}
222+
223+
.admonitionblock > table td.icon .title {
224+
font-weight: bold;
225+
font-family: $font-family-sans-serif;
226+
text-transform: uppercase
227+
}
228+
229+
.admonitionblock i.bi {
230+
margin: auto!important;
231+
padding: 0 5px;
232+
}
233+
234+
.colist > table td {
235+
align-content: start;
236+
-webkit-align-content: flex-start;
237+
}
238+
239+
.conum[data-value] {
240+
display: inline-block;
241+
color: $white !important;
242+
background: $gray-800;
243+
border-radius: 50%;
244+
margin-right: 10px;
245+
text-align: center;
246+
font-size: .75em;
247+
width: 1.67em;
248+
height: 1.67em;
249+
line-height: 1.67em;
250+
font-family: $font-family-sans-serif;
251+
font-style: normal;
252+
font-weight: bold
253+
}
254+
255+
.conum[data-value] * {
256+
color: #fff !important
257+
}
258+
259+
.conum[data-value]+b {
260+
display: none
261+
}
262+
263+
.conum[data-value]::after {
264+
content: attr(data-value)
265+
}
266+
267+
pre .conum[data-value] {
268+
position: relative;
269+
top: -.125em
270+
}
271+
272+
b.conum * {
273+
color: inherit !important
274+
}
275+
276+
.conum:not([data-value]):empty {
277+
display: none
278+
}

0 commit comments

Comments
 (0)