lytedev/site.lyte.dev
1
0
Fork 0
Code Issues Pull requests 1 Releases Wiki Activity

Change to catppuccin theme, fix code block alignment, add copy code buttons

Browse source
This commit is contained in:
Daniel Flanagan 2023-05-11 13:54:04 -05:00
parent 04d855724b
commit 418766dca5
Signed by: lytedev
GPG key ID: 5B2020A0F9921EF4
6 changed files with 197 additions and 93 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
layouts/_default/baseof.html
View file

@ -33,10 +33,10 @@
{{ end }} {{ end }}
</section> </section>
<section style="position:absolute;height:100%;right:0"> <section style="position:absolute;height:100%;right:0">
<button class="no-bg theme-toggler js-only centerize" aria-label="toggle dark theme"> <button class="no-bg theme-toggler js-only centerize" aria-label="toggle theme">
{{ partial "theme-toggle.html" . }} {{ partial "theme-toggle.html" . }}
</button> </button>
<button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle text alignment"> <button class="no-bg align-toggler js-only hidden-on-mobile centerize" aria-label="toggle alignment">
{{ partial "align-toggle.html" . }} {{ partial "align-toggle.html" . }}
</button> </button>
</section> </section>
@ -47,16 +47,30 @@
<ul class="horizontal-blocks"> <ul class="horizontal-blocks">
<li> <li>
<a href="https://discord.gg/jUCXCYp">Discord</a> <a href="https://discord.gg/jUCXCYp">
<svg fill="currentColor" width="24" height="24" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512"><path d="M524.531,69.836a1.5,1.5,0,0,0-.764-.7A485.065,485.065,0,0,0,404.081,32.03a1.816,1.816,0,0,0-1.923.91,337.461,337.461,0,0,0-14.9,30.6,447.848,447.848,0,0,0-134.426,0,309.541,309.541,0,0,0-15.135-30.6,1.89,1.89,0,0,0-1.924-.91A483.689,483.689,0,0,0,116.085,69.137a1.712,1.712,0,0,0-.788.676C39.068,183.651,18.186,294.69,28.43,404.354a2.016,2.016,0,0,0,.765,1.375A487.666,487.666,0,0,0,176.02,479.918a1.9,1.9,0,0,0,2.063-.676A348.2,348.2,0,0,0,208.12,430.4a1.86,1.86,0,0,0-1.019-2.588,321.173,321.173,0,0,1-45.868-21.853,1.885,1.885,0,0,1-.185-3.126c3.082-2.309,6.166-4.711,9.109-7.137a1.819,1.819,0,0,1,1.9-.256c96.229,43.917,200.41,43.917,295.5,0a1.812,1.812,0,0,1,1.924.233c2.944,2.426,6.027,4.851,9.132,7.16a1.884,1.884,0,0,1-.162,3.126,301.407,301.407,0,0,1-45.89,21.83,1.875,1.875,0,0,0-1,2.611,391.055,391.055,0,0,0,30.014,48.815,1.864,1.864,0,0,0,2.063.7A486.048,486.048,0,0,0,610.7,405.729a1.882,1.882,0,0,0,.765-1.352C623.729,277.594,590.933,167.465,524.531,69.836ZM222.491,337.58c-28.972,0-52.844-26.587-52.844-59.239S193.056,219.1,222.491,219.1c29.665,0,53.306,26.82,52.843,59.239C275.334,310.993,251.924,337.58,222.491,337.58Zm195.38,0c-28.971,0-52.843-26.587-52.843-59.239S388.437,219.1,417.871,219.1c29.667,0,53.307,26.82,52.844,59.239C470.715,310.993,447.538,337.58,417.871,337.58Z"/></svg>
Discord
</a>
</li> </li>
<li> <li>
<a href="mailto:daniel@lyte.dev">Email</a> <a href="mailto:daniel@lyte.dev">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.75 6.75v10.5a2.25 2.25 0 01-2.25 2.25h-15a2.25 2.25 0 01-2.25-2.25V6.75m19.5 0A2.25 2.25 0 0019.5 4.5h-15a2.25 2.25 0 00-2.25 2.25m19.5 0v.243a2.25 2.25 0 01-1.07 1.916l-7.5 4.615a2.25 2.25 0 01-2.36 0L3.32 8.91a2.25 2.25 0 01-1.07-1.916V6.75" />
</svg>
Email
</a>
</li> </li>
<li> <li>
<a href="https://git.lyte.dev/lytedev">git.lyte.dev</a> <a href="https://git.lyte.dev/lytedev">
<svg height="24" width="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.4.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2023 Fonticons, Inc. --><path d="M439.55 236.05L244 40.45a28.87 28.87 0 0 0-40.81 0l-40.66 40.63 51.52 51.52c27.06-9.14 52.68 16.77 43.39 43.68l49.66 49.66c34.23-11.8 61.18 31 35.47 56.69-26.49 26.49-70.21-2.87-56-37.34L240.22 199v121.85c25.3 12.54 22.26 41.85 9.08 55a34.34 34.34 0 0 1-48.55 0c-17.57-17.6-11.07-46.91 11.25-56v-123c-20.8-8.51-24.6-30.74-18.64-45L142.57 101 8.45 235.14a28.86 28.86 0 0 0 0 40.81l195.61 195.6a28.86 28.86 0 0 0 40.8 0l194.69-194.69a28.86 28.86 0 0 0 0-40.81z"/></svg>
git.lyte.dev
</a>
</li> </li>
<li> <li>
<a href="https://github.com/lytedev">GitHub</a> <a href="https://github.com/lytedev">
<svg height="24" width="24" fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/></svg>
GitHub
</a>
</li> </li>
</ul> </ul>
@ -64,10 +78,20 @@
<ul class="horizontal-blocks"> <ul class="horizontal-blocks">
<li> <li>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.98 8.223A10.477 10.477 0 001.934 12C3.226 16.338 7.244 19.5 12 19.5c.993 0 1.953-.138 2.863-.395M6.228 6.228A10.45 10.45 0 0112 4.5c4.756 0 8.773 3.162 10.065 7.498a10.523 10.523 0 01-4.293 5.774M6.228 6.228L3 3m3.228 3.228l3.65 3.65m7.894 7.894L21 21m-3.228-3.228l-3.65-3.65m0 0a3 3 0 10-4.243-4.243m4.242 4.242L9.88 9.88" />
</svg>
Privacy Policy
</a>
</li> </li>
<li> <li>
<a href="https://git.lyte.dev/lytedev/site.lyte.dev">Site Code</a> <a href="https://git.lyte.dev/lytedev/site.lyte.dev">
<svg xmlns="http://www.w3.org/2000/svg" height="24" width="24" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M17.25 6.75L22.5 12l-5.25 5.25m-10.5 0L1.5 12l5.25-5.25m7.5-3l-4.5 16.5" />
</svg>
Site Code
</a>
</li> </li>
</ul> </ul>
</footer> </footer>

