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

523febe5c07b3817674fae112d0e942ae5b3bf54

Tucker McKnight <tucker@pangolin.lan> | Sun Dec 14 2025

Make the clone popover on the new template work with the old JS file
frontend/main.js:21
Before
20
21
22



23



24
25
26
27
28
29


30
31
const createClonePopover = () => {
  const div = document.createElement('div')
  div.id = "clone-popover"
⁣
⁣
⁣
  div.innerHTML = jsVars.cloneDiv
⁣
⁣
⁣
  const popoverBtn = document.getElementById("clone-popover-btn")
  const bsPopover = new bootstrap.Popover(popoverBtn, {
    sanitize: false,
    html: true,
    content: div,
    title: 'Clone',
⁣
⁣
  })

  div.querySelector("#clone-button").addEventListener('click', copyCommand)
After
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
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'>${window.cloneUrl}</span>
      <button data-clone-url='${window.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',
  })

  div.querySelector("#clone-button").addEventListener('click', copyCommand)
frontend/main.js:92
Before
91
92
93
94
95
const bootstrap = window.bootstrap
const jsVars = window.jsVars

if (jsVars?.nav?.repoName) {
  createClonePopover()
}
After
91
92
93
94
95
const bootstrap = window.bootstrap
const jsVars = window.jsVars

if (document.getElementById('clone-popover-btn')) {
  createClonePopover()
}
frontend/webpack.config.js:6
Before
5
6
7


    path: path.resolve(import.meta.dirname, '../dist/frontend'),
    filename: 'main-frontend.bundle.js',
  },
⁣
⁣
};
After
5
6
7
8
9
    path: path.resolve(import.meta.dirname, '../dist/frontend'),
    filename: 'main-frontend.bundle.js',
  },
  mode: 'development',
  devtool: 'source-map',
};
js_templates/repo.ts:5
Before
4
5
6
7
8
9
export const branchesListItems = (branches: Array<{name: string, href: string, date: string}>, defaultBranch: string): string => {
  return branches.map((branch) => {
    const badge = defaultBranch === branch.name ? '<div class="badge rounded-pill bg-primary ms-2">default</div>' : ''
    return `<span class='dropdown-item my-1'><a href='${branch.href}'>${branch.name}</a>${badge}<span class="d-block ms-2">updated ${branch.date}</span></span>`
  }).join('')
}
After
4
5
6
7
8
9
export const branchesListItems = (branches: Array<{name: string, href: string, date: string}>, defaultBranch: string): string => {
  return branches.map((branch) => {
    const badge = defaultBranch === branch.name ? '<div class="badge rounded-pill bg-primary ms-2">default</div>' : ''
    return `<a href='${branch.href}' class='dropdown-item my-1'><span class="branch-dropdown-branch-name">${branch.name}</span>${badge}<span class="text-body d-block ms-2">updated ${branch.date}</span></a>`
  }).join('')
}
js_templates/repo.ts:43
Before
42
43
44

45
46
          <script>
            window.branchesWithHrefs = ${JSON.stringify(branchesWithHrefs)};
            window.defaultBranch = "${repo.defaultBranch}";
⁣
          </script>
          <script src="${nav.rootPath()}frontend/top.js"></script>
        </head>
After
42
43
44
45
46
47
          <script>
            window.branchesWithHrefs = ${JSON.stringify(branchesWithHrefs)};
            window.defaultBranch = "${repo.defaultBranch}";
            window.cloneUrl = "${repo.cloneUrl}";
          </script>
          <script src="${nav.rootPath()}frontend/top.js"></script>
        </head>
js_templates/repo.ts:61
Before
60
61
62
63
64
65
                    <li class="nav-item">
                      <span class="nav-link d-inline-block">Branch:</span>
                      <div class="branch-selector dropdown-center d-inline-block">
                        <button class="branches nav-link d-inline-block btn dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
                          ${branch.name}
                        </button>
                        <div class="dropdown-menu">
After
60
61
62
63
64
65
                    <li class="nav-item">
                      <span class="nav-link d-inline-block">Branch:</span>
                      <div class="branch-selector dropdown-center d-inline-block">
                        <button class="branches nav-link d-inline-block btn dropdown-toggle" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false">
                          ${branch.name}
                        </button>
                        <div class="dropdown-menu">
js_templates/repo.ts:165
Before
164
165
166

167








168
                      </div>
                    </div>
                  </div>
⁣
                  <div class="row mt-2">
⁣
⁣
⁣
⁣
⁣
⁣
⁣
⁣
                    <div class="col">
                      <p class="font-monospace text-white">
After
164
165
166
167
168
169
170
171
172
173
174
175
176
177
                      </div>
                    </div>
                  </div>
                  <noscript>
                    <div class="row mt-2">
                      <div class="col">
                        <p class="font-monospace text-white">
                          Clone URL: ${repo.cloneUrl}
                        </p>
                      </div>
                    </div>
                  </noscript>
                  <div class="row mt-2">
                    <div class="col">
                      <p class="font-monospace text-white">
js_templates/repo.ts:185
Before
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
          </div>
          <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>
            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>
          <script src="${nav.rootPath()}frontend/main-frontend.bundle.js"></script>
        </body>
      </html>
After
184
185
186


















187
188
          </div>
          <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="${nav.rootPath()}frontend/main-frontend.bundle.js"></script>
        </body>
      </html>