Make themes work, some color tweaks, make directory nav links work on file page

ec91a0a6fb00a4ac5162093c3c8b372fc2475123

Tucker McKnight <tucker@pangolin.lan> | Sun Dec 21 2025

Make themes work, some color tweaks, make directory nav links work on file page
frontend/main.js:1
Before
0
1
2
import {branchesListItems} from '../dist/js_templates/common/htmlPage.js'

const setCheckbox = window.setCheckbox
const currentTheme = window.currentTheme
After
0
1
2
import branchesListItems from '../dist/js_templates/common/branchesListItems.js'

const setCheckbox = window.setCheckbox
const currentTheme = window.currentTheme
frontend/top.js:16
Before
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
    window['currentTheme'] = mode
  };

  // window['currentTheme'] = localStorage.getItem("theme") || "auto"
  window['currentTheme'] = "light"

  window['setMode'](window['currentTheme'])

  window['setCheckbox'] = (mode, element) => {
    if (element === null) { return }
    if (mode === 'light') {
      element.innerHTML = `<i class="bi bi-brightness-high"></i>`
    }
    if (mode === 'dark') {
      element.innerHTML = `<i class="bi bi-moon"></i>`
    }
    if (mode === 'auto') {
      element.innerHTML = `<i class="bi bi-yin-yang"></i>`
    }
    const link = document.getElementById("prism-theme")
    const preferred = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
After
15
16
17
18
19

20
21
22
23
24
25
26
27
28
29
30
31
32
33
    window['currentTheme'] = mode
  };

  window['currentTheme'] = localStorage.getItem("theme") || "auto"

⁣
  window['setMode'](window['currentTheme'])

  window['setCheckbox'] = (mode, element) => {
    if (element === null) { return }
    if (mode === 'light') {
      element.innerHTML = `<span>&#x1F4A1;</span>`
    }
    if (mode === 'dark') {
      element.innerHTML = `<span>&#x1F319;</span>`
    }
    if (mode === 'auto') {
      element.innerHTML = `<span>&#x1F5A5;&#xFE0F;</span>`
    }
    const link = document.getElementById("prism-theme")
    const preferred = matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light'
js_templates/common/branchesListItems.ts:0
Before







⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
After
-1
0
1
2
3
4
5
6
export default (branches: Array<{name: string, href: string, date: string}>, defaultBranch: string, currentBranch: string): string => {
  return branches.map((branch) => {
    const currentBadge = currentBranch === branch.name ? '<div class="badge rounded-pill bg-primary mx-1">current</div>' : ''
    const defaultBadge = defaultBranch === branch.name ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>' : ''

    return `<a href='${branch.href}' class='dropdown-item my-1'><span class="branch-dropdown-branch-name me-1">${branch.name}</span>${currentBadge}${defaultBadge}<span class="text-body d-block ms-2">updated ${branch.date}</span></a>`
  }).join('')
}
js_templates/common/htmlPage.ts:1
Before
After
js_templates/common/htmlPage.ts:26
Before
25
26
27
28
29
30
    const branchesWithHrefs = repo.branches.map((branch) => {
      return {
        name: branch.name,
        href: nav.repoBranchHome(branch.name),
        date: repo.commits.get(branch.head).date.toDateString(),
      }
    })
After
25
26
27
28
29
30
    const branchesWithHrefs = repo.branches.map((branch) => {
      return {
        name: branch.name,
        href: nav.repoBranchHome(branch.name) + '/' + data.nav.path,
        date: repo.commits.get(branch.head).date.toDateString(),
      }
    })
js_templates/common/htmlPage.ts:39
Before
38
39
40
41
42
43
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>${repo.name}</title>
          <link rel="stylesheet" href="/css/design-board.css">
          <link href="https://unpkg.com/prismjs@1.20.0/themes/prism.css" rel="stylesheet" />
          <script>
            window.branchesWithHrefs = ${JSON.stringify(branchesWithHrefs)};
            window.defaultBranch = "${repo.defaultBranch}";
After
38
39
40

41
42
          <meta name="viewport" content="width=device-width, initial-scale=1">
          <title>${repo.name}</title>
          <link rel="stylesheet" href="/css/design-board.css">
⁣
          <script>
            window.branchesWithHrefs = ${JSON.stringify(branchesWithHrefs)};
            window.defaultBranch = "${repo.defaultBranch}";
js_templates/common/htmlPage.ts:47
Before
46
47
48

49
50
            window.cloneUrl = "${repo.cloneUrl}";
          </script>
          <script src="${nav.rootPath()}frontend/top.js"></script>
⁣
        </head>
        <body>
          <div class="container">
After
46
47
48
49
50
51
            window.cloneUrl = "${repo.cloneUrl}";
          </script>
          <script src="${nav.rootPath()}frontend/top.js"></script>
          <link rel="stylesheet" id="prism-theme" type="text/css" href="${data.reposPath}/vendor/prism.css" />
        </head>
        <body>
          <div class="container">
js_templates/common/htmlPage.ts:63
Before
62
63
64
65
66
67
                    <li class="nav-item">
                      <span class="nav-link d-inline-block">Branch:</span>
                      <div class="branch-selector dropdown-center d-inline-block">
                        <button class="branches nav-link d-inline-block btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                          ${branch.name}
                        </button>
                        <div class="dropdown-menu">
After
62
63
64
65
66
67
                    <li class="nav-item">
                      <span class="nav-link d-inline-block">Branch:</span>
                      <div class="branch-selector dropdown-center d-inline-block">
                        <button class="branches nav-link d-inline-block btn btn-bg dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                          ${branch.name}
                        </button>
                        <div class="dropdown-menu">
js_templates/common/htmlPage.ts:101
Before
After
js_templates/file.ts:14
Before
13
14
15
16
17
18
19
20
21
22
23
24
    <div class="row my-3">
      <div class="col">
        <h3>
          <span class="bezel-gray px-1"><a href="#">&#x1F3E0; ./</a></span>${
            data.fileInfo.file.split('/').map((dir, index, arr) => {
              if (index === arr.length - 1) {
                return `<span class="px-2">${dir}</span>`
              }
              else {
                return `<span class="bezel-gray px-1"><a href="#">${dir}</a></span>`
              }
            }).join('')
          }
