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.
57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76
m('div', {class: "container"}, data.patchPage.commits.map((commit) => {
return [
m('div', {class: "row border py-2"}, [
m('div', {class: "col-lg-auto col-12 commit-date"}, [
m('span', {class: "date mb-1 me-2 font-monospace d-inline-block"}, '2026-04-01'),
m('span', {class: "bg-danger mb-1 badge rounded-pill d-inline-block"}, 'v1.2')
]),
m('div', {class: "col-12 col-md"}, [
m('div', {class: "row mb-1"},
m('a', {href: "#", class: "commit-msg"}, 'This one has a different style, and is responsive')
),
m('div', {class: "row mb-3 mb-lg-0"}, [
m('div', {class: "col d-flex flex-direction-row align-items-center flex-wrap"}, [
m('span', {class: "author me-2"}, 'Tucker McKnight'),
m('span', {class: "bg-primary badge rounded-pill me-2"}, 'tuckerm.us'),
m('span', {class: "copy-sha"}, [
m('span', {class: "sha font-monospace me-1"}, '123abc'),
m('a', {href: "#"}, 'Copy')
])
])57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79
m('div', {class: "container"}, data.patchPage.commits.map((commit) => {
return [
m('div', {class: "commit row py-2 my-2"}, [
m('div', {class: "col-lg-auto col-12 commit-date"}, [
m('span', {class: "date mb-1 me-2 font-monospace d-inline-block text-nowrap"}, date(commit.date).split(' ').slice(1).join(' ')),
commit.isMerge ? m('span', {class: 'badge rounded-pill bg-warning me-1'}, 'merge') : null,
// TODO: if this commit has any tags, list them here
// m('span', {class: "bg-danger mb-1 badge rounded-pill d-inline-block"}, 'v1.2')
]),
m('div', {class: "col-12 col-md"}, [
m('div', {class: "row mb-1"},
m('a', {href: nav.commit(commit.hash), class: "commit-msg"}, commit.message.split('\n').slice(0, 1))
),
m('div', {class: "row mb-3 mb-lg-0"}, [
m('div', {class: "col d-flex flex-direction-row align-items-center flex-wrap"}, [
m('span', {class: "author me-2"}, commit.author),
// TODO: if the user has a verified website, put it here
// m('span', {class: "bg-primary badge rounded-pill me-2"}, 'tuckerm.us'),
m('span', {class: "copy-sha"}, [
m('span', {class: "sha font-monospace me-1"}, commit.hash.slice(0, 6)),
m('a', {href: "#"}, 'Copy')
])
])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',106 107 108 109 110
])
])
]),
]
})),
m('nav',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 `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 `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 {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 {13 14 15 16 17 18
$purple: #852cdf;
$lilac: #E273FA;
$magenta: #FF549B;
$teal: #80F8D4;
$body-bg: $gray;
$primary: $blue;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;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} {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} {222 223 224 225 226
}
}
.header-button-container {
display: flex;
flex-wrap: wrap;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;244 245 246 247 248
}
/* Commits page */
.commit-date {
display: flex;
align-items: center;244 245 246 247 248 249 250 251
}
/* Commits page */
.commit {
border: 1px solid #ddd;
}
.commit-date {
display: flex;
align-items: center;