Add clone buttons and homepage buttons to index

if (setCheckbox) {
  setCheckbox(currentTheme, document.getElementById('dark-mode-switch'))
}

const createClonePopover = (popoverBtn, url) => {
  // div.id = "clone-popover"
      <span class='clone overflow-hidden input-group-text'>${url || window.cloneUrl}</span>
      <button data-copy-text='${url || window.cloneUrl}' class='btn btn-primary shadow-none text-white' id='copy-button'>Copy</button>
  // const popoverBtn = document.querySelector(".clone-popover-btn")

  window.popovers.push(bsPopover)

window.popovers ||= []
document.querySelectorAll('.clone-popover-btn').forEach((button) => {
  createClonePopover(button, button.dataset['copyText'])
})
document.querySelectorAll(".copy-button").forEach((button) => {
  button.addEventListener('click', copyCommand)
})
document.addEventListener('click', (event) => {
  const target = event.target
  // If they didn't click the .clone-popover-btn or if we're not inside of
  // popover, or if we *are* inside of a popover but a different one than the
  // current one, then close the popover.
  const parentPopover = target.closest(".popover")
  if (
    !target.classList.contains("clone-popover-btn")
    && parentPopover === null
  ) {
    window.popovers.forEach(popover => popover.hide())
  }
})

            <button data-copy-text='${data.patchInfo.commit.hash}' class="btn btn-info shadow-none copy-button">Copy</button>

            <span class="font-monospace fw-bold"><a href="${data.reposPath}/${slugify(data.patchInfo.repoName)}/branches/${slugify(data.patchInfo.branchName)}/files/${hunk.fileName.split('/').map((filePart) =&gt; slugify(filePart)).join('/')}&quot;>${hunk.fileName}:${hunk.lineNumber}</a></span>

    const currentBadge = currentBranch === branch.name ? '<div class="badge rounded-pill bg-secondary mx-1">current</div>' : ''

                      <a class="nav-link ${data.navTab === 'home' ? 'active' : ''}" aria-current="page" href="${nav.repoCurrentBranchHome()}">Home</a>

          <span class="bezel-gray px-1"><a href="${data.reposPath}/${data.fileInfo.repoName}/branches/${data.fileInfo.branchName}/files">./</a></span>${

              return `<a href="${data.reposPath}/${slugify(data.fileInfo.repoName)}/branches/${slugify(data.fileInfo.branchName)}/commits/${annotation.sha}">${annotation.sha.substr(0, 6)}</a> ${annotation.author}`

          <span>./</span>

                <h1>${data.reposConfig.defaultTemplateConfiguration?.allRepositoriesPageTitle || &quot;All Repositories&quot;}&lt;/h1>
                    <div class="m-2 card bezel-gray flex-grow-1" style="flex-basis: 20rem;">
                      <div class="card-header">
                        <a class="card-title fs-5" href=&quot;${data.reposPath}/${slugify(repo.name)}/branches/${repo.defaultBranch}"&gt;${repo.name}</a>
                      </div>
                      </div>
                      <div class="card-footer">
                        <a href="${data.reposPath}/${slugify(repo.name)}/branches/${repo.defaultBranch}" class="mx-1 my-2 btn btn-primary text-white">Go to site</a>
                        <button class="mx-1 my-2 btn btn-outline-secondary shadow-none dropdown-toggle clone-popover-btn" data-copy-text="${repo.cloneUrl}">Clone</button>
                        ${(data.reposConfig.repos[repo.name].defaultTemplateConfiguration?.homepageButtons || []).map((button) => {
                          return `<a class="mx-1 my-2 btn btn-outline-secondary shadow-none" href="${button.url}&quot; ${button.newTab ? 'target="_blank"' : ''}>${button.text}${button.newTab ? ' &lt;span>&#x29C9;</span>' : ''}</a>`
                        }).join('')}

        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
        <script src="${data.reposPath}/frontend/main-frontend.bundle.js"></script>

                    <button class="btn btn-info btn-lg dropdown-toggle clone-popover-btn">Clone</button>

        "defaultTemplateConfiguration": {
          "additionalProperties": false,
          "properties": {
            "allRepositoriesPageTitle": {
              "type": "string"
            }
          },
          "type": "object"
        },

@each $color, $value in $bezel-colors {
  .badge.bg-#{$color} {
    background: linear-gradient(color.adjust($value, $lightness: 10%), $value);
    box-shadow: -1px -3px 4px inset color.adjust($value, $lightness: -30%);
  }
// .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%);
// }

  defaultTemplateConfiguration?: {
    allRepositoriesPageTitle?: string,
  },