wip

webapp/src/lib/components/MarkdownRenderer.svelte

@@ -5,6 +5,8 @@
 	import InternalLink from '$lib/marked/renderers/InternalLink.svelte';
 	import { marked } from 'marked';
 	import extensions from '$lib/marked/extensions';
+	import Link from '$lib/marked/renderers/Link.svelte';
+	import Tag from '$lib/marked/renderers/Tag.svelte';
 
 	export let plaintext: string;
 
@@ -17,10 +19,17 @@
 <div
 	id="md-box"
 	class="prose max-w-none prose-li:my-0 prose-ul:mt-0 prose-ol:mt-0 leading-7
-prose-strong:font-bold"
+prose-strong:font-bold prose-a:font-normal prose-blockquote:font-normal prose-blockquote:not-italic
+prose-blockquote:first:before:content-['']"
 >
 	<SvelteMarkdown
-		renderers={{ heading: Heading, list: List, 'internal-link': InternalLink }}
+		renderers={{
+			heading: Heading,
+			list: List,
+			link: Link,
+			'internal-link': InternalLink,
+			tag: Tag
+		}}
 		source={plaintext}
 		{options}
 	/>

webapp/src/lib/marked/extensions.ts

@@ -7,10 +7,9 @@ const InternalLinkExtension = {
 	tokenizer(src: string) {
 		const match = src.match(/^\[\[([^\n]+?)]\]/);
 		if (match) {
-			console.log(match);
 			return {
 				type: 'internal-link',
-				raw: match[0],
+				raw: match[0].trim(),
 				text: match[1].trim()
 			};
 		}
@@ -18,4 +17,26 @@ const InternalLinkExtension = {
 	}
 };
 
-export default [InternalLinkExtension];
+const TagExtension = {
+	name: 'tag',
+	level: 'inline',
+	start(src: string) {
+		return src.match(/#/)?.index;
+	},
+	tokenizer(src: string) {
+		const match = src.match(/^#([\w/]+)[\W\s]/);
+		if (match) {
+			console.log(match);
+			return {
+				type: 'tag',
+				raw: match[0].trim(),
+				text: match[1].trim()
+			};
+		}
+		return false;
+	}
+};
+
+export default [InternalLinkExtension, TagExtension];
+
+// ^\#([\w\/]+)\W*

webapp/src/lib/marked/renderers/InternalLink.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
-	import Link from 'svelte-icons/io/IoIosLink.svelte';
+	import FaRegQuestionCircle from 'svelte-icons/fa/FaRegQuestionCircle.svelte';
 
 	export let text: string;
 </script>
 
-<span class="text-[#705dcf] underline cursor-not-allowed">
+<dfn class="not-italic" title="Internal link">
-	<dfn class="not-italic" title="Internal links are not shared."> {text}</dfn></span
+	<span class="underline cursor-not-allowed inline-flex items-center">
->
+		<span class="text-[#705dcf] opacity-50">{text}</span>
+		<span class="h-3 mb-2 text-neutral-400 ml-0.5"><FaRegQuestionCircle /></span>
+	</span>
+</dfn>

webapp/src/lib/marked/renderers/Link.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+	export let href = '';
+	export let title: string;
+	// import LinkIcon from 'svelte-icons/fa/FaExternalLinkSquareAlt.svelte';
+	// import LinkIcon from 'svelte-icons/fa/FaLink.svelte';
+	import LinkIcon from 'svelte-icons/md/MdOpenInNew.svelte';
+</script>
+
+<!-- <a {href} {title}><slot /></a> -->
+
+<span class="underline cursor-not-allowed inline-flex items-center font-normal">
+	<a {href} {title} class="text-[#705dcf]"><slot /></a>
+	<span class="h-3 mb-2 text-neutral-400 ml-0.5"><LinkIcon /></span>
+</span>

webapp/src/lib/marked/renderers/Tag.svelte

@@ -0,0 +1,3 @@
+<span class="underline text-neutral-500 cursor-pointer">
+	<slot />
+</span>

webapp/src/routes/note/[id].svelte

@@ -38,7 +38,7 @@
 <div class="max-w-2xl mx-auto">
 	<p class="mb-4 text-sm flex justify-between text-neutral-500">
 		<span class="uppercase">Shared ?? days ago</span>
-		<button class="flex gap-2 uppercase items-center">
+		<button class="flex gap-1.5 uppercase items-center">
 			<span>Raw Markdown</span>
 			<span class="h-6"><LogoMarkdown /></span>
 		</button>