Changing to new head structure.

src/app/(main)/articles/redux-with-react/head.jsx

@@ -1,9 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="Should you use Redux with React? — The React Show"
-    />
-  );
-};

src/app/(main)/articles/redux-with-react/page.jsx

@@ -1,5 +1,9 @@
 import { Article, H2, P } from '@/components/Components';
 
+export const metadata = {
+  title: 'Should you use Redux with React?'
+};
+
 export default function Page() {
   return (
     <Article

src/app/(main)/articles/render-tree-performance/head.jsx

@@ -1,9 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="How React Renders Component Trees and How To Make It Faster — The React Show"
-    />
-  );
-};

src/app/(main)/articles/render-tree-performance/page.jsx

@@ -5,6 +5,10 @@ import { Article, H2, P, A } from '@/components/Components';
 import renderTreeFlow from '@/images/render-tree-flow.gif';
 import renderTreeMemo from '@/images/render-tree-memo.gif';
 
+export const metadata = {
+  title: 'How React Renders Component Trees and How To Make It Faster'
+};
+
 export default function Page() {
   return (
     <Article

src/app/(main)/articles/whitelabeling-with-react/head.jsx

@@ -1,9 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  return (
-    <StandardHead
-      title="White-labeling with React — The React Show"
-    />
-  );
-};

src/app/(main)/articles/whitelabeling-with-react/page.jsx

@@ -1,5 +1,9 @@
 import { Article, H2, P, A } from '@/components/Components';
 
+export const metadata = {
+  title: 'White-labeling with React'
+};
+
 export default function Page() {
   return (
     <Article

src/app/(main)/episodes/page.jsx

@@ -1,5 +1,10 @@
 import Episodes from '@/components/Episodes'
 
+export const metadata = {
+  title: 'All Episodes',
+  description: 'List of all episodes for The React Show.'
+};
+
 export default async function AllEpisodes() {
   return (
     <Episodes />

src/app/(main)/head.jsx

@@ -1,10 +0,0 @@
-import StandardHead from '@/components/StandardHead';
-
-export default function Head({ params }) {
-  return (
-    <StandardHead
-      title="The React Show - Weekly React Focused Podcast"
-      description="Weekly podcast focused on React, programming, and software engineering."
-    />
-  );
-}

src/app/(main)/page.jsx

@@ -61,6 +61,10 @@ function Loading() {
   );
 }
 
+export const metadata = {
+  description: "Weekly podcast focused on React, programming, and software engineering."
+};
+
 export default async function Home() {
   return (
     <>

src/app/(main)/podcast/[slug]/head.jsx

@@ -1,13 +0,0 @@
-import { getEpisode } from '@/data/episodes'
-
-import StandardHead from '@/components/StandardHead';
-
-export default async function Head({ params }) {
-  const episode = await getEpisode({ episodeSlug: params.slug })
-  return (
-    <StandardHead
-      title={`${episode.title} - The React Show`}
-      description={episode.description}
-    />
-  );
-};

src/app/(main)/podcast/[slug]/page.jsx

@@ -90,6 +90,14 @@ async function TranscriptWithPlayer({ episode }) {
   )
 };
 
+export async function generateMetadata({ params }) {
+  const episode = await getEpisode({ episodeSlug: params.slug });
+  return {
+    title: episode.title,
+    description: `Podcast episode: ${episode.description}`
+  };
+};
+
 export default async function Page({ params }) {
   const episode = await getEpisode({ episodeSlug: params.slug })
   let date = new Date(episode.published)