+
+ Welcome to Re-Nav's share page!
+
+ Use the share button in Re-Nav's options page to create a link with your
+ redirect.
+
+
+
+
+
+ {{-":"-}}
+
+
+
↓
+
+
+ {{-":"-}}
+
+
+
+
+ {#
+ This element will be shown by JS on page load, and if Re-Nav is installed,
+ it will be used as the root container for the import button.
+ #}
+
+
+ With Re-Nav installed, you'll see a button here to import
+ this redirect.
+
+
+
+
+
+
+
+{% endblock %}
diff --git a/source/scss/re-nav/share.scss b/source/scss/re-nav/share.scss
new file mode 100644
index 0000000..67e859e
--- /dev/null
+++ b/source/scss/re-nav/share.scss
@@ -0,0 +1,54 @@
+.page-main {
+ display: grid;
+ gap: var(--spacing-16);
+ grid-template-columns: repeat(1, 1fr);
+}
+
+.subtitle {
+ font-weight: bold;
+ text-align: center;
+}
+
+.redirect {
+ border: 1px solid var(--foreground-1);
+ display: grid;
+ gap: var(--spacing-08);
+ grid-template-columns: repeat(1, 1fr);
+ padding: var(--spacing-16);
+
+ .matcher-data,
+ .redirect-data {
+ background-color: var(--background-color);
+ color: var(--background-1);
+ padding: var(--spacing-16);
+ overflow: auto;
+ text-align: center;
+
+ span {
+ font-weight: bold;
+ }
+ }
+
+ .matcher-data {
+ --background-color: var(--da-3);
+ }
+
+ .redirect-data {
+ --background-color: var(--da-7);
+ }
+
+ .arrow {
+ font-weight: bold;
+ text-align: center;
+ }
+}
+
+.re-nav-import {
+ p {
+ text-align: center;
+ }
+}
+
+.hidden-by-default {
+ display: none;
+}
diff --git a/source/ts/re-nav/share.ts b/source/ts/re-nav/share.ts
new file mode 100644
index 0000000..356f5b5
--- /dev/null
+++ b/source/ts/re-nav/share.ts
@@ -0,0 +1,78 @@
+import {Base64} from 'js-base64';
+
+const fragmentPrefix = '#json=';
+
+const exampleRedirect: Redirect = {
+ matcherType: 'hostname',
+ matcherValue: 'example.com',
+ redirectType: 'hostname',
+ redirectValue: 'example.org',
+};
+
+function decodeBase64