Add support for FEP-3b86 (Activity Intents)

Author: Gargron

renovate.json

@@ -1,6 +1,4 @@
 {
   "$schema": "https://docs.renovatebot.com/renovate-schema.json",
-  "extends": [
-    "config:recommended"
-  ]
+  "extends": ["config:recommended"]
 }

src/NewDomain.tsx

@@ -7,6 +7,14 @@ import { FormattedMessage } from "react-intl";
 import { useTextParam } from "./utils";
 import { clsx } from "clsx";
 
+interface WebfingerResponseJSON {
+  links: {
+    rel: string;
+    type: string;
+    href: string;
+  }[];
+}
+
 interface ServerResponseJSON {
   domain: string;
 }
@@ -36,6 +44,40 @@ const extractDomain = (str: string): string => {
   return value;
 };
 
+const fetchTemplate = (
+  domain: string,
+  text: string,
+): Promise<[string, string]> => {
+  let fallbackDomain;
+
+  return fetch(
+    `https://${domain}/.well-known/webfinger?resource=${encodeURIComponent(`https://${domain}`)}`,
+  )
+    .then((response) => {
+      if (!response.ok) {
+        throw new Error("Unexpected response");
+      }
+
+      // If the server is using a different domain/subdomain to serve the UI
+      fallbackDomain = new URL(response.url).host;
+
+      return response.json();
+    })
+    .then((json: WebfingerResponseJSON) => {
+      const link = json.links.find(
+        ({ rel }) => rel === "https://w3id.org/fep/3b86/Create",
+      );
+      const template =
+        link?.template ?? `https://${fallbackDomain}/share?text={content}`;
+      const redirectUrl = template.replace(
+        "{content}",
+        encodeURIComponent(text),
+      );
+
+      return [template, redirectUrl];
+    });
+};
+
 export const NewDomain: React.FC<{ onDismiss: () => void }> = () => {
   const dispatch = useAppDispatch();
   const text = useTextParam();
@@ -118,15 +160,15 @@ export const NewDomain: React.FC<{ onDismiss: () => void }> = () => {
 
       setValue(domain);
       setShowResults(false);
-
-      const redirectUrl = `https://${domain}/share?text=${encodeURIComponent(text)}`;
-
       setSubmitting(true);
-      dispatch(addDomain(domain));
 
-      setTimeout(() => {
-        window.location.href = redirectUrl;
-      }, 100);
+      fetchTemplate(domain, text).then(([template, redirectUrl]) => {
+        dispatch(addDomain({ domain, template }));
+
+        setTimeout(() => {
+          window.location.href = redirectUrl;
+        }, 100);
+      });
     },
     [dispatch, text],
   );
@@ -141,14 +183,15 @@ export const NewDomain: React.FC<{ onDismiss: () => void }> = () => {
         return;
       }
 
-      const redirectUrl = `https://${domain}/share?text=${encodeURIComponent(text)}`;
-
       setSubmitting(true);
-      dispatch(addDomain(domain));
 
-      setTimeout(() => {
-        window.location.href = redirectUrl;
-      }, 100);
+      fetchTemplate(domain, text).then(([template, redirectUrl]) => {
+        dispatch(addDomain({ domain, template }));
+
+        setTimeout(() => {
+          window.location.href = redirectUrl;
+        }, 100);
+      });
     },
     [dispatch, text, domain],
   );

src/SavedDomain.tsx

@@ -1,5 +1,5 @@
 import { useCallback } from "react";
-import { addDomain, removeDomain } from "./actions";
+import { clickDomain, removeDomain } from "./actions";
 import { useAppDispatch } from "./store";
 import DeleteIcon from "./assets/delete.svg?react";
 import { useIntl, defineMessages } from "react-intl";
@@ -11,13 +11,14 @@ const messages = defineMessages({
 
 export const SavedDomain: React.FC<{
   domain: string;
-}> = ({ domain }) => {
+  template: string;
+}> = ({ domain, template }) => {
   const dispatch = useAppDispatch();
   const intl = useIntl();
   const text = useTextParam();
 
   const handleClick = useCallback(() => {
-    dispatch(addDomain(domain));
+    dispatch(clickDomain(domain));
   }, [dispatch, domain]);
 
   const handleDeleteClick = useCallback(() => {
@@ -28,7 +29,10 @@ export const SavedDomain: React.FC<{
     <div className="flex bg-blurple-500 hover:bg-blurple-600 text-white rounded-4xl w-full gap-2 items-center">
       <a
         className="block w-full px-5 py-4"
-        href={`https://${domain}/share?text=${encodeURIComponent(text ?? "")}`}
+        href={(template ?? `https://${domain}/share?text={content}`).replace(
+          "{content}",
+          encodeURIComponent(text ?? ""),
+        )}
         onClick={handleClick}
       >
         <div className="font-bold">{domain}</div>

src/actions/index.tsx

@@ -1,5 +1,9 @@
 import { createAction } from "@reduxjs/toolkit";
+import type { Domain } from "../types";
 
-export const addDomain = createAction<string>("accounts/add");
+export const addDomain =
+  createAction<Pick<Domain, "domain" | "template">>("accounts/add");
+
+export const clickDomain = createAction<string>("accounts/use");
 
 export const removeDomain = createAction<string>("accounts/remove");

src/reducers/index.ts

@@ -1,6 +1,6 @@
 import { createReducer } from "@reduxjs/toolkit";
 import type { Domain } from "../types";
-import { addDomain, removeDomain } from "../actions";
+import { addDomain, clickDomain, removeDomain } from "../actions";
 
 interface State {
   domains: Domain[];
@@ -14,7 +14,7 @@ export default createReducer(initialState, (builder) => {
   builder
     .addCase(addDomain, (state, action) => {
       const index = state.domains.findIndex(
-        (domain) => domain.domain === action.payload,
+        (domain) => domain.domain === action.payload.domain,
       );
 
       if (index !== -1) {
@@ -24,11 +24,22 @@ export default createReducer(initialState, (builder) => {
       }
 
       state.domains.push({
-        domain: action.payload,
+        domain: action.payload.domain,
+        template: action.payload.template,
         used: 1,
         lastUsed: new Date().toString(),
       });
     })
+    .addCase(clickDomain, (state, action) => {
+      const index = state.domains.findIndex(
+        (domain) => domain.domain === action.payload,
+      );
+
+      if (index !== -1) {
+        state.domains[index].used += 1;
+        state.domains[index].lastUsed = new Date().toString();
+      }
+    })
     .addCase(removeDomain, (state, action) => {
       state.domains = state.domains.filter(
         (domain) => domain.domain !== action.payload,

src/types/index.ts

@@ -2,4 +2,5 @@ export interface Domain {
   domain: string;
   used: number;
   lastUsed: string;
+  template?: string;
 }