Make language percent breakdown work; add optional config for extra buttons

      element.innerHTML = `<span>&#x1F31E;</span>`

                  <button class="dropdown-toggle btn btn-bg" id="dark-mode-switch" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <li><button class="btn shadow-none" data-theme-pref="light" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F31E;</span>Light</button></li>

    homepageButtons: reposConfig.repos[repoName].defaultTemplateConfiguration?.homepageButtons

  const latestCommitMessage = latestCommit.message.length > 72
    ? latestCommit.message.split('\n')[0].substr(0, 72) + '...'
    : latestCommit.message

  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
  }, new Map<string, number>())

  // todo: this is probably broken for repos that use fewer than 6 languages
  let languagePercentages: Array<[string, number]> = []
  const total = branch.fileList.length

  for (const entry of languageCounts) {
    languagePercentages.push([entry[0], entry[1] / total])
  }
  languagePercentages.sort((a, b) => {
    return b[1] - a[1]
  })
  const topLanguagePercentages = languagePercentages.slice(0, 5)
  const otherLanguagePercent = languagePercentages.slice(6, languagePercentages.length - 6).reduce((sum, current) => {
    return sum + current[1]
  }, 0)

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

            <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) =&gt; `&lt;div class=&#39;col language-col&#39;><div class="language-name text-light font-monospace">${percentTuple[0]}</div><div class="language-percent" style="flex-grow: ${percentTuple[1] / largestPercent}"></div></div&gt;`).join(';&#39;)}
                  <div class=&#39;col language-col&#39;><div class="language-name text-light font-monospace">other</div><div class="language-percent" style="flex-grow: ${otherLanguagePercent / largestPercent}"></div></div>
              <div class="row align-items-center">
                <div class="col-12">
                  <div class="header-button-container">
                    <button class="btn btn-info btn-lg dropdown-toggle" id="clone-popover-btn">Clone</button>
                    ${nav.homepageButtons.map((buttonConfig) => {
                      return `<a class="btn btn-outline-info btn-lg shadow-none" href="${buttonConfig.url}" ${buttonConfig.newTab ? &#39;target="_blank"&#39; : &#39;&#39;}>${buttonConfig.text}${buttonConfig.newTab ? &#39; &lt;span>&amp;#x29C9;&lt;/span>&#39; : &#39;&#39;}</a>`
                    }).join(&#39;&#39;)}
                  </div>

              <p class="font-monospace text-white">
                Latest commit: ${latestCommit.date.toDateString()} <a class="fw-bold link-info" href="${nav.repoBranchCommitsBase()}${latestCommit.hash}">${latestCommit.hash.substr(0, 6)}</a> ${latestCommitMessage}

        "defaultTemplateConfiguration": {
          "additionalProperties": false,
          "properties": {
            "homepageButtons": {
              "items": {
                "additionalProperties": false,
                "properties": {
                  "newTab": {
                    "type": "boolean"
                  },
                  "text": {
                    "type": "string"
                  },
                  "url": {
                    "type": "string"
                  }
                },
                "required": [
                  "url",
                  "text"
                ],
                "type": "object"
              },
              "type": "array"
            }
          },
          "required": [
            "homepageButtons"
          ],
          "type": "object"
        },

        },
        "useDefaultTemplate": {
          "type": "boolean"

  border-bottom: 6px solid color.adjust($lightblue, $lightness: -30%);
  border-right: 6px solid color.adjust($lightblue, $lightness: -40%);

}
.btn-bg, .btn-bg:hover {
  border: 1px solid $body-color;

.language-percent-row {
  max-height: 60%;
}
.language-col {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
}
  background-color: $lilac;
  // background-color: #E273FA;
}
.language-col:nth-of-type(2n) .language-percent {
  background-color: $magenta;
  // background-color: #852CDF;

.badge.bg-primary {
  background: linear-gradient(color.adjust($primary, $lightness: 10%), $primary);
  box-shadow: -1px -3px 4px inset color.adjust($primary, $lightness: -30%);
}

.badge.bg-info {
  background: linear-gradient(color.adjust($info, $lightness: 10%), $info);
  box-shadow: -1px -3px 4px inset color.adjust($info, $lightness: -30%);
}

.header-button-container {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -10px;

  .btn {
    flex: 1;
    flex-basis: 200px;
    margin: 10px 10px;
  }
}

  useDefaultTemplate?: boolean,

  }[],
  defaultTemplateConfiguration?: {
    homepageButtons: Array<{
      url: string,
      text: string,
      newTab?: boolean,
    }>
  },