app router directives

apps/www/app/blog/BlogClient.tsx

@@ -1,16 +1,15 @@
 'use client'
 
 import { useEffect, useState } from 'react'
-import { NextSeo } from 'next-seo'
-import DefaultLayout from '~/components/Layouts/Default'
-import BlogGridItem from '~/components/Blog/BlogGridItem'
-import BlogListItem from '~/components/Blog/BlogListItem'
-import BlogFilters from '~/components/Blog/BlogFilters'
-import FeaturedThumb from '~/components/Blog/FeaturedThumb'
+import DefaultLayout from 'components/Layouts/Default'
+import BlogGridItem from 'components/Blog/BlogGridItem'
+import BlogListItem from 'components/Blog/BlogListItem'
+import BlogFilters from 'components/Blog/BlogFilters'
+import FeaturedThumb from 'components/Blog/FeaturedThumb'
 import { cn } from 'ui'
 import { LOCAL_STORAGE_KEYS, isBrowser } from 'common'
 
-import type PostTypes from '~/types/post'
+import type PostTypes from 'types/post'
 
 export type BlogView = 'list' | 'grid'
 
@@ -51,27 +50,6 @@ export default function BlogClient(props: { blogs: any[] }) {
 
   return (
     <>
-      <NextSeo
-        title={meta_title}
-        description={meta_description}
-        openGraph={{
-          title: meta_title,
-          description: meta_description,
-          url: `https://supabase.com/blog`,
-          images: [
-            {
-              url: `https://supabase.com/images/og/supabase-og.png`,
-            },
-          ],
-        }}
-        additionalLinkTags={[
-          {
-            rel: 'alternate',
-            type: 'application/rss+xml',
-            href: `https://supabase.com/rss.xml`,
-          },
-        ]}
-      />
       <DefaultLayout>
         <h1 className="sr-only">Supabase blog</h1>
         <div className="md:container mx-auto py-4 lg:py-10 px-4 sm:px-12 xl:px-16">

apps/www/app/blog/[slug]/BlogPostClient.tsx

@@ -1,7 +1,6 @@
 'use client'
 
 import dynamic from 'next/dynamic'
-import { NextSeo } from 'next-seo'
 import { useState, useMemo } from 'react'
 import { useLivePreview } from '@payloadcms/live-preview-react'
 
@@ -90,37 +89,7 @@ export default function BlogPostClient(props: BlogPostPageProps) {
 
   return (
     <>
-      <NextSeo
-        title={meta.title}
-        description={meta.description}
-        openGraph={{
-          title: meta.title,
-          description: meta.description,
-          url: meta.url,
-          type: 'article',
-          videos: (blogMetaData as any).video
-            ? [
-                {
-                  url: (blogMetaData as any).video,
-                  type: 'application/x-shockwave-flash',
-                  width: 640,
-                  height: 385,
-                },
-              ]
-            : undefined,
-          article: {
-            publishedTime: (blogMetaData as any).date,
-            authors: authorUrls as any,
-            tags: tags as any,
-          },
-          images: [
-            {
-              url: imageUrl,
-              alt: `${(blogMetaData as any).title} thumbnail`,
-            },
-          ],
-        }}
-      />
+      {/* Head metadata handled at layout/page level now */}
       <BlogPostRenderer
         blog={props.blog as any}
         blogMetaData={blogMetaData as any}

apps/www/app/blog/[slug]/page.tsx

@@ -4,7 +4,7 @@ import { getAllCMSPostSlugs, getCMSPostBySlug } from 'lib/get-cms-posts'
 
 import type { Blog, BlogData, PostReturnType } from 'types/post'
 
-import BlogPostClient from '~/app/blog/[slug]/BlogPostClient'
+import BlogPostClient from './BlogPostClient'
 
 type MatterReturn = {
   data: BlogData
@@ -30,12 +30,11 @@ export async function generateStaticParams() {
 }
 
 export default async function BlogPostPage({ params }: { params: Params }) {
-  const { slug } = await params
-
-  if (!slug) {
+  if (!params?.slug) {
     throw new Error('Missing slug for app/blog/[slug]/page.tsx')
   }
 
+  const slug = params.slug
   const { isEnabled: isDraft } = await draftMode()
 
   const matter = (await import('gray-matter')).default

apps/www/app/blog/categories/[category]/page.tsx

@@ -1,4 +1,4 @@
-import { NextSeo } from 'next-seo'
+import type { Metadata } from 'next'
 import { getSortedPosts, getAllCategories } from '~/lib/posts'
 import Link from 'next/link'
 import { startCase } from 'lodash'
@@ -13,6 +13,14 @@ export async function generateStaticParams() {
   return categories.map((category: string) => ({ category }))
 }
 
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  const capitalizedCategory = startCase(params.category.replaceAll('-', ' '))
+  return {
+    title: `Blog | ${capitalizedCategory}`,
+    description: 'Latest news from the Supabase team.',
+  }
+}
+
 export default async function CategoriesPage({ params }: { params: Params }) {
   const blogs = getSortedPosts({
     directory: '_blog',
@@ -23,10 +31,6 @@ export default async function CategoriesPage({ params }: { params: Params }) {
 
   return (
     <>
-      <NextSeo
-        title={`Blog | ${capitalizedCategory}`}
-        description="Latest news from the Supabase team."
-      />
       <DefaultLayout>
         <div className="container mx-auto px-8 py-16 sm:px-16 xl:px-20">
           <div className="text-foreground-lighter flex space-x-1">

apps/www/app/blog/page.tsx

@@ -1,10 +1,22 @@
 import fs from 'fs'
+import type { Metadata } from 'next'
 import { generateRss } from 'lib/rss'
 import { getSortedPosts } from 'lib/posts'
-import BlogClient from 'app/blog/BlogClient'
+import BlogClient from './BlogClient'
 
 export const dynamic = 'force-static'
 
+export const metadata: Metadata = {
+  title: 'Supabase Blog: the Postgres development platform',
+  description: 'Get all your Supabase News on the Supabase blog.',
+  openGraph: {
+    title: 'Supabase Blog: the Postgres development platform',
+    description: 'Get all your Supabase News on the Supabase blog.',
+    url: 'https://supabase.com/blog',
+    images: [{ url: 'https://supabase.com/images/og/supabase-og.png' }],
+  },
+}
+
 export default async function BlogPage() {
   // Get static blog posts at build time
   const staticPostsData = getSortedPosts({ directory: '_blog', runner: '** BLOG PAGE **' })

apps/www/app/blog/tags/[tag]/page.tsx

@@ -1,4 +1,4 @@
-import { NextSeo } from 'next-seo'
+import type { Metadata } from 'next'
 import { getSortedPosts, getAllTags } from '~/lib/posts'
 import Link from 'next/link'
 import { startCase } from 'lodash'
@@ -13,6 +13,14 @@ export async function generateStaticParams() {
   return tags.map((tag: string) => ({ tag }))
 }
 
+export async function generateMetadata({ params }: { params: Params }): Promise<Metadata> {
+  const capitalizedTag = startCase(params.tag.replaceAll('-', ' '))
+  return {
+    title: `Blog | ${capitalizedTag}`,
+    description: 'Latest news from the Supabase team.',
+  }
+}
+
 export default async function TagPage({ params }: { params: Params }) {
   const blogs = getSortedPosts({
     directory: '_blog',
@@ -23,10 +31,6 @@ export default async function TagPage({ params }: { params: Params }) {
 
   return (
     <>
-      <NextSeo
-        title={`Blog | ${capitalizedTag}`}
-        description="Latest news from the Supabase team."
-      />
       <DefaultLayout>
         <div className="container mx-auto px-8 py-16 sm:px-16 xl:px-20">
           <div className="text-foreground-lighter flex space-x-1">

apps/www/app/providers.tsx

@@ -5,15 +5,15 @@ import {
   FeatureFlagProvider,
   IS_PLATFORM,
   PageTelemetry,
+  TelemetryTagManager,
   ThemeProvider,
   useThemeSandbox,
-  TelemetryTagManager,
 } from 'common'
+import { WwwCommandMenu } from 'components/CommandMenu'
+import { API_URL } from 'lib/constants'
 import { themes, TooltipProvider, SonnerToaster } from 'ui'
 import { CommandProvider } from 'ui-patterns/CommandMenu'
 import { useConsentToast } from 'ui-patterns/consent'
-import { API_URL } from '~/lib/constants'
-import { WwwCommandMenu } from '~/components/CommandMenu'
 
 function Providers({ children }: { children: React.ReactNode }) {
   useThemeSandbox()

apps/www/components/Charts/PGCharts.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Tabs } from 'ui'
 import { useState } from 'react'
 import ReactMarkdown from 'react-markdown'

apps/www/components/CodeBlock/CodeBlock.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { Check, Copy, File, Terminal } from 'lucide-react'
 import { useTheme } from 'next-themes'
 import { useEffect, useState } from 'react'

apps/www/components/ImageFadeStack.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { PauseCircle, PlayCircle } from 'lucide-react'
 import Image from 'next/image'
 import { useEffect, useState } from 'react'

apps/www/components/ImageGrid.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import Image from 'next/image'
 import Link from 'next/link'
 import { motion } from 'framer-motion'

apps/www/contentlayer.config.ts

@@ -4,7 +4,7 @@ import { FILENAME_SUBSTRING } from './lib/posts'
 export const BlogPost = defineDocumentType(() => ({
   name: 'BlogPost',
   filePathPattern: `**/*.mdx`,
-  // contentType: 'mdx',
+  contentType: 'mdx',
   fields: {
     date: { type: 'string', required: true },
     description: { type: 'string', required: true },
@@ -13,6 +13,12 @@ export const BlogPost = defineDocumentType(() => ({
     tags: { type: 'list', of: { type: 'string' }, required: false },
     title: { type: 'string', required: true },
     thumb: { type: 'string', required: false },
+    author: { type: 'string', required: true },
+    author_title: { type: 'string', required: false },
+    author_url: { type: 'string', required: false },
+    author_image_url: { type: 'string', required: false },
+    video: { type: 'string', required: false },
+    toc_depth: { type: 'number', required: false },
   },
   computedFields: {
     url: {

apps/www/lib/mdx/mdxComponents.tsx

@@ -1,3 +1,5 @@
+'use client'
+
 import { PropsWithChildren } from 'react'
 import { CH } from '@code-hike/mdx/components'
 import dynamic from 'next/dynamic'

apps/www/next.config.mjs

@@ -125,9 +125,6 @@ const nextConfig = {
     // We are already running linting via GH action, this will skip linting during production build on Vercel.
     ignoreDuringBuilds: true,
   },
-  outputFileTracingExcludes: {
-    '*': ['.contentlayer/generated/BlogPost/**/*'],
-  },
 }
 
 // next.config.js.