chore: add faq contentlayer

Author: segunadebayo

contentlayer.config.ts

@@ -93,9 +93,30 @@ const Doc = defineDocumentType(() => ({
   },
 }));
 
+const FAQ = defineDocumentType(() => ({
+  name: 'FAQ',
+  filePathPattern: 'faqs/*.mdx',
+  bodyType: 'mdx',
+  fields: {
+    title: { type: 'string', required: true },
+    description: { type: 'string', required: true },
+  },
+  computedFields: {
+    ...computedFields,
+    frontMatter: {
+      type: 'json',
+      resolve: (doc) => ({
+        title: doc.title,
+        description: doc.description,
+        slug: `/${doc._raw.flattenedPath}`,
+      }),
+    },
+  },
+}));
+
 const contentLayerConfig = makeSource({
   contentDirPath: 'pages',
-  documentTypes: [Blog, Doc, Guides],
+  documentTypes: [Blog, Doc, Guides, FAQ],
   mdx: {
     rehypePlugins: [rehypeMdxCodeMeta],
     remarkPlugins: [remarkSlug, remarkGfm, remarkEmoji],

pages/faq.tsx

@@ -0,0 +1,33 @@
+import { allFAQs } from '.contentlayer/data';
+import type { FAQ } from '.contentlayer/types';
+import { MDXComponents } from 'components/mdx-components';
+import { GetStaticPaths, GetStaticProps } from 'next';
+import { useMDXComponent } from 'next-contentlayer/hooks';
+import Layout from 'layouts';
+
+export default function Page({ faq }: { faq: FAQ }) {
+  const Component = useMDXComponent(faq.body.code);
+  return (
+    <Layout frontMatter={faq.frontMatter}>
+      <Component components={MDXComponents} />
+    </Layout>
+  );
+}
+
+export const getStaticPaths: GetStaticPaths = async () => {
+  const faqs = allFAQs
+    .map((t) =>
+      t._id.replace('faqs/', '').replace('.mdx', '').replace('index', ''),
+    )
+    .map((id) => ({ params: { slug: id.split('/') } }));
+  return { paths: faqs, fallback: false };
+};
+
+export const getStaticProps: GetStaticProps = async (ctx) => {
+  const params = Array.isArray(ctx.params.slug)
+    ? ctx.params.slug
+    : [ctx.params.slug];
+
+  const faq = allFAQs.find((faq) => faq._id.includes(params.join('/')));
+  return { props: { faq } };
+};