Make the bars have colors on the repos page

0dfdda04380fc9f3a49687b47a9f2d232e5195e1

Tucker McKnight <tmcknight@instructure.com> | Wed Jul 22 2026

Make the bars have colors on the repos page

Adds a new, optional parameter to the repo configuration:
defaultTemplateConfiguration.colors.languageGraph. This should be
an array of hex color strings (or anything else that can be used as
a `background-color: <here>;` value in CSS).

Also includes some style and spacing tweaks for the new header,
especially at small widths.
js_templates/commits.ts:30
Before
29
30
31
32
33
34
            href: nav.rssFeed()
          }, [
            m('img', {
              src: `${nav.rootPath()}/frontend/img/rss-icon.svg`,
              style: "width: 11px; margin-right: 5px;"
            }),
            'RSS',
After
29
30
31
32
33
34
            href: nav.rssFeed()
          }, [
            m('img', {
              src: `${nav.rootPath()}frontend/img/rss-icon.svg`,
              style: "width: 11px; margin-right: 5px;"
            }),
            'RSS',
js_templates/common/commonPage.ts:4
Before
3
4
5
6

7
export default async (template, reposConfiguration, eleventyConfig) => {
  return async (data) => {
    const opts = await template(reposConfiguration, eleventyConfig, data)
    
⁣
    return render([
      m.trust('<!doctype html>'),
After
3
4
5
6
7
8
export default async (template, reposConfiguration, eleventyConfig) => {
  return async (data) => {
    const opts = await template(reposConfiguration, eleventyConfig, data)
    const rootPath = opts.rootPath == '/' ? '' : opts.rootPath
    
    return render([
      m.trust('<!doctype html>'),
js_templates/common/commonPage.ts:12
Before
11
12
13
14
15
16
17
18
          m('meta', {charset: "utf-8"}),
          m('meta', {name: "viewport", content: "width=device-width, initial-scale=1"}),
          m('title', opts.pageTitle),
          m('link', {rel: "stylesheet", href: `${opts.rootPath}/css/design-board.css`}),
          opts.additionalHeadContent || null,
          m('script', {src: `${opts.rootPath}/frontend/top.js`}),
        ]),
        m('body', [
          m('div', {class: "container-fluid container-lg"}, [
After
11
12
13
14
15
16
17
18
          m('meta', {charset: "utf-8"}),
          m('meta', {name: "viewport", content: "width=device-width, initial-scale=1"}),
          m('title', opts.pageTitle),
          m('link', {rel: "stylesheet", href: `${rootPath}/css/design-board.css`}),
          opts.additionalHeadContent || null,
          m('script', {src: `${rootPath}/frontend/top.js`}),
        ]),
        m('body', [
          m('div', {class: "container-fluid container-lg"}, [
js_templates/common/commonPage.ts:61
Before
60
61
62
63
64
65
            integrity: "sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI",
            crossorigin: "anonymous"
          }),
          m('script', {src: `${opts.rootPath}/frontend/main-frontend.bundle.js`})
        ])
      ])
    ])
After
60
61
62
63
64
65
            integrity: "sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI",
            crossorigin: "anonymous"
          }),
          m('script', {src: `${rootPath}/frontend/main-frontend.bundle.js`})
        ])
      ])
    ])
js_templates/helpers/nav.ts:42
Before
41
42
43
44
45
46
        return "/"
      }
      else {
        return reposPath
      }
    },
    repoHomePath: () => {
After
41
42
43
44
45
46
        return "/"
      }
      else {
        return reposPath + '/'
      }
    },
    repoHomePath: () => {
js_templates/repo.ts:64
Before
63
64
65
66

67
  const largestPercent = Math.max(...topLanguagePercentages.map(tuple => tuple[1]), otherLanguagePercent)

  const readmeContent = await renderContentIfAvailable(await getReadMe(repo.name, ref.name), ref.name)

⁣
  const pageContent = [
    m('div', {class: "row"}, [
After
63
64
65
66
67
68
  const largestPercent = Math.max(...topLanguagePercentages.map(tuple => tuple[1]), otherLanguagePercent)

  const readmeContent = await renderContentIfAvailable(await getReadMe(repo.name, ref.name), ref.name)
  const colors = reposConfig.defaultTemplate?.colors?.languageGraph || []

  const pageContent = [
    m('div', {class: "row"}, [
js_templates/repo.ts:80
Before
After
js_templates/repo.ts:126
Before
After
schemas/ReposConfiguration.json:158
Before
157
158
159












160
161
            "allRepositoriesPageTitle": {
              "type": "string"
            },
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
            "enabled": {
              "default": true,
              "description": "Whether or not the default template should be used. If `true`, will generate the type of HTML pages seen at https://tuckerm.us/repos.",
After
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
            "allRepositoriesPageTitle": {
              "type": "string"
            },
            "colors": {
              "additionalProperties": false,
              "properties": {
                "languageGraph": {
                  "items": {
                    "type": "string"
                  },
                  "type": "array"
                }
              },
              "type": "object"
            },
            "enabled": {
              "default": true,
              "description": "Whether or not the default template should be used. If `true`, will generate the type of HTML pages seen at https://tuckerm.us/repos.",
scss/design-board.scss:150
Before
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;
After
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
.language-percentages {
  font-size: 0;
}
.latest-commit {
  line-height: normal;
}
.language-col {
  background: black;
  display: flex;
  align-items: end;
  max-height: 2rem;
  margin-top: 1px;
  margin-bottom: 1px;
}
.language-percent {
  display: inline-block;
scss/design-board.scss:165
Before
164
165
166
167
168
169
170
  background-color: $magenta;
}
.language-name {
  display: inline-block;
  font-size: 1rem;
}

.rel-dropdown[data-selected=branch] .tag {
After
164
165
166

167
168
169
  background-color: $magenta;
}
.language-name {
⁣
  max-height: 2rem;
}

.rel-dropdown[data-selected=branch] .tag {
src/configTypes.ts:56
Before
55
56
57



58
59
    */
    enabled?: boolean,
    allRepositoriesPageTitle?: string,
⁣
⁣
⁣
  },
}

After
55
56
57
58
59
60
61
62
    */
    enabled?: boolean,
    allRepositoriesPageTitle?: string,
    colors?: {
      languageGraph?: Array<string>,
    },
  },
}