From 7a2cca91814301b42e4b01b6046b53ccf31a5341 Mon Sep 17 00:00:00 2001 From: Xin Date: Sun, 13 Aug 2023 22:18:20 +0100 Subject: [PATCH] feat: add multi-language select and fix minor issues fix: navbar icon should use home relative link fix: copy code for raw element fix: missing breadcrumb hover style fix: tabs typo preventing loading the script --- assets/js/code-copy.js | 14 ++++++--- assets/js/lang.js | 28 +++++++++++++++++ data/icons.yaml | 3 +- .../_default/_markup/render-codeblock.html | 8 ++--- layouts/partials/breadcrumb.html | 2 +- layouts/partials/footer.html | 13 ++++---- layouts/partials/language-switch.html | 30 +++++++++++++++++++ layouts/partials/navbar.html | 2 +- layouts/partials/scripts.html | 5 ++-- layouts/partials/sidebar.html | 15 ++++------ layouts/partials/theme-toggle.html | 7 +++-- layouts/partials/utils/lang-link.html | 25 ++++++++++++++++ 12 files changed, 120 insertions(+), 32 deletions(-) create mode 100644 assets/js/lang.js create mode 100644 layouts/partials/language-switch.html create mode 100644 layouts/partials/utils/lang-link.html diff --git a/assets/js/code-copy.js b/assets/js/code-copy.js index 5a0d756..5ea063d 100644 --- a/assets/js/code-copy.js +++ b/assets/js/code-copy.js @@ -1,10 +1,16 @@ document.querySelectorAll('.code-copy-btn').forEach(function (button) { button.addEventListener('click', function (e) { - const targetId = e.target.getAttribute('data-clipboard-target'); + e.preventDefault(); + const targetId = button.getAttribute('data-clipboard-target'); const target = document.querySelector(targetId); - const codeElements = target.querySelectorAll('code'); - // Select the last code element in case line numbers are present - const codeElement = codeElements[codeElements.length - 1]; + let codeElement; + if (target.tagName === 'CODE') { + codeElement = target; + } else { + // Select the last code element in case line numbers are present + const codeElements = target.querySelectorAll('code'); + codeElement = codeElements[codeElements.length - 1]; + } if (codeElement) { // Replace double newlines with single newlines in the innerText // as each line inside has trailing newline '\n' diff --git a/assets/js/lang.js b/assets/js/lang.js new file mode 100644 index 0000000..b5bd45f --- /dev/null +++ b/assets/js/lang.js @@ -0,0 +1,28 @@ +(function () { + const languageSwitchers = document.querySelectorAll('.language-switcher'); + languageSwitchers.forEach((switcher) => { + switcher.addEventListener('click', (e) => { + e.preventDefault(); + switcher.dataset.state = switcher.dataset.state === 'open' ? 'closed' : 'open'; + const optionsElement = switcher.nextElementSibling; + optionsElement.classList.toggle('hidden'); + + // Calculate position of language options element + const switcherRect = switcher.getBoundingClientRect(); + const translateY = switcherRect.top - window.innerHeight - 15; + optionsElement.style.transform = `translate3d(${switcherRect.left}px, ${translateY}px, 0)`; + optionsElement.style.minWidth = `${Math.max(switcherRect.width, 50)}px`; + }); + }); + + // Dismiss language switcher when clicking outside + document.addEventListener('click', (e) => { + if (e.target.closest('.language-switcher') === null) { + languageSwitchers.forEach((switcher) => { + switcher.dataset.state = 'closed'; + const optionsElement = switcher.nextElementSibling; + optionsElement.classList.add('hidden'); + }); + } + }); +})(); diff --git a/data/icons.yaml b/data/icons.yaml index 96c667a..fc5df85 100644 --- a/data/icons.yaml +++ b/data/icons.yaml @@ -37,5 +37,6 @@ one: copy: -check: +check: menu: +globe: diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html index 49d10f9..c3b7841 100644 --- a/layouts/_default/_markup/render-codeblock.html +++ b/layouts/_default/_markup/render-codeblock.html @@ -1,6 +1,6 @@ -{{ $class := .Attributes.class | default "" }} -{{ $filename := .Attributes.filename | default "" }} -{{ $lang := .Attributes.lang | default .Type }} +{{- $class := .Attributes.class | default "" -}} +{{- $filename := .Attributes.filename | default "" -}} +{{- $lang := .Attributes.lang | default .Type -}}
@@ -12,7 +12,7 @@ {{- highlight .Inner $lang .Options -}}
{{- else -}} - 
{{- .Inner -}}
+ 
{{ .Inner }}
{{- end -}}
+ +
+{{- end -}} diff --git a/layouts/partials/navbar.html b/layouts/partials/navbar.html index ccc9acc..c27c40d 100644 --- a/layouts/partials/navbar.html +++ b/layouts/partials/navbar.html @@ -2,7 +2,7 @@