8
layouts/partials/align-toggle.html
View file

@ -1,2 +1,6 @@
<svg class="hide-in-align-left" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><rect fill="none" height="24" width="24"/><path style="fill:var(--fg)" d="M4,22H2V2h2V22z M22,7H6v3h16V7z M16,14H6v3h10V14z"/></svg> <svg class="hide-in-align-left" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg class="hide-in-align-center" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path style="fill:var(--fg)" d="M7 15v2h10v-2H7zm-4 6h18v-2H3v2zm0-8h18v-2H3v2zm4-6v2h10V7H7zM3 3v2h18V3H3z"/></svg> <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25H12" />
</svg>
<svg class="hide-in-align-center" width="24" height="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 543 B

After

Width:  |  Height:  |  Size: 556 B

8
layouts/partials/theme-toggle.html
View file

@ -1,2 +1,6 @@
<svg class="hide-in-light-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="fill:var(--fg)" d="M20 8.69V4h-4.69L12 .69 8.69 4H4v4.69L.69 12 4 15.31V20h4.69L12 23.31 15.31 20H20v-4.69L23.31 12 20 8.69zm-2 5.79V18h-3.52L12 20.48 9.52 18H6v-3.52L3.52 12 6 9.52V6h3.52L12 3.52 14.48 6H18v3.52L20.48 12 18 14.48zM12 6c-3.31 0-6 2.69-6 6s2.69 6 6 6 6-2.69 6-6-2.69-6-6-6zm0 10c-2.21 0-4-1.79-4-4s1.79-4 4-4 4 1.79 4 4-1.79 4-4 4z"/></svg> <svg class="hide-in-light-theme" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<svg class="hide-in-dark-theme" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0V0z" fill="none"/><path style="stroke:var(--fg)" d="M10 4c4.41 0 8 3.59 8 8s-3.59 8-8 8c-.34 0-.68-.02-1.01-.07C10.9 17.77 12 14.95 12 12s-1.1-5.77-3.01-7.93C9.32 4.02 9.66 4 10 4m0-2c-1.82 0-3.53.5-5 1.35C7.99 5.08 10 8.3 10 12s-2.01 6.92-5 8.65C6.47 21.5 8.18 22 10 22c5.52 0 10-4.48 10-10S15.52 2 10 2z"/></svg> <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386l-1.591 1.591M21 12h-2.25m-.386 6.364l-1.591-1.591M12 18.75V21m-4.773-4.227l-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" />
</svg>
<svg class="hide-in-dark-theme" height="24" width="24" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.718 9.718 0 0118 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 003 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 009.002-5.998z" />
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 966 B

