Better approach: use IIFE

Qiskit · Apr 20, 2023 · 312a88d · 312a88d
1 parent 599f0d4
commit 312a88d
Show file tree

Hide file tree

Showing 5 changed files with 662 additions and 670 deletions.
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -44,15 +44,14 @@ We use web components from https://github.com/Qiskit/web-components to include c
 To update the top nav bar web component:
 
 1. In https://github.com/Qiskit/web-components, run `npm install` then `npm run build`.
-2. There should be a file created at the root of the repository called `experimental-bundled-ui-shell.js`. Copy its contents into the file `js/web-components/top-nav-bar.js.jinja`.
-3. Add back `{% raw %}` to the very top of the file and `{% endraw %}` to the very end. 
-4. Build the example docs to ensure everything works.
+2. There should be a file created at the root of the repository called `experimental-bundled-ui-shell.js`. Copy its contents into the file `js/web-components/top-nav-bar.js`. 
+3. Build the example docs to ensure everything works.
 
 If you want to add a new web component:
 
 1. Work with the web components repository to set up `npm run build` to generate a single JavaScript file.
-2. Add the file contents to the `js/web-components/` folder. Add `{% raw %}` to the very top of the file and `{% endraw %}` to the very end.
-3. Add to the HTML template (e.g. `layout.html`) a line like `<script type="module">{% include "static/js/web-components/top-nav-bar.js.jinja" %}</script>` in the `<head>`.
+2. Add the file contents to the `js/web-components/` folder.
+3. Add to the HTML template (e.g. `layout.html`) a line like `<script src="{{ pathto('_static/js/web-components/my-component.js', 1) }}"></script>` in the `<head>`.
 4. Build the example docs to ensure everything works.
 5. Update this guide with specific instructions for the web component.
 

diff --git a/qiskit_sphinx_theme/pytorch_base/layout.html b/qiskit_sphinx_theme/pytorch_base/layout.html
@@ -31,7 +31,7 @@
   <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}" type="text/css" />
   {%- endfor -%}
 
-  <script type="module">{% include "static/js/web-components/top-nav-bar.js.jinja" %}</script>
+  <script src="{{ pathto('_static/js/web-components/top-nav-bar.js', 1) }}"></script>
 
   <!-- SEGMENT ANALYTICS -->
   {%- if analytics_enabled %}

diff --git a/qiskit_sphinx_theme/pytorch_base/static/css/theme.css b/qiskit_sphinx_theme/pytorch_base/static/css/theme.css
diff --git a/qiskit_sphinx_theme/pytorch_base/static/js/web-components/top-nav-bar.js b/qiskit_sphinx_theme/pytorch_base/static/js/web-components/top-nav-bar.js
diff --git a/qiskit_sphinx_theme/pytorch_base/static/js/web-components/top-nav-bar.js.jinja b/qiskit_sphinx_theme/pytorch_base/static/js/web-components/top-nav-bar.js.jinja