Make files.ts be a mithril template

da80ba5ba84d6fab7c662a9a0fd3eab8d898fa18

Tucker McKnight | Tue Jan 20 2026

Make files.ts be a mithril template
js_templates/files.ts:1
Before 
1
After 
1
import m from 'mithril'
import render from 'mithril-node-render'
js_templates/files.ts:7
Before 
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
  return `
    <div class="row mt-3 mb-1">
      <div class="col">
        &lt;p&gt;Files snapshot from &lt;span class="font-monospace">${data.branchInfo.branchName}</span></p>
      </div>
    </div>
    &lt;div class="row my-1">
      &lt;div class="col">
        &lt;h3&gt;
          &lt;span>./&lt;/span>
        </h3>
      </div>
    </div>
    &lt;ul class="list-group">
    ${files.map((file) => {
        return `
          &lt;li class=&quot;list-group-item">
            ${file.isDirectory ? '<span>&#x1F4C1;</span>' : ''}
            <a href="${data.reposPath}/${slugify(data.branchInfo.repoName)}/branches/${slugify(data.branchInfo.branchName)}/files/${
              file.fullPath.split('/')
              .map((pathPart) => {
                return pathPart.split('.').map((subPart) => {
                  return slugify(subPart)
                }).join('.')
              }).join('/')}.html">${file.name}</a>
          </li>
        `
    }).join('')}
    </ul>
  `
After 
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
  return render([
    m(&#39;div', {class: "row mt-3 mb-1"}, [
      m(&#39;div', {class: "col"},
        m(&#39;p&#39;, [
          'Files snapshot from &#39;,
          m('span', {class: "font-monospace"}, data.branchInfo.branchName)
        ])
      )
    ]),
    m(&#39;div', {class: "row my-1"},
      m(&#39;div', {class: "col"},
        m(&#39;h3&#39;, &#39;./&#39;)
      )
    ),
    m(&#39;ul', {class: "list-group"}, files.map((file) => {
      return m(&#39;li&#39;, [
        file.isDirectory ? '<span>&#x1F4C1;</span>' : null,
        m('a', {
          href: `${data.reposPath}/${slugify(data.branchInfo.repoName)}/branches/${slugify(data.branchInfo.branchName)}/files/${
            file.fullPath.split('/')
            .map((pathPart) => {
              return pathPart.split('.').map((subPart) => {
                return slugify(subPart)
              }).join('.')
            }).join('/')}.html`
        }, file.name)
      ])
    }))
  ])