add rendering

webapp/src/lib/components/MarkdownRenderer.test.ts

@@ -5,20 +5,72 @@ import MarkdownRenderer from './MarkdownRenderer.svelte';
 
 const TEST_FILES_DIR = 'test/markdown/';
 
-describe('Callout rendering', () => {
+// rendering links
-	it('Renders callout correctly ', async () => {
+describe('rendering [[internal]] links', async () => {
-		const plaintext = await readMd('callout.md');
+	const plaintext = await readMd('links.md');
 
+	it('Renders [[links]] correctly', async () => {
 		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Normal internal link$/);
+		expect(linkEl).toBeInTheDocument();
+	});
 
-		// Expect title to be correct.
+	it('Renders [[links|with alias]] correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Link with alias$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+
+	it('Renders [[links#heading]] correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Page with headings > heading A$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+
+	it('Renders [[links#heading|with alias]] correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Link with heading alias$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+
+	it('Renders [[links#heading|with alias#fakeheading]] correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Link with heading alias#false heading$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+
+	it('Does not render [[]] empty links', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const textEl = await screen.findByText('[[]]', { exact: false });
+		expect(textEl).toBeInTheDocument();
+	});
+});
+
+describe('rendering [md style](links)', async () => {
+	const plaintext = await readMd('links.md');
+
+	it('Renders URL-encoded internal links correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Classic internal link (URL encoded)$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+});
+
+describe('Rendering callouts', async () => {
+	const plaintext = await readMd('callout.md');
+
+	it('Renders callout title correctly ', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
 		const titleEl = await screen.findByText('Don!t forget to account for non-letters! //fsd \\n');
 		expect(titleEl).toBeInTheDocument();
 		expect(titleEl).toHaveClass('callout-title');
+	});
 
-		// Expect content to be correct.
+	it('Renders callout content correctly ', async () => {
-		expect(await screen.findByText('Sample text.')).toBeInTheDocument();
+		render(MarkdownRenderer, { plaintext: plaintext });
-		expect((await screen.findByText('Sample text.')).parentNode).toHaveClass('callout-content');
+		const contentEl = await screen.findByText('Sample text.');
+		expect(contentEl).toBeInTheDocument();
+		expect(contentEl.parentElement).toHaveClass('callout-content');
 	});
 });
 

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

@@ -2,11 +2,24 @@
 	import FaRegQuestionCircle from 'svelte-icons/fa/FaRegQuestionCircle.svelte';
 
 	export let text: string;
+	export let displayText: string;
+
+	if (!displayText) {
+		const aliasMatch = text.match(/^(?:.+)\|(.*)$/);
+		const headerMatch = text.match(/^(.[^|]+)\#(.[^|]*)$/);
+		if (aliasMatch) {
+			displayText = aliasMatch[1];
+		} else if (headerMatch) {
+			displayText = `${headerMatch[1]} > ${headerMatch[2]}`;
+		} else {
+			displayText = text;
+		}
+	}
 </script>
 
 <dfn class="not-italic" title="Internal link">
 	<span class="underline cursor-not-allowed inline-flex items-center">
-		<span class="text-[#705dcf] opacity-50">{text}</span>
+		<span class="text-[#705dcf] opacity-50">{displayText}</span>
 		<span class="h-3 mb-2 text-zinc-400 ml-0.5"><FaRegQuestionCircle /></span>
 	</span>
 </dfn>

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

@@ -1,8 +1,6 @@
 <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>
 

webapp/src/routes/about.svelte

@@ -4,7 +4,6 @@
 
 <div class="prose dark:prose-invert">
 	<h2>About</h2>
-
 	<p>
 		Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
 		labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco

webapp/test/markdown/links.md

@@ -0,0 +1,20 @@
+# All link types.
+
+## Internal links with [[brackets]]
+
+- [[Normal internal link]]
+- [[Aliased internal link|Link with alias]] 
+- [[Page with headings#heading A]] (link to heading)
+- [[Page with headings#heading A|Link with heading alias]] (link to heading with alias)
+- [[Home (fake)#Home|Link with heading alias#false heading]] (link to heading with alias with heading)
+- [[]] empty link
+
+## Internal links (classic style)
+
+- [Classic internal link (URL encoded)](internal%20page)
+- [Classic internal link (tag format)](<Slides Demo>)
+
+## External links
+
+- [Wikipedia](http://www.wikipedia.org) (link to the internet)
+- [Wikipedia](https://www.wikipedia.org) (link to the secure internet)