add resource pages cms

pages/resources/[resource].tsx

@@ -0,0 +1,75 @@
+import { type GetStaticPaths, type InferGetStaticPropsType } from 'next'
+
+import { directusClient } from '@src/apollo-client'
+import { CustomComponents } from '@src/components/custom-page/common'
+import { FooterVariant } from '@src/components/FooterFull'
+import {
+  ResourcePageDocument,
+  type ResourcePageQuery,
+  type ResourcePageQueryVariables,
+  ResourcesPageSlugsDocument,
+  type ResourcesPageSlugsQuery,
+  type ResourcesPageSlugsQueryVariables,
+} from '@src/generated/graphqlDirectus'
+import { propsWithGlobalSettings } from '@src/utils/getGlobalProps'
+
+export default function Resource({
+  resourceInfo,
+}: InferGetStaticPropsType<typeof getStaticProps>) {
+  return <CustomComponents components={resourceInfo.components ?? []} />
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const { data, error } = await directusClient.query<
+    ResourcesPageSlugsQuery,
+    ResourcesPageSlugsQueryVariables
+  >({
+    query: ResourcesPageSlugsDocument,
+  })
+
+  if (error) {
+    console.error('GraphQL query error in static:', error)
+  }
+
+  return {
+    paths: data.resource_pages.map((page) => ({
+      params: { resource: page.slug },
+    })),
+    fallback: 'blocking',
+  }
+}
+
+export const getStaticProps = async (context) => {
+  const slug =
+    typeof context?.params?.resource === 'string'
+      ? context?.params?.resource
+      : null
+
+  if (!slug) {
+    return { notFound: true }
+  }
+
+  const { data, error } = await directusClient.query<
+    ResourcePageQuery,
+    ResourcePageQueryVariables
+  >({
+    query: ResourcePageDocument,
+    variables: { slug },
+  })
+
+  if (error) {
+    console.error('GraphQL query error in static: ', error)
+  }
+  const resourceInfo = data.resource_pages?.[0] || null
+
+  if (!resourceInfo) {
+    return { notFound: true }
+  }
+
+  return propsWithGlobalSettings({
+    metaTitle: resourceInfo?.dropdown_title ?? '',
+    metaDescription: '',
+    footerVariant: FooterVariant.kitchenSink,
+    resourceInfo,
+  })
+}

src/data/getSiteSettings.tsx

@@ -2,14 +2,16 @@ import { getImageUrl } from '@src/consts/routes'
 import { type NavList } from '@src/contexts/NavDataContext'
 import {
   type ProductPageTinyFragment,
+  type ResourcePageTinyFragment,
   type SiteSettingsFragment,
   type SolutionPageTinyFragment,
 } from '@src/generated/graphqlDirectus'
 
 export const getSiteSettings = (
   siteSettings: SiteSettingsFragment,
   solutions?: SolutionPageTinyFragment[],
-  products?: ProductPageTinyFragment[]
+  products?: ProductPageTinyFragment[],
+  resources?: ResourcePageTinyFragment[]
 ) => ({
   og_description: siteSettings.og_description ?? 'Plural',
   og_image: getImageUrl(siteSettings.og_image),
@@ -43,36 +45,7 @@ export const getSiteSettings = (
         title: 'Resources',
         url: '/resources',
       },
-      subnav: [
-        {
-          id: 'docs',
-          link: {
-            title: 'Docs',
-            url: 'https://docs.plural.sh',
-          },
-        },
-        {
-          id: 'blog',
-          link: {
-            title: 'Blog',
-            url: 'https://www.plural.sh/blog',
-          },
-        },
-        {
-          id: 'releases',
-          link: {
-            title: 'Releases',
-            url: 'https://github.com/pluralsh/plural/releases',
-          },
-        },
-        {
-          id: 'security and compliance',
-          link: {
-            title: 'Security & Compliance',
-            url: 'https://app.secureframe.com/ext/trust-center/plural/',
-          },
-        },
-      ],
+      subnav: getResourcesSubnav(resources),
     },
     company: {
       id: 'company',
@@ -143,3 +116,17 @@ function getProductSubnav(products?: ProductPageTinyFragment[]): NavList[] {
 //     }))
 //     .reverse()
 // }
+
+function getResourcesSubnav(resources?: ResourcePageTinyFragment[]) {
+  if (!resources || !resources.length) return []
+
+  return resources.map((resource) => ({
+    id: resource.slug,
+    link: {
+      title: resource.dropdown_title ?? '',
+      url: resource.external
+        ? resource.url ?? '#'
+        : `/resources/${resource.slug}`,
+    },
+  }))
+}