#!/bin/bash
BASENAME="$1"
EXTENSION="${BASENAME##*.}"

[ "${BASENAME}" = "${EXTENSION}" ] && EXTENSION=txt
[ -z "${EXTENSION}" ] && EXTENSION=txt

# map Makefile and Makefile.* to .mk
[ "${BASENAME%%.*}" = "Makefile" ] && EXTENSION=mk

echo -n '<div id="code-block"><pre style="background-color: #1f2430; color: #cccac2"><code id="contents">'

sed 's/&/\&amp;/g; s/</\&lt;/g; s/>/\&gt;/g; s/"/\&quot;/g; s/'"'"'/\&#39;/g'

cat << EOF
</code></pre></div><script type="module">
import { createHighlighter } from 'https://esm.sh/shiki@3.21.0';
const t = Object.freeze((await fetch("/icons/theme.json")).json());
const highlighter = await createHighlighter({ themes: [], langs: ["$EXTENSION"] });
await highlighter.loadTheme(t);
const o = document.getElementById('code-block');
const i = document.getElementById('contents');
o.innerHTML = (await highlighter.codeToHtml(i.innerText, {
  lang: "$EXTENSION", 
  theme: 'ayu-mirage'
})).replaceAll(
  "font-style:italic",
  "font-family:'Cascadia Code NF Italic', 'Cascadia Code', italic",
);
</script>

EOF