Tucker McKnight <tmcknight@instructure.com> | Sun Jul 12 2026
[WIP] copy the mockup HTML to the repo.ts template This is the start of implementing the new-header-area.html design that's in ui-experiments.
76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95
: null
]),
m('div', {class: "col-12 col-lg-6 d-flex flex-column justify-content-around"}, [
m('div', {class: "row flex-grow-1 align-items-stretch language-percent-row"}, [
m('div', {class: "col-12 d-flex align-items-stretch"}, [
m('div', {class: "language-cols d-flex flex-grow-1 flex-nowrap"}, topLanguagePercentages.map((percentTuple) => {
return m('div', {class: 'language-col flex-grow-1 overflow-hidden'}, [
m('div', {class: "language-name text-light font-monospace"}, percentTuple[0]),
m('div', {class: "language-percent", style: `flex-grow: ${percentTuple[1] / largestPercent};`})
])
}).concat(
otherLanguagePercent > 0
? [m('div', {class: 'language-col flex-grow-1 overflow-hidden'},
m('div', {class: "language-name text-light font-monospace"}, 'other'),
m('div', {class: "language-percent", style: `flex-grow: ${otherLanguagePercent / largestPercent};`})
)]
: null
)),
])
]),
m('div', {class: "row align-items-center"}, [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 101 102 103 104 105 106 107 108 109 110 111 112 113 114 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
: null
]),
m('div', {class: "col-12 col-lg-6 d-flex flex-column justify-content-around"}, [
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'),
])
])
])
])
]),
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"}, [118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
)
)
),
m('div', {class: "row mt-2"}, [
m('div', {class: "col"}, [
m('p', {class: "font-monospace text-white mb-2 d-inline-block"}, [
m('a', {class: "btn btn-outline-info badge shadow-none me-2", href: nav.rssFeed()}, [
m('img', {src: `${nav.rootPath()}frontend/img/rss-icon.svg`, style: "width: 11px; margin-right: 5px;"}),
'RSS'
]),
`Latest commit: ${latestCommit.date.toDateString()} `,
m('a', {class: "fw-bold link-info", href: `${nav.commit(latestCommit.hash)}`}, latestCommit.hash.substr(0, 6)),
' ',
latestCommitMessage,
])
])
])
])
])
]),118 119 120 121 122
)
)
),
])
])
]),