Added Metadata for dynamic pages and static pages (#1414)

* Added metadata in next js

* pre-commit

* updated jest config

* fixed e2e

* removed unused

* make layout names look consistent

* sonarcloud  bugs

* cr suggestion

* bugs

* bugs with unknown letter

* Update code

* Update code

* optimised query and fixed e2e by mocking server

* fixed e2e

* fixed params

* fixed bugs

* Update code

* Update code

---------

Co-authored-by: Arkadii Yakovets <[email protected]>

Author: abhayymishraa

.github/workflows/run-ci-cd.yaml

@@ -259,6 +259,8 @@ jobs:
           echo "NEXT_PUBLIC_IDX_URL=${{ secrets.VITE_IDX_URL }}" >> frontend/.env
           echo "NEXT_PUBLIC_RELEASE_VERSION=${{ github.event.release.tag_name }}" >> frontend/.env
           echo "NEXT_PUBLIC_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }}" >> frontend/.env
+          echo "NEXT_SERVER_CSRF_URL=${{ secrets.NEXT_SERVER_CSRF_URL }}" >> frontend/.env
+          echo "NEXT_SERVER_GRAPHQL_URL=${{ secrets.NEXT_SERVER_GRAPHQL_URL }}" >> frontend/.env
 
       - name: Build frontend image
         uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1
@@ -431,6 +433,8 @@ jobs:
           echo "NEXT_PUBLIC_IDX_URL=${{ secrets.VITE_IDX_URL }}" >> frontend/.env
           echo "NEXT_PUBLIC_RELEASE_VERSION=${{ github.event.release.tag_name }}" >> frontend/.env
           echo "NEXT_PUBLIC_SENTRY_DSN=${{ secrets.VITE_SENTRY_DSN }}" >> frontend/.env
+          echo "NEXT_SERVER_CSRF_URL=${{ secrets.NEXT_SERVER_CSRF_URL }}" >> frontend/.env
+          echo "NEXT_SERVER_GRAPHQL_URL=${{ secrets.NEXT_SERVER_GRAPHQL_URL }}" >> frontend/.env
 
       - name: Build frontend image
         uses: docker/build-push-action@14487ce63c7a62a4a324b0bfb37086795e31c6c1

frontend/.env.example

@@ -8,3 +8,6 @@ NEXT_PUBLIC_GTM_PREVIEW=
 NEXT_PUBLIC_IDX_URL=http://localhost:8000/idx/
 NEXT_PUBLIC_RELEASE_VERSION=
 NEXT_PUBLIC_SENTRY_DSN=
+NEXT_SERVER_CSRF_URL=http://backend:8000/csrf/
+NEXT_SERVER_DISABLE_SSR=false
+NEXT_SERVER_GRAPHQL_URL=http://backend:8000/graphql/

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/playwright.config.ts

@@ -26,7 +26,7 @@ export default defineConfig({
     trace: 'off',
   },
   webServer: {
-    command: 'pnpm run build:turbo && pnpm run start',
+    command: 'pnpm run build:turbo && NEXT_SERVER_DISABLE_SSR=true pnpm run start',
     timeout: 120_000,
     url: 'http://localhost:3000',
   },

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,35 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { apolloClient } from 'server/apolloClient'
+import { GET_CHAPTER_METADATA } from 'server/queries/chapterQueries'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ chapterKey: string }>
+}): Promise<Metadata> {
+  const { chapterKey } = await params
+  const { data } = await apolloClient.query({
+    query: GET_CHAPTER_METADATA,
+    variables: {
+      key: chapterKey,
+    },
+  })
+  const chapter = data?.chapter
+
+  return chapter
+    ? generateSeoMetadata({
+        canonicalPath: `/chapters/${chapterKey}`,
+        description: chapter.summary ?? `${chapter.name} chapter details`,
+        keywords: ['owasp', 'security', 'chapter', chapterKey, chapter.name],
+        title: chapter.name,
+      })
+    : null
+}
+
+export default function ChapterDetailsLayout({
+  children,
+}: Readonly<{ children: React.ReactNode }>) {
+  return children
+}

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,37 @@
+import { Metadata } from 'next'
+import React from 'react'
+import { apolloClient } from 'server/apolloClient'
+import { GET_COMMITTEE_METADATA } from 'server/queries/committeeQueries'
+import { generateSeoMetadata } from 'utils/metaconfig'
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ committeeKey: string }>
+}): Promise<Metadata> {
+  const { committeeKey } = await params
+  const { data } = await apolloClient.query({
+    query: GET_COMMITTEE_METADATA,
+    variables: {
+      key: committeeKey,
+    },
+  })
+  const committee = data?.committee
+
+  return committee
+    ? generateSeoMetadata({
+        canonicalPath: `/committees/${committeeKey}`,
+        description: committee.summary ?? `${committee.name} details`,
+        keywords: ['owasp', 'security', 'committee', committeeKey, committee.name],
+        title: committee.name,
+      })
+    : null
+}
+
+export default function CommitteeDetailsLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode
+}>) {
+  return children
+}

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
+}