CUSTOM EMOJIS IN MARKDOWN

package.json

@@ -31,6 +31,8 @@
   "type": "module",
   "dependencies": {
     "@sveltejs/enhanced-img": "^0.2.0",
-    "svelte-markdown": "^0.4.1"
+    "marked": "^12.0.2",
+    "marked-alert": "^2.0.1",
+    "marked-emoji": "^1.4.0"
   }
 }

src/lib/blog.json

@@ -12,6 +12,7 @@
 	{
 		"slug": "test-post",
 		"title": "Test Post",
-		"image": "/img/blog/test-post.gif"
+		"image": "/img/blog/test-post.gif",
+		"unlisted": true
 	}
 ]

src/lib/emojis.json

@@ -0,0 +1,3 @@
+{
+	"wavesmiley": "/img/emoji/wavesmiley.gif"
+}

src/routes/blog/+page.svelte

@@ -16,6 +16,7 @@
 	/** @param {number} index */
 	function loadPosts(index) {
 		let page = Array.from(blog);
+		page = page.filter((_) => !_?.unlisted);
 		page.reverse();
 		page = page.slice(index * 16, (index + 1) * 16);
 

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

@@ -1,5 +1,13 @@
-export function load({ params }) {
+import customEmojis from '$lib/emojis.json';
+
+export async function load({ params }) {
+	const response = await fetch(
+		'https://raw.githubusercontent.com/cirroskais/discord-blobmoji/master/map.json'
+	);
+	let emojis = Object.assign(await response.json(), customEmojis);
+
 	return {
+		emojis,
 		slug: params.slug
 	};
 }

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

@@ -1,7 +1,10 @@
 <script>
 	import { onMount } from 'svelte';
-	import SvelteMarkdown from 'svelte-markdown';
 	import { fade } from 'svelte/transition';
+
+	import { marked } from 'marked';
+	import { markedEmoji } from 'marked-emoji';
+
 	import blog from '$lib/blog.json';
 
 	export let data;
@@ -9,10 +12,18 @@
 	let markdown = '';
 	let thisPost = blog.find((post) => post.slug === data.slug);
 
+	marked.use(
+		markedEmoji({
+			emojis: data.emojis,
+			renderer: (token) =>
+				`<img alt="${token.name}" src="${token.emoji}" class="inline-block !mt-0 !mb-[0.15rem] h-[1.35rem] marked-emoji-img">`
+		})
+	);
+
 	onMount(async () => {
 		const response = await fetch(`/blog/${data.slug}.md`);
 		const body = await response.text();
-		markdown = body;
+		markdown = await marked.parse(body);
 	});
 </script>
 
@@ -38,7 +49,13 @@
 
 	{#key markdown}
 		<article in:fade class="prose prose-sm sm:prose-base prose-invert">
-			<SvelteMarkdown source={markdown}></SvelteMarkdown>
+			{@html markdown}
 		</article>
 	{/key}
 </div>
+
+<style lang="postcss">
+	.marked-emoji-img {
+		@apply w-7 h-7;
+	}
+</style>

static/blog/hello-world.md

@@ -1 +1,3 @@
-There doesn't appear to be anything here yet...
+## Introduction
+
+Hello, I'm cirro! I'm 17, go by he/they, and like computers. I co-own MadHouse Labs, a developer conglomerate and friend group with over 70 members. I'm also a web designer, backend developer, and a ~~pretend~~ sysadmin.

static/blog/test-post.md

@@ -279,3 +279,34 @@ Unlike a pre-formatted code block, a code span indicates code within a
 normal paragraph. For example:
 
 Use the `printf()` function.
+
+## Custom Stuff
+
+### Alerts
+
+> test
+
+> [!NOTE]
+> Highlights information that users should take into account, even when skimming.
+
+> [!TIP]
+> Optional information to help a user be more successful.
+
+> [!IMPORTANT]
+> Crucial information necessary for users to succeed.
+
+> [!WARNING]
+> Critical content demanding immediate user attention due to potential risks.
+
+> [!CAUTION]
+> Negative potential consequences of an action.
+
+### Emojis
+
+Emojis are completely custom, and follow Discord's emoji mapping. The emoji pack currently being used is Blobmoji.
+
+:cat: :robot: :tulip: :calling: :flag_us: :heart: Hello, World!
+
+🐱 🤖 🌷 📲 🇺🇸 ❤️ Hello, World!
+
+:wavesmiley: Hello, World!