Change infobox to be collapsed at first

src/components/molecules/Infobox.svelte

@@ -28,7 +28,7 @@
   </Box>
 {:else}
   <button class="hidden-button info-expand" onclick={toggleExpanded}>
-    <span class="arrow down-arrow">⌄</span><span class="info-text">
+    <span class="arrow collapsed-arrow">&gt;</span><span class="info-text">
       Info: {title}
     </span>
   </button>
@@ -62,19 +62,12 @@
         text-decoration: underline 0.2em var(--color-cyan);
       }
 
-      .down-arrow {
+      .collapsed-arrow {
         margin-right: 0.5em;
         position: relative;
         transition-duration: 1s;
-        top: 0.2em;
         color: var(--color-cyan);
       }
-
-      &:hover {
-        .down-arrow {
-          animation-name: pull-down;
-        }
-      }
     }
 
     .info-collapse {
@@ -102,18 +95,6 @@
     }
   }
 
-  @keyframes pull-down {
-    0% {
-      top: 0.2em;
-    }
-    50% {
-      top: 0.5em;
-    }
-    100% {
-      top: 0.2em;
-    }
-  }
-
   @keyframes pull-up {
     0% {
       top: 0.1em;

src/components/organisms/BlogPostContent.svelte

@@ -14,16 +14,14 @@
 </script>
 
 <div class="post-content">
-  {#if content.__component === "content.text-markdown"}
+  {#if content.__component === "content.paragraph" || content.__component === "content.text-markdown"}
-    {#if content.type === "paragraph"}
+    <Box>
-      <Box>
+      <Markdown markdown={content.value} />
-        <Markdown markdown={content.value} />
+    </Box>
-      </Box>
+  {:else if content.__component === "content.infobox"}
-    {:else if content.type === "infobox"}
+    <Infobox title={content.title}>
-      <Infobox title="title">
+      <Markdown markdown={content.value} />
-        <Markdown markdown={content.value} />
+    </Infobox>
-      </Infobox>
-    {/if}
   {:else if content.__component === "content.image"}
     {@const imageData = content.value.data.attributes}
     <Image

src/lib/cms/blog.ts

@@ -37,9 +37,10 @@ type BlogPostContentTemplate<S, T> = {
 
 export type BlogPostContentEntry =
 	| BlogPostContentTemplate<
-			"content.text-markdown",
+			"content.paragraph" | "content.text-markdown",
-			{ value: string; type: "paragraph" | "infobox" }
+			{ value: string }
 	  >
+	| BlogPostContentTemplate<"content.infobox", { value: string; title: string }>
 	| BlogPostContentTemplate<"content.image", { value: { data: StrapiImage } }>;
 
 export async function getPosts(locale = "all"): Promise<BlogPostTeaser[]> {

src/lib/cms/client.ts

@@ -34,7 +34,6 @@ export default async function fetchApi<T>({
 	if (query) {
 		url.search = qs.stringify(query);
 	}
-	console.log({ url });
 	const res = await fetch(url.toString(), {
 		headers: {
 			Authorization: `Bearer ${STRAPI_CMS_API_KEY}`,