Create a stub web component for the locale picker

Refs #2044
PREreview · Oct 25, 2024 · b0f9f5c · b0f9f5c
1 parent 915a8f5
commit b0f9f5c
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 3 deletions.
diff --git a/assets/locale-picker.ts b/assets/locale-picker.ts
@@ -0,0 +1,5 @@
+export class LocalePicker extends HTMLElement {
+  static element = 'locale-picker' as const
+}
+
+window.customElements.define(LocalePicker.element, LocalePicker)
diff --git a/src/page.ts b/src/page.ts
@@ -117,6 +117,9 @@ export function page({
             ),
           )}
           ${scripts.map(file => html` <script src="${assets[file].path}" type="module"></script>`)}
+          ${canChooseLocale === true
+            ? html`<script src="${assets['locale-picker.js'].path}" type="module"></script>`
+            : ''}}
           ${typeof fathomId === 'string'
             ? html` <script src="https://cdn.usefathom.com/script.js" data-site="${fathomId}" defer></script>`
             : ''}
@@ -313,9 +316,11 @@ export function page({
                         <div>
                           <p>Choose your language:</p>
 
-                          <ul>
-                            <li><a href="#">English</a></li>
-                          </ul>
+                          <locale-picker>
+                            <ul>
+                              <li><a href="#">English</a></li>
+                            </ul>
+                          </locale-picker>
                         </div>
                       `
                     : ''}

diff --git a/webpack.config.cjs b/webpack.config.cjs
@@ -23,6 +23,7 @@ module.exports = (env, argv) => ({
     'favicon.ico': path.resolve('assets', 'favicon.ico'),
     'favicon.svg': path.resolve('assets', 'favicon.svg'),
     'html-editor': path.resolve('assets', 'html-editor.ts'),
+    'locale-picker': path.resolve('assets', 'locale-picker.ts'),
     'notification-banner': path.resolve('assets', 'notification-banner.ts'),
     'poll-redirect': path.resolve('assets', 'poll-redirect.ts'),
     'single-use-form': path.resolve('assets', 'single-use-form.ts'),