https://blakewatson.com/assets/js/app.js

1document.addEventListener('DOMContentLoaded', () => {
2  initThemeToggle();
3  initCodeBlocks();
4  fitVids();
5});
6
7function initThemeToggle() {
8  const toggle = document.querySelector('.theme-toggle input');
9  const theme = localStorage.getItem('theme');
10
11  toggle.checked = theme === 'dark';
12
13  toggle.addEventListener('input', (e) => {
14    const theme = e.target.checked ? 'dark' : 'light';
15
16    document.documentElement.classList.add('theme-transition');
17
18    setTimeout(() => {
19      document.documentElement.classList.remove('theme-transition');
20    }, 200);
21
22    document.documentElement.setAttribute('data-theme', theme);
23    window.dispatchEvent(new CustomEvent('theme-change', { detail: theme }));
24
25    localStorage.setItem('theme', theme);
26  });
27}
28
29function initCodeBlocks() {
30  const codeBlocks = document.querySelectorAll('pre.torchlight');
31
32  codeBlocks.forEach((block) => {
33    // highlight toggle button
34    const removeButton = document.createElement('button');
35    removeButton.classList.add('torchlight-remove-button');
36    removeButton.textContent = 'Toggle highlighting';
37
38    removeButton.addEventListener('click', () => {
39      block.classList.toggle('remove-highlighting');
40    });
41
42    // code header bar
43    const codeClass = block
44      .querySelector('code')
45      .getAttribute('class')
46      ?.split(' ')
47      .find((c) => c.startsWith('language-'));
48    const label = codeClass
49      ? codeClass.replace('language-', '').toUpperCase()
50      : 'Code';
51
52    const codeHeader = document.createElement('div');
53    codeHeader.classList.add('code-header', 'small-title');
54    codeHeader.textContent = label;
55    codeHeader.append(removeButton);
56
57    block.parentNode.insertBefore(codeHeader, block);
58  });
59}
60
61function fitVids() {
62  const videoSources = ['iframe[src*="youtube"]', 'iframe[src*="vimeo"]'];
63
64  document.querySelectorAll(videoSources.join(',')).forEach((video) => {
65    video.style.width = '100%';
66    video.style.height = 'auto';
67    video.style.aspectRatio = `${video.getAttribute(
68      'width',
69    )} / ${video.getAttribute('height')}`;
70  });
71}