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",
|
"type": "module",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@sveltejs/enhanced-img": "^0.2.0",
|
"@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",
|
"slug": "test-post",
|
||||||
"title": "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 */
|
/** @param {number} index */
|
||||||
function loadPosts(index) {
|
function loadPosts(index) {
|
||||||
let page = Array.from(blog);
|
let page = Array.from(blog);
|
||||||
|
page = page.filter((_) => !_?.unlisted);
|
||||||
page.reverse();
|
page.reverse();
|
||||||
page = page.slice(index * 16, (index + 1) * 16);
|
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 {
|
return {
|
||||||
|
emojis,
|
||||||
slug: params.slug
|
slug: params.slug
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,10 @@
|
||||||
<script>
|
<script>
|
||||||
import { onMount } from 'svelte';
|
import { onMount } from 'svelte';
|
||||||
import SvelteMarkdown from 'svelte-markdown';
|
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
|
|
||||||
|
import { marked } from 'marked';
|
||||||
|
import { markedEmoji } from 'marked-emoji';
|
||||||
|
|
||||||
import blog from '$lib/blog.json';
|
import blog from '$lib/blog.json';
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
@ -9,10 +12,18 @@
|
||||||
let markdown = '';
|
let markdown = '';
|
||||||
let thisPost = blog.find((post) => post.slug === data.slug);
|
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 () => {
|
onMount(async () => {
|
||||||
const response = await fetch(`/blog/${data.slug}.md`);
|
const response = await fetch(`/blog/${data.slug}.md`);
|
||||||
const body = await response.text();
|
const body = await response.text();
|
||||||
markdown = body;
|
markdown = await marked.parse(body);
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -38,7 +49,13 @@
|
||||||
|
|
||||||
{#key markdown}
|
{#key markdown}
|
||||||
<article in:fade class="prose prose-sm sm:prose-base prose-invert">
|
<article in:fade class="prose prose-sm sm:prose-base prose-invert">
|
||||||
<SvelteMarkdown source={markdown}></SvelteMarkdown>
|
{@html markdown}
|
||||||
</article>
|
</article>
|
||||||
{/key}
|
{/key}
|
||||||
</div>
|
</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:
|
normal paragraph. For example:
|
||||||
|
|
||||||
Use the `printf()` function.
|
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