Merge pull request #17 from oxen-io/feat/no-ref/metadata

feat: added site metadata and link preview

apps/staking/app/faucet/layout.tsx

@@ -0,0 +1,13 @@
+import { siteMetadata } from '@/lib/metadata';
+import { ReactNode } from 'react';
+
+export async function generateMetadata() {
+  return siteMetadata({
+    title: 'Faucet',
+    description: 'Claim test SENT to participate in the Session Testnet Incentive Program.',
+  });
+}
+
+export default async function FaucetLayout({ children }: { children: ReactNode }) {
+  return children;
+}

apps/staking/app/layout.tsx

@@ -1,10 +1,10 @@
 import { NEXT_PUBLIC_WALLET_CONNECT_PROJECT_ID } from '@/lib/env';
 import { getLocalizationData } from '@/lib/locale-server';
-import { siteMetadata as metadata, wagmiMetadata } from '@/lib/metadata';
 import { Toaster } from '@session/ui/components/ui/sonner';
 import { AtypDisplay, AtypText, MonumentExtended } from '@session/ui/fonts';
 
 import { DevSheet } from '@/components/DevSheet';
+import { siteMetadata, wagmiMetadata } from '@/lib/metadata';
 import FeatureFlagProvider from '@/providers/feature-flag-provider';
 import LocalizationProvider from '@/providers/localization-provider';
 import '@session/ui/styles';
@@ -23,6 +23,10 @@ const wagmiConfig = createWagmiConfig({
   metadata: wagmiMetadata,
 });
 
+export async function generateMetadata() {
+  return siteMetadata({});
+}
+
 export default async function RootLayout({ children }: { children: React.ReactNode }) {
   const { locale, direction, messages } = await getLocalizationData();
   const initialWagmiState = cookieToInitialState(wagmiConfig, headers().get('cookie'));
@@ -57,5 +61,3 @@ export default async function RootLayout({ children }: { children: React.ReactNo
     </html>
   );
 }
-
-export { metadata };

apps/staking/app/mystakes/page.tsx

@@ -1,3 +1,4 @@
+import { siteMetadata } from '@/lib/metadata';
 import { ModuleGrid } from '@session/ui/components/ModuleGrid';
 import BalanceModule from './modules/BalanceModule';
 import ClaimTokensModule from './modules/ClaimTokensModule';
@@ -7,6 +8,13 @@ import StakedNodesModule from './modules/StakedNodesModule';
 import TotalRewardsModule from './modules/TotalRewardsModule';
 import UnclaimedTokensModule from './modules/UnclaimedTokensModule';
 
+export async function generateMetadata() {
+  return siteMetadata({
+    title: 'My Stakes',
+    description: 'View your Session stakes and claim rewards.',
+  });
+}
+
 export default function Page() {
   return (
     <ModuleGrid size="lg" className="h-full px-4 md:px-10 xl:auto-rows-auto">

apps/staking/app/not-found.tsx

@@ -1,9 +1,17 @@
+import { siteMetadata } from '@/lib/metadata';
 import { ButtonDataTestId } from '@/testing/data-test-ids';
 import { HomeIcon } from '@session/ui/icons/HomeIcon';
 import { Button } from '@session/ui/ui/button';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 
+export async function generateMetadata() {
+  return siteMetadata({
+    title: 'Page not found',
+    description: "Sorry! We couldn't find the page you were looking for.",
+  });
+}
+
 export default function NotFound() {
   const dictionary = useTranslations('notFound');
   return (

apps/staking/app/stake/page.tsx

@@ -1,11 +1,19 @@
 import { URL } from '@/lib/constants';
+import { siteMetadata } from '@/lib/metadata';
 import { ButtonDataTestId } from '@/testing/data-test-ids';
 import { ModuleGridInfoContent } from '@session/ui/components/ModuleGrid';
 import { Button } from '@session/ui/ui/button';
 import { useTranslations } from 'next-intl';
 import Link from 'next/link';
 import ActionModule from './ActionModule';
 
+export async function generateMetadata() {
+  return siteMetadata({
+    title: 'Stake Now',
+    description: 'Browse open Session Nodes to stake to.',
+  });
+}
+
 export default function Page() {
   const dictionary = useTranslations('modules.openNodes');
   return (

apps/staking/lib/metadata.ts

@@ -1,18 +1,33 @@
 import { getEnvironmentTaggedDomain } from '@session/util/env';
 import type { WagmiMetadata } from '@session/wallet/lib/wagmi';
-import type { Metadata } from 'next';
 
-// TODO - Fill out all require site metadata fields
-export const siteMetadata: Metadata = {
-  title: 'Session Staking',
-  description: 'Session Staking',
-};
+const BASE_URL = `https://${getEnvironmentTaggedDomain('stake')}.getsession.org`;
+const SITE_TITLE = 'Session Staking Portal';
+const SITE_DESCRIPTION = 'Stake and get rewarded for securing the Session Network.';
+const SITE_IMAGE = `${BASE_URL}/images/link_preview.png`;
+const SITE_ICON = `${BASE_URL}/images/icon.png`;
 
-const url = `https://${getEnvironmentTaggedDomain('stake')}.getsession.org`;
+export const siteMetadata = (props: { title?: string; description?: string; image?: string }) => {
+  const { title, description = SITE_DESCRIPTION, image = SITE_IMAGE } = props;
+  return {
+    metadataBase: new URL('https://stake.getsession.org'),
+    title: `${title ? `${title} | ` : ''}${SITE_TITLE}`,
+    description,
+    openGraph: {
+      title,
+      description,
+      images: [
+        {
+          url: image,
+        },
+      ],
+    },
+  };
+};
 
 export const wagmiMetadata: WagmiMetadata = {
-  name: 'Session Staking',
-  description: 'Session Staking',
-  url,
-  icons: [`${url}/images/icon.png`],
+  name: SITE_TITLE,
+  description: SITE_DESCRIPTION,
+  url: BASE_URL,
+  icons: [SITE_ICON],
 };