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

  window['setCheckbox'] = (mode, element) => {
    if (element === null) { return }
    if (mode === 'light') {
      element.innerHTML = `<span>&#x1F31E;</span>`
    }
    if (mode === 'dark') {
      element.innerHTML = `<span>&#x1F319;</span>`

              </div>
              <div class="col-auto d-flex align-items-center">
                <div class="dropdown">
                  <button class="dropdown-toggle btn btn-bg" id="dark-mode-switch" type="button" data-bs-toggle="dropdown" aria-expanded="false">
                    <span>&#xFE0F;</span>
                  </button>
                  <ul class="dropdown-menu">
                    <li><button class="btn shadow-none" data-theme-pref="light" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F31E;</span>Light</button></li>
                    <li><button class="btn shadow-none" data-theme-pref="dark" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F319;</span>Dark</button></li>
                    <li><button class="btn shadow-none" data-theme-pref="auto" onclick="toggleDarkMode(this)"><span class="me-1">&#x1F5A5;&#xFE0F;</span>Match OS</button></li>
                  </ul>

    repoBranchCommitsBase: () => repoBranchCommitsBase,
    repoCurrentBranchCommits: () => `${repoBranchCommitsBase}page1`,
    repoCurrentBranchBranches: () => `${currentBranchPath}/branches`,
    homepageButtons: reposConfig.repos[repoName].defaultTemplateConfiguration?.homepageButtons
  }
}

          </noscript>
          <div class="row mt-2">
            <div class="col">
              <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}
              </p>
            </div>
          </div>

        "defaultBranch": {
          "type": "string"
        },
        "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"
        },
        "description": {
          "type": "string"
        },

            "description": "An object containing the configuration for your repositories. Each key in this object is a repository name, and the value has several config options for that repository. The required config options describe the path to the repository and which branches should be pulled. See the specific definition of  {@link  GitConfig }  for more details about what goes in these configuration objects."
          },
          "type": "object"
        },
        "useDefaultTemplate": {
          "type": "boolean"
        }
      },
      "required": [

  background-color: $lightblue;
  border-top: 6px solid color.adjust($lightblue, $lightness: 15%);
  border-left: 6px solid color.adjust($lightblue, $lightness: 13%);
  border-bottom: 6px solid color.adjust($lightblue, $lightness: -30%);
  border-right: 6px solid color.adjust($lightblue, $lightness: -40%);
}

⁣
⁣
⁣
⁣
@include color-mode(dark) {

    border-bottom: 6px solid color.adjust($body-bg-dark, $lightness: -5%);
    border-right: 6px solid color.adjust($body-bg-dark, $lightness: -9%);
  }
}

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


.bezel-purple {
  background-color: $purple;
  border-top: 6px solid color.adjust($purple, $lightness: 15%);

  width: 1rem;
}

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

.language-name {

  font-size: 1rem;
}

⁣
⁣
⁣
⁣
.dropdown-branches {
  list-style: none;
  padding: 0;

.sortRadioButton {
  display: inline-block;
}

.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;
  }
}

  * @example path: "/repos"
  */
  path?: string,
  useDefaultTemplate?: boolean,
}

export type GitConfig = {

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