feat: implementing dynamic title to pages (#1918)

* feat: implementing dynamic title to pages Signed-off-by: Tushar Saini <[email protected]> * feat: implementing dynamic title to Projects dynamic route Signed-off-by: Tushar Saini <[email protected]> * feat: adding types for metadata Signed-off-by: Tushar Saini <[email protected]> --------- Signed-off-by: Tushar Saini <[email protected]> Co-authored-by: Priyankar Pal <[email protected]>
priyankarpal · Aug 1, 2023 · 1f9e38a · 1f9e38a
1 parent 9a2df05
commit 1f9e38a
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 9 deletions.
diff --git a/app/docs/page.tsx b/app/docs/page.tsx
@@ -1,4 +1,9 @@
 import AddYourProjectsGuide from "@/components/AddYourProjectsGuide";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: 'Docs',
+}
 
 export default function page() {
   return (

diff --git a/app/layout.tsx b/app/layout.tsx
@@ -2,12 +2,16 @@ import "./globals.css";
 import { Inter } from "next/font/google";
 import { MobileNavBar } from "@/components/MobileNavbar";
 import { Navbar, Footer, ScrollToTop } from "@/components";
+import { Metadata } from "next";
 
 
 const inter = Inter({ subsets: ["latin"] });
 
-export const metadata = {
-  title: "ProjectsHut - Learn. Build. Share.",
+export const metadata: Metadata = {
+  title: {
+    default: "ProjectsHut - Learn. Build. Share.",
+    template: '%s - ProjectsHut',
+  },
   description:
     "A platform where you can share your open source projects with the world.",
 };
@@ -20,10 +24,10 @@ export default function RootLayout({
   return (
     <html lang="en">
       <head>
-      <meta name="title" content={metadata.description} />
+      <meta name="title" content={metadata.description as string} />
         <meta
           name="description"
-          content={metadata.description}
+          content={metadata.description as string}
         />
         <meta name="language" content="en" />
         <meta name="keywords" content="ProjectHut, projects, educational resources, wide range of projects, high-quality projects, React, Nodejs , javascript, open source, contribution , learners" />
@@ -32,15 +36,15 @@ export default function RootLayout({
         <meta name="revisit-after" content="7 days" />
         <meta name="viewport" content="width=device-width, initial-scale=1" />
         {/* Open Graph meta tags for website preview */}
-        <meta property="og:title" content={metadata.title} />
-        <meta property="og:description" content={metadata.description}  />
+        <meta property="og:title" content={metadata.title as string} />
+        <meta property="og:description" content={metadata.description as string}  />
         <meta property="og:url" content="https://projectshut.vercel.app/" /> 
         <meta property="og:type" content="website" />
         <meta property="og:site_name" content="ProjectHut" />
         {/* Twitter meta tags for website preview */}
         <meta name="twitter:card" content="summary_large_image" />
-        <meta property="twitter:title" content={metadata.title} />
-        <meta property="twitter:description" content={metadata.description} />
+        <meta property="twitter:title" content={metadata.title as string} />
+        <meta property="twitter:description" content={metadata.description as string} />
         <meta property="twitter:image" content="https://user-images.githubusercontent.com/88102392/251507361-e71396f9-92c6-4664-b7e4-4275cb902e65.png" /> 
       </head>
       <body className={inter.className} suppressHydrationWarning={true}>

diff --git a/app/projects/[username]/page.tsx b/app/projects/[username]/page.tsx
@@ -1,4 +1,16 @@
 import ProjectList from "@/components/projects/ProjectList";
+import { Metadata, ResolvingMetadata } from 'next'
+
+type Props = {
+  params: { username: string }
+}
+
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const title = params.username[0].toUpperCase() + params.username.slice(1)
+  return {
+    title: title,
+  }
+}
 
 export default function page() {
   return (

diff --git a/app/projects/page.tsx b/app/projects/page.tsx
@@ -1,5 +1,9 @@
 import Projects from "@/components/projects/Projects";
-import { NextPage } from "next";
+import { Metadata, NextPage } from "next";
+
+export const metadata: Metadata = {
+  title: 'Projects',
+}
 
 const page: NextPage = () => {
   return (