Fixed relative path

content/posts/what-is-local-first.md → content/blogs/what-is-local-first.md

@@ -33,7 +33,7 @@ Editing a Google Doc with several people looks and feels like magic - we can see
 All of our data is stored in the cloud, and it is easy to collaborate and work on files this way… until it isn’t.
 
 In March 2021, customers of OVH Cloud who stored their files in the Strasbourg data center discovered this firsthand when their files went up in smoke:
-![OVH datacenter on fire](https://ark-builders.github.io/website2/images/ovh_fire.jpg)
+![OVH datacenter on fire](/images/ovh_fire.jpg)
 
 Ok, that’s a super extreme example - and everyone should save important files and deployments on multiple machines - whether local or cloud. But users have been locked out of Google Accounts. When you stop paying for BigCorp Cloud, how long until your data is removed? What if your card has expired, and the emails are going to a former employee's e-mail account? Will you lose your files forever? At a previous position, months of work was lost when a colleague decided that a specific tenant was no longer in use, and deleted it without looking at usage, or asking the team if the data on the server was still needed.
 

src/lib/components/Blog.svelte

@@ -1,6 +1,7 @@
 <script>
 	import { base } from '$app/paths'
 	import Author from '$lib/components/Author.svelte'
+	import RenderMarkdown from '$lib/components/RenderMarkdown.svelte'
 	import { config } from '$lib/config'
 
 	export let post
@@ -64,8 +65,9 @@
 				<div
 					class="divide-y divide-gray-200 dark:divide-gray-700 xl:col-span-3 xl:row-span-2 xl:pb-0"
 				>
-					<div class="prose dark:prose-dark max-w-none pb-8 pt-10">
-						{@html post.content}
+					<div class="dark:prose-dark prose max-w-none pb-8 pt-10">
+						<!-- {@html post.content} -->
+						<RenderMarkdown content={post.content} />
 					</div>
 				</div>
 				<footer class="">

src/lib/components/RenderMarkdown.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { base } from '$app/paths'
+
+	export let content = ''
+
+	function transformImagePaths(htmlContent: string) {
+		return htmlContent.replace(/(<img[^>]+src=")([^"]+)(")/gi, (match, prefix, src, suffix) => {
+			// Skip absolute URLs
+			if (src.startsWith('http') || src.startsWith('//')) {
+				return match
+			}
+
+			// Prepend base path if not already present
+			const transformedSrc = src.startsWith(base) ? src : `${base}${src}`.replace(/\/\//, '/')
+			return `${prefix}${transformedSrc}${suffix}`
+		})
+	}
+
+	$: transformedContent = transformImagePaths(content)
+</script>
+
+{@html transformedContent}

src/utils/entries.ts

@@ -10,7 +10,7 @@ if (browser) {
 
 // we have to have separate functions for this because Vite only accepts literal strings for import.meta.glob
 const getPosts = () => {
-	return Object.entries(import.meta.glob('/content/posts/**/*.md', { eager: true }))
+	return Object.entries(import.meta.glob('/content/blogs/**/*.md', { eager: true }))
 }
 
 const getIssues = () => {