Theme Update 14-01-2023

published-date: 14 Jan 2023 22:44 +0700
categories: hugo-theme-update
tags: static-site-generator html

edit 2023-01-15 13:18:21

Nevermind, none of these are used. I decided to go back to server-side rendering with Go-Chroma builtin syntax highlighting https://gohugo.io/content-management/syntax-highlighting/

further read: https://gohugo.io/getting-started/configuration-markup/#highlight

I also add a copy to clipboard button.

JS added as follows:

 1function remEl(parent, elClassName) {
 2  const els = parent.getElementsByClassName(elClassName)
 3  while (els.length > 0) {
 4    els[0].parentNode.removeChild(els[0])
 5  }
 6}
 7
 8function copyCodeblockButton(targetNode) {
 9  element = document.createElement('input')
10  element.type = 'button'
11  element.value = 'Copy'
12  element.classList = 'copy-button'
13  element.onclick = () => {
14    let elCopy = targetNode.cloneNode(true)
15    remEl(elCopy, 'ln');
16    navigator.clipboard.writeText(elCopy.innerText);
17    console.log("Copied to clipboard successfully!");
18  }
19  return element
20}
21
22document.addEventListener('DOMContentLoaded', (event) => {
23
24  document.querySelectorAll('pre code').forEach((el) => {
25    const child = document.createElement('span')
26    var copyCodeblockButtonEl = copyCodeblockButton(el)
27
28    child.style.setProperty('display', 'flex')
29    child.style.setProperty('color', 'var(--tx-c-primary-half)')
30    child.style.setProperty('margin-bottom', '.5em')
31    child.style.setProperty('align-items', 'center')
32    child.innerHTML = el.attributes.getNamedItem('data-lang').value
33    child.appendChild(copyCodeblockButtonEl)
34    el.parentNode.insertBefore(child, el.parentNode.firstChild)
35  });
36
37});

fancy!

Now to the old content:


Now supports codeblock highlighting with highlight.js.

Code samples:

Get-ChildItem -Path "C:/target/path" -Depth 4 -Filter *.pdf | sort Descending > pdf_files.txt

also handles element overflow.

 1Option Explicit
 2
 3Private Function getMonthByIndex$(n As Long)
 4    ' returns month-name string from index n. Supports overflow wrap-around.
 5    n = n Mod 12
 6    getMonthByIndex = Array("JANUARY", "FEBRUARY", "MARCH", "APRIL", "MAY", "JUNE", "JULY", "AUGUST", "SEPTEMBER", "OCTOBER", "NOVEMBER", "DECEMBER")(n)
 7End Function
 8
 9Public Sub test()
10    Debug.Assert getMonthByIndex(69420) = "JANUARY" ' Fuck You, It's January!
11End Sub

I’ve added some js, thinking it would look better with the data-lang visible in the element.

 1document.addEventListener('DOMContentLoaded', (event) => {
 2
 3  document.querySelectorAll('pre code').forEach((el) => {
 4
 5    const child = document.createElement('span')
 6    child.style.setProperty('display', 'flex')
 7    child.style.setProperty('opacity', .5)
 8    child.style.setProperty('margin-bottom', '.5em')
 9    child.innerHTML = el.attributes.getNamedItem('data-lang').value
10    el.parentNode.insertBefore(child, el.parentNode.firstChild)
11
12    hljs.highlightElement(el);
13
14    el.parentElement.style.setProperty('background-color', el.style['background-color'])
15    el.parentElement.classList += 'hljs' // wtf
16
17  });
18
19});

This addition however still needs some fixing. Console logs shows some problem related to unescaped strings. The cause might be the unsafe settings I had to enable since this particular goldmark renderer somehow doesn’t properly render inline HTML from markdown :(.