Make most of the new commit template work

c021103f05d0dd8f2d78ba0f1ab0028b3721ad69

Tucker McKnight <tmcknight@instructure.com> | Sun Jul 26 2026

Make most of the new commit template work

Still needs the languages bar graph to be implemented.

Some style changes.
js_templates/commits.ts:58
Before
After
js_templates/commits.ts:107
Before
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
            ])
          ])
        ]),

        m('div', {
          class: "bezel-gray p-2 my-2",
          style: "max-width: 40rem;"
        }, [
          commit.isMerge ? m('span', {class: 'badge rounded-pill bg-primary me-1'}, 'merge') : null,
          m('a', {
            class: "fs-5",
            href: nav.commit(commit.hash),
          }, commit.message.split('\n').slice(0, 1)),
          m('br'),
          m('span', date(commit.date)),
          m('br'),
          m('span', commit.author),
          m('p', {class: "commit-hash font-monospace mb-0"}, commit.hash),
        ])
      ]
    })),
    m('nav',
After
106
107
108
















109
110
            ])
          ])
        ]),
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
      ]
    })),
    m('nav',
js_templates/common/branchesListItems.ts:8
Before
7
8
9
10
11
12
    : ''

  const defaultBadge = defaultBranch === ref.name && refType === 'branch'
    ? '<div class="badge rounded-pill bg-info text-dark mx-1">default</div>'
    : ''

  return `
After
7
8
9
10
11
12
    : ''

  const defaultBadge = defaultBranch === ref.name && refType === 'branch'
    ? '<div class="badge rounded-pill bg-info mx-1">default</div>'
    : ''

  return `
main.ts:50
Before
49
50
51

52
53
        const {branches, tags} = await getBranchesAndTags(reposConfiguration, repoName, directories.output, slugify)
        const branchNames = branches.map(branch => branch.name)
        const tagNames = branches.map(tag => tag.name)
⁣
        const fetchCommands = branchNames.concat(tagNames).map(ref => `git -C ${location} fetch origin ${ref}:${ref}`).join('; ')
        await exec(`${fetchCommands} && git -C ${location} update-server-info`)
      } else {
After
49
50
51
52
53
54
        const {branches, tags} = await getBranchesAndTags(reposConfiguration, repoName, directories.output, slugify)
        const branchNames = branches.map(branch => branch.name)
        const tagNames = branches.map(tag => tag.name)

        const fetchCommands = branchNames.concat(tagNames).map(ref => `git -C ${location} fetch origin ${ref}:${ref}`).join('; ')
        await exec(`${fetchCommands} && git -C ${location} update-server-info`)
      } else {
scss/design-board.scss:14
Before
13
14
15

16
17

18
$purple: #852cdf;
$lilac: #E273FA;
$magenta: #FF549B;
⁣
$teal: #80F8D4;

⁣
$body-bg: $gray;
$primary: $blue;
After
13
14
15
16
17
18
19
20
$purple: #852cdf;
$lilac: #E273FA;
$magenta: #FF549B;
$danger: #F49530;
$teal: #80F8D4;
$green: #8EC323;

$body-bg: $gray;
$primary: $blue;
scss/design-board.scss:42
Before
41
42
43
44
45
46
  --bs-list-group-border-color: #BAC1CA;
}

$bezel-colors: ("primary": $primary, "secondary": $secondary, "info": $info, "warning": $warning);

@each $color, $value in $bezel-colors {
  .bezel-#{$color} {
After
41
42
43
44
45
46
  --bs-list-group-border-color: #BAC1CA;
}

$bezel-colors: ("primary": $primary, "secondary": $secondary, "info": $info, "warning": $warning, "danger": $danger, "green": $green, "lilac": $lilac);

@each $color, $value in $bezel-colors {
  .bezel-#{$color} {
scss/design-board.scss:223
Before
222
223
224




225
226
  }
}

⁣
⁣
⁣
⁣
.header-button-container {
  display: flex;
  flex-wrap: wrap;
After
222
223
224
225
226
227
228
229
230
  }
}

.badge.bg-info, .badge.bg-danger, .badge.bg-green {
  color: $body-color;
}

.header-button-container {
  display: flex;
  flex-wrap: wrap;
scss/design-board.scss:245
Before
244
245
246



247
248
}

/* Commits page */
⁣
⁣
⁣
.commit-date {
  display: flex;
  align-items: center;
After
244
245
246
247
248
249
250
251
}

/* Commits page */
.commit {
  border: 1px solid #ddd;
}
.commit-date {
  display: flex;
  align-items: center;