feature(airdrops): Add seo and centralized config (#15571)

* add app config

* add seo config

* update header and footer links

* update root layout

* update index page

* update index page

* update campaign page

airdrops/app/campaigns/[campaign]/page.tsx

@@ -2,6 +2,7 @@ import { notFound } from 'next/navigation'
 import CampaignDetailContent from '../../../components/CampaignDetailContent'
 import airdrops from '../../../src/airdrops.json'
 import { Metadata } from 'next'
+import { config } from '../../../src/config/app'
 
 export interface CampaignDetailPageProps {
   params: {
@@ -16,21 +17,19 @@ export async function generateMetadata({
 
   if (!campaign) {
     return {
-      title: 'Campaign Not Found | Airdrops',
-      description: 'The requested campaign could not be found.',
+      title: `Campaign Not Found | ${config.appName.default}`,
     }
   }
 
   return {
-    title: `${campaign.name} | Airdrops`,
+    title: `${campaign.name} | ${config.appName.default}`,
     description: campaign.description,
     openGraph: {
-      title: `${campaign.name} | Airdrops`,
+      title: `${campaign.name} | ${config.appName.default}`,
       description: campaign.description,
     },
     twitter: {
-      card: 'summary',
-      title: `${campaign.name} | Airdrops`,
+      title: `${campaign.name} | ${config.appName.default}`,
       description: campaign.description,
     },
   }

airdrops/app/layout.tsx

@@ -4,6 +4,8 @@ import { Metadata } from 'next'
 import RootHeader from '../components/layout/Header'
 import Providers from './providers'
 import Footer from '../components/layout/Footer'
+import { SHARED_METADATA } from '../src/config/seo'
+import { config } from '../src/config/app'
 
 const inter = Inter({
   subsets: ['latin'],
@@ -13,8 +15,9 @@ const inter = Inter({
 })
 
 export const metadata: Metadata = {
+  ...SHARED_METADATA,
   icons: {
-    icon: '/favicon.ico',
+    icon: config.images.favicon,
   },
 }
 

airdrops/app/page.tsx

@@ -1,5 +1,11 @@
 import Campaigns from '../components/Campaigns'
 import Hero from '../components/Hero'
+import { Metadata } from 'next'
+import { config } from '../src/config/app'
+
+export const metadata: Metadata = {
+  title: `${config.appName.default} | ${config.appName.brand}`,
+}
 
 export default function Home() {
   return (

airdrops/components/layout/Footer.tsx

@@ -1,4 +1,5 @@
 import Link from 'next/link'
+import { config } from '../../src/config/app'
 
 export default function Footer() {
   return (
@@ -8,7 +9,7 @@ export default function Footer() {
       </span>
       <div className="flex gap-8">
         <Link
-          href="https://unlock-protocol.com/privacy"
+          href={`${config.staticSiteUrl}/privacy`}
           className="text-xs text-brand-dark"
           target="_blank"
           rel="noopener noreferrer"
@@ -17,7 +18,7 @@ export default function Footer() {
         </Link>
 
         <Link
-          href="https://unlock-protocol.com/terms"
+          href={`${config.staticSiteUrl}/terms`}
           className="text-xs text-brand-dark"
           target="_blank"
           rel="noopener noreferrer"

airdrops/components/layout/Header.tsx

@@ -2,11 +2,12 @@
 import { usePrivy } from '@privy-io/react-auth'
 import { HeaderNav } from '@unlock-protocol/ui'
 import { UserMenu } from '../auth/UserMenu'
+import { config } from '../../src/config/app'
 
 const MENU_SECTIONS = [
-  { title: 'Events', url: 'https://app.unlock-protocol.com/my-events' },
-  { title: 'Locks', url: 'https://app.unlock-protocol.com/locks' },
-  { title: 'Keys', url: 'https://app.unlock-protocol.com/keychain' },
+  { title: 'Events', url: `${config.dashboardUrl}/my-events` },
+  { title: 'Locks', url: `${config.dashboardUrl}/locks` },
+  { title: 'Keys', url: `${config.dashboardUrl}/keychain` },
 ]
 
 export default function RootHeader() {

airdrops/src/config/app.ts

@@ -0,0 +1,41 @@
+/**
+ * Configuration for the airdrops website
+ */
+const STATIC_SITE_URL = 'https://unlock-protocol.com'
+
+export const config = {
+  // Base URL for the airdrops website
+  baseUrl: 'https://airdrops.unlock-protocol.com',
+
+  // Static site URL
+  staticSiteUrl: STATIC_SITE_URL,
+
+  // Dashboard URL
+  dashboardUrl: 'https://app.unlock-protocol.com',
+
+  // App name and branding
+  appName: {
+    default: 'Airdrops',
+    full: 'Unlock Airdrops',
+    brand: 'Unlock Protocol',
+  },
+
+  // Metadata descriptions
+  descriptions: {
+    default:
+      'The Unlock Protocol belongs to its community of creators, developers, and users. Contribute code, docs, or just use the protocol and claim UP tokens.',
+  },
+
+  // Images
+  images: {
+    default: `${STATIC_SITE_URL}/images/unlock.png`,
+    thumbnail: `${STATIC_SITE_URL}/images/unlock.png`,
+    favicon: '/favicon.ico',
+  },
+
+  // Social media handles
+  social: {
+    twitter: '@UnlockProtocol',
+    github: 'unlock-protocol',
+  },
+}

airdrops/src/config/seo.ts

@@ -0,0 +1,28 @@
+import { Metadata } from 'next'
+import { config } from './app'
+
+// Shared metadata configuration for SEO
+export const SHARED_METADATA: Metadata = {
+  title: {
+    default: config.appName.default,
+    template: `%s | ${config.appName.brand}`,
+  },
+  description: config.descriptions.default,
+  openGraph: {
+    type: 'website',
+    locale: 'en_US',
+    url: config.baseUrl,
+    siteName: config.appName.default,
+    images: [
+      {
+        url: config.images.default,
+        alt: config.appName.full,
+      },
+    ],
+  },
+  twitter: {
+    card: 'summary_large_image',
+    site: config.social.twitter,
+    creator: config.social.twitter,
+  },
+}