semua source code bisa lihat di github

ide awal

saya memiliki ide awal bagimana jika blog tanpa harus koneksi di database (supaya ga report) dan ternyata bisa menggunakan markdown di source code langsung

svelte dan markdown

setalah saya mencari di google, saya menemukan library yang pas untuk di pakai yaitu mdsvex

alesan saya memilih mdsvex karena mdsvex bisa komponent/components svelte dan juga bisa menggunakan plugin dari remark.js

seperti ini:

library tambahan

• mdsvex untuk markdown
• remark-collapse untuk plugin collapse di markdown
• remark-emoji untuk menggunakn emoji di markdown
• @tailwindcss/typography untuk typography tailwindcss

implementasi markdown di svelte

svelte memiliki library yang cukup sedikit di banding react jadi harus memilih dengan seksama mana yang sudah cocok dengan sveltekit

install dan setup mdsvex

npm i -D mdsvex

ubah config svelte.config.js

const config = {
 	extensions: ['.svelte', '.md',".svx"], //tambah extensions '.md',".svx" suapay bisa ke baca
	preprocess: [vitePreprocess(),
// masukan mdsvex ke preprocess
     mdsvex({
		extensions: ['.md'],
		remarkPlugins:[ // untuk memsukan plugin remark
		    emoji, // plugin remark-emoji
		    collapse // plugin remark-collapse
	    ]
    })
    ],
    ......
};

untuk memsukan menggunakan remarkPlugins atau rehypePlugins tergantung plugin

structure folder

...
└── 📁src
    └── 📁lib
        └── 📁components
        └── 📁posts // untuk menyimpan file markdown
        └── utils.ts
    └── 📁routes
        ...
        └── 📁blog
            └── 📁[post]
                └── +page.svelte
                └── +page.ts
    └── 📁style
        └── prism.css // highlight dari prismjs
    ....

pada file +page.svelte di folder [post]

export const load:PageLoad  = async ({ params }) => {
	try {
		const post = await import(`$lib/posts/${params.post}.md`) //mengembil file markdown
		return {
			PostContent: post.default,
			meta: { ...post.metadata, slug: params.post }
		}
	} catch(err) {
		error(404, "not found");
	}
}

pada file +page.svelte

<script lang="ts">
  ...
	let { data }: { data: PageData } = $props(); //menangkap data dari +page.svelte
	...
	const { PostContent } = data;
</script>

...

<div class="container mx-auto flex w-screen flex-col space-y-2">
	...
	<article class="prose prose-sm z-10 mt-2 min-w-full max-w-full md:prose-base">
		<PostContent />
	</article>
	...
</div>

highlight untuk code

di mdsvex sudah highlight by default tapi kita harus memsukan css manual. by default mdsvex menggunkan prismjs untuk highlightnya dengan cara download css prismjs dan import ke app.css

/* app.css */
@import url(./pathto/prism.css);

list blog di halaman awal

untuk ini bisa di lihat di github Discussions