After

Width:  |  Height:  |  Size: 838 B

20
src/stylus/core.styl
View file

@ -4,10 +4,26 @@ code, pre
ul, ol { padding-left: 2em } ul, ol { padding-left: 2em }
a a
cursor pointer
text-decoration-skip-ink auto text-decoration-skip-ink auto
color var(--link-fg) color var(--link-fg)
&:visited { color: var(--link-visited-fg) } &:visited { color: var(--link-visited-fg) }
a > svg
margin-right: 0.5em
button.copy-code-button
display none
position absolute
top 0.5em
right 0.5em
color var(--link-fg)
text-decoration underline
z-index 10
pre.chroma:hover > button.copy-code-button
display block
img, embed, frame, iframe { max-width: 100vw } img, embed, frame, iframe { max-width: 100vw }
html,body html,body
@ -196,6 +212,7 @@ form
border-left 0 border-left 0
pre.chroma pre.chroma
position relative
padding 0 padding 0
display flex display flex
width auto width auto
@ -207,6 +224,7 @@ form
margin-right auto margin-right auto
> code > code
width: 600px;
padding 0.25em 0.5em padding 0.25em 0.5em
border-left solid var(--syntax-bpx) var(--syntax-ledg) border-left solid var(--syntax-bpx) var(--syntax-ledg)
@ -234,7 +252,7 @@ ul.horizontal-blocks
flex-grow 1 flex-grow 1
display flex display flex
padding 0.5em 2em padding 0.5em 2em
background-color var(--header-bg) background-color var(--button-bg)
text-align center text-align center
justify-content center justify-content center
align-items center align-items center

87
src/stylus/theme.styl
View file

