Convert commits.ts to a mithril template

8230d6c31f18d043a671114e11ab7e1c69f2f88c

Tucker McKnight | Sun Jan 25 2026

Convert commits.ts to a mithril template
js_templates/commits.ts:1
Before 
1
After 
1
import m from 'mithril'
import render from 'mithril-node-render'
js_templates/commits.ts:9
Before 
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  return `
    <div class="row mt-3 mb-1">
      <div class="col">
        &lt;p class="d-inline-block"&gt;Showing commits from &lt;span class="font-monospace me-2">${data.patchPage.branchName}&lt;/span&gt;<a class="btn btn-outline-primary badge shadow-none" href="${nav.repoCurrentBranchRssFeed()}&quot;&gt;<img src="${nav.rootPath()}frontend/img/rss-icon.svg" style="width: 11px; margin-right: 5px;" /&gt;RSS&lt;/a></p>
      </div>
    </div>

    &lt;nav&gt;
      &lt;ul class="pagination">
        ${pagesJustForBranch(data.paginatedPatches, data.patchPage.repoName, data.patchPage.branchName).map((pageObj) => {
          return `
            &lt;li class="page-item">
              &lt;a class=&quot;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>

    &lt;div&gt;
      ${data.patchPage.commits.map((commit) => {
        return `
          &lt;div class="bezel-gray p-2 my-2" style="max-width: 40rem;">
            &lt;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)}
            &lt;/a>
            <br /&gt;
            &lt;span&gt;${date(commit.date)}</span>
            &lt;br /&gt;
            &lt;span&gt;${commit.author}</span>
            &lt;p class="commit-hash font-monospace mb-0">${commit.hash}</p>
          </div>
        `
      }).join('')}
    </div>

    <nav>
      &lt;ul class="pagination">
        ${pagesJustForBranch(data.paginatedPatches, data.patchPage.repoName, data.patchPage.branchName).map((pageObj) => {
          return `
            &lt;li class="page-item">
              &lt;a class=&quot;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>
  `
After 
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
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  return render([
    m(&#39;div', {class: "row mt-3 mb-1"},
      m(&#39;div', {class: "col"},
        m(&#39;p', {class: "d-inline-block"}, [
          &#39;Showing commits from &#39;,
          m('span', {class: "font-monospace me-2"}, data.patchPage.branchName),
          m(&#39;a&#39;, {
            class: "btn btn-outline-primary badge shadow-none",
            href: nav.repoCurrentBranchRssFeed()
          }, [
            m(&#39;img&#39;, {
              src: `${nav.rootPath()}frontend/img/rss-icon.svg`,
              style: "width: 11px; margin-right: 5px;"
            }),
            &#39;RSS&#39;,
          ])
        ])
      )
    ),
    m(&#39;nav&#39;, 
      m(&#39;ul', {class: "pagination"},
        pagesJustForBranch(
          data.paginatedPatches,
          data.patchPage.repoName,
          data.patchPage.branchName
        ).map((pageObj) => {
          return m(&#39;li', {class: "page-item"},
            m(&#39;a&#39;, {
              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)
          )
        })
      )
    ),
    m(&#39;div&#39;, data.patchPage.commits.map((commit) => {
      return m(&#39;div', {
        class: "bezel-gray p-2 my-2",
        style: "max-width: 40rem;"
      }, [
        m(&#39;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)),
        m(&#39;br&#39;),
        m(&#39;span&#39;, date(commit.date)),
        m(&#39;br&#39;),
        m(&#39;span&#39;, commit.author),
        m(&#39;p', {class: "commit-hash font-monospace mb-0"}, commit.hash),
      ])
    })),
    m('nav',
      m(&#39;ul', {class: "pagination"},
        pagesJustForBranch(
          data.paginatedPatches,
          data.patchPage.repoName,
          data.patchPage.branchName
        ).map((pageObj) => {
          return m(&#39;li', {class: "page-item"},
            m(&#39;a&#39;, {
              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)
          )
        })
      )
    )
  ])