setup contentful blog and refactor to next app directory

.github/workflows/ci-code-review.yml

@@ -73,4 +73,4 @@ jobs:
     needs: ['lint', 'sast', 'sca']
     runs-on: ubuntu-latest
     steps:
-      - run: echo ok
+      - run: echo ok

api/disable-draft/route.ts

@@ -0,0 +1,10 @@
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+
+  draftMode().disable()
+
+  redirect(searchParams.get('redirect') || '/')
+}

api/draft/route.ts

@@ -0,0 +1,14 @@
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+const { CONTENTFUL_PREVIEW_SECRET } = process.env
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  if (searchParams.get('previewSecret') !== CONTENTFUL_PREVIEW_SECRET) {
+    return new Response('Invalid token', { status: 401 })
+  }
+
+  draftMode().enable()
+
+  redirect(searchParams.get('redirect') || '/')
+}

app/(pages)/blog/[slug]/page.tsx

@@ -0,0 +1,86 @@
+import { Metadata } from 'next'
+import { draftMode } from 'next/headers'
+import { notFound } from 'next/navigation'
+import Link from 'next/link'
+import { fetchBlogPost, fetchBlogPosts } from '../../../contentful/blogPost'
+import RichText from '../../../contentful/RichText'
+
+interface BlogPostPageParams {
+  slug: string
+}
+
+interface BlogPostPageProps {
+  params: BlogPostPageParams
+}
+
+// Tell Next.js about all our blog posts so
+// they can be statically generated at build time.
+export async function generateStaticParams(): Promise<BlogPostPageParams[]> {
+  const blogPosts = await fetchBlogPosts({ preview: false })
+
+  return blogPosts.map((post) => ({ slug: post.slug }))
+}
+
+// For each blog post, tell Next.js which metadata
+// (e.g. page title) to display.
+export async function generateMetadata(
+  { params }: BlogPostPageProps,
+  // parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const blogPost = await fetchBlogPost({
+    slug: params.slug,
+    preview: draftMode().isEnabled,
+  })
+
+  if (!blogPost) {
+    return notFound()
+  }
+
+  return {
+    title: blogPost.postTitle,
+  }
+}
+
+// The actual BlogPostPage component.
+async function BlogPostPage({ params }: BlogPostPageProps) {
+  // Fetch a single blog post by slug,
+  // using the content preview if draft mode is enabled:
+  const blogPost = await fetchBlogPost({
+    slug: params.slug,
+    preview: draftMode().isEnabled,
+  })
+
+  if (!blogPost) {
+    // If a blog post can't be found,
+    // tell Next.js to render a 404 page.
+    return notFound()
+  }
+
+  return (
+    <main className="p-[6vw]">
+      <Link href="/">← Posts</Link>
+      <div className="prose mt-8 border-t pt-8">
+        {/* Render the blog post image */}
+        {blogPost.postHeroImage && (
+          <img
+            src={blogPost.postHeroImage.src}
+            // Use the Contentful Images API to render
+            // responsive images. No next/image required:
+            srcSet={`${blogPost.postHeroImage.src}?w=300 1x, ${blogPost.postHeroImage.src} 2x`}
+            width={300}
+            height={300}
+            alt={blogPost.postHeroImage.alt}
+          />
+        )}
+
+        {/* Render the blog post title */}
+        <h1>{blogPost.postTitle}</h1>
+
+        {/* Render the blog post body */}
+        <RichText document={blogPost.postContent} />
+      </div>
+    </main>
+  )
+}
+
+export default BlogPostPage

app/(pages)/blog/page.tsx

@@ -0,0 +1,26 @@
+import { draftMode } from 'next/headers'
+import Link from 'next/link'
+import { fetchBlogPosts } from '../../contentful/blogPost'
+
+async function BlogPage() {
+  // Fetch blog posts using the content preview
+  // if draft mode is enabled:
+  const blogPosts = await fetchBlogPosts({ preview: draftMode().isEnabled })
+
+  return (
+    <div>
+      <h1>My Contentful Blog</h1>
+      <ul>
+        {blogPosts.map((blogPost) => {
+          return (
+            <li key={blogPost.slug}>
+              <Link href={`/${blogPost.slug}`}>{blogPost.postTitle}</Link>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default BlogPage

app/(pages)/page.tsx

@@ -0,0 +1,10 @@
+import { Metadata } from 'next'
+import HomePage from '../components/home/HomePage'
+
+export const metadata: Metadata = {
+  title: 'My Page Title',
+}
+
+export default function Page() {
+  return <HomePage />
+}

app/api/disable-draft/route.ts

@@ -0,0 +1,10 @@
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+
+  draftMode().disable()
+
+  redirect(searchParams.get('redirect') || '/')
+}

app/api/draft/route.ts

@@ -0,0 +1,14 @@
+import { draftMode } from 'next/headers'
+import { redirect } from 'next/navigation'
+const { CONTENTFUL_PREVIEW_SECRET } = process.env
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  if (searchParams.get('previewSecret') !== CONTENTFUL_PREVIEW_SECRET) {
+    return new Response('Invalid token', { status: 401 })
+  }
+
+  draftMode().enable()
+
+  redirect(searchParams.get('redirect') || '/')
+}

app/components/ExitDraftModeLink.tsx

@@ -0,0 +1,15 @@
+'use client'
+import { usePathname } from 'next/navigation'
+import React from 'react'
+
+function ExitDraftModeLink(props: React.HTMLProps<HTMLAnchorElement>) {
+  const pathname = usePathname()
+
+  return (
+    <a href={`/api/disable-draft?redirect=${pathname}`} {...props}>
+      Exit
+    </a>
+  )
+}
+
+export default ExitDraftModeLink

app/components/LayoutWrapper.tsx

@@ -0,0 +1,46 @@
+'use client'
+import { ThemeProvider } from 'next-themes'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import PlausibleProvider from 'next-plausible'
+import { ttCommons, ttCommonsExpanded, ttCommonsMono } from '../utils/fonts'
+import TopNavigation from './navigation/TopNavigation'
+import Footer from './footer/Footer'
+
+// init react-query
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      gcTime: 1000 * 60 * 10,
+      staleTime: 1000 * 60,
+      retry: 3,
+      refetchOnWindowFocus: false,
+    },
+  },
+})
+
+function LayoutWrapper({ children }) {
+  return (
+    <>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider defaultTheme="Mango">
+          <PlausibleProvider
+            domain="mango.markets"
+            customDomain="https://pl.mngo.cloud"
+            selfHosted={true}
+            trackOutboundLinks={true}
+          >
+            <main
+              className={`bg-th-bkg-1 ${ttCommons.variable} ${ttCommonsExpanded.variable} ${ttCommonsMono.variable} font-sans`}
+            >
+              <TopNavigation />
+              {children}
+              <Footer />
+            </main>
+          </PlausibleProvider>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </>
+  )
+}
+
+export default LayoutWrapper