@ -1,34 +1,50 @@
/* catppuccin colors */
latte = {
red: #d20f39,
yellow: #df8e1d,
green: #40a02b,
sapphire: #209fb5,
mauve: #8839ef,
}
mocha = {
red: #f38ba8,
yellow: #f9e2af,
green: #a6e3a1
sapphire: #74c7ec,
mauve: #cba6f7,
}
light-syntax = { light-syntax = {
brd: rgba(255, 255, 255, 0.2), brd: rgba(255, 255, 255, 0.2),
bg: rgba(0, 0, 0, 0.05), bg: #e6e9ef,
ledg: #ccc, ledg: rgba(0, 0, 0, 0.1),
sh: #775, sh: #6c6f85,
name: #480, name: latte['green'],
mag: #d04, mag: latte['red'],
lit: #40f, lit: latte['mauve'],
lits: #660, lits: latte['yellow'],
aq: #04d, aq: latte['sapphire'],
err: #960050, err: latte['red'],
} }
dark-syntax = { dark-syntax = {
brd: rgba(255, 255, 255, 0.2), brd: rgba(255, 255, 255, 0.2),
bg: rgba(255, 255, 255, 0.03), bg: #181825,
ledg: #333, ledg: #313244,
sh: #75715e, sh: #6c7086,
name: #a6e22e, name: mocha['green'],
mag: #f92672, mag: mocha['red'],
lit: #ae81ff, lit: mocha['mauve'],
lits: #e6db74, lits: mocha['yellow'],
aq: #66d9ef, aq: mocha['sapphire'],
err: #960050, err: mocha['red'],
} }
theme-colors = { theme-colors = {
heading-fg: #333,
icon-shadow: #fff, icon-shadow: #fff,
link-visited-fg: #666, link-visited-fg: #5c5f77,
link-fg: #000, link-fg: #209fb5,
} }
:root :root
@ -43,12 +59,13 @@ light-theme =
--syntax-{k}: v --syntax-{k}: v
for k2, v2 in theme-colors for k2, v2 in theme-colors
{unquote("--" + k2)}: v2 {unquote("--" + k2)}: v2
--bg #fff --heading-fg #4c4f69
--header-bg #eee --bg #eff1f5
--header-bg rgba(255, 255, 255, 0.1)
--header-hover-bg #ddd --header-hover-bg #ddd
--fg #111 --fg #4c4f69
--inline-code-bg #ddd --inline-code-bg rgba(0,0,0,0.08)
--input-bg rgba(0, 0, 0, 0.08) --input-bg #dce0e8
--input-hover-bg rgba(0, 0, 0, 0.16) --input-hover-bg rgba(0, 0, 0, 0.16)
--input-focus-bg var(--input-bg) --input-focus-bg var(--input-bg)
--button-bg var(--input-bg) --button-bg var(--input-bg)
@ -60,15 +77,17 @@ dark-theme =
--syntax-{k}: v --syntax-{k}: v
for k2, v2 in theme-colors for k2, v2 in theme-colors
{unquote("--" + k2)}: invert(v2) {unquote("--" + k2)}: invert(v2)
--bg #111 --bg #1e1e2e
--header-bg #191919 --header-bg rgba(255, 255, 255, 0.03)
--header-hover-bg #333 --header-hover-bg #333
--fg #fff --fg #cdd6f4
--link-visited-fg #aaa --heading-fg #cdd6f4
--inline-code-bg #222 --link-visited-fg #a6adc8
--input-bg rgba(255, 255, 255, 0.08) --link-fg #74c7ec
--input-hover-bg rgba(255, 255, 255, 0.16) --inline-code-bg rgba(255,255,255,0.05)
--input-focus-bg var(--input-bg) --input-bg #181825
--input-hover-bg #313244
--input-focus-bg #45475a
--button-bg var(--input-bg) --button-bg var(--input-bg)
--button-hover-bg var(--input-hover-bg) --button-hover-bg var(--input-hover-bg)
--button-focus-bg var(--input-bg) --button-focus-bg var(--input-bg)

127
static/global.js
View file

