link site header/footer to API data

src/components/SiteFooter/SiteFooter.svelte

@@ -5,7 +5,8 @@
   import LegalLinks from './LegalLinks.svelte';
   import Referrals from './Referrals/index.svelte';
 
-  import data from './data.json';
+  import starterData from './data.json';
+  import { onMount } from 'svelte';
 
   interface Referral {
     url: URL;
@@ -18,6 +19,26 @@
    * Custom referrals to other Reuters Graphics projects
    */
   export let referrals: Referral[] = [];
+
+  let data = starterData;
+
+  onMount(async () => {
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/footer/?' +
+          new URLSearchParams({
+            website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const footerData = (await response.json())[2];
+      // Dumb verification...
+      if (!footerData[0].company_description) return;
+      data = footerData;
+    } catch {
+      console.warn('Unable to fetch site footer data');
+    }
+  });
 </script>
 
 <footer

src/components/SiteHeader/SiteHeader.svelte

@@ -2,17 +2,37 @@
 <script lang="ts">
   import ReutersLogo from '../ReutersLogo/ReutersLogo.svelte';
   import NavBar from './NavBar/index.svelte';
-  import data from './data.json';
-  import { setContext } from 'svelte';
+  import starterData from './data.json';
+  import { onMount, setContext } from 'svelte';
   import { writable } from 'svelte/store';
   import MenuIcon from './svgs/Menu.svelte';
   import MobileMenu from './MobileMenu/index.svelte';
 
   setContext('nav-active-section', writable(null));
 
-  const { sections } = data[0];
+  let data = starterData;
+
+  $: sections = data[0].sections;
 
   let isMobileMenuOpen = false;
+
+  onMount(async () => {
+    try {
+      const response = await fetch(
+        'https://www.reuters.com/site-api/header/?' +
+          new URLSearchParams({
+            website: 'reuters',
+            outputType: 'json',
+          })
+      );
+      const headerData = (await response.json())[0];
+      // Dumb verification...
+      if (!headerData[0].sections) return;
+      data = headerData;
+    } catch {
+      console.warn('Unable to fetch site header data');
+    }
+  });
 </script>
 
 <header