Restyle language bar chart and make it ignore the gitignore file

8df7e5988c8f9cdb8f18a6a73a071ad4670b89a5

Tucker McKnight <tucker@pangolin.lan> | Wed Dec 31 2025

Restyle language bar chart and make it ignore the gitignore file

TBD: better, user-customizable way of ignoring certain files or
extensions.
js_templates/repo.ts:14
Before
13
14
15
16




17
  const languageCounts = branch.fileList.reduce((counts, currentFile) => {
    const fileParts = currentFile.split(".")
    const fileExtension = fileParts[fileParts.length - 1]

⁣
⁣
⁣
⁣
    counts.set(fileExtension, (counts.get(fileExtension) + 1) || 1)
    return counts
After
13
14
15
16
17
18
19
20
21
  const languageCounts = branch.fileList.reduce((counts, currentFile) => {
    const fileParts = currentFile.split(".")
    const fileExtension = fileParts[fileParts.length - 1]
    // todo: add more ignoreable extensions
    if (fileExtension === 'gitignore') {
      return counts
    }

    counts.set(fileExtension, (counts.get(fileExtension) + 1) || 1)
    return counts
js_templates/repo.ts:48
Before
47
48
49
50
51
52
53
54
            <div class="col-12 col-xl-6 d-flex flex-column justify-content-around">
              <div class="row flex-grow-1 align-items-stretch language-percent-row">
                <div class="col-12 d-flex align-items-stretch">
                  <div class="row d-flex flex-grow-1">
                    ${topLanguagePercentages.map((percentTuple) => `<div class='col language-col'><div class="language-name text-light font-monospace">${percentTuple[0]}</div><div class="language-percent" style="flex-grow: ${percentTuple[1] / largestPercent}"></div></div>`).join('')}
                  <div class='col language-col'><div class="language-name text-light font-monospace">other</div><div class="language-percent" style="flex-grow: ${otherLanguagePercent / largestPercent}"></div></div>
                  </div>
                </div>
              </div>
After
47
48
49
50
51
52
53
54
            <div class="col-12 col-xl-6 d-flex flex-column justify-content-around">
              <div class="row flex-grow-1 align-items-stretch language-percent-row">
                <div class="col-12 d-flex align-items-stretch">
                  <div class="d-flex flex-grow-1 flex-nowrap">
                    ${topLanguagePercentages.map((percentTuple) => `<div class='language-col flex-grow-1 overflow-hidden'><div class="language-name text-light font-monospace">${percentTuple[0]}</div><div class="language-percent" style="flex-grow: ${percentTuple[1] / largestPercent}"></div></div>`).join('')}
                  <div class='language-col flex-grow-1 overflow-hidden'><div class="language-name text-light font-monospace">other</div><div class="language-percent" style="flex-grow: ${otherLanguagePercent / largestPercent}"></div></div>
                  </div>
                </div>
              </div>
scss/design-board.scss:190
Before
189
190
191

192
193
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
⁣
}
.language-percent {
  display: inline-block;
After
189
190
191
192
193
194
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
  flex-basis: 0;
}
.language-percent {
  display: inline-block;