diff --git a/helpers/mode-switch.ts b/helpers/mode-switch.ts
index 6e9084802c412ba9f2dcbc47d0c1c7a5c8421164..82fca8c675b88157ede2521ad0de1229ad1cf713 100644
--- a/helpers/mode-switch.ts
+++ b/helpers/mode-switch.ts
@@ -1,39 +1,39 @@
function set_theme(mode: string) {
- if (mode != "light" && mode != "black" && mode != "auto") {
- mode = "auto"
- console.log(`invalid theme mode: ${mode}`)
- }
- document.body.dataset.theme = mode
- localStorage.setItem("theme", mode)
-// console.log(`change to ${mode} mode`)
+ if (mode != 'light' && mode != 'black' && mode != 'auto') {
+ mode = 'auto';
+ console.log(`invalid theme mode: ${mode}`);
+ }
+ document.body.dataset.theme = mode;
+ localStorage.setItem('theme', mode);
+ // console.log(`change to ${mode} mode`)
}
function get_theme() {
+ const current_theme = localStorage.getItem('theme') || 'auto';
+ const prefers_dark = window.matchMedia(
+ '(prefers-color-scheme: dark)'
+ ).matches;
-const current_theme = localStorage.getItem("theme") || "auto"
-const prefers_dark = window.matchMedia("(prefers-color-scheme: dark)").matches
-
-if (prefers_dark) {
- if (current_theme == "auto") {
- set_theme("light")
- } else if (current_theme == "light") {
- set_theme("black")
+ if (prefers_dark) {
+ if (current_theme == 'auto') {
+ set_theme('light');
+ } else if (current_theme == 'light') {
+ set_theme('black');
} else {
- set_theme("auto")
+ set_theme('auto');
}
} else {
- if (current_theme == "auto") {
- set_theme("black")
- } else if (current_theme == "black") {
- set_theme("light")
+ if (current_theme == 'auto') {
+ set_theme('black');
+ } else if (current_theme == 'black') {
+ set_theme('light');
} else {
- set_theme("auto")
+ set_theme('auto');
}
}
}
-const btn = document.getElementsByClassName("toggle")
- Array.from(btn).forEach((button) => {
- button.addEventListener("click", get_theme)
-})
-
+const btn = document.getElementsByClassName('toggle');
+Array.from(btn).forEach((button) => {
+ button.addEventListener('click', get_theme);
+});
diff --git a/helpers/search.ts b/helpers/search.ts
index 64b2ceddec304ddbe00850df0477fd8bb26cb73a..30dacd1c5a17c80e1bd4ffde9115ecc030b8e42b 100644
--- a/helpers/search.ts
+++ b/helpers/search.ts
@@ -1,122 +1,133 @@
let suggestions: HTMLElement = document.querySelector('div.items');
-let body: HTMLElement = document.querySelector('main') || document.querySelector('section');
+let body: HTMLElement =
+ document.querySelector('main') || document.querySelector('section');
let userinput = document.querySelector('input.search');
-const btn_clear = document.querySelector('form button.clear')
-btn_clear.style.display = "none";
+const btn_clear = document.querySelector('form button.clear');
+btn_clear.style.display = 'none';
function clear_search() {
- userinput.blur();
- userinput.value = '';
- for(let i of [suggestions,btn_clear]){
- i.style.display = "none";
- }
+ userinput.value = '';
+ for (let i of [suggestions, btn_clear]) {
+ i.style.display = 'none';
+ }
+ userinput.blur();
+ if(window.matchMedia('(max-width: 1000px)').matches) {
+ document.querySelector('header nav form').style.display = 'none';
+ document.querySelectorAll('header ul').forEach((p) => {
+ p.style.display = 'inherit';
+ });
+ }
}
-btn_clear.addEventListener("click", clear_search);
+btn_clear.addEventListener('click', clear_search);
// in page results when press enter or click search icon from search box
function close_search() {
- document.getElementById('close-search').onclick= function() {
- location.reload()
- }
+ document.getElementById('close-search').onclick = function () {
+ location.reload();
+ };
}
function mobile_open_search() {
- document.querySelectorAll('header ul').forEach(p => {
- p.remove();
- });
- document.querySelector('header form').style.display = "flex";
- userinput.focus();
+ document.querySelectorAll('header ul').forEach((p) => {
+ p.style.display = 'none';
+ });
+ document.querySelector('header nav form').style.display = 'flex';
+ userinput.focus();
}
-
-document.querySelector('button.search').addEventListener("click", mobile_open_search);
+document
+ .querySelector('button.search')
+ .addEventListener('click', mobile_open_search);
function search() {
- let results_clone = suggestions.cloneNode(true);
+ let results_clone = suggestions.cloneNode(true);
- let main: HTMLElement = document.createElement("main");
- main.classList.add("full-screen");
+ let main: HTMLElement = document.createElement('main');
+ main.classList.add('full-screen');
- const close_button: string = '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor"></path></svg>';
+ const close_button: string =
+ '<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M24 9.4L22.6 8L16 14.6L9.4 8L8 9.4l6.6 6.6L8 22.6L9.4 24l6.6-6.6l6.6 6.6l1.4-1.4l-6.6-6.6L24 9.4z" fill="currentColor"></path></svg>';
- let button = document.createElement("button");
- button.id = "close-search"
+ let button = document.createElement('button');
+ button.id = 'close-search';
- button.innerHTML = close_button;
+ button.innerHTML = close_button;
- let n = new Set([button, results_clone]);
+ let n = new Set([button, results_clone]);
- for (let i of n) {
- main.appendChild(i);
- }
+ for (let i of n) {
+ main.appendChild(i);
+ }
- if (!document.querySelector('main')) {
- if (document.querySelector('div.welcome')) {
- document.querySelector('div.welcome').remove();
- }
- document.querySelector('section').replaceWith(main);
- } else {
- document.querySelector('main').replaceWith(main);
+ if (!document.querySelector('main')) {
+ if (document.querySelector('div.welcome')) {
+ document.querySelector('div.welcome').remove();
}
+ document.querySelector('section').replaceWith(main);
+ } else {
+ document.querySelector('main').replaceWith(main);
+ }
- suggestions.innerHTML = "";
- close_search();
- return false;
+ suggestions.innerHTML = '';
+ close_search();
+ return false;
}
-window.onload = function() {
- document.body.contains(document.go_search) && (document.go_search.onsubmit = function() {
- return search()
+window.onload = function () {
+ document.body.contains(document.go_search) &&
+ (document.go_search.onsubmit = function () {
+ return search();
});
};
function inputFocus(e) {
- if (e.key === '/'
- && document.activeElement.tagName !== "INPUT"
- && document.activeElement.tagName !== "TEXTAREA") {
+ if (
+ e.key === '/' &&
+ document.activeElement.tagName !== 'INPUT' &&
+ document.activeElement.tagName !== 'TEXTAREA'
+ ) {
e.preventDefault();
userinput.focus();
}
- if (e.key == 'Escape' ) {
- clear_search()
+ if (e.key == 'Escape') {
+ clear_search();
}
- btn_clear.style.display = "block";
+ btn_clear.style.display = 'block';
}
function suggestionFocus(e) {
- const focusableSuggestions= suggestions.querySelectorAll('a');
- if (focusableSuggestions.length == 0 || userinput.style.display == "none") {
+ const focusableSuggestions = suggestions.querySelectorAll('a');
+ if (focusableSuggestions.length == 0 || userinput.style.display == 'none') {
return;
}
- const focusable= [...focusableSuggestions];
+ const focusable = [...focusableSuggestions];
const index = focusable.indexOf(document.activeElement);
let nextIndex = 0;
if (e.keyCode === 38) {
e.preventDefault();
- nextIndex= index > 0 ? index-1 : 0;
+ nextIndex = index > 0 ? index - 1 : 0;
focusableSuggestions[nextIndex].focus();
- }
- else if (e.keyCode === 40) {
+ } else if (e.keyCode === 40) {
e.preventDefault();
- nextIndex= index+1 < focusable.length ? index+1 : index;
+ nextIndex = index + 1 < focusable.length ? index + 1 : index;
focusableSuggestions[nextIndex].focus();
}
}
-document.addEventListener("keydown", inputFocus);
-document.addEventListener("keydown", suggestionFocus);
+document.addEventListener('keydown', inputFocus);
+document.addEventListener('keydown', suggestionFocus);
// Get substring by bytes
// If using JavaScript inline substring method, it will return error codes
// Source: https://www.52pojie.cn/thread-1059814-1-1.html
function substringByByte(str, maxLength) {
- let result = "";
+ let result = '';
let flag = false;
let len = 0;
let length = 0;
@@ -125,8 +136,8 @@ function substringByByte(str, maxLength) {
let code = str.codePointAt(i).toString(16);
if (code.length > 4) {
i++;
- if ((i + 1) < str.length) {
- flag = str.codePointAt(i + 1).toString(16) == "200d";
+ if (i + 1 < str.length) {
+ flag = str.codePointAt(i + 1).toString(16) == '200d';
}
}
if (flag) {
@@ -136,7 +147,7 @@ function substringByByte(str, maxLength) {
if (length <= maxLength) {
result += str.substr(length2, i - length2 + 1);
} else {
- break
+ break;
}
}
} else {
@@ -147,7 +158,7 @@ function substringByByte(str, maxLength) {
result += str.substr(length2, i - length2 + 1);
length2 = i + 1;
} else {
- break
+ break;
}
len = 0;
continue;
@@ -155,13 +166,13 @@ function substringByByte(str, maxLength) {
length += getByteByHex(code);
if (length <= maxLength) {
if (code.length <= 4) {
- result += str[i]
+ result += str[i];
} else {
- result += str[i - 1] + str[i]
+ result += str[i - 1] + str[i];
}
length2 = i + 1;
} else {
- break
+ break;
}
}
}
@@ -191,38 +202,40 @@ Source:
- https://github.com/getzola/zola/blob/master/docs/static/search.js
- https://github.com/aaranxu/adidoks/blob/main/static/js/search.js
*/
-(function(){
+(function () {
let index = elasticlunr.Index.load(window.searchIndex);
userinput.addEventListener('input', show_results, true);
suggestions.addEventListener('click', accept_suggestion, true);
- // if (userinput.value != '') {
+ // if (userinput.value != '') {
//}
- function show_results(){
+ function show_results() {
let value = this.value.trim();
let options = {
- bool: "OR",
+ bool: 'OR',
fields: {
- title: {boost: 2},
- body: {boost: 1},
- }
+ title: { boost: 2 },
+ body: { boost: 1 },
+ },
};
let results = index.search(value, options);
- let entry, childs = suggestions.childNodes;
- let i = 0, len = results.length;
+ let entry,
+ childs = suggestions.childNodes;
+ let i = 0,
+ len = results.length;
let items = value.split(/\s+/);
- suggestions.style.display = "block"
+ suggestions.style.display = 'block';
- results.forEach(function(page) {
+ results.forEach(function (page) {
if (page.doc.body !== '') {
entry = document.createElement('div');
entry.innerHTML = '<a href><span></span><span></span></a>';
- a = entry.querySelector('a'),
- t = entry.querySelector('span:first-child'),
- d = entry.querySelector('span:nth-child(2)');
+ (a = entry.querySelector('a')),
+ (t = entry.querySelector('span:first-child')),
+ (d = entry.querySelector('span:nth-child(2)'));
a.href = page.ref;
t.textContent = page.doc.title;
d.innerHTML = makeTeaser(page.doc.body, items);
@@ -231,20 +244,17 @@ Source:
}
});
- while(childs.length > len){
- suggestions.removeChild(childs[i])
+ while (childs.length > len) {
+ suggestions.removeChild(childs[i]);
}
-
}
- function accept_suggestion(){
-
- while(suggestions.lastChild){
-
- suggestions.removeChild(suggestions.lastChild);
- }
+ function accept_suggestion() {
+ while (suggestions.lastChild) {
+ suggestions.removeChild(suggestions.lastChild);
+ }
- return false;
+ return false;
}
// Taken from mdbook
@@ -271,12 +281,11 @@ Source:
let weighted = []; // contains elements of ["word", weight, index_in_document]
// split in sentences, then words
- let sentences = body.toLowerCase().split(". ");
+ let sentences = body.toLowerCase().split('. ');
for (let i in sentences) {
let words = sentences[i].split(/[\s\n]/);
let value = FIRST_WORD_WEIGHT;
for (let j in words) {
-
let word = words[j];
if (word.length > 0) {
@@ -291,10 +300,10 @@ Source:
}
index += word.length;
- index += 1; // ' ' or '.' if last word in sentence
+ index += 1; // ' ' or '.' if last word in sentence
}
- index += 1; // because we split at a two-char boundary '. '
+ index += 1; // because we split at a two-char boundary '. '
}
if (weighted.length === 0) {
@@ -345,13 +354,17 @@ Source:
// add <em/> around search terms
if (word[1] === TERM_WEIGHT) {
- teaser.push("<b>");
+ teaser.push('<b>');
}
startIndex = word[2] + word[0].length;
// Check the string is ascii characters or not
- let re = /^[\x00-\xff]+$/
- if (word[1] !== TERM_WEIGHT && word[0].length >= 12 && !re.test(word[0])) {
+ let re = /^[\x00-\xff]+$/;
+ if (
+ word[1] !== TERM_WEIGHT &&
+ word[0].length >= 12 &&
+ !re.test(word[0])
+ ) {
// If the string's length is too long, it maybe a Chinese/Japance/Korean article
// if using substring method directly, it may occur error codes on emoji chars
let strBefor = body.substring(word[2], startIndex);
@@ -362,13 +375,14 @@ Source:
}
if (word[1] === TERM_WEIGHT) {
- teaser.push("</b>");
+ teaser.push('</b>');
}
}
- teaser.push("…");
- return teaser.join("");
+ teaser.push('…');
+ return teaser.join('');
}
-document.body.contains(document.go_search) && (document.go_search.onsubmit = function() { return search() });
-}());
-
-
+ document.body.contains(document.go_search) &&
+ (document.go_search.onsubmit = function () {
+ return search();
+ });
+})();
diff --git a/helpers/setting-katex.ts b/helpers/setting-katex.ts
index 78b52cbb68a8e8e05d2bb039b26afad8376627f5..e337a5f473ca89ba099a8441d05e02a6bce77a41 100644
--- a/helpers/setting-katex.ts
+++ b/helpers/setting-katex.ts
@@ -1,15 +1,14 @@
-document.addEventListener("DOMContentLoaded", () => {
-// @ts-ignore
- renderMathInElement(document.body,
- {
- // customised options
- // • auto-render specific keys, e.g.:
- delimiters: [
- {left: '$$', right: '$$', display: true },
- {left: '$', right: '$', display: false}
- ],
- // • rendering keys, e.g.:
- output: 'html',
- throwOnError : false
- });
+document.addEventListener('DOMContentLoaded', () => {
+ // @ts-ignore
+ renderMathInElement(document.body, {
+ // customised options
+ // • auto-render specific keys, e.g.:
+ delimiters: [
+ { left: '$$', right: '$$', display: true },
+ { left: '$', right: '$', display: false },
+ ],
+ // • rendering keys, e.g.:
+ output: 'html',
+ throwOnError: false,
+ });
});
diff --git a/helpers/setting-mermaid.ts b/helpers/setting-mermaid.ts
index 92a74d21e7de3ef640adaf5aabb2ffd1588f0c09..f0879df1bd0ea5f667ba6590dff180c22638d954 100644
--- a/helpers/setting-mermaid.ts
+++ b/helpers/setting-mermaid.ts
@@ -1,4 +1,4 @@
-document.addEventListener("DOMContentLoaded", () => {
-// @ts-ignore
- mermaid.initialize({startOnLoad:true});
+document.addEventListener('DOMContentLoaded', () => {
+ // @ts-ignore
+ mermaid.initialize({ startOnLoad: true });
});
diff --git a/sass/_article.scss b/sass/_article.scss
index ece7bdff55bfa10f301b4372cd283c9c82e372aa..33f4f99d2bd405530885d6c3a7fab56721d17909 100644
--- a/sass/_article.scss
+++ b/sass/_article.scss
@@ -193,7 +193,7 @@ article {
}
// navigation on this article
-nav.navigation {
+div.navigation {
display: flex;
flex-direction: row;
justify-content: space-between;
@@ -202,6 +202,7 @@ nav.navigation {
padding-top: 1.5rem;
border-right: none;
a {
+ display: inline-block;
color: var(--foreground);
&:hover {
color: var(--green);
@@ -216,6 +217,9 @@ nav.navigation {
margin-left: 0.25rem;
margin-right: 0.25rem;
}
+ &:nth-child(2){
+ margin-left: 0.75rem;
+ }
}
}
@@ -223,7 +227,7 @@ nav.navigation {
article {
padding-top: 5rem;
}
- nav.navigation {
- min-width: 100%;
+ div.navigation {
+ min-width: 100%;
}
}
diff --git a/sass/section.scss b/sass/section.scss
index c9b38fc5a5aeff04c0dc64b3f162e5f6a8b0677c..53a02bb629319a0990ed9d489ab47aebceaba6d0 100644
--- a/sass/section.scss
+++ b/sass/section.scss
@@ -64,5 +64,7 @@ section {
@media (max-width: 1000px) {
section {
grid-template-columns: 1fr;
+ overflow-x: hidden;
+ padding-top: 2.6rem;
}
}
diff --git a/templates/page.html b/templates/page.html
index 573212c4bd176170a2e25e3406ed271824d34b0f..132a328950e86f2683811ed69f3256236c9c9cc0 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -53,7 +53,7 @@
{% endblock sections %}
{{ page.content | safe }}
{%- if page.heavier or page.lighter %}
- <nav class="navigation">
+ <div class="navigation">
{% if page.lighter %}
<a href="{{ page.lighter.permalink | safe }}">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="18" height="18" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="m14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z"></path></svg>
@@ -66,11 +66,11 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="18" height="18" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10L18 6z"></path></svg>
</a>
{% endif %}
- </nav>
+ </div>
{% endif -%}
{# page sorting by date #}
{%- if page.earlier or page.later %}
- <nav class="navigation">
+ <div class="navigation">
{% if page.later %}
<a href="{{ page.later.permalink | safe }}">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" width="18" height="18" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="m14 26l1.41-1.41L7.83 17H28v-2H7.83l7.58-7.59L14 6L4 16l10 10z"></path></svg>
@@ -83,7 +83,7 @@
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="18" height="18" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path fill="currentColor" d="m18 6l-1.43 1.393L24.15 15H4v2h20.15l-7.58 7.573L18 26l10-10L18 6z"></path></svg>
</a>
{% endif %}
- </nav>
+ </div>
{% endif -%}
</article>
{{ page::toc(page=page) }}