Added Metadata for dynamic pages and static pages

frontend/.env.example

@@ -1,7 +1,9 @@
 NEXT_PUBLIC_API_URL=http://localhost:8000/api/v1/
 NEXT_PUBLIC_CSRF_URL=http://localhost:8000/csrf/
-NEXT_PUBLIC_ENVIRONMENT=local
+NEXT_PUBLIC_CSRF_URL_DOCKER=http://nest-backend:8000/csrf/
+NEXT_PUBLIC_ENVIRONMENT=docker
 NEXT_PUBLIC_GRAPHQL_URL=http://localhost:8000/graphql/
+NEXT_PUBLIC_GRAPHQL_URL_DOCKER=http://nest-backend:8000/graphql/
 NEXT_PUBLIC_GTM_AUTH=your-google-tag-manager-auth
 NEXT_PUBLIC_GTM_ID=your-google-tag-manager-id
 NEXT_PUBLIC_GTM_PREVIEW=

frontend/jest.config.ts

@@ -6,7 +6,7 @@ const config: Config = {
     'src/**/*.{js,jsx,ts,tsx}',
     '!src/**/*.d.ts',
     '!src/api/**',
-    '!src/app/layout.tsx',
+    '!src/app/**/layout.tsx',
     '!src/components/**',
     '!src/hooks/**',
     '!src/instrumentation.ts',

frontend/src/app/about/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata: Metadata = getStaticMetadata('about', '/about')
+
+export default function AboutLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/chapters/[chapterKey]/layout.tsx

@@ -0,0 +1,39 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_CHAPTER_DATA } from 'server/queries/chapterQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+type Params = Promise<{ chapterKey: string }>
+
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  try {
+    const { chapterKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_CHAPTER_DATA,
+      variables: {
+        key: chapterKey,
+      },
+    })
+    const chapter = data?.chapter
+    if (!chapter) {
+      return
+    }
+    return generateSeoMetadata({
+      title: chapter.name,
+      description: chapter.summary ?? 'Discover details about this OWASP chapter.',
+      canonicalPath: `/chapter/${chapterKey}`,
+      keywords: ['owasp', 'security', 'chapter', chapterKey, chapter.name],
+    })
+  } catch {
+    return
+  }
+}
+
+export default function ChapterDetailsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return <div className="chapter-layout">{children}</div>
+}

frontend/src/app/chapters/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata: Metadata = getStaticMetadata('chapters', '/chapters')
+
+export default function ChaptersLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/committees/[committeeKey]/layout.tsx

@@ -0,0 +1,41 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_COMMITTEE_DATA } from 'server/queries/committeeQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ committeeKey: string }>
+}): Promise<Metadata> {
+  try {
+    const { committeeKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_COMMITTEE_DATA,
+      variables: {
+        key: committeeKey,
+      },
+    })
+    const committee = data?.committee
+    if (!committee) {
+      return
+    }
+    return generateSeoMetadata({
+      title: committee.name,
+      description: committee.summary ?? 'Discover details about this OWASP committee.',
+      canonicalPath: `/committees/${committeeKey}`,
+      keywords: ['owasp', 'security', 'committee', committeeKey, committee.name],
+    })
+  } catch {
+    return
+  }
+}
+
+export default function CommitteeDetailsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return <div className="committee-layout">{children}</div>
+}

frontend/src/app/committees/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata: Metadata = getStaticMetadata('committees', '/committees')
+
+export default function CommitteesLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/contribute/layout.tsx

@@ -0,0 +1,8 @@
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata = getStaticMetadata('contribute', '/contribute')
+
+export default function ContributeLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/layout.tsx

@@ -20,8 +20,35 @@ const geistMono = Geist_Mono({
 })
 
 export const metadata: Metadata = {
-  title: 'OWASP Nest',
-  description: 'OWASP Nest',
+  title: 'Home – OWASP Nest',
+  description:
+    'OWASP Nest is a comprehensive platform designed to enhance collaboration and contribution within the OWASP community.',
+  openGraph: {
+    title: 'Home – OWASP Nest',
+    description:
+      'OWASP Nest is a comprehensive platform designed to enhance collaboration and contribution within the OWASP community.',
+    url: 'https://nest.owasp.org/',
+    siteName: 'OWASP Nest',
+    images: [
+      {
+        url: 'https://nest.owasp.org/img/owasp_icon_white_background.png',
+        width: 1200,
+        height: 630,
+        alt: 'OWASP logo',
+      },
+    ],
+    locale: 'en_US',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Home – OWASP Nest',
+    description:
+      'OWASP Nest is a comprehensive platform designed to enhance collaboration and contribution within the OWASP community.',
+    images: ['https://nest.owasp.org/img/owasp_icon_white_background.png'],
+    creator: '@owasp',
+    site: '@owasp',
+  },
   icons: {
     icon: 'https://owasp.org/www--site-theme/favicon.ico',
     shortcut: 'https://owasp.org/www--site-theme/favicon.ico',

frontend/src/app/members/[memberKey]/layout.tsx

@@ -0,0 +1,37 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_USER_DATA } from 'server/queries/userQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ memberKey: string }>
+}): Promise<Metadata> {
+  try {
+    const { memberKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_USER_DATA,
+      variables: {
+        key: memberKey,
+      },
+    })
+    const user = data?.user
+    if (!user) {
+      return
+    }
+    return generateSeoMetadata({
+      title: user.name ?? user.login,
+      description: user.bio ?? 'Discover details about this OWASP community member.',
+      canonicalPath: `/members/${memberKey}`,
+      keywords: [user.login, user.name, 'owasp', 'owasp community member'],
+    })
+  } catch {
+    return
+  }
+}
+
+export default function UserDetailsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/members/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata: Metadata = getStaticMetadata('members', '/members')
+
+export default function UsersLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/organizations/[organizationKey]/layout.tsx

