1e827eb Update OpenGraph metadata in subpages — radicle-explorer

Radicle web interface

Update OpenGraph metadata in subpages

Sebastian Martinez committed 4 years ago

commit 1e827eb4583d21e23fc05fa1bf2c732e5ae8d8e0
parent 7b4c635c64dae8da6c7e93fb4265d56e041832a0

5 files changed +30 -4

modified 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 } });

modified 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);

modified 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;

modified 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 } }) {

modified 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;