Add more markdown rendering

src/components/atoms/Box.svelte

@@ -43,7 +43,7 @@
         var(--box-color),
         var(--color-foreground) 90%
       );
-      --color-context: var(--box-border-color);
+      --color-context: var(--box-color);
 
       border: 5px solid var(--box-border-color);
       border-radius: 10px;

src/components/atoms/HorizontalRuler.svelte

@@ -0,0 +1,13 @@
+<hr class="ruler" />
+
+<style lang="scss">
+  @layer component {
+    .ruler {
+      display: block;
+      height: 5px !important;
+      border: none;
+      width: 100%;
+      background-color: var(--color-context);
+    }
+  }
+</style>

src/components/molecules/Markdown.svelte

@@ -6,6 +6,7 @@
   import List from "../atoms/List.svelte";
   import ListItem from "../atoms/ListItem.svelte";
   import HighlightedCode from "../atoms/HighlightedCode.svelte";
+  import HorizontalRuler from "../atoms/HorizontalRuler.svelte";
 
   type Props = {
     markdown: string;
@@ -17,7 +18,7 @@
 </script>
 
 {#snippet markdownToken(token)}
-  {#if token.type === "text"}
+  {#if token.type === "text" && !token.tokens}
     {token.text}
   {:else if token.type === "heading"}
     <Heading depth={token.depth}>
@@ -31,6 +32,8 @@
     <HighlightedCode language={token.language} code={token.text} />
   {:else if token.type === "space"}
     <Space />
+  {:else if token.type === "hr"}
+    <HorizontalRuler />
   {:else if token.type === "list"}
     <List ordered={token.ordered} start={token.start}>
       {#each token.items as item}
@@ -44,7 +47,11 @@
       {/each}
     </ListItem>
   {:else}
-    <pre>{JSON.stringify(token, null, 2)}</pre>
+    <h4 style="color: var(--color-red)">This needs to be rendered</h4>
+    <HighlightedCode
+      language="markdown"
+      code={JSON.stringify(token, null, 2)}
+    />
   {/if}
 {/snippet}
 

src/components/organisms/BlogPostTeaser.svelte

@@ -16,9 +16,9 @@
   <Box>
     {@const collection = post.attributes.collection.data?.attributes}
     {@const author = post.attributes.author.data?.attributes}
-    {@const tags = post.attributes.tags.data?.map((d) => d.attributes)}
+    {@const tags = post.attributes.tags.data?.map((d) => d?.attributes)}
-    {@const teaserImage = post.attributes.teaserImage.data.attributes}
+    {@const teaserImage = post.attributes.teaserImage.data?.attributes}
-    {@const imageData = {
+    {@const imageData = teaserImage && {
       altText: teaserImage.alternativeText,
       formats: [teaserImage.formats.small, teaserImage.formats.thumbnail],
     }}
@@ -35,7 +35,7 @@
           </h5>
         {/if}
         <h3>{post.attributes.title}</h3>
-        <span>by {author?.name}</span>,
+        <span>by {author?.name ?? "Anonymous Mouse"}</span>,
         <span title={formatDateAbsolute(post.attributes.publishedAt)}
           >{formatDateRelative(post.attributes.publishedAt)}</span
         >
@@ -48,7 +48,7 @@
           </div>
         {/if}
       </div>
-      {#if post.attributes.teaserImage?.data}
+      {#if imageData}
         <div class="teaser-image">
           <Thumbnail {imageData} />
         </div>

src/lib/cms/blog.ts

@@ -47,6 +47,7 @@ export async function getPosts(locale = "all"): Promise<BlogPostTeaser[]> {
 		endpoint: "blog-posts",
 		wrappedByKey: "data",
 		query: {
+			sort: ["publishedAt:DESC"],
 			populate: {
 				author: {
 					populate: ["slug", "name"],

src/routes/blog/+page.svelte

@@ -15,10 +15,20 @@
   <h1>Blog</h1>
 
   {#each data.posts ?? [] as post}
+    <div class="teaser-container">
       <BlogPostTeaser {post} />
+    </div>
   {/each}
 
   {#if data.error}
     <ErrorBox error={data.error} />
   {/if}
 </ContainerSlim>
+
+<style lang="scss">
+  @layer page {
+    .teaser-container {
+      margin: 2em 0;
+    }
+  }
+</style>

src/routes/blog/[slug]/+page.svelte

@@ -26,7 +26,7 @@
         <Box>
           <div class="head-text">
             <h1>{post.attributes.title}</h1>
-            <h3>by {author?.name}</h3>
+            <h3>by {author?.name ?? "Anonymous Mouse"}</h3>
             {#if collection}
               <h4>
                 in <a href={`/blog/collection/${collection.slug}`}