fix: Added Metadata for all the routes (#5)

JayP09 · web-flow · commit f5a2f117db07 · 2024-11-29T16:01:01.000+05:30
diff --git a/src/app/[slug]/page.tsx b/src/app/[slug]/page.tsx
@@ -6,6 +6,9 @@ import { twMerge } from "tailwind-merge";
 import Author from "./components/Author";
 import LeftSection from "./components/LeftSection";
 import RightSection from "./components/RightSection";
+import { DynamicPagePropsType } from "../types";
+import { Metadata } from "next/types";
+import { removeDashAndCapitalize } from "@/utils/utils";
 
 export const dynamicParams = false;
 
@@ -15,11 +18,18 @@ export async function generateStaticParams() {
   }));
 }
 
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
+
+  return {
+    title: removeDashAndCapitalize(slug),
+    description: ""
+  };
+}
+
 export default async function Page({
   params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+}: DynamicPagePropsType) {
   const slug = (await params).slug;
   const pageData = blogsPageData[slug];
 
diff --git a/src/app/about/[slug]/layout.tsx b/src/app/about/[slug]/layout.tsx
@@ -1,6 +1,18 @@
 import React from "react";
 import Image from "next/image";
 import Link from "next/link";
+import { DynamicPagePropsType } from "@/app/types";
+import { Metadata } from "next/types";
+import { removeDashAndCapitalize } from "@/utils/utils";
+
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
+
+  return {
+    title: removeDashAndCapitalize(slug),
+    description: ""
+  };
+}
 
 const Layout = ({
   children,
diff --git a/src/app/about/[slug]/page.tsx b/src/app/about/[slug]/page.tsx
@@ -3,6 +3,7 @@ import { aboutPageData } from "@/data";
 import Image from "next/image";
 import { twMerge } from "tailwind-merge";
 import TeamCard from "../components/TeamCard";
+import { DynamicPagePropsType } from "@/app/types";
 
 export const dynamicParams = false;
 
@@ -14,9 +15,7 @@ export async function generateStaticParams() {
 
 export default async function Page({
   params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+}: DynamicPagePropsType) {
   const slug = (await params).slug;
   const pageData = aboutPageData[slug];
 
diff --git a/src/app/about/page.tsx b/src/app/about/page.tsx
@@ -9,7 +9,7 @@ import TeamsData from "./components/TeamsData";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "About | Procedure",
+  title: "About",
   description: "",
 };
 
diff --git a/src/app/capabilities/[slug]/page.tsx b/src/app/capabilities/[slug]/page.tsx
@@ -4,15 +4,20 @@ import Consultation from "../../../components/Consultation";
 import Pointers from "../../../components/Pointers";
 import { capabilitiesPagesData } from "@/data";
 import RoundedLeftImage from "@/components/RoundedLeftImage";
+import type { Metadata } from 'next'
+import { DynamicPagePropsType } from "@/app/types";
+import { removeDashAndCapitalize } from "@/utils/utils";
 
-import { Metadata } from "next";
+export const dynamicParams = false;
 
-export const metadata: Metadata = {
-  title: "Capabilities | Procedure",
-  description: "",
-};
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
 
-export const dynamicParams = false;
+  return {
+    title: removeDashAndCapitalize(slug),
+    description: ""
+  };
+}
 
 export async function generateStaticParams() {
   return Object.keys(capabilitiesPagesData).map((pageName) => ({
@@ -22,9 +27,7 @@ export async function generateStaticParams() {
 
 export default async function Page({
   params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+}: DynamicPagePropsType) {
   const slug = (await params).slug;
   const pageData = capabilitiesPagesData[slug];
 
diff --git a/src/app/capabilities/page.tsx b/src/app/capabilities/page.tsx
@@ -7,7 +7,7 @@ import CapabilitiesNavigation from "./components/CapablitiesNavigation";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Capabilities | Procedure",
+  title: "Capabilities",
   description: "",
 };
 
diff --git a/src/app/case_study/[slug]/page.tsx b/src/app/case_study/[slug]/page.tsx
@@ -8,14 +8,20 @@ import { twMerge } from "tailwind-merge";
 import DownloadForm from "./components/DownloadForm";
 import ContentSection from "./components/ContentSection";
 import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Case Study | Procedure",
-  description: "",
-};
+import { DynamicPagePropsType } from "@/app/types";
+import { removeDashAndCapitalize } from "@/utils/utils";
 
 export const dynamicParams = false;
 
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
+
+  return {
+    title: removeDashAndCapitalize(slug),
+    description: ""
+  };
+}
+
 export async function generateStaticParams() {
   return Object.keys(caseStudiesData).map((pageName) => ({
     slug: pageName,
@@ -24,9 +30,7 @@ export async function generateStaticParams() {
 
 export default async function Page({
   params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+}: DynamicPagePropsType) {
   const slug = (await params).slug;
   const pageData = caseStudiesData[slug];
 
diff --git a/src/app/contact/page.tsx b/src/app/contact/page.tsx
@@ -5,7 +5,7 @@ import PageBackgroundImage from "@/components/PageBackgroundImage";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Contact | Procedure",
+  title: "Contact",
   description: "",
 };
 
diff --git a/src/app/industries/[slug]/page.tsx b/src/app/industries/[slug]/page.tsx
@@ -5,11 +5,17 @@ import RoundedLeftImage from "@/components/RoundedLeftImage";
 import { industriesPagesData } from "@/data";
 import { twMerge } from "tailwind-merge";
 import { Metadata } from "next";
+import { DynamicPagePropsType } from "@/app/types";
+import { removeDashAndCapitalize } from "@/utils/utils";
 
-export const metadata: Metadata = {
-  title: "Industries | Procedure",
-  description: "",
-};
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
+
+  return {
+    title: removeDashAndCapitalize(slug),
+    description: ""
+  };
+}
 
 export const dynamicParams = false;
 
@@ -21,9 +27,7 @@ export async function generateStaticParams() {
 
 export default async function Page({
   params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+}: DynamicPagePropsType) {
   const slug = (await params).slug;
   const pageData = industriesPagesData[slug];
 
diff --git a/src/app/industries/case-studies/page.tsx b/src/app/industries/case-studies/page.tsx
@@ -7,7 +7,7 @@ import { tabs } from "@/constants/constant";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Case Study | Procedure",
+  title: "Case Study",
   description: "",
 };
 
diff --git a/src/app/industries/page.tsx b/src/app/industries/page.tsx
@@ -7,7 +7,7 @@ import BackgroundImage from "../../components/PageBackgroundImage";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Industries | Procedure",
+  title: "Industries",
   description: "",
 };
 
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -4,7 +4,10 @@ import Header from "@/components/AppLayout/Header";
 import Footer from "@/components/AppLayout/Footer";
 
 export const metadata: Metadata = {
-  title: "Procedure",
+  title: {
+    template: '%s | Procedure',
+    default: 'Home | Procedure', // a default is required when creating a template
+  },
   description: "Think. Build. Measure.",
 };
 
diff --git a/src/app/lifeprocedure/[slug]/page.tsx b/src/app/lifeprocedure/[slug]/page.tsx
@@ -5,15 +5,20 @@ import { twMerge } from "tailwind-merge";
 import PhotoSlider from "../components/PhotoSlider";
 import Pointers from "@/components/Pointers";
 import { lifeProcedureData } from "@/data";
+import { DynamicPagePropsType } from "@/app/types";
+import { removeDashAndCapitalize } from "@/utils/utils";
+import { Metadata } from "next/types";
 
-import { Metadata } from "next";
+export const dynamicParams = false;
 
-export const metadata: Metadata = {
-  title: "Life at Procedure",
-  description: "",
-};
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
 
-export const dynamicParams = false;
+  return {
+    title: removeDashAndCapitalize(slug),
+    description: ""
+  };
+}
 
 export async function generateStaticParams() {
   return Object.keys(lifeProcedureData).map((pageName) => ({
@@ -23,9 +28,7 @@ export async function generateStaticParams() {
 
 export default async function Page({
   params,
-}: {
-  params: Promise<{ slug: string }>;
-}) {
+}: DynamicPagePropsType) {
   const slug = (await params).slug;
   const pageData = lifeProcedureData[slug];
 
diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -4,12 +4,6 @@ import TeamSection from "@/app/components/TeamSection";
 import Link from "next/link";
 import JoinProcedure from "@/components/JoinProcedure";
 import AgileDeliverySection from "./components/AgileDeliverySection";
-import { Metadata } from "next";
-
-export const metadata: Metadata = {
-  title: "Home | Procedure",
-  description: "",
-};
 
 export default function Home() {
   return (
diff --git a/src/app/privacy-policy/page.tsx b/src/app/privacy-policy/page.tsx
@@ -3,7 +3,7 @@ import React from "react";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Privacy Policy | Procedure",
+  title: "Privacy Policy",
   description: "",
 };
 
diff --git a/src/app/resources/page.tsx b/src/app/resources/page.tsx
@@ -6,7 +6,7 @@ import { twMerge } from "tailwind-merge";
 import { Metadata } from "next";
 
 export const metadata: Metadata = {
-  title: "Resources | Procedure",
+  title: "Resources",
   description: "",
 };
 
diff --git a/src/app/tag/[slug]/page.tsx b/src/app/tag/[slug]/page.tsx
@@ -1,8 +1,20 @@
+import { DynamicPagePropsType } from "@/app/types";
 import PageNavbar from "@/components/PageNavbar";
 import { blogsPageData, caseStudiesData } from "@/data";
+import { removeDashAndCapitalize } from "@/utils/utils";
+import { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 
+export async function generateMetadata({ params }: DynamicPagePropsType): Promise<Metadata>  {
+  const slug = (await params).slug
+
+  return {
+    title: `${removeDashAndCapitalize(slug)} Tag`,
+    description: ""
+  };
+}
+
 export async function generateStaticParams() {
   const allTags = [
     ...Object.values(blogsPageData).flatMap((blog) => blog.tags),
diff --git a/src/app/types/index.ts b/src/app/types/index.ts
@@ -0,0 +1,4 @@
+export type DynamicPagePropsType = {
+  params: Promise<{ slug: string }>
+  searchParams: Promise<{ [key: string]: string | string[] | undefined }>
+}
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
@@ -0,0 +1,3 @@
+export const removeDashAndCapitalize = (slug: string) => {
+  return slug.replace(/-/g, " ").replace(/\b\w/g, char => char.toUpperCase())
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+export const removeDashAndCapitalize = (slug: string) => {`
	`2`	`+ return slug.replace(/-/g, " ").replace(/\b\w/g, char => char.toUpperCase())`
	`3`	`+}`