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 @@