Move commits page ("patches.njk") to new typescript template

913bffe4a578e4ab49480bab7bb333445694aec9

Tucker McKnight | Fri Jan 02 2026

Move commits page ("patches.njk") to new typescript template
js_templates/commits.ts:0
Before
0
After
0
import {NavHelper} from './helpers/nav.ts'

export default async (
  eleventyConfig: any,
  data: any,
  nav: ReturnType<typeof NavHelper>
) => {
  const pagesJustForBranch = eleventyConfig.getFilter("pagesJustForBranch")
  const slugify = eleventyConfig.getFilter("slugify")
  const date = eleventyConfig.getFilter("date")

  return `
    <div class="row mt-3 mb-1">
      <div class="col">
        <p>Showing commits from <span class="font-monospace">${data.patchPage.branchName}</span></p>
      </div>
    </div>

    <nav>
      <ul class="pagination">
        ${pagesJustForBranch(data.paginatedPatches, data.patchPage.repoName, data.patchPage.branchName).map((pageObj) => {
          return `
            <li class="page-item">
              <a class="page-link ${pageObj.pageNumber === data.patchPage.pageNumber ? 'active' : ''}" href="${data.reposPath}/${slugify(data.patchPage.repoName)}/branches/${data.patchPage.branchName}/commits/page${pageObj.pageNumber}">${pageObj.pageNumber}</a>
            </li>
          `
        }).join('')}
      </ul>
    </nav>

    <div>
      ${data.patchPage.commits.map((commit) => {
        return `
          <div class="bezel-gray p-2 my-2" style="max-width: 40rem;">
            <a class="fs-5" href="${data.reposPath}/${slugify(data.patchPage.repoName)}/branches/${slugify(data.patchPage.branchName)}/commits/${commit.hash}">
              ${commit.message.split('\n').slice(0, 1)}
            </a>
            <br />
            <span>${date(commit.date)}</span>
            <br />
            <span>${commit.author}</span>
            <span class="font-monospace">${commit.hash}</span>
          </div>
        `
      }).join('')}
    </div>

    <nav>
      <ul class="pagination">
        ${pagesJustForBranch(data.paginatedPatches, data.patchPage.repoName, data.patchPage.branchName).map((pageObj) => {
          return `
            <li class="page-item">
              <a class="page-link ${pageObj.pageNumber === data.patchPage.pageNumber ? 'active' : ''}" href="${data.reposPath}/${slugify(data.patchPage.repoName)}/branches/${data.patchPage.branchName}/commits/page${pageObj.pageNumber}">${pageObj.pageNumber}</a>
            </li>
          `
        }).join('')}
      </ul>
    </nav>
  `
}
main.ts:17
Before
17
After
17
import commitsJsTemplate from './js_templates/commits.ts'
main.ts:425
Before
425
426
427
428
  // PATCHES.NJK
  const patchesTemplate = fsImport.readFileSync(`${import.meta.dirname}/templates/patches.njk`).toString()
    `repos/patches.njk`,
    topLayoutPartial + patchesTemplate + bottomLayoutPartial,
After
425
426
427
428
  // COMMITS.TS
    `repos/patches.11ty.js`,
    htmlPage(reposConfiguration, eleventyConfig, commitsJsTemplate),
templates/patches.njk:1
Before
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<nav>
  <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>
</nav>

<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 />
        <span>{{commit.author}}</span>
        <pre class="patch-hash">{{commit.hash}}</pre>
      </div>
    </li>
  {% endfor %}
</ul>

<nav>
  <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}}/patches/page{{pageObj.pageNumber}}">{{ pageObj.pageNumber }}</a>
    </li>
    {% endfor %}
  </ul>
</nav>
After
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35