Make repo.ts use mithril instead of just being a big string

18e543b4392174ce98d9ec7360386f15cf8aff2b

Tucker McKnight | Thu Jan 15 2026

Make repo.ts use mithril instead of just being a big string
js_templates/repo.ts:1
Before 
1
After 
1
import m from 'mithril'
import render from 'mithril-node-render'
js_templates/repo.ts:41
Before 
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
  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">
              &lt;h1 class="display-3 text-white"&gt;<em&gt;${repo.name}</em></h1>
              ${repo.description ? '&lt;p class="text-white fs-4">' + repo.description + '&lt;/p>&#39; : &#39;'}
            </div>
            <div class=&quot;col-12 col-xl-6 d-flex flex-column justify-content-around">
              &lt;div class="row flex-grow-1 align-items-stretch language-percent-row">
                &lt;div class="col-12 d-flex align-items-stretch">
                  &lt;div class="d-flex flex-grow-1 flex-nowrap">
                    ${topLanguagePercentages.map((percentTuple) => `&lt;div class='language-col flex-grow-1 overflow-hidden'&gt;&lt;div class="language-name text-light font-monospace">${percentTuple[0]}&lt;/div&gt;<div class="language-percent" style="flex-grow: ${percentTuple[1] / largestPercent}";></div></div>`).join('')}
                  <div class='language-col flex-grow-1 overflow-hidden'&gt;&lt;div class="language-name text-light font-monospace"&gt;other&lt;/div&gt;&lt;div class="language-percent" style="flex-grow: ${otherLanguagePercent / largestPercent}";></div></div>
                  </div>
                </div>
              </div>
              &lt;div class="row align-items-center">
                &lt;div class="col-12">
                  &lt;div class="header-button-container">
                    &lt;button class="btn btn-info btn-lg dropdown-toggle clone-popover-btn"&gt;Clone&lt;/button>
                    ${nav.homepageButtons.map((buttonConfig) => {
                      return `&lt;a class="btn btn-outline-info btn-lg shadow-none" href="${buttonConfig.url}" ${buttonConfig.newTab ? &#39;target=&quot;_blank"' : &#39;&#39;}>${buttonConfig.text}${buttonConfig.newTab ? ' <span>&#x29C9;</span>' : ''}</a>`
                    }).join('')}
                  </div>
                </div>
              </div>
            </div>
          </div>
          &lt;noscript&gt;
            &lt;div class="row mt-2">
              &lt;div class="col">
                &lt;p class="font-monospace text-white">
                  Clone URL: ${repo.cloneUrl}
                </p>
              </div>
            </div>
          </noscript>
          &lt;div class="row mt-2">
            &lt;div class="col">
              &lt;a class="btn btn-outline-info badge shadow-none me-2" href="${nav.repoCurrentBranchRssFeed()}">
                &lt;div class="d-flex">
                  &lt;img src=&quot;${nav.rootPath()}frontend/img/rss-icon.svg" style="width: 11px; margin-right: 5px;" /&gt;RSS
                &lt;/div>
              </a>
              &lt;p class="font-monospace text-white mb-2 d-inline-block">
                Latest commit: ${latestCommit.date.toDateString()} &lt;a class="fw-bold link-info" href="${nav.repoBranchCommitsBase()}${latestCommit.hash}">${latestCommit.hash.substr(0, 6)}&lt;/a&gt; ${latestCommitMessage}
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
    &lt;div class="row my-4 mx-1">
      &lt;div class="col">
        ${await renderContentIfAvailable(await getReadMe(repo.name, branch.name), branch.name)}
      </div>
    </div>
  `
After 
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
  const readmeContent = await renderContentIfAvailable(await getReadMe(repo.name, branch.name), branch.name)

  return render([
    m(&#39;div', {class: "row"}, [
      m(&#39;div', {class: "col"}, [
        m(&#39;div', {class: "px-4 pt-3 bezel-header"}, [
          m(&#39;div', {class: "row"}, [
            m(&#39;div', {class: "col-12 col-xl-6"}, [
              m(&#39;h1', {class: "display-3 text-white"},
                m(&#39;em&#39;, repo.name)
              ),
              repo.description
                ? m('p&#39;, {class: "text-white fs-4"}, repo.description)
                : null
            ]),
            m('div', {class: "col-12 col-xl-6 d-flex flex-column justify-content-around"}, [
              m(&#39;div', {class: "row flex-grow-1 align-items-stretch language-percent-row"}, [
                m(&#39;div', {class: "col-12 d-flex align-items-stretch"}, [
                  m(&#39;div', {class: "d-flex flex-grow-1 flex-nowrap"}, topLanguagePercentages.map((percentTuple) => {
                    return m(&#39;div', {class: 'language-col flex-grow-1 overflow-hidden'}, [
                      m(&#39;div&#39;, {class: "language-name text-light font-monospace"}, percentTuple[0]),
                      m(&#39;div&#39;, {class: "language-percent", style: `flex-grow: ${percentTuple[1] / largestPercent};`})
                    ])
                  }).concat([m('div', {class: 'language-col flex-grow-1 overflow-hidden'},
                    m(&#39;div&#39;, {class: "language-name text-light font-monospace"}, &#39;other&#39;),
                      m(&#39;div&#39;, {class: "language-percent", style: `flex-grow: ${otherLanguagePercent / largestPercent};`})
                  )])),
                ])
              ]),
              m(&#39;div', {class: "row align-items-center"}, [
                m(&#39;div', {class: "col-12"}, [
                  m(&#39;div', {class: "header-button-container"}, [
                    m(&#39;button', {class: "btn btn-info btn-lg dropdown-toggle clone-popover-btn"}, &#39;Clone&#39;),
                    nav.homepageButtons.map((buttonConfig) => {
                      return m(&#39;a', {
                        class: "btn btn-outline-info btn-lg shadow-none",
                        href: buttonConfig.url,
                        target: buttonConfig.newTab ? "_blank" : &quot;_self&quot;
                      }, m.trust(buttonConfig.text + `${buttonConfig.newTab ? ' <span>&#x29C9;</span>' : ''}`))
                    })
                  ])
                ])
              ])
            ])
          ]),
          m(&#39;noscript&#39;,
            m(&#39;div', {class: "row mt-2"},
              m(&#39;div', {class: "col"},
                m(&#39;p', {class: "font-monospace text-white"},
                  `Clone URL: ${repo.cloneUrl}`
                )
              )
            )
          ),
          m(&#39;div', {class: "row mt-2"}, [
            m(&#39;div', {class: "col"}, [
              m(&#39;a', {class: "btn btn-outline-info badge shadow-none me-2", href: nav.repoCurrentBranchRssFeed()}, [
                m(&#39;div', {class: "d-flex"}, [
                  m(&#39;img&#39;, {src: `${nav.rootPath()}frontend/img/rss-icon.svg`, style: "width: 11px; margin-right: 5px;"}),
                  &#39;RSS&#39;
                ])
              ]),
              m(&#39;p', {class: "font-monospace text-white mb-2 d-inline-block"}, [
                `Latest commit: ${latestCommit.date.toDateString()} `,
                m(&#39;a', {class: "fw-bold link-info", href: `${nav.repoBranchCommitsBase()}${latestCommit.hash}`}, latestCommit.hash.substr(0, 6)),
                &#39; &#39;,
                latestCommitMessage,
              ])
            ])
          ])
        ])
      ])
    ]),
    m(&#39;div', {class: "row my-4 mx-1"},
      m(&#39;div', {class: "col"}, m.trust(readmeContent))
    )
  ])