diff --git a/src/components/atoms/Box.svelte b/src/components/atoms/Box.svelte
index 63ccb2a..b8736af 100644
--- a/src/components/atoms/Box.svelte
+++ b/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;
diff --git a/src/components/atoms/HorizontalRuler.svelte b/src/components/atoms/HorizontalRuler.svelte
new file mode 100644
index 0000000..219d8b7
--- /dev/null
+++ b/src/components/atoms/HorizontalRuler.svelte
@@ -0,0 +1,13 @@
+
+
+
diff --git a/src/components/molecules/Markdown.svelte b/src/components/molecules/Markdown.svelte
index b98bafb..ab3ec21 100644
--- a/src/components/molecules/Markdown.svelte
+++ b/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 @@
{#snippet markdownToken(token)}
- {#if token.type === "text"}
+ {#if token.type === "text" && !token.tokens}
{token.text}
{:else if token.type === "heading"}
@@ -31,6 +32,8 @@
{:else if token.type === "space"}
+ {:else if token.type === "hr"}
+
{:else if token.type === "list"}
{#each token.items as item}
@@ -44,7 +47,11 @@
{/each}
{:else}
- {JSON.stringify(token, null, 2)}
+ This needs to be rendered
+
{/if}
{/snippet}
diff --git a/src/components/organisms/BlogPostTeaser.svelte b/src/components/organisms/BlogPostTeaser.svelte
index a48f2a6..26cab76 100644
--- a/src/components/organisms/BlogPostTeaser.svelte
+++ b/src/components/organisms/BlogPostTeaser.svelte
@@ -16,9 +16,9 @@
{@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 teaserImage = post.attributes.teaserImage.data.attributes}
- {@const imageData = {
+ {@const tags = post.attributes.tags.data?.map((d) => d?.attributes)}
+ {@const teaserImage = post.attributes.teaserImage.data?.attributes}
+ {@const imageData = teaserImage && {
altText: teaserImage.alternativeText,
formats: [teaserImage.formats.small, teaserImage.formats.thumbnail],
}}
@@ -35,7 +35,7 @@
{/if}
{post.attributes.title}
- by {author?.name},
+ by {author?.name ?? "Anonymous Mouse"},
{formatDateRelative(post.attributes.publishedAt)}
@@ -48,7 +48,7 @@
{/if}
- {#if post.attributes.teaserImage?.data}
+ {#if imageData}
diff --git a/src/lib/cms/blog.ts b/src/lib/cms/blog.ts
index 796535b..42e1aff 100644
--- a/src/lib/cms/blog.ts
+++ b/src/lib/cms/blog.ts
@@ -47,6 +47,7 @@ export async function getPosts(locale = "all"): Promise {
endpoint: "blog-posts",
wrappedByKey: "data",
query: {
+ sort: ["publishedAt:DESC"],
populate: {
author: {
populate: ["slug", "name"],
diff --git a/src/routes/blog/+page.svelte b/src/routes/blog/+page.svelte
index 19be4b1..f3afa97 100644
--- a/src/routes/blog/+page.svelte
+++ b/src/routes/blog/+page.svelte
@@ -15,10 +15,20 @@
Blog
{#each data.posts ?? [] as post}
-
+
+
+
{/each}
{#if data.error}
{/if}
+
+
diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
index 1140232..ac981ec 100644
--- a/src/routes/blog/[slug]/+page.svelte
+++ b/src/routes/blog/[slug]/+page.svelte
@@ -26,7 +26,7 @@
{post.attributes.title}
-
by {author?.name}
+
by {author?.name ?? "Anonymous Mouse"}
{#if collection}
in