From 1e827eb4583d21e23fc05fa1bf2c732e5ae8d8e0 Mon Sep 17 00:00:00 2001
From: Sebastian Martinez <sebastinez@me.com>
Date: Wed, 2 Feb 2022 16:01:24 +0100
Subject: [PATCH] Update OpenGraph metadata in subpages

Signed-off-by: Sebastian Martinez <sebastinez@me.com>
---
 src/base/faucet/Index.svelte  | 8 +++++++-
 src/base/home/Index.svelte    | 7 +++++++
 src/base/orgs/Index.svelte    | 7 +++++++
 src/base/projects/View.svelte | 8 +++++++-
 src/utils.ts                  | 4 ++--
 5 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/src/base/faucet/Index.svelte b/src/base/faucet/Index.svelte
index 3bfb5c291..9ae4da2ec 100644
--- a/src/base/faucet/Index.svelte
+++ b/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 } });
diff --git a/src/base/home/Index.svelte b/src/base/home/Index.svelte
index 5b09859b6..47760f812 100644
--- a/src/base/home/Index.svelte
+++ b/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);
diff --git a/src/base/orgs/Index.svelte b/src/base/orgs/Index.svelte
index 20c551d4c..4f2489e8a 100644
--- a/src/base/orgs/Index.svelte
+++ b/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;
 
diff --git a/src/base/projects/View.svelte b/src/base/projects/View.svelte
index 2a2909b42..a0590927e 100644
--- a/src/base/projects/View.svelte
+++ b/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 } }) {
diff --git a/src/utils.ts b/src/utils.ts
index 4bdcf2685..073d562f9 100644
--- a/src/utils.ts
+++ b/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;