Add bezel boxes on files nav, dropdown menu height limit, others

87bcc279bab5dd59b2f2e40f931f64b165c83f3c

Tucker McKnight | Sun Dec 21 2025

Add bezel boxes on files nav, dropdown menu height limit, others

Limit the commit message length on the readme page

Make the commit sha a link to that commit

Make the nav get (optionally) passed to the page from htmlPage, so that
the page itself can use the NavHelper class if it needs to (like when
linking to a commit).
frontend/main.js:94
Before 
94
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch)
After 
94
  dropdownBranchesResults.innerHTML = branchesListItems(branches, window.defaultBranch, window.currentBranch)
js_templates/common/htmlPage.ts:2
Before 
2
3
4
export const branchesListItems = (branches: Array<{name: string, href: string, date: string}>, defaultBranch: string): string => {
    const badge = defaultBranch === branch.name ? '<div class="badge rounded-pill bg-primary ms-2">default</div>' : ''
    return `<a href='${branch.href}' class='dropdown-item my-1'><span class="branch-dropdown-branch-name">${branch.name}</span>${badge}<span class="text-body d-block ms-2">updated ${branch.date}</span></a>`
After 
2
3
4
export const branchesListItems = (branches: Array<{name: string, href: string, date: string}>, defaultBranch: string, currentBranch: string): string => {
    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-body 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>`
js_templates/common/htmlPage.ts:41
Before 
41
After 
41
            window.currentBranch = "${branch.name}";
js_templates/common/htmlPage.ts:90
Before 
90
                            ${branchesListItems(branchesWithHrefs, repo.defaultBranch)}
After 
90
                            ${branchesListItems(branchesWithHrefs, repo.defaultBranch, branch.name)}
js_templates/common/htmlPage.ts:104
Before 
104
                      <a class="nav-link ${data.navTab === 'home' ? 'active' : ''}" aria-current="page" href="${nav.repoCurrentBranchHome()}">Home</a>
After 
104
                      <a class="nav-link ${data.navTab === 'home' ? 'active' : ''}" aria-current="page" href="${nav.repoCurrentBranchHome()}">ReadMe</a>
js_templates/common/htmlPage.ts:125
Before 
125
                ${await pageContent(eleventyConfig, data)}
After 
125
                ${await pageContent(eleventyConfig, data, nav)}
js_templates/file.ts:1
Before 
1
  const getFileName = eleventyConfig.getFilter("getFileName")
After 
1
js_templates/file.ts:12
Before 
12
13
14
15
16
17
18
19
20
21
22
23
    <h3>./${data.fileInfo.file}</h3>
    <p>Files snapshot from <span class="font-monospace">${data.fileInfo.branchName}</span></p>
    `<ul class="list-group">
    ${topLevelFilesOnly(getDirectoryContents(data.fileInfo.repoName, data.fileInfo.branchName, data.fileInfo.file), data.fileInfo.file + '/').map((dir) => {
      return `<li class="list-group-item">
        ${dir.isDirectory ?
        `<i class=&quot;bi bi-folder-fill&quot;>;</i>`
        : `&lt;i class=&quot;bi bi-file-earmark"></i>`}
        <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 
12
13
14
15
16
17
18
19
20
21
22
23
    <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('')
          }
        </h3>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p>Files snapshot from <span class="font-monospace">${data.fileInfo.branchName}</span></p>
      </div>
    </div>
    `<div class="row">
      <div class="col">
        <ul class="list-group">
          ${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&gt;&amp;#x1F4C1;</span>` : &#39;&#39;}
              <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>
      </div>
    </div>`
js_templates/files.ts:8
Before 
8
9
    <h3>./</h3>
    <p>Files snapshot from <span class="font-monospace">${data.branchInfo.branchName}</span></p>
After 
8
9
    <div class="row my-3">
      <div class="col">
        <h3>
          <span>&#x1F3E0; ./</span>
        </h3>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <p>Files snapshot from <span class="font-monospace">${data.branchInfo.branchName}</span></p>
      </div>
    </div>
js_templates/helpers/nav.ts:9
Before 
9
After 
9
  const repoBranchCommitsBase = `${currentBranchPath}/commits/`
js_templates/helpers/nav.ts:33
Before 
33
    repoCurrentBranchCommits: () => `${currentBranchPath}/commits/page1`,
After 
33
    repoBranchCommitsBase: () => repoBranchCommitsBase,
    repoCurrentBranchCommits: () => `${repoBranchCommitsBase}page1`,
js_templates/repo.ts:1
Before 
1
export default async (eleventyConfig: any, data: any) => {
After 
1
import { NavHelper } from './helpers/nav.ts'
export default async (eleventyConfig: any, data: any, nav: ReturnType<typeof NavHelper>) => {
  const latestCommit = repo.commits.get(branch.head)
js_templates/repo.ts:58
Before 
58
59
              <p class="font-monospace text-white">
                Latest commit: ${repo.commits.get(branch.head).hash.substr(0, 6)} ${repo.commits.get(branch.head).date.toDateString()} - ${repo.commits.get(branch.head).message}
After 
58
59
              <p class="font-monospace text-white text-truncate">
                Latest commit: ${latestCommit.date.toDateString()} <a class="fw-bold link-info" href="${nav.repoBranchCommitsBase()}${latestCommit.hash}">${latestCommit.hash.substr(0, 6)}</a> ${latestCommit.message.split('\n')[0]}
scss/design-board.scss:156
Before 
156
After 
156
  max-height: 80vh;
  overflow-y: scroll;