Update OpenGraph metadata in subpages

Signed-off-by: Sebastian Martinez <sebastinez@me.com>

src/base/faucet/Index.svelte

@@ -2,7 +2,7 @@
   import type { Config } from "@app/config";
   import type { BigNumber } from "@ethersproject/bignumber";
   import { session } from "@app/session";
-  import { toWei } from "@app/utils";
+  import { setOpenGraphMetaTag, toWei } from "@app/utils";
   import { formatEther } from "@ethersproject/units";
   import { navigate } from "svelte-routing";
   import { getMaxWithdrawAmount, lastWithdrawalByUser, calculateTimeLock } from "./lib";
@@ -14,6 +14,12 @@
   let lastWithdrawal: BigNumber;
   let error: string | undefined;
 
+  setOpenGraphMetaTag([
+    { prop: "og:title", content: "Radicle Faucet" },
+    { prop: "og:description", content: "Rinkeby Testnet Faucet" },
+    { prop: "og:url", content: window.location.href }
+  ]);
+
   async function withdraw() {
     const [state, message] = await isAbleToWithdraw(amount);
     if (state === true) navigate("/faucet/withdraw", { state: { amount } });

src/base/home/Index.svelte

@@ -6,9 +6,16 @@
   import Loading from '@app/Loading.svelte';
   import Message from '@app/Message.svelte';
   import Cards from '@app/Cards.svelte';
+  import { setOpenGraphMetaTag } from '@app/utils';
 
   export let config: Config;
 
+  setOpenGraphMetaTag([
+    { prop: "og:title", content: "Radicle Interface" },
+    { prop: "og:description", content: "Interact with Radicle" },
+    { prop: "og:url", content: window.location.href }
+  ]);
+
   const getOrgs = config.orgs.pinned.length > 0
     ? Org.getMulti(config.orgs.pinned, config)
     : Org.getAll(config);

src/base/orgs/Index.svelte

@@ -7,9 +7,16 @@
   import Loading from '@app/Loading.svelte';
   import Message from '@app/Message.svelte';
   import Cards from '@app/Cards.svelte';
+  import { setOpenGraphMetaTag } from '@app/utils';
 
   export let config: Config;
 
+  setOpenGraphMetaTag([
+    { prop: "og:title", content: "Radicle Orgs" },
+    { prop: "og:description", content: "Orgs of the Radicle Network" },
+    { prop: "og:url", content: window.location.href }
+  ]);
+
   const onCreate = () => modal = Create;
   let modal: typeof SvelteComponent | null = null;
 

src/base/projects/View.svelte

@@ -6,7 +6,7 @@
   import Avatar from '@app/Avatar.svelte';
   import { Profile, ProfileType } from '@app/profile';
   import type { ProjectInfo } from '@app/project';
-  import { formatOrg, formatSeedId, isRadicleId } from '@app/utils';
+  import { formatOrg, formatSeedId, isRadicleId, setOpenGraphMetaTag } from '@app/utils';
   import { getOid } from '@app/project';
   import { Seed } from '@app/base/seeds/Seed';
 
@@ -77,6 +77,12 @@
     } else {
       pageTitle = baseName;
     }
+
+    setOpenGraphMetaTag([
+      { prop: "og:title", content: projectInfo.name },
+      { prop: "og:description", content: projectInfo.description },
+      { prop: "og:url", content: window.location.href }
+    ]);
   }
 
   function updateRouteParams({ detail: newParams }: { detail: { urn: string; path: string; revision: string; peer: string; content: proj.ProjectContent } }) {

src/utils.ts

@@ -64,10 +64,10 @@ export async function toClipboard(text: string): Promise<void> {
   return navigator.clipboard.writeText(text);
 }
 
-export function setOpenGraphMetaTag(data: {prop: string, content: string, attr?: string }[]): void {
+export function setOpenGraphMetaTag(data: { prop: string; content: string; attr?: string }[]): void {
   const elements = Array.from<HTMLElement>(document.querySelectorAll(`meta`));
   elements.forEach((element: any) => {
-    let foundElement = data.find(data => {
+    const foundElement = data.find(data => {
       return data.prop === element.getAttribute(data.attr || 'property');
     });
     if (foundElement) element.content = foundElement.content;