3 files changed, 84 insertions, 1 deletions
diff --git a/ui/lib/markdown.js b/ui/lib/markdown.js
index 2e73309..6caf80b 100644
--- a/ui/lib/markdown.js
+++ b/ui/lib/markdown.js
@@ -1,6 +1,26 @@
 import { marked } from 'marked';
 import DOMPurify from 'dompurify';
 
+const extension = {
+  useNewRenderer: true,
+  renderer: {
+    link({ title, href, tokens }) {
+      const titleAttr = title ? ` title="${title}"` : ``;
+      const text = this.parser.parseInline(tokens);
+      return `<a
+        target="_blank"
+        rel="noreferrer"
+        ${titleAttr}
+        href="${href}">${text}</a>`;
+    }
+  }
+};
+
+marked.use(extension);
+
 export function render(body) {
-  return DOMPurify.sanitize(marked.parse(body, { breaks: true }));
+  const rendered = marked.parse(body, { breaks: true });
+  return DOMPurify.sanitize(rendered, {
+    ADD_ATTR: ['target']
+  });
 }
diff --git a/ui/lib/markdown.test.js b/ui/lib/markdown.test.js
new file mode 100644
index 0000000..126eacd
--- /dev/null
+++ b/ui/lib/markdown.test.js
@@ -0,0 +1,55 @@
+import * as md from './markdown.js';
+import { expect, describe, it } from 'vitest';
+
+describe('render', async () => {
+  it('renders inline links', async () => {
+    const markdown = `[a link](https://example.com?foo=bar)`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders inline links with titles', async () => {
+    const markdown = `[a link](https://example.com?foo=bar "what title")`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" title="what title" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders footnote links', async () => {
+    const markdown = `
+[a link]
+
+[a link]: https://example.com?foo=bar`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders footnote links with titles', async () => {
+    const markdown = `
+[a link]
+
+[a link]: https://example.com?foo=bar "what title"`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" title="what title" rel="noreferrer" target="_blank">a link</a></p>
+`
+    );
+  });
+
+  it('renders links with embedded markup', async () => {
+    const markdown = `[a _link_](https://example.com?foo=bar)`;
+    const html = md.render(markdown);
+    expect(html).toStrictEqual(
+      `<p><a href="https://example.com?foo=bar" rel="noreferrer" target="_blank">a <em>link</em></a></p>
+`
+    );
+  });
+});
diff --git a/ui/styles/sidebar.css b/ui/styles/sidebar.css
index c6aab6a..9a499f2 100644
--- a/ui/styles/sidebar.css
+++ b/ui/styles/sidebar.css
@@ -24,11 +24,19 @@
   color: var(--colour-navbar-active-text);
 }
 
+.list-nav li.active a {
+  color: var(--colour-navbar-active-text);
+}
+
 .list-nav li:hover {
   background-color: var(--colour-navbar-hover-bg);
   color: var(--colour-navbar-hover-text);
 }
 
+.list-nav li:hover a {
+  color: var(--colour-navbar-hover-text);
+}
+
 /* create channel form */
 .create-channel {
   padding-left: 0.5rem;