fixes

package.json

@@ -19,6 +19,7 @@
 		"remark-github": "^11.2.4",
 		"svelte": "^3.54.0",
 		"svelte-check": "^2.9.2",
+		"svelte-preprocess-import-assets": "^1.0.1",
 		"tslib": "^2.4.1",
 		"typescript": "^4.9.3",
 		"vite": "^4.0.0"

src/lib/components/ArticleDescription.svelte

@@ -2,7 +2,7 @@
 	export let description: string;
 	export let slug = '';
 
-	const href = slug && `/posts/${slug}`;
+	const href = slug && `./posts/${slug}`;
 </script>
 
 <p>

src/lib/components/ArticleMeta.svelte

@@ -1,15 +1,18 @@
 <script lang="ts">
+	import load from "cds-design"
 	import type {Author} from "$lib/helpers"
 	export let author: Author;
 	export let date: string;
 
 	const formattedDate = new Date(date).toDateString();
+
+	load("avatar")
 </script>
 
 <p>
 	<a href={author.href} class="author" title={author.tooltip}>
 			<!-- <img src={author.pic} alt={author.name}> -->
-			<cds-avatar src={author.pic}></cds-avatar>
+			<cds-avatar src={author.pic} active></cds-avatar>
 			<span class="author-name">
 				{author.name}
 			</span>

src/lib/components/ArticleTitle.svelte

@@ -7,7 +7,7 @@
 		.replace(/[^a-zA-Z ]/g, '')
 		.replace(/\s/g, '-');
 
-	const href = slug ? `/posts/${slug}` : '#' + id;
+	const href = slug ? `./posts/${slug}` : '#' + id;
 </script>
 
 {#if slug}

src/lib/helpers/postURL.ts

@@ -4,7 +4,7 @@ export function getPostURL(slug: string, title: string) {
         .replace(/[^a-zA-Z ]/g, '')
         .replace(/\s/g, '-');
 
-    const href = slug ? `/posts/${slug}` : '#' + id;
+    const href = slug ? `./posts/${slug}` : '#' + id;
 
     return href;
 }

src/posts/launching-continuum-design-system.md

@@ -4,7 +4,7 @@ description: 'Continuum Design System is a design system for building web applic
 author: 'rajaniraiyn'
 date: '2023-07-14'
 published: true
-cover: '/covers/introducing-continuum-design-system.png'
+cover: '/covers/launching-continuum-design-system.jpg'
 ---
 
 Are you looking for a design system that can help you create beautiful, consistent, and accessible web applications? Do you want to use a framework that is based on web standards, modular components, and open source principles? If yes, then you should check out Continuum Design System (CDS), a new and innovative UI framework for web development.

src/routes/+page.svelte

@@ -7,7 +7,7 @@
 	import ArticleMeta from '$lib/components/ArticleMeta.svelte';
 	import ArticleDescription from '$lib/components/ArticleDescription.svelte';
 
-	import { getPostURL, getAuthor } from '$lib/helpers';
+	import { getPostURL, getAuthor, getCoverImageURL } from '$lib/helpers';
 
 	export let data: PageData;
 </script>
@@ -24,6 +24,8 @@
 				<p>loading...</p>
 			{:then author}
 			<ArticleMeta {author} {date} />
+			{:catch e}
+				<span>{author}</span>
 			{/await}
 			<ArticleDescription {description} {slug} />
 		</div>

svelte.config.js

@@ -2,16 +2,26 @@ import { mdsvex } from 'mdsvex';
 import mdsvexConfig from './mdsvex.config.js';
 import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/kit/vite';
+import { importAssets } from 'svelte-preprocess-import-assets'
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
 	extensions: ['.svelte', ...mdsvexConfig.extensions],
 
 	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
 	// for more information about preprocessors
-	preprocess: [vitePreprocess(), mdsvex(mdsvexConfig)],
+	preprocess: [
+		vitePreprocess(),
+		importAssets({
+			importPrefix: "./"
+		}),
+		mdsvex(mdsvexConfig)
+	],
 
 	kit: {
+		paths: {
+			relative: true,
+		},
 		adapter: adapter({ strict: false })
 	}
 };