Convert branches.ts to a mithril template

d64ea681085176bef0ee3e9eb52e29cf2dcc7f9b

Tucker McKnight <tucker@pangolin.lan> | Sun Jan 25 2026

Convert branches.ts to a mithril template
js_templates/branches.ts:1
Before

0
1
i⁣
⁣
mport {NavHelper} from './helpers/nav.ts'

export default async (
After
0
1
2
3
import m from 'mithril'
import render from 'mithril-node-render'
import {NavHelper} from './helpers/nav.ts'

export default async (
js_templates/branches.ts:7
Before
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
) => {
  const slugify = eleventyConfig.getFilter("slugify")

  return `
    <div class="d-flex flex-wrap">
      ${data.branches.map((branch) => {
        return `
          ${branch.repoName === data.branchInfo.repoName
            ? `
              <div class="card bezel-gray m-2 flex-grow-1" style="flex-basis: 20rem; max-width: 20rem;">
                <div class="card-header">
⁣
⁣
⁣
                  <a class="card-title" href="${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches">${branch.branchName}</a>
⁣
                  ${branch.branchName === data.branchInfo.branchName ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>' : ''}
⁣
                  ${branch.branchName === data.reposConfig.repos[branch.repoName].defaultBranch ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>' : ''}
                </div>
                <div class="card-body">
                  <p>${branch.description || ''}</p>
⁣
⁣
                  <p>${branch.ahead} commits ahead, ${branch.behind} commits behind <span class="font-monospace">${branch.compareTo}</span></p>
                </div>
⁣
                <div class="card-footer">
⁣
⁣
⁣
                  <a class="m-1 btn btn-outline-primary shadow-none" href="${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches">Switch to branch</a>
                </div>
              </div>
            `
            : ''
          }
        `
      }).join('')}
    </div>
  `
}
After
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

36
37
38
39
40
) => {
  const slugify = eleventyConfig.getFilter("slugify")

  return render(
⁣
    m('div', {class: "d-flex flex-wrap"}, data.branches.map((branch) => {
⁣
      return branch.repoName === data.branchInfo.repoName
⁣
        ? m('div', {class: "card bezel-gray m-2 flex-grow-1", style: "flex-basis: 20rem; max-width: 20rem;"}, [
            m('div', {class: "card-header"}, [
              m('a', {
                class: "card-title",
                href: `${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches`
              }, branch.branchName),
              branch.branchName === data.branchInfo.branchName
                ? m('div', {class: "badge rounded-pill bg-secondary mx-1"}, 'current') : null,
              branch.branchName === data.reposConfig.repos[branch.repoName].defaultBranch
                ? m('div', {class: "badge rounded-pill bg-info text-dark mx-1"}, 'default') : null,
            ]),
            m('div', {class: "card-body"}, [
              m('p', branch.description || ''),
              m('p', [
                `${branch.ahead} commits ahead, ${branch.behind} commits behind `,
                m('span', {class: "font-monospace"}, branch.compareTo)
              ])
            ]),
            m('div', {class: "card-footer"},
              m('a', {
                class: "m-1 btn btn-outline-primary shadow-none",
                href: `${data.reposPath}/${slugify(branch.repoName)}/branches/${slugify(branch.branchName)}/branches`
              }, 'Switch to branch')
⁣
⁣
            )
⁣
          ])
        : null
      })
    )
  )
}