Change patch.njk to commit.ts, use new template

const copyCommand = (event) => {
  const elem = event.target
  const cloneText = elem.dataset.copyText
  const originalInnerText = elem.innerText
  navigator.clipboard.writeText(cloneText).then(() => {
    elem.innerText = "Copied"

    <label class='form-label'>HTTPS URL</label>
    <div class='input-group d-flex flex-nowrap'>
      <span class='clone overflow-hidden input-group-text'>${window.cloneUrl}</span>
      <button data-copy-text='${window.cloneUrl}' class='btn btn-primary shadow-none text-white' id='copy-button'>Copy</button>
    </div>`

  div.querySelector("#copy-button").addEventListener('click', copyCommand)

  const popoverBtn = document.getElementById("clone-popover-btn")
  const bsPopover = new bootstrap.Popover(popoverBtn, {
    sanitize: false,

    container: 'body',
  })

⁣
⁣
  document.body.addEventListener('click', (event) => {
    const target = event.target
    // If they didn't click the #clone-popover-btn or if we're not inside of

if (document.getElementById('clone-popover-btn')) {
  createClonePopover()
}
document.querySelector("#copy-button").addEventListener('click', copyCommand)

                      <a class="nav-link ${data.navTab === 'files' ? 'active' : ''}" href="${nav.repoCurrentBranchFiles()}">Files</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link ${data.navTab === 'commits' ? 'active' : ''}" href="${nav.repoCurrentBranchCommits()}">Commits</a>
                    </li>
                    <li class="nav-item">
                      <a class="nav-link" href="${nav.repoCurrentBranchBranches()}">Branches</a>

  return `
    <div class="row">
      <div class="col">
        <div class="px-4 pt-3 bezel-header">
          <div class="row">
            <div class="col-12 col-xl-6">
              <h1 class="display-2 text-white"><em>${repo.name}</em></h1>

import repoJsTemplate from './js_templates/repo.ts'
import filesJsTemplate from './js_templates/files.ts'
import fileJsTemplate from './js_templates/file.ts'
import commitJsTemplate from './js_templates/commit.ts'

const ajv = new Ajv()
const exec = util.promisify(childProcess.exec)

    }
  )

⁣
⁣
  // PATCHES.NJK
  const patchesTemplate = fsImport.readFileSync(`${import.meta.dirname}/templates/patches.njk`).toString()
  const paginatedPatchesData = await paginatedPatches(reposData)

    }
  )

  // COMMIT.TS
⁣
  const flatPatchesData = await flatPatches(reposData)
  eleventyConfig.addTemplate(
    `repos/commit.11ty.js`,
    htmlPage(reposConfiguration, eleventyConfig, commitJsTemplate),
    {
      pagination: {
        data: "flatPatches",

          return branch.name === data.patchInfo.branchName
        }),
      },
⁣
      navTab: "commits",
    }
  )

  --bs-list-group-border-color: #BAC1CA;
}

$bezel-colors: ("primary": $primary, "secondary": $secondary, "info": $info, "warning": $warning);

@each $color, $value in $bezel-colors {
  .bezel-#{$color} {
    background-color: $value;
    border-top: 6px solid color.adjust($value, $lightness: 15%);
    border-left: 6px solid color.adjust($value, $lightness: 13%);
    border-bottom: 6px solid color.adjust($value, $lightness: -30%);
    border-right: 6px solid color.adjust($value, $lightness: -40%);
  }
}
@each $color, $value in map-remove($bezel-colors, "info") {
  .bezel-#{$color} {
    color: $body-color-dark;
  }
}

.bezel-header {
  background-color: $lightblue;
  border-top: 6px solid color.adjust($lightblue, $lightness: 15%);
  border-left: 6px solid color.adjust($lightblue, $lightness: 13%);

@include color-mode(dark) {
  $blue: #354BC6;

  .bezel-header {
    background-color: $blue;
    border-top: 6px solid color.adjust($blue, $lightness: 10%);
    border-left: 6px solid color.adjust($blue, $lightness: 7%);

    margin: 10px 10px;
  }
}


/* Commit page */
.hunk {
  box-sizing: border-box;
  margin-bottom: 25px;
}
.unified .diff {
  flex-wrap: wrap;
}
.diff-left, .diff-right {
  flex: 1;
  overflow: hidden;
}
.unified .diff-left, .unified .diff-right {
  flex-basis: 100%;
}
[data-type=before] mark {
  background-color: rgba(252, 78, 78, .15);
}
[data-type=after] mark, .token.inserted {
  background-color: rgba(170, 227, 203, .35);
}
[data-bs-theme=dark] [data-type=after] mark, [data-bs-theme=dark] .token.inserted {
  background-color: rgba(51, 247, 160, .1); /* different green for dark mode; looks better */
}

  <ul class="pagination">
    {% for pageObj in (paginatedPatches | pagesJustForBranch(patchPage.repoName, patchPage.branchName)) %}
    <li class="page-item">
      <a class="page-link {% if pageObj.pageNumber == patchPage.pageNumber %}active{% endif %}" href="{{reposPath}}/{{patchPage.repoName | slugify}}/branches/{{patchPage.branchName}}/commits/page{{pageObj.pageNumber}}">{{ pageObj.pageNumber }}</a>
    </li>
    {% endfor %}
  </ul>

  {% for commit in patchPage.commits %}
    <li class="patch">
      <div>
        <span class="patch-name"><a href="{{reposPath}}/{{patchPage.repoName | slugify}}/branches/{{patchPage.branchName | slugify}}/commits/{{commit.hash}}">{{commit.message}}</a></span>
        <br />
        <span>{{commit.date | date}}</span>
        <br />