demonstrates how Markdown formatting can work inside Bluesky's inline rich text facet system
bluesky-markdown-example.externdefs.workers.dev
mary.my.id
typescript
bluesky
atcute
1<script setup lang="ts">
2import { computed, shallowRef } from 'vue';
3
4import { tokenize } from '@atcute/bluesky-richtext-parser';
5
6import RichtextRenderer from './components/RichtextRenderer';
7import { tokenToRichText } from './utils/token-to-richtext';
8
9const source = shallowRef<string>(`*begs @bsky.app to add **__Markdown formatting__***`);
10
11// Bluesky could've rolled with something like `simple-markdown` here where they
12// could easily customize what kind of Markdown rules are allowed, in my case
13// though I'm rolling my own.
14const tokens = computed(() => tokenize(source.value));
15const richtext = computed(() => tokenToRichText(tokens.value));
16</script>
17
18<template>
19 <div class="grid h-dvh grid-cols-2 grid-rows-2">
20 <textarea v-model="source" rows="6" class="resize-none p-4 text-sm" />
21
22 <textarea
23 :value="JSON.stringify(tokens, null, 2)"
24 readonly
25 rows="6"
26 class="resize-none p-4 font-mono text-sm"
27 />
28
29 <textarea
30 :value="JSON.stringify(richtext, null, 2)"
31 readonly
32 rows="6"
33 class="resize-none p-4 font-mono text-sm"
34 />
35
36 <RichtextRenderer :value="richtext" class="p-4" />
37 </div>
38</template>