After
13
14
15
16
17
18
19
20
21
22
23
24
    <div class="row my-3">
      <div class="col">
        <h3>
          <span class="bezel-gray px-1"><a href="${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files">&#x1F3E0; ./</a></span>${
            data.fileInfo.file.split('/').map((dir, index, arr) => {
              if (index === arr.length - 1) {
                return `<span class="px-2">${dir}</span>`
              }
              else {
                return `<span class="bezel-gray px-1"><a href="${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files/${arr.slice(0, index + 1).join('/')}">${dir}</a></span>`
              }
            }).join('')
          }
js_templates/file.ts:39
Before
38
39
40
41
42
43
          ${topLevelFilesOnly(getDirectoryContents(data.fileInfo.repoName, data.fileInfo.branchName, data.fileInfo.file), data.fileInfo.file + '/').map((dir) => {
            return `<li class="list-group-item">
              ${dir.isDirectory ? `<span>&#x1F4C1;</span>` : ''}
              <a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/files/${slugify(dir.fullPath)}.html">${getRelativePath(data.fileInfo.file, dir.name)}</a>
            </li>`
          }).join('')}
        </ul>
After
38
39
40
41
42
43
          ${topLevelFilesOnly(getDirectoryContents(data.fileInfo.repoName, data.fileInfo.branchName, data.fileInfo.file), data.fileInfo.file + '/').map((dir) => {
            return `<li class="list-group-item">
              ${dir.isDirectory ? `<span>&#x1F4C1;</span>` : ''}
              <a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/files/${dir.fullPath.split('/').map((pathPart) => slugify(pathPart)).join('/')}">${getRelativePath(data.fileInfo.file, dir.name)}</a>
            </li>`
          }).join('')}
        </ul>
js_templates/files.ts:25
Before
24
25
26
27
28
29
        return `
          <li class="list-group-item">
            ${file.isDirectory ? '<span>&#x1F4C1;</span>' : ''}
            <a href="${data.reposPath}/${slugify(data.branchInfo.repoName)}/branches/${slugify(data.branchInfo.branchName)}/files/${slugify(file.fullPath)}.html">${file.name}</a>
          </li>
        `
    }).join('')}
After
24
25
26
27
28
29
        return `
          <li class="list-group-item">
            ${file.isDirectory ? '<span>&#x1F4C1;</span>' : ''}
            <a href="${data.reposPath}/${slugify(data.branchInfo.repoName)}/branches/${slugify(data.branchInfo.branchName)}/files/${file.fullPath.split('/').map((pathPart) => slugify(pathPart)).join('/')}">${file.name}</a>
          </li>
        `
    }).join('')}
main.ts:310
Before
309
310
311
312
313
314
315
316
317
318
319
320
      permalink: (data) => {
        const repoName = data.fileInfo.repoName
        const branchName = data.fileInfo.branchName
        return `${reposPath}/${eleventyConfig.getFilter("slugify")(repoName)}/branches/${eleventyConfig.getFilter("slugify")(branchName)}/files/${eleventyConfig.getFilter("slugify")(data.fileInfo.file)}.html`
      },
      eleventyComputed: {
        nav: {
          repoName: (data) => data.fileInfo.repoName,
          branchName: (data) => data.fileInfo.branchName,
          path: "files",
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.fileInfo.repoName
After
309
310
311
312
313
314
315
316
317
318
319
320
      permalink: (data) => {
        const repoName = data.fileInfo.repoName
        const branchName = data.fileInfo.branchName
        return `${reposPath}/${eleventyConfig.getFilter("slugify")(repoName)}/branches/${eleventyConfig.getFilter("slugify")(branchName)}/files/${data.fileInfo.file.split('/').map((filePart) => eleventyConfig.getFilter("slugify")(filePart)).join('/')}/`
      },
      eleventyComputed: {
        nav: {
          repoName: (data) => data.fileInfo.repoName,
          branchName: (data) => data.fileInfo.branchName,
          path: 'files',
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.fileInfo.repoName
main.ts:405
Before
404
405
406
407
408
409
        nav: {
          repoName: (data) => data.branch.repoName,
          branchName: (data) => data.branch.branchName,
          path: "",
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.branch.repoName
After
404
405
406
407
408
409
        nav: {
          repoName: (data) => data.branch.repoName,
          branchName: (data) => data.branch.branchName,
          path: (data) => '', // ask about why empty string here shows up as a function
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.branch.repoName
main.ts:444
Before
443
444
445
446
447
448
        nav: {
          repoName: (data) => data.patchPage.repoName,
          branchName: (data) => data.patchPage.branchName,
          path: "patches/page1",
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.patchPage.repoName
After
443
444
445
446
447
448
        nav: {
          repoName: (data) => data.patchPage.repoName,
          branchName: (data) => data.patchPage.branchName,
          path: 'patches/page1',
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.patchPage.repoName
main.ts:481
Before
480
481
482
483
484
485
        nav: {
          repoName: (data) => data.patchInfo.repoName,
          branchName: (data) => data.patchInfo.branchName,
          path: "patches/page1",
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.patchInfo.repoName
After
480
481
482
483
484
485
        nav: {
          repoName: (data) => data.patchInfo.repoName,
          branchName: (data) => data.patchInfo.branchName,
          path: 'patches/page1',
        },
        currentRepo: (data) => reposData.find(repo => {
          return repo.name === data.patchInfo.repoName
scss/custom.scss:1
Before
After
scss/design-board.scss:20
Before
19
20
21

22
23

$body-bg: $gray;
$primary: $blue;
⁣
$info: $teal;
$warning: $magenta;

After
19
20
21
22
23
24

$body-bg: $gray;
$primary: $blue;
$secondary: $purple;
$info: $teal;
$warning: $magenta;

scss/design-board.scss:43
Before
After
scss/design-board.scss:52
Before
51
52
53
54
55
56
57
58
59
60
}

.bezel-gray {
  background-color: $gray;
  border-top: 6px solid color.adjust($gray, $lightness: 15%);
  border-left: 6px solid color.adjust($gray, $lightness: 13%);
  border-bottom: 6px solid color.adjust($gray, $lightness: -10%);
  border-right: 6px solid color.adjust($gray, $lightness: -13%);
}

.bezel-inset {
After
51
52
53

54
55
56
57
58
59
}

.bezel-gray {
⁣
  border-top: 6px solid color.adjust($body-bg, $lightness: 15%);
  border-left: 6px solid color.adjust($body-bg, $lightness: 13%);
  border-bottom: 6px solid color.adjust($body-bg, $lightness: -10%);
  border-right: 6px solid color.adjust($body-bg, $lightness: -13%);
}

.bezel-inset {
scss/design-board.scss:83
Before
82
83
84
85
86
87
88
89
  border-left: none !important;
}

a {
  color: $blue;
}
.btn {
  font-family: sans-serif;
  box-shadow: rgba(0, 0, 0, .6) 4px 6px;
After
82
83
84
85
86
87
88
89
  border-left: none !important;
}

$link-color: $blue;
$link-color-dark: $lightblue;

.btn {
  font-family: sans-serif;
  box-shadow: rgba(0, 0, 0, .6) 4px 6px;