Replace Link with new @holllo/gram PrivacyLink.

package.json

@@ -11,6 +11,7 @@
     "test": "xo && stylelint 'source/**/*.scss' && tsc && c8 ava"
   },
   "dependencies": {
+    "@holllo/gram": "^0.1.0",
     "htm": "^3.1.0",
     "modern-normalize": "^1.1.0",
     "preact": "^10.6.6",

pnpm-lock.yaml

@@ -1,6 +1,7 @@
 lockfileVersion: 5.3
 
 specifiers:
+  '@holllo/gram': ^0.1.0
   '@preact/preset-vite': ^2.1.7
   '@types/webextension-polyfill': ^0.8.2
   ava: ^4.1.0
@@ -22,6 +23,7 @@ specifiers:
   xo: ^0.48.0
 
 dependencies:
+  '@holllo/gram': 0.1.0_htm@3.1.0+preact@10.6.6
   htm: 3.1.0
   modern-normalize: 1.1.0
   preact: 10.6.6
@@ -347,6 +349,16 @@ packages:
       - supports-color
     dev: true
 
+  /@holllo/gram/0.1.0_htm@3.1.0+preact@10.6.6:
+    resolution: {integrity: sha512-91YcLRGUjNtFkE6qQhOuw6C2tNbJ7/SMdZa0hITjRLE2c7wzCSte5Wta9Uj3xLZh4kguO/S5QHmLHWmtUWqYog==}
+    peerDependencies:
+      htm: 3.x
+      preact: 10.x
+    dependencies:
+      htm: 3.1.0
+      preact: 10.6.6
+    dev: false
+
   /@humanwhocodes/config-array/0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}

source/options/components/link.ts

@@ -1,20 +0,0 @@
-import {html} from 'htm/preact';
-import {Component} from 'preact';
-
-type Props = {
-  cssClass: string;
-  text: string;
-  url: string;
-};
-
-export class Link extends Component<Props> {
-  render() {
-    const {cssClass, text, url} = this.props;
-
-    return html`
-      <a class=${cssClass} href=${url} target="_blank" rel="noopener">
-        ${text}
-      </a>
-    `;
-  }
-}

source/options/components/page-footer.ts

@@ -1,9 +1,8 @@
+import {PrivacyLink} from '@holllo/gram';
 import {html} from 'htm/preact';
 import {Component} from 'preact';
 import browser from 'webextension-polyfill';
 
-import {Link} from './link.js';
-
 type Props = {
   manifest: browser.Manifest.ManifestBase;
 };
@@ -14,14 +13,15 @@ export class PageFooter extends Component<Props> {
     const version = manifest.version;
 
     const donateLink = html`
-      <${Link} text="Donate" url="https://github.com/sponsors/Bauke" />
+      <${PrivacyLink} href="https://github.com/sponsors/Bauke">Donate<//>
     `;
 
     const versionLink = html`
-      <${Link}
+      <${PrivacyLink}
-        text="v${version}"
+        href="https://github.com/Holllo/fangs/releases/tag/${version}"
-        url="https://github.com/Holllo/fangs/releases/tag/${version}"
+      >
-      />
+        v${version}
+      <//>
     `;
 
     return html`