CUSTOM EMOJIS IN MARKDOWN
This commit is contained in:
parent
c9932bc120
commit
e2458925eb
10 changed files with 72 additions and 7 deletions
BIN
bun.lockb
BIN
bun.lockb
Binary file not shown.
|
@ -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"
|
||||
}
|
||||
}
|
||||
|
|
|
@ -12,6 +12,7 @@
|
|||
{
|
||||
"slug": "test-post",
|
||||
"title": "Test Post",
|
||||
"image": "/img/blog/test-post.gif"
|
||||
"image": "/img/blog/test-post.gif",
|
||||
"unlisted": true
|
||||
}
|
||||
]
|
||||
|
|
3
src/lib/emojis.json
Normal file
3
src/lib/emojis.json
Normal file
|
@ -0,0 +1,3 @@
|
|||
{
|
||||
"wavesmiley": "/img/emoji/wavesmiley.gif"
|
||||
}
|
|
@ -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);
|
||||
|
||||
|
|
|
@ -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
|
||||
};
|
||||
}
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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!
|
||||
|
|
BIN
static/img/emoji/wavesmiley.gif
Normal file
BIN
static/img/emoji/wavesmiley.gif
Normal file
Binary file not shown.
After Width: | Height: | Size: 434 KiB |
Loading…
Reference in a new issue