Feat: Post Categories (#435)

* add guides

* eslint: allow default exports

* adjust guest author socials structure

* build interecept guide route

* styles

* fetch guide specific fields

* add guide routes

* adjust blog post styling

* revalidate docs on related post chnage

* rename /guide to /guides

* remove intercepted guides route

* blog archive style adjustments

* blog single style adjustments

* useVideo on mobile

* bump payload

* consolidate posts with category/slug routing

* archive page style adjustments

* disable dynamic params for archive/post routes

* build out archive navigation

* bump packages

* adjust video cmponent styling

* cleanup build errors

* revalidation

* adjust category slug references

* adjust revalidation

* query posts by category/slug instead of only slug

* filter only guides in docs related resources

* revert changes to page transition provider

* revalidate on post deletes, category changes

* skip relatedDocs revalidation if no relatedDocs

* handle potential null values in archive and posts

Author: tylandavis

eslint.config.js

@@ -44,11 +44,12 @@ export const rootEslintConfig = [
     },
     rules: {
       'payload/no-jsx-import-statements': 'warn',
+      restrictDefaultExports: 'allow',
     },
   },
 ]
 
-export default [
+const config = [
   ...rootEslintConfig,
   {
     languageOptions: {
@@ -60,3 +61,5 @@ export default [
     },
   },
 ]
+
+export default config

package.json

@@ -27,29 +27,29 @@
     "migrate-posts": "payload run ./src/migrate-posts-to-lexical.ts"
   },
   "dependencies": {
-    "@docsearch/react": "^3.6.0",
+    "@docsearch/react": "^3.9.0",
     "@faceless-ui/collapsibles": "^2.0.0-beta.0",
     "@faceless-ui/css-grid": "1.3.0-rc.0",
     "@faceless-ui/modal": "3.0.0-beta.2",
     "@faceless-ui/mouse-info": "2.0.0-beta.0",
     "@faceless-ui/scroll-info": "2.0.0-beta.0",
     "@faceless-ui/slider": "2.0.0-beta.0",
     "@faceless-ui/window-info": "3.0.0-beta.0",
-    "@payloadcms/db-mongodb": "3.20.0",
-    "@payloadcms/email-nodemailer": "3.20.0",
-    "@payloadcms/live-preview-react": "3.20.0",
-    "@payloadcms/next": "3.20.0",
-    "@payloadcms/plugin-form-builder": "3.20.0",
-    "@payloadcms/plugin-nested-docs": "3.20.0",
-    "@payloadcms/plugin-redirects": "3.20.0",
-    "@payloadcms/plugin-seo": "3.20.0",
-    "@payloadcms/richtext-lexical": "3.20.0",
-    "@payloadcms/storage-vercel-blob": "3.20.0",
-    "@payloadcms/ui": "3.20.0",
+    "@payloadcms/db-mongodb": "3.24.0",
+    "@payloadcms/email-nodemailer": "3.24.0",
+    "@payloadcms/live-preview-react": "3.24.0",
+    "@payloadcms/next": "3.24.0",
+    "@payloadcms/plugin-form-builder": "3.24.0",
+    "@payloadcms/plugin-nested-docs": "3.24.0",
+    "@payloadcms/plugin-redirects": "3.24.0",
+    "@payloadcms/plugin-seo": "3.24.0",
+    "@payloadcms/richtext-lexical": "3.24.0",
+    "@payloadcms/storage-vercel-blob": "3.24.0",
+    "@payloadcms/ui": "3.24.0",
     "@radix-ui/react-accordion": "^1.2.1",
     "@radix-ui/react-portal": "^1.1.2",
     "@radix-ui/react-tabs": "^1.1.1",
-    "@stripe/react-stripe-js": "^1.16.5",
+    "@stripe/react-stripe-js": "^3.1.1",
     "@stripe/stripe-js": "^1.47.0",
     "algoliasearch": "^4.23.3",
     "cheerio": "^1.0.0-rc.12",
@@ -65,14 +65,14 @@
     "next-sitemap": "^4.0.6",
     "node-cron": "^3.0.3",
     "nodemailer-sendgrid": "^1.0.3",
-    "payload": "3.20.0",
+    "payload": "3.24.0",
     "prism-react-renderer": "^2.3.1",
     "qs-esm": "7.0.2",
     "react": "19.0.0",
     "react-cookie": "^4.1.1",
     "react-dom": "19.0.0",
     "react-facebook-pixel": "^1.0.4",
-    "react-instantsearch": "^7.11.4",
+    "react-instantsearch": "^7.15.3",
     "react-markdown": "^9.0.1",
     "react-select": "5.9.0",
     "react-transition-group": "^4.4.5",

pnpm-lock.yaml

@@ -2,30 +2,34 @@ import type { Metadata } from 'next'
 
 import { PayloadRedirects } from '@components/PayloadRedirects/index.js'
 import { RefreshRouteOnSave } from '@components/RefreshRouterOnSave/index.js'
+import BreadcrumbsBar from '@components/Hero/BreadcrumbsBar/index.js'
 import { fetchBlogPost, fetchPosts } from '@data'
 import { mergeOpenGraph } from '@root/seo/mergeOpenGraph.js'
 import { unstable_cache } from 'next/cache'
 import { draftMode } from 'next/headers.js'
 import React from 'react'
 
-import { BlogPost } from './BlogPost/index.js'
+import { Post } from '@components/Post/index.js'
 
-const getPost = (slug, draft?) =>
-  draft ? fetchBlogPost(slug) : unstable_cache(fetchBlogPost, ['blogPost', `post-${slug}`])(slug)
+const getPost = async (slug, category, draft?) =>
+  draft
+    ? await fetchBlogPost(slug, category)
+    : await unstable_cache(fetchBlogPost, ['blogPost', `post-${slug}`])(slug, category)
 
-const Post = async ({
+const PostPage = async ({
   params,
 }: {
   params: Promise<{
+    category: string
     slug: any
   }>
 }) => {
   const { isEnabled: draft } = await draftMode()
-  const { slug } = await params
+  const { category, slug } = await params
 
-  const blogPost = await getPost(slug, draft)
+  const blogPost = await getPost(slug, category, draft)
 
-  const url = `/blog/${slug}`
+  const url = `/${category}/${slug}`
 
   if (!blogPost) {
     return <PayloadRedirects url={url} />
@@ -35,31 +39,42 @@ const Post = async ({
     <>
       <PayloadRedirects disableNotFound url={url} />
       <RefreshRouteOnSave />
-      <BlogPost {...blogPost} />
+      <BreadcrumbsBar breadcrumbs={[]} hero={{ type: 'default' }} />
+      <Post {...blogPost} />
     </>
   )
 }
 
-export default Post
+export default PostPage
 
 export async function generateStaticParams() {
-  const getPosts = unstable_cache(fetchPosts, ['blogPosts'])
+  const getPosts = unstable_cache(fetchPosts, ['allPosts'])
   const posts = await getPosts()
 
-  return posts.map(({ slug }) => ({
-    slug,
-  }))
+  return posts
+    .map(({ slug, category }) => {
+      if (!category || typeof category === 'string' || !category.slug) {
+        return null
+      }
+
+      return {
+        category: category.slug,
+        slug,
+      }
+    })
+    .filter(Boolean)
 }
 
 export async function generateMetadata({
   params,
 }: {
   params: Promise<{
-    slug: any
+    category: string
+    slug: string
   }>
 }): Promise<Metadata> {
   const { isEnabled: draft } = await draftMode()
-  const { slug } = await params
+  const { category, slug } = await params
   const post = await getPost(slug, draft)
 
   const ogImage =
@@ -80,7 +95,7 @@ export async function generateMetadata({
           ]
         : undefined,
       title: post?.meta?.title ?? undefined,
-      url: `/blog/${slug}`,
+      url: `/${category}/${slug}`,
     }),
     title: post?.meta?.title,
   }

src/app/(frontend)/(pages)/blog/[slug]/page.tsx renamed to src/app/(frontend)/(pages)/[category]/[slug]/page.tsx

@@ -35,3 +35,14 @@
     row-gap: 2.5rem;
   }
 }
+
+.noPosts {
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 2rem;
+  background: var(--theme-bg);
+  border: 1px solid var(--theme-border-color);
+}

src/app/(frontend)/(pages)/blog/index.module.scss renamed to src/app/(frontend)/(pages)/[category]/index.module.scss

@@ -0,0 +1,53 @@
+import { fetchArchive, fetchArchives } from '@data'
+import { unstable_cache } from 'next/cache'
+import { draftMode } from 'next/headers'
+
+import React from 'react'
+
+import { notFound } from 'next/navigation'
+import { Archive } from '@components/Archive'
+
+export default async ({
+  params,
+}: {
+  params: Promise<{
+    category: string
+  }>
+}) => {
+  const { category } = await params
+  const { isEnabled: draft } = await draftMode()
+  const archive = draft
+    ? await fetchArchive(category, draft)
+    : await unstable_cache(fetchArchive, [`${category}-archive`])(category, draft)
+
+  const posts = archive?.posts?.docs
+
+  if (!archive || !posts) {
+    notFound()
+  }
+
+  return <Archive category={category} />
+}
+
+export const generateStaticParams = async () => {
+  const archives = await fetchArchives()
+  return archives.map((archive) => ({
+    category: archive.slug,
+  }))
+}
+
+export const generateMetadata = async ({ params }: { params: Promise<{ category: string }> }) => {
+  const { category } = await params
+  const archive = await fetchArchive(category)
+
+  if (!archive) {
+    return null
+  }
+
+  const { name, description } = archive
+
+  return {
+    title: `${name} | Payload`,
+    description,
+  }
+}