Related to this one, there are previous notes 1, 2, 3.
style container
Container for JS in a Hugo post can be styled as follow.
Hello, World!
To produce above result, previous lines are used.
const width = "480px";
const height = "270px";
const border = "2px #4f81bd solid";
const background = "#4f81bd";
const borderRadius = "20px";
const color = "#ffffff";
const cnt = document.getElementById("cnt1");
cnt.style.width = width;
cnt.style.height = height;
cnt.style.border = border;
cnt.style.background = background;
cnt.style.borderRadius = borderRadius;
cnt.style.color = color;
cnt.innerHTML = "<br> Hello, World!";
Notice that the style must be defined for all elements when necessary. In the given code begin and end shortcodes is not included since there are the same in previous notes 1, 2, 3.
future plan
To make shortcodes for displaying visual element in a Hugo post, as inspired by a discussion 4.
others
- Delete
experimental.js
instatic/js
. - Rename
main.js
inthemes/default/assents/js/
tomain.js.md
.
console.log('This site was generated by Hugo.');
- No JS in https://github.com/dudung/notes .
Languages
HTML
57.3%
CSS
42.7%
It is not necessary, but I just wanto to have a repo without JS? It seems cool. The JS files actually there in the shortcodes or partials.
refs
Sparisoma Viridi, “js for fun 1”, notes, 9 Mar 2025, url https://dudung.github.io/notes/25c22/ [20250320]. ↩︎ ↩︎
Sparisoma Viridi, “js for fun 2”, notes, 13 Mar 2025 (14 Mar 2025), url https://dudung.github.io/notes/25c36/ [20250320]. ↩︎ ↩︎
Sparisoma Viridi, “js for fun 3”, notes, 15 Mar 2025 (16 Mar 2025), url https://dudung.github.io/notes/25c39/ [20250320]. ↩︎ ↩︎
GPT-4o, “Modular Shortcodes for Charts”, ChatGPT, 20 Mar 2025, url https://chatgpt.com/share/67db5510-5908-800a-bc73-a5dba714c825 [20250320]. ↩︎