🐛 Fix HierarchyRequestError (#766)

Author: KATO-Hiro

src/lib/components/ExternalLinkWrapper.svelte

@@ -5,23 +5,23 @@
   export let description: string;
   export let textSize: string = '';
   export let textColorInDarkMode = 'dark:text-primary-500';
-  export let textOverflow = '';
-  export let iconSize = 4;
+  export let textOverflow: string = '';
+  export let iconSize: number = 4;
 </script>
 
 <a
   href={url}
-  class="inline-flex items-center font-medium {textSize} text-primary-600 hover:underline {textColorInDarkMode}"
+  class={`inline-flex items-center font-medium ${textSize} text-primary-600 hover:underline ${textColorInDarkMode}`}
   target="_blank"
   rel="noreferrer"
 >
-  <div class="{textOverflow} truncate">
+  <span class={`${textOverflow} truncate`}>
     {description}
-  </div>
+  </span>
 
-  <div class="ml-1.5">
-    <ExternalLinkIcon size="w-{iconSize} h-{iconSize}" />
-  </div>
+  <span class="ml-1.5">
+    <ExternalLinkIcon size={`w-${iconSize} h-${iconSize}`} />
+  </span>
 </a>
 
 <!-- See: -->

src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <!-- See: -->
 <!-- https://lucia-auth.com/guidebook/sign-in-with-username-and-password/sveltekit/ -->
 <script lang="ts">
-  import { Heading, P, Button, Carousel } from 'flowbite-svelte';
+  import { Heading, Button, Carousel } from 'flowbite-svelte';
   // @ts-ignore
   import ArrowRightOutline from 'flowbite-svelte-icons/ArrowRightOutline.svelte';
 
@@ -36,11 +36,11 @@
       {PRODUCT_CATCH_PHRASE}
     </Heading>
 
-    <P class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-300">
+    <p class="mb-6 text-lg lg:text-xl sm:px-16 xl:px-48 dark:text-gray-300">
       【非公式】
       <ExternalLinkWrapper url={ATCODER_BASE_URL} description="AtCoder" />
       上の問題について、取組み状況を記録していくサイトです。 各問題が細かく難易度付けされており、必要な知識を段階的に習得できます。
-    </P>
+    </p>
 
     <div class="flex flex-wrap justify-center items-center">
       <Button href={WORKBOOKS_PAGE} class="w-full sm:w-5/6 md:w-1/3 m-2">問題集へ</Button>