@ -1,60 +1,95 @@
const body = document.body const body = document.body;
const queryAll = sel => document.querySelectorAll(sel) const queryAll = (sel) => document.querySelectorAll(sel);
const initTheme = () => { const initTheme = () => {
const curTheme = localStorage.getItem('theme') const curTheme = localStorage.getItem("theme");
const oldTheme = curTheme == 'dark' ? 'light' : 'dark' const oldTheme = curTheme == "dark" ? "light" : "dark";
body.classList.add(`${curTheme}-theme`) body.classList.add(`${curTheme}-theme`);
body.classList.remove(`${oldTheme}-theme`) body.classList.remove(`${oldTheme}-theme`);
};
if (localStorage.getItem("theme") === null) {
localStorage.setItem(
"theme",
window.matchMedia("(prefers-color-scheme: dark)").matches
? "dark"
: "light",
);
} }
if (localStorage.getItem('theme') === null) { initTheme();
localStorage.setItem('theme', window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
}
initTheme() const toggleTheme = (ev) => {
localStorage.setItem(
"theme",
localStorage.getItem("theme") == "dark" ? "light" : "dark",
);
initTheme();
if (!!ev.target) ev.preventDefault();
return false;
};
const toggleTheme = ev => { queryAll(".theme-toggler").forEach((a) =>
localStorage.setItem('theme', localStorage.getItem('theme') == 'dark' ? 'light' : 'dark') a.addEventListener("click", toggleTheme)
initTheme() );
if (!!ev.target) ev.preventDefault() queryAll(".js-only").forEach((a) => a.classList.remove("js-only"));
return false queryAll(".js-disabled-only").forEach((a) => a.remove());
}
queryAll('.theme-toggler').forEach(a => a.addEventListener('click', toggleTheme))
queryAll('.js-only').forEach(a => a.classList.remove('js-only'))
queryAll('.js-disabled-only').forEach(a => a.remove())
const initAlign = () => { const initAlign = () => {
const cur = localStorage.getItem('align') const cur = localStorage.getItem("align");
const prev = cur == 'center' ? 'left' : 'center' const prev = cur == "center" ? "left" : "center";
body.classList.add('align-' + cur) body.classList.add("align-" + cur);
body.classList.remove('align-' + prev) body.classList.remove("align-" + prev);
};
if (localStorage.getItem("align") === null) {
localStorage.setItem("align", "center");
} }
if (localStorage.getItem('align') === null) localStorage.setItem('align', 'center') initAlign();
initAlign() const toggleAlign = (ev) => {
localStorage.setItem(
"align",
localStorage.getItem("align") == "center" ? "left" : "center",
);
initAlign();
if (!!ev.target) ev.preventDefault();
return false;
};
const toggleAlign = ev => { queryAll(".align-toggler").forEach((a) =>
localStorage.setItem('align', localStorage.getItem('align') == 'center' ? 'left' : 'center') a.addEventListener("click", toggleAlign)
initAlign() );
if (!!ev.target) ev.preventDefault()
return false window.addEventListener("load", (_ev) => {
const selector = [1, 2, 3, 4, 5, 6].map((n) => `h${n}[id]`).join(",");
queryAll(selector).forEach((el) => {
const anchorLink = document.createElement("a");
anchorLink.classList.add("anchor-link");
anchorLink.textContent = "§";
anchorLink.href = `#${el.id}`;
el.appendChild(anchorLink);
});
});
function initCodeCopyButtons() {
const codeBlocks = document.querySelectorAll("pre.chroma");
codeBlocks.forEach((block) => {
const code = block.querySelectorAll("code")[0];
const button = document.createElement("button");
button.classList.add("copy-code-button");
block.appendChild(button);
button.textContent = "Copy";
button.addEventListener("click", (_ev) => {
navigator.clipboard.writeText(code.textContent);
const lastText = button.textContent;
button.textContent = "Copied to clipbooard!";
setTimeout(() => button.textContent = lastText, 3000);
});
});
} }
queryAll('.align-toggler').forEach(a => a.addEventListener('click', toggleAlign)) window.addEventListener("load", (_ev) => {
initCodeCopyButtons();
window.addEventListener('load', _ev => { });
console.log('loaded')
const selector = [1, 2, 3, 4, 5, 6].map(n => `h${n}[id]`).join(',')
console.log(selector)
queryAll(selector).forEach(el => {
console.log(el)
const anchorLink = document.createElement('a')
anchorLink.classList.add('anchor-link')
anchorLink.textContent = '§'
anchorLink.href = `#${el.id}`
el.appendChild(anchorLink)
})
})