Add Fleek CI pipeline.

.github/workflows/fleek-deploy.yaml

@@ -7,6 +7,7 @@ jobs:
       FLEEK_TOKEN: ${{ secrets.FLEEK_TOKEN }}
       FLEEK_PROJECT_ID: ${{ secrets.FLEEK_PROJECT_ID }}
       NEXT_TELEMETRY_DISABLED: '1'
+      WALLETBEAT_URL_ROOT: 'https://beta.walletbeat.eth.limo'
     steps:
       - name: Checkout
         uses: actions/checkout@v3

src/app/wallet/[wallet]/page.tsx

@@ -5,7 +5,7 @@ import '../../global.css';
 import type React from 'react';
 import type { Metadata } from 'next';
 import { generateBasicMetadata } from '@/components/metadata';
-import { betaSiteRoot } from '@/constants';
+import { betaImagesRoot, betaSiteRoot } from '@/constants';
 
 interface WalletUrlParams {
   wallet: string;
@@ -37,7 +37,10 @@ export async function generateMetadata({
     title: `${walletMetadata.displayName} - Walletbeat`,
     description: `How does ${walletMetadata.displayName} stack up as an Ethereum wallet?`,
     route: `${betaSiteRoot}/wallet/${walletMetadata.id}`,
-    icons: `/images/wallets/${walletMetadata.id}.${walletMetadata.iconExtension}`,
+    mainIcon: {
+      url: `${betaImagesRoot}/wallets/${walletMetadata.id}.${walletMetadata.iconExtension}`,
+    },
+    favIcon: `${betaImagesRoot}/wallets/${walletMetadata.id}.${walletMetadata.iconExtension}`,
     keywordsBefore: [
       walletName,
       walletMetadata.displayName,

src/components/metadata.ts

@@ -1,52 +1,62 @@
+import { getBaseUrl } from '@/base-url';
 import type { Metadata } from 'next';
-import type { Icons } from 'next/dist/lib/metadata/types/metadata-types';
-import { betaImagesRoot } from '../constants';
+import type { IconDescriptor } from 'next/dist/lib/metadata/types/metadata-types';
 
 const siteName = 'Walletbeat';
 const siteDescription =
   'Walletbeat is an Ethereum wallet rating site. It aims to provide a trustworthy, up-to-date source of information about the state of the Ethereum wallet ecosystem';
 const defaultKeywords = ['walletbeat', 'ethereum', 'wallet', 'wallets', 'wallet beat', 'evm'];
-const defaultIcons: Icons = {
-  icon: [
-    {
-      url: `${betaImagesRoot}/favicon.ico`,
-      sizes: '16x16',
-    },
-    {
-      url: `${betaImagesRoot}/icon.jpg`,
-    },
-  ],
+const defaultFavicon: IconDescriptor = {
+  url: '/images/favicon.ico',
+  sizes: '16x16',
+};
+const defaultMainIcon: IconDescriptor = {
+  url: '/images/icon.jpg',
 };
 const locale = 'en-US';
 
 export function generateBasicMetadata({
   title,
   route,
   description = undefined,
-  icons = undefined,
+  mainIcon = undefined,
+  favIcon = undefined,
   keywordsBefore = undefined,
   keywordsAfter = undefined,
 }: {
   title: string;
   route: string;
-  icons?: Metadata['icons'];
+  mainIcon?: IconDescriptor;
+  favIcon?: string;
   description?: string;
   keywordsBefore?: string[];
   keywordsAfter?: string[];
 }): Metadata {
+  let favIconDescriptor = defaultFavicon;
+  if (favIcon !== undefined) {
+    favIconDescriptor = { ...defaultFavicon, url: favIcon };
+  }
+  const mainIconDescriptor = mainIcon ?? defaultMainIcon;
+  const urlRoot = getBaseUrl();
   return {
     title,
     applicationName: siteName,
     description: description ?? siteDescription,
     keywords: (keywordsBefore ?? []).concat(defaultKeywords).concat(keywordsAfter ?? []),
-    icons: icons ?? defaultIcons,
+    icons: [favIconDescriptor, mainIconDescriptor],
     openGraph: {
       type: 'website',
       determiner: '',
+      url: `${urlRoot}${route}`,
       title,
       description: description ?? siteDescription,
       siteName,
       locale,
+      images: {
+        url: `${urlRoot}${mainIconDescriptor.url}`,
+        secureUrl: `${urlRoot}${mainIconDescriptor.url}`,
+        alt: title,
+      },
     },
   };
 }