Remove top-level await from tools data

src/lib/components/SiteSummary.svelte

@@ -2,9 +2,14 @@
   import name from '$lib/data/Name'
   import urls from '$lib/data/Urls'
   import SiteTools from './SiteTools.svelte'
+
+  async function load() {
+    const tools = await (await import('$lib/data/SiteTools')).default()
+    return tools;
+  }
 </script>
 <div class="site-summary">
-  {#await import('$lib/data/SiteTools') then tools}
+  {#await load() then tools}
     <div class="site-summary-heading">
       <h2>Hi, I'm {name.first}</h2>
     </div>
@@ -14,7 +19,7 @@
         I've written code used by millions of people.
         This site in particular is built using:
       </p>
-      <SiteTools tools={tools.default}></SiteTools>
+      <SiteTools tools={tools}></SiteTools>
       <p>
         You can check out the source code on <a href="{urls.githubProjectRepo.full}" target="_blank">GitHub</a>. 
         PR's are welcome 🤠

src/lib/components/SiteTools.stories.ts

@@ -12,7 +12,7 @@ type Story = StoryObj<typeof meta>;
 
 export const Default: Story = {};
 
-const tools = (await import ('../data/SiteTools')).default;
+const tools = await (await import ('../data/SiteTools')).default();
 export const Hydrated: Story = {
   args: {
     tools: tools

src/lib/components/SiteTools.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
+	import type SiteTools from '$lib/types/SiteTools';
   import './sitetools.css';
   import Table from './Table.svelte'
   import TableRow from './TableRow.svelte'
   import TableRowItem from './TableRowItem.svelte'
-  export let tools: { title: string, href: string, purpose: string, svg: string }[];
+  export let tools: SiteTools;
 </script>
 
 {#if tools}

src/lib/data/SiteTools.ts

@@ -1,11 +1,13 @@
-async function load() {
+import type SiteTools from '../types/SiteTools';
+
+async function load(): Promise<SiteTools> {
   const svelteLogo = await import(`$lib/assets/sveltelogo.svg`);
   const typescriptLogo = await import('$lib/assets/tslogo.svg');
   const htmlLogo = await import('$lib/assets/htmllogo.svg');
   const cssLogo = await import('$lib/assets/csslogo.svg');
   const doLogo = await import ('$lib/assets/dologo.svg');
   const storybookLogo = await import('$lib/assets/storybooklogo.svg');
-  const tools: { title: string, href: string, purpose: string, svg: string}[] =  [
+  const tools: SiteTools =  [
     { title: "Svelte", href: "https://svelte.dev", purpose: "As a front-end component framework", svg: svelteLogo.default },
     { title: "Typescript", href: "https://www.typescriptlang.org", purpose: "To make Javascript more fun to write", svg: typescriptLogo.default},
     { title: "HTML", href: "https://html.spec.whatwg.org", purpose: "For obvious reasons", svg: htmlLogo.default},
@@ -21,6 +23,5 @@ async function load() {
   return tools;
 }
 
-const tools = await load();
+export default load;
 
-export default tools;

src/lib/types/SiteTools.ts

@@ -4,3 +4,5 @@ type SiteTools = {
   purpose: string,
   svg: string
 }[]
+
+export default SiteTools;