Make the clone popover on the new template work with the old JS file

523febe5c07b3817674fae112d0e942ae5b3bf54

Tucker McKnight | Sun Dec 14 2025

Make the clone popover on the new template work with the old JS file

Side-by-side

Stacked

frontend/main.js:21

Before

  div.innerHTML = jsVars.cloneDiv

After

  div.innerHTML = `
    <label class='form-label'>HTTPS URL</label>
    <div class='input-group d-flex flex-nowrap'>
      <span class='clone overflow-hidden input-group-text'>${window.cloneUrl}</span>
      <button data-clone-url='${window.cloneUrl}' class='btn btn-primary shadow-none text-white' id='clone-button'>Copy</button>
    </div>`

    placement: 'bottom',
    container: 'body',

frontend/main.js:92

Before

if (jsVars?.nav?.repoName) {

After

if (document.getElementById('clone-popover-btn')) {

frontend/webpack.config.js:6

Before

After

  mode: 'development',
  devtool: 'source-map',

js_templates/repo.ts:5

Before

    return `<span class='dropdown-item my-1'><a href=&#39;${branch.href}&#39;>${branch.name}</a>${badge}<span class="d-block ms-2">updated ${branch.date}</span></span>`

After

    return `<a href='${branch.href}' class='dropdown-item my-1'><span class=&quot;branch-dropdown-branch-name&quot;>${branch.name}</span>${badge}<span class="text-body d-block ms-2">updated ${branch.date}</span></a>`

js_templates/repo.ts:43

Before

After

            window.cloneUrl = "${repo.cloneUrl}";

js_templates/repo.ts:61

Before

                        <button class="branches nav-link d-inline-block btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">

After

                        <button class="branches nav-link d-inline-block btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">

js_templates/repo.ts:165

Before

After

                  <noscript>
                    <div class="row mt-2">
                      <div class="col">
                        <p class="font-monospace text-white">
                          Clone URL: ${repo.cloneUrl}
                        </p>
                      </div>
                    </div>
                  </noscript>

js_templates/repo.ts:185

Before

          <script>
            const createClonePopover = () => {
              const div = document.createElement('div')
              div.id = "clone-popover"
              div.innerHTML = "<label class='form-label'>HTTPS URL</label><div class='input-group d-flex flex-nowrap'><span class='clone overflow-hidden input-group-text'>${repo.cloneUrl}</span><button data-clone-url='${repo.cloneUrl}' class='btn btn-primary shadow-none text-white' id='clone-button'>Copy</button></div>"
              const popoverBtn = document.getElementById("clone-popover-btn")
              const bsPopover = new bootstrap.Popover(popoverBtn, {
                sanitize: false,
                html: true,
                content: div,
                title: 'Clone',
                placement: 'bottom',
                container: 'body',
              })
            }

            createClonePopover()
          </script>

After