From d72024007e22c62c720bbd418b96cedddd0cbce3 Mon Sep 17 00:00:00 2001
From: Maxime Cannoodt <Maxime.Cannoodt@UGent.be>
Date: Tue, 5 Jul 2022 00:46:06 +0200
Subject: [PATCH] add rendering

---
 .../lib/components/MarkdownRenderer.test.ts   | 66 +++++++++++++++++--
 .../lib/marked/renderers/InternalLink.svelte  | 15 ++++-
 webapp/src/lib/marked/renderers/Link.svelte   |  2 -
 webapp/src/routes/about.svelte                |  1 -
 webapp/test/markdown/links.md                 | 20 ++++++
 5 files changed, 93 insertions(+), 11 deletions(-)
 create mode 100644 webapp/test/markdown/links.md

diff --git a/webapp/src/lib/components/MarkdownRenderer.test.ts b/webapp/src/lib/components/MarkdownRenderer.test.ts
index ea0a6bb..c692e56 100644
--- a/webapp/src/lib/components/MarkdownRenderer.test.ts
+++ b/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', () => {
-	it('Renders callout correctly ', async () => {
-		const plaintext = await readMd('callout.md');
+// rendering links
+describe('rendering [[internal]] links', async () => {
+	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.
-		expect(await screen.findByText('Sample text.')).toBeInTheDocument();
-		expect((await screen.findByText('Sample text.')).parentNode).toHaveClass('callout-content');
+	it('Renders callout content correctly ', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const contentEl = await screen.findByText('Sample text.');
+		expect(contentEl).toBeInTheDocument();
+		expect(contentEl.parentElement).toHaveClass('callout-content');
 	});
 });
 
diff --git a/webapp/src/lib/marked/renderers/InternalLink.svelte b/webapp/src/lib/marked/renderers/InternalLink.svelte
index 6d5d096..e4b2698 100644
--- a/webapp/src/lib/marked/renderers/InternalLink.svelte
+++ b/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>
diff --git a/webapp/src/lib/marked/renderers/Link.svelte b/webapp/src/lib/marked/renderers/Link.svelte
index 4b2b5d5..1fd23bc 100644
--- a/webapp/src/lib/marked/renderers/Link.svelte
+++ b/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>
 
diff --git a/webapp/src/routes/about.svelte b/webapp/src/routes/about.svelte
index 6ce6802..c83fbd7 100644
--- a/webapp/src/routes/about.svelte
+++ b/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
diff --git a/webapp/test/markdown/links.md b/webapp/test/markdown/links.md
new file mode 100644
index 0000000..11e9dd3
--- /dev/null
+++ b/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)