Add the PrivacyLink component.

source/gram.ts

@@ -0,0 +1,2 @@
+// Link Exports
+export {PrivacyLink, PrivacyLinkProps} from './links/privacy-link.js';

source/links/privacy-link.ts

@@ -0,0 +1,29 @@
+import {html} from 'htm/preact';
+import {Component, ComponentChildren, VNode} from 'preact';
+
+/**
+ * Component properties for {@linkcode PrivacyLink}.
+ */
+export type PrivacyLinkProps = {
+  children: ComponentChildren;
+  class: string;
+  href: string;
+};
+
+/**
+ * A simple {@linkcode https://developer.mozilla.org/docs/Web/HTML/Element/a <a>}
+ * element wrapper with `rel="noopener noreferrer"` and `target="_blank"`
+ * already set.
+ */
+export class PrivacyLink extends Component<PrivacyLinkProps> {
+  render(): VNode {
+    const props: Record<string, string> = {
+      class: this.props.class,
+      href: this.props.href,
+      rel: 'noopener noreferrer',
+      target: '_blank',
+    };
+
+    return html`<a ...${props}>${this.props.children}</a>`;
+  }
+}

tests/links/privacy-link.test.ts

@@ -0,0 +1,36 @@
+import test from 'ava';
+import {html} from 'htm/preact';
+import {render} from 'preact-render-to-string';
+
+import {PrivacyLink} from '../../source/gram.js';
+
+test('PrivacyLink', (t) => {
+  t.snapshot(render(html`<${PrivacyLink} />`), 'Empty');
+
+  t.snapshot(
+    render(html`<${PrivacyLink} href="https://example.org">Example<//>`),
+    'Text children',
+  );
+
+  t.snapshot(
+    render(
+      html`
+        <${PrivacyLink} href="https://example.org">
+          Example <span class="bold">with children</span>
+        <//>
+      `,
+    ),
+    'HTML children',
+  );
+
+  t.snapshot(
+    render(
+      html`
+        <${PrivacyLink} class="bold italic" href="https://example.org">
+          Example
+        <//>
+      `,
+    ),
+    'CSS class',
+  );
+});

tests/links/snapshots/privacy-link.test.ts.md

@@ -0,0 +1,23 @@
+# Snapshot report for `tests/links/privacy-link.test.ts`
+
+The actual snapshot is saved in `privacy-link.test.ts.snap`.
+
+Generated by [AVA](https://avajs.dev).
+
+## PrivacyLink
+
+> Empty
+
+    '<a rel="noopener noreferrer" target="_blank"></a>'
+
+> Text children
+
+    '<a href="https://example.org" rel="noopener noreferrer" target="_blank">Example</a>'
+
+> HTML children
+
+    '<a href="https://example.org" rel="noopener noreferrer" target="_blank">Example <span class="bold">with children</span></a>'
+
+> CSS class
+
+    '<a class="bold italic" href="https://example.org" rel="noopener noreferrer" target="_blank">Example</a>'