setup temp /mock route in app-root (#6290)

packages/app-root/src/app/mock/faq/page.js

@@ -0,0 +1,25 @@
+import { AboutHeader } from '@zooniverse/content'
+
+export default function MockPage() {
+  const links = [
+    {
+      href: '/mock',
+      label: 'Mock'
+    },
+    {
+      href: '/mock/resources',
+      label: 'Resources'
+    },
+    {
+      href: '/mock/faq',
+      label: 'FAQ'
+    }
+  ]
+
+  return (
+    <>
+      <AboutHeader links={links} navTitle='Mock' />
+      <p>This is /mock/faq</p>
+    </>
+  )
+}

packages/app-root/src/app/mock/page.js

@@ -0,0 +1,25 @@
+import { AboutHeader } from '@zooniverse/content'
+
+export default function MockPage() {
+  const links = [
+    {
+      href: '/mock',
+      label: 'Mock'
+    },
+    {
+      href: '/mock/resources',
+      label: 'Resources'
+    },
+    {
+      href: '/mock/faq',
+      label: 'FAQ'
+    }
+  ]
+
+  return (
+    <>
+      <AboutHeader links={links} navTitle='Mock' />
+      <p>This is /mock</p>
+    </>
+  )
+}

packages/app-root/src/app/mock/resources/page.js

@@ -0,0 +1,25 @@
+import { AboutHeader } from '@zooniverse/content'
+
+export default function MockPage() {
+  const links = [
+    {
+      href: '/mock',
+      label: 'Mock'
+    },
+    {
+      href: '/mock/resources',
+      label: 'Resources'
+    },
+    {
+      href: '/mock/faq',
+      label: 'FAQ'
+    }
+  ]
+
+  return (
+    <>
+      <AboutHeader links={links} navTitle='Mock' />
+      <p>This is /mock/resources</p>
+    </>
+  )
+}

packages/app-root/src/middleware.js

@@ -4,6 +4,11 @@
 import { NextResponse } from 'next/server'
 
 export function middleware(req) {
+  /* This is a temporary mocked env */
+  if (req.nextUrl.pathname.startsWith('/mock/wrong')) {
+    return NextResponse.redirect(new URL('/mock', req.url))
+  }
+
   /*
     Redirect legacy PFE /about and /get-involved paths to new FEM paths
   */
@@ -45,5 +50,5 @@ export function middleware(req) {
 
 /* Only care about /about and /get-involved routes */
 export const config = {
-  matcher: ['/about/:path*', '/get-involved/:paths*']
+  matcher: ['/mock/:path*', '/about/:path*', '/get-involved/:paths*']
 }

packages/lib-content/src/components/AboutHeader/AboutHeader.js

@@ -1,3 +1,5 @@
+'use client'
+
 import { Box } from 'grommet'
 import { ZooniverseLogotype } from '@zooniverse/react-components'
 import styled from 'styled-components'

packages/lib-content/src/index.js

@@ -1,4 +1,5 @@
 export { default as About } from './screens/About/About.js'
+export { default as AboutHeader } from './components/AboutHeader/AboutHeader.js'
 export { default as Collaborate } from './screens/Collaborate/Collaborate.js'
 export { default as CommunityContainer } from './screens/Home/Community/CommunityContainer.js'
 export { default as Default404 } from './screens/404/Default404.js'