Replace latest commit in branch placeholder with real info

3d1d1f852c147fc009bfe4f8a59c3664c6d63d0c

Tucker McKnight <tmcknight@instructure.com> | Fri Jul 17 2026

Replace latest commit in branch placeholder with real info

"Latest commit in main" now shows the actual latest commit.

Plus some spacing changes.
js_templates/repo.ts:80
Before
79
80
81
82
83

84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
              m('div', {class: 'row'}, [
                m('div', {class: "col-6"}, [
                  m('div', {class: "row"}, [
                    m('div', {class: "col m-1"}, [
                      m('p', {class: "text-white mb-2 d-inline-block"}, [
⁣
                        m('span', {class: "fs-5 fw-light"}, 'Latest commit in main'),
                        m('a', {href:"", class: "btn badge shadow-none"}, [
                          m('img', {
                            src: "img/rss-icon.svg",
                            style: "width: 11px; margin-right: 5px;"
                          }),
                          'RSS',
                        ]),
                        m('br'),
                        m('span', {class: "font-monospace"}, [
                          'Jul 04 2026 ',
                          m('a', {href: "", class: "fw-bold link-info"}, 'b1c071')
                        ]),
                      ])
                    ])
                  ]),
                  m('div', {class: "row"}, [
                    m('div', {class: "col m-1"}, [
                      m('p', {class: "text-white mb-2 d-inline-block"}, [
                        m('span', {class: "fs-5 fw-light"}, 'Latest commit overall'),
                        m('br'),
                        m('span', {class: "font-monospace"}, [
                          'Jul 04 2026 ',
                          m('a', {href: "", class: "link-info fw-bold"}, 'b1c071')
                        ]),
                        m('br'),
                        m('span', {class: "fw-light"}, [
                          'in branch ',
                          m('a', {href: "", class: "link-info"}, 'one-page-per-commit'),
After
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104

105
106
107
108

109
110
              m('div', {class: 'row'}, [
                m('div', {class: "col-6"}, [
                  m('div', {class: "row"}, [
                    m('div', {class: "col"}, [
                      m('div', {class: "text-white d-inline-block"}, [
                        m('div', {class: "d-flex align-items-center"}, [
                          m('div', {class: "fs-5 fw-light"}, `Latest commit in ${ref.name}`),
                          m('a', {href: nav.rssFeed(), class: "ps-1 p-0 btn badge shadow-none"}, [
                            m('img', {
                              src: "/frontend/img/rss-icon.svg",
                              style: "width: 11px; margin-right: 5px;"
                            }),
                            'RSS',
                          ]),
                        ]),
                        m('div', {class: "font-monospace"}, [
                          `${latestCommit.date.toDateString().split(' ').slice(1).join(' ')} `,
                          m('a', {href: nav.commit(latestCommit.hash), class: "fw-bold link-info"}, latestCommit.hash.substr(0, 6))
                        ]),
                      ])
                    ])
                  ]),
                  m('div', {class: "row mt-2"}, [
                    m('div', {class: "col"}, [
                      m('div', {class: "text-white mb-2 d-inline-block"}, [
                        m('div', {class: "fs-5 fw-light"}, 'Latest commit overall'),
⁣
                        m('div', {class: "font-monospace"}, [
                          'Jul 04 2026 ',
                          m('a', {href: "", class: "link-info fw-bold"}, 'b1c071')
                        ]),
⁣
                        m('span', {class: "fw-light"}, [
                          'in branch ',
                          m('a', {href: "", class: "link-info"}, 'one-page-per-commit'),
js_templates/repo.ts:116
Before
115
116
117
118
119

120
121
122
123
124
125
126
127
128

129
130
131
132
133
134
135

136
137
138
139
140
141
142
143
                    ])
                  ])
                ]),
                m('div', {class: "col-6 commits-page"}, [
                  m('div', {class: "row"}, [
⁣
                    m('div', {class: "col-auto language-names pe-1"}, [
                      m('div', 'js'),
                      m('div', 'css'),
                      m('div', 'md'),
                      m('div', 'other'),
                    ]),
                    m('div', {class: "col ps-0"}, [
                      m('div', {class: "flex-grow-1 d-flex"},
                        m('div', {class: "lang-diff plus-1"})
⁣
                      ),
                      m('div', {class: "flex-grow-1 d-flex"},
                        m('div', {class: "lang-diff plus-2 text-white"})
                      ),
                      m('div', {class: "flex-grow-1 d-flex"},
                        m('div', {class: "lang-diff plus-3 text-white"})
                      ),
⁣
                      m('div', {class: "flex-grow-1 d-flex"},
                        m('div', {class: "lang-diff plus-4 text-white"})
                      ),
                    ]),
                  ]),
                ])
              ]),
              m('div', {class: "row align-items-center"}, [
                m('div', {class: "col-12"}, [
After
115
116
117
118
119
120




121
122
123

124
125
126
127
128


129
130
131

132
133

134
135
136
137
                    ])
                  ])
                ]),
                m('div', {class: "col-6 d-flex"}, [
                  m('div', {class: "d-flex flex-column"}, [
                    topLanguagePercentages.map((percentTuple) => {
⁣
⁣
⁣
⁣
                      return m('div', {class: 'me-1 d-flex justify-content-end align-items-end small text-white font-monospace flex-grow-1'}, percentTuple[0])
                    }),
                    otherLanguagePercent > 0
⁣
                    ? m('div', {class: 'me-1 d-flex justify-content-end align-items-end small text-white font-monospace flex-grow-1'}, 'other')
                    : null
                  ]),
                  m('div', {class: "flex-grow-1 d-flex flex-column"}, [
                    topLanguagePercentages.map((percentTuple) => {
⁣
⁣
                      return m('div', {class: 'language-col flex-grow-1', style: `width: ${percentTuple[1] / largestPercent * 100}%;`})
                    }),
                    otherLanguagePercent > 0
⁣
                      ? m('div', {class: 'language-col flex-grow-1', style: `width: ${otherLanguagePercent / largestPercent * 100}%;`})
                      : null
⁣
                  ])
                ]),
              ]),
              m('div', {class: "row align-items-center"}, [
                m('div', {class: "col-12"}, [
scss/design-board.scss:150
Before
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
.language-percentages {
  font-size: 0;
}
.language-cols {
  margin: 0 -6px;
}
.language-col {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
  margin: 0 6px;
  flex-basis: 0;
}
.language-percent {
  display: inline-block;
After
149
150
151
152
153


154

155



156
157
.language-percentages {
  font-size: 0;
}
.language-col {
  background: black;
⁣
⁣
  display: flex;
⁣
  align-items: end;
⁣
⁣
⁣
}
.language-percent {
  display: inline-block;