Add a nasty workaround for loading ONS Design System on each route

A.M.A.
ONSdigital · Nov 24, 2021 · 14c0312 · 14c0312
1 parent aad865c
commit 14c0312
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 5 deletions.
diff --git a/src/routes/categories.svelte b/src/routes/categories.svelte
@@ -6,6 +6,11 @@
   import Feedback from "./../ui/Feedback.svelte";
 </script>
 
+<svelte:head>
+  <title>2021 Census Data Atlas Categories</title>
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
+</svelte:head>
+
 <BasePage>
   <span slot="header">
     <Header

diff --git a/src/routes/components.svelte b/src/routes/components.svelte
@@ -61,6 +61,11 @@
   let selectedCode = "QS302EW002";
 </script>
 
+<svelte:head>
+  <title>2021 Census Data Atlas Components</title>
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
+</svelte:head>
+
 <BasePage {serviceTitle} {description}>
   <DesignSystemPanel
     title="Default header"

diff --git a/src/routes/data/[categoryId].svelte b/src/routes/data/[categoryId].svelte
@@ -18,6 +18,11 @@
   ];
 </script>
 
+<svelte:head>
+  <title>2021 Census Data Atlas Category</title>
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
+</svelte:head>
+
 <BasePage>
   <span slot="header">
     <DataHeader tableName={categoryId} />

diff --git a/src/routes/data/[categoryId]/locations/[locationId].svelte b/src/routes/data/[categoryId]/locations/[locationId].svelte
@@ -28,6 +28,11 @@
   $: appIsInitialised, $appIsInitialised && fetchCensusData("QS119EW005", null);
 </script>
 
+<svelte:head>
+  <title>2021 Census Data Atlas Category & Location</title>
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
+</svelte:head>
+
 <BasePage>
   <span slot="header">
     <DataHeader tableName={categoryId} location={locationId} />

diff --git a/src/routes/design-system.svelte b/src/routes/design-system.svelte
@@ -44,6 +44,11 @@
   let autosuggestValue = "";
 </script>
 
+<svelte:head>
+  <title>2021 Census Data Atlas Design System</title>
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
+</svelte:head>
+
 <ONSSkipLink />
 <ONSExternalHeaderWithDescription {serviceTitle} description={serviceDescription} />
 <ONSSkipLink />

diff --git a/src/routes/index.svelte b/src/routes/index.svelte
@@ -13,6 +13,7 @@
 <svelte:head>
   <title>2021 Census Data Atlas</title>
   <meta name="description" content="Explore 2021 census data for England and Wales at a neighbourhood level." />
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
 </svelte:head>
 
 <BasePage>

diff --git a/src/routes/locations/[locationId].svelte b/src/routes/locations/[locationId].svelte
@@ -19,6 +19,11 @@
   ];
 </script>
 
+<svelte:head>
+  <title>2021 Census Data Atlas Location</title>
+  <script defer src="https://cdn.ons.gov.uk/sdc/design-system/44.1.2/scripts/main.js"></script>
+</svelte:head>
+
 <BasePage>
   <span slot="header">
     <DataHeader location={locationId} />

diff --git a/src/ui/BasePage.svelte b/src/ui/BasePage.svelte
@@ -1,14 +1,9 @@
 <script>
-  import { onMount } from "svelte";
   import ONSHeaderLogoLarge from "./ons/svg/ONSHeaderLogoLarge.svelte";
   import ONSHeaderLogoSmall from "./ons/svg/ONSHeaderLogoSmall.svelte";
   import ONSPhaseBanner from "./ons/ONSPhaseBanner.svelte";
 
   let hasMap = $$slots.map ? "ons-page--has-map" : "";
-
-  onMount(async () => {
-    await import("./../../node_modules/@ons/design-system/scripts/main");
-  });
 </script>
 
 <div class="ons-page {hasMap}">