add tests, fix markdown-style links.

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

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import FaRegQuestionCircle from 'svelte-icons/fa/FaRegQuestionCircle.svelte';
 
-	export let text: string;
-	export let displayText: string;
+	export let text: string = '';
+	export let displayText: string = '';
+	export let useSlot = false;
 
 	if (!displayText) {
 		const aliasMatch = text.match(/^(?:.+)\|(.*)$/);
@@ -19,7 +20,13 @@
 
 <dfn class="not-italic" title="Internal link">
 	<span class="underline cursor-not-allowed inline-flex items-center">
-		<span class="text-[#705dcf] opacity-50">{displayText}</span>
+		<span class="text-[#705dcf] opacity-50">
+			{#if useSlot}
+				<slot />
+			{:else}
+				{displayText}
+			{/if}
+		</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,12 +1,23 @@
 <script lang="ts">
+	import LinkIcon from 'svelte-icons/md/MdOpenInNew.svelte';
+	import InternalLink from './InternalLink.svelte';
+
 	export let href = '';
 	export let title: string;
-	import LinkIcon from 'svelte-icons/md/MdOpenInNew.svelte';
+	let isWebLink = true;
+
+	$: if (href) {
+		if (!href.match(/^http[s]?:\/\//)) {
+			isWebLink = false;
+		}
+	}
 </script>
 
-<!-- <a {href} {title}><slot /></a> -->
-
-<span class="underline cursor-not-allowed inline-flex items-center font-normal">
+{#if isWebLink}
+	<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-zinc-400 ml-0.5"><LinkIcon /></span>
-</span>
+	</span>
+{:else}
+	<InternalLink useSlot><slot /></InternalLink>
+{/if}

webapp/src/test/markdown/callout.test.ts

@@ -0,0 +1,21 @@
+import { render, screen } from '@testing-library/svelte';
+import { readMd } from './util';
+import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+
+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');
+	});
+
+	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');
+	});
+});

webapp/src/test/markdown/input/links.md

@@ -12,9 +12,9 @@
 ## Internal links (classic style)
 
 - [Classic internal link (URL encoded)](internal%20page)
-- [Classic internal link (tag format)](<Slides Demo>)
+- [Classic internal link (tag format)](<Internal Page>)
 
 ## External links
 
-- [Wikipedia](http://www.wikipedia.org) (link to the internet)
-- [Wikipedia](https://www.wikipedia.org) (link to the secure internet)
+- [Wikipedia (http)](http://www.wikipedia.org) (link to the internet)
+- [Wikipedia (https)](https://www.wikipedia.org) (link to the secure internet)

webapp/src/test/markdown/internalLinks.test.ts

@@ -1,9 +1,6 @@
-import { readFile } from 'fs/promises';
-import { join } from 'path';
 import { render, screen } from '@testing-library/svelte';
-import MarkdownRenderer from './MarkdownRenderer.svelte';
-
-const TEST_FILES_DIR = 'test/markdown/';
+import { readMd } from './util';
+import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
 
 // rendering links
 describe('rendering [[internal]] links', async () => {
@@ -45,35 +42,3 @@ describe('rendering [[internal]] links', async () => {
 		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');
-	});
-
-	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');
-	});
-});
-
-async function readMd(file: string) {
-	return await readFile(join(TEST_FILES_DIR, file), { encoding: 'utf8' });
-}

webapp/src/test/markdown/markdownLink.test.ts

@@ -0,0 +1,31 @@
+import { render, screen } from '@testing-library/svelte';
+import { readMd } from './util';
+import MarkdownRenderer from '$lib/components/MarkdownRenderer.svelte';
+
+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();
+	});
+
+	it('Renders URL-encoded internal links correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Classic internal link \(tag format\)$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+
+	it('Renders http links correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/^Wikipedia \(http\)$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+
+	it('Renders https links correctly', async () => {
+		render(MarkdownRenderer, { plaintext: plaintext });
+		const linkEl = await screen.findByText(/Wikipedia \(https\)$/);
+		expect(linkEl).toBeInTheDocument();
+	});
+});

webapp/src/test/markdown/util.ts

@@ -0,0 +1,8 @@
+import { readFile } from 'fs/promises';
+import { join } from 'path';
+
+const TEST_FILES_DIR = 'src/test/markdown/input/';
+
+export async function readMd(file: string) {
+	return await readFile(join(TEST_FILES_DIR, file), { encoding: 'utf8' });
+}