@@ -0,0 +1,36 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_ORGANIZATION_DATA } from 'server/queries/organizationQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ organizationKey: string }>
+}): Promise<Metadata> {
+  try {
+    const { organizationKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_ORGANIZATION_DATA,
+      variables: {
+        login: organizationKey,
+      },
+    })
+    const organization = data?.organization
+    if (!organization) {
+      return
+    }
+    return generateSeoMetadata({
+      title: organization?.name ?? organization?.login,
+      description: organization?.description ?? 'Discover details about this OWASP organization.',
+      canonicalPath: `/organizations/${organizationKey}`,
+    })
+  } catch {
+    return
+  }
+}
+
+export default function OrganizationDetailsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/organizations/[organizationKey]/repositories/[repositoryKey]/layout.tsx

@@ -0,0 +1,38 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_REPOSITORY_DATA } from 'server/queries/repositoryQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    repositoryKey: string
+    organizationKey: string
+  }>
+}): Promise<Metadata> {
+  try {
+    const { repositoryKey, organizationKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_REPOSITORY_DATA,
+      variables: { repositoryKey: repositoryKey, organizationKey: organizationKey },
+    })
+    const repository = data?.repository
+    if (!repository) {
+      return
+    }
+    return generateSeoMetadata({
+      title: repository.name,
+      description: repository.description ?? 'Discover details about this OWASP repository.',
+      canonicalPath: `/organizations/${organizationKey}/repositories/${repositoryKey}`,
+      keywords: ['owasp', 'repository', repositoryKey, repository.name],
+    })
+  } catch {
+    return
+  }
+}
+
+export default function RepositoryDetailsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/organizations/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata: Metadata = getStaticMetadata('organizations', '/organizations')
+
+export default function OrganizationsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/projects/[projectKey]/layout.tsx

@@ -0,0 +1,39 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_PROJECT_DATA } from 'server/queries/projectQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{
+    projectKey: string
+  }>
+}): Promise<Metadata> {
+  try {
+    const { projectKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_PROJECT_DATA,
+      variables: {
+        key: projectKey,
+      },
+    })
+    const project = data?.project
+    if (!project) {
+      return
+    }
+    return generateSeoMetadata({
+      title: project.name,
+      description: project.summary ?? 'Discover details about this OWASP project.',
+      canonicalPath: `/projects/${projectKey}`,
+      keywords: ['owasp', 'project', projectKey, project.name],
+    })
+  } catch {
+    return
+  }
+}
+
+export default function ProjectDetailsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/projects/layout.tsx

@@ -0,0 +1,9 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { getStaticMetadata } from 'utils/metaconfig'
+
+export const metadata: Metadata = getStaticMetadata('projects', '/projects')
+
+export default function ProjectsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}

frontend/src/app/snapshots/[id]/layout.tsx

@@ -0,0 +1,34 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { GET_SNAPSHOT_DETAILS } from 'server/queries/snapshotQueries'
+import { apolloServerClient } from 'utils/helpers/apolloClientServer'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ id: string }>
+}): Promise<Metadata> {
+  try {
+    const { id: snapshotKey } = await params
+    const { data } = await apolloServerClient.query({
+      query: GET_SNAPSHOT_DETAILS,
+      variables: { key: snapshotKey },
+    })
+    const snapshot = data?.snapshot
+    if (!snapshot) {
+      return
+    }
+    return generateSeoMetadata({
+      title: snapshot?.title,
+      description: `Discover details about ${snapshot?.title} OWASP snapshot.`,
+      canonicalPath: `/snapshots/${snapshotKey}`,
+      keywords: ['owasp', 'snapshot', snapshotKey, snapshot?.title],
+    })
+  } catch {
+    return
+  }
+}
+export default function SnapshotDetailsLayout({ children }: { children: React.ReactNode }) {
+  return children
+}