From 22a5733a9d458792f18f8570fedb30dc519e0bdb Mon Sep 17 00:00:00 2001
From: Ru Chern Chong <ruchern.chong@sgcarstrends.com>
Date: Mon, 2 Dec 2024 13:52:44 +0800
Subject: [PATCH] Remove site name from title tags

---
 app/cars/page.tsx            | 19 +++++++-------
 app/coe/(prices)/page.tsx    |  4 +--
 app/layout.tsx               |  5 +---
 components/MonthSelector.tsx | 48 +++++++++++++++++-------------------
 4 files changed, 36 insertions(+), 40 deletions(-)

diff --git a/app/cars/page.tsx b/app/cars/page.tsx
index f939a15..88075c8 100644
--- a/app/cars/page.tsx
+++ b/app/cars/page.tsx
@@ -37,13 +37,13 @@ export const generateMetadata = async (props: {
     month = latestMonth.cars;
   }
 
-  const formattedDate = formatDateToMonthYear(month);
+  const formattedMonth = formatDateToMonthYear(month);
 
-  const title = "Car Registrations";
-  const description = `Breakdown of cars registered in ${formattedDate} by fuel types and vehicle types.`;
+  const title = `${formattedMonth} Car Registrations in Singapore`;
+  const description = `Discover ${formattedMonth} car registrations in Singapore. See detailed stats by fuel type, vehicle type, and top brands.`;
   const pageUrl = `/cars`;
 
-  // const images = `/api/og?title=Car Registrations for ${formattedDate}`;
+  // const images = `/api/og?title=Car Registrations for ${formattedMonth}`;
 
   return {
     title,
@@ -131,7 +131,7 @@ const CarsPage = async (props: { searchParams: SearchParams }) => {
     "@context": "https://schema.org",
     "@type": "WebPage",
     name: `${formattedMonth} Car Registrations in Singapore`,
-    description: `Breakdown of the cars registered in ${formattedMonth} by fuel type and vehicle type.`,
+    description: `Discover ${formattedMonth} car registrations in Singapore. See detailed stats by fuel type, vehicle type, and top brands.`,
     url: `${SITE_URL}/cars`,
     publisher: {
       "@type": "Organization",
@@ -144,11 +144,12 @@ const CarsPage = async (props: { searchParams: SearchParams }) => {
     <>
       <StructuredData data={structuredData} />
       <div className="flex flex-col gap-4">
-        <div className="grid grid-cols-1 gap-2 lg:grid-cols-2">
-          <div className="flex items-end gap-2">
-            <Typography.H1>Car Registrations</Typography.H1>
+        <div className="flex flex-col justify-between gap-2 md:flex-row md:items-center">
+          <div className="space-y-2">
+            <Typography.H1 className="grow">Car Registrations</Typography.H1>
+            <Typography.H2>{formattedMonth} Stats</Typography.H2>
           </div>
-          <div className="lg:justify-self-end">
+          <div className="shrink">
             <Suspense fallback={null}>
               <MonthSelector months={months} />
             </Suspense>
diff --git a/app/coe/(prices)/page.tsx b/app/coe/(prices)/page.tsx
index ff4755a..390176c 100644
--- a/app/coe/(prices)/page.tsx
+++ b/app/coe/(prices)/page.tsx
@@ -23,7 +23,7 @@ import type { WebPage, WithContext } from "schema-dts";
 
 type SearchParams = Promise<{ [key: string]: string | string[] | undefined }>;
 
-const title = "COE Dashboard";
+const title = "COE Result";
 const description =
   "Explore historical trends and bidding results for COE in Singapore.";
 
@@ -117,7 +117,7 @@ const COEPricesPage = async (props: { searchParams: SearchParams }) => {
     <>
       <StructuredData data={structuredData} />
       <div className="flex flex-col gap-y-4">
-        <Typography.H1>COE Results</Typography.H1>
+        <Typography.H1>COE Result</Typography.H1>
         <div className="grid grid-cols-1 gap-4 xl:grid-cols-12">
           <div className="xl:col-span-8">
             <COEPremiumChart data={data} months={months} />
diff --git a/app/layout.tsx b/app/layout.tsx
index ec1d382..d969e55 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -21,10 +21,7 @@ const url = new URL(SITE_URL);
 
 export const metadata: Metadata = {
   metadataBase: url,
-  title: {
-    default: title,
-    template: `%s | ${title}`,
-  },
+  title,
   description,
   robots: { index: true, follow: true },
   openGraph: {
diff --git a/components/MonthSelector.tsx b/components/MonthSelector.tsx
index 7280a8a..b277e47 100644
--- a/components/MonthSelector.tsx
+++ b/components/MonthSelector.tsx
@@ -49,30 +49,28 @@ export const MonthSelector = ({ months }: Props) => {
   );
 
   return (
-    <div>
-      <Select value={selectedMonth} onValueChange={handleValueChange}>
-        <SelectTrigger>
-          <SelectValue placeholder="Select Month" />
-        </SelectTrigger>
-        <SelectContent>
-          {sortedMonths.map(([year, months]) => (
-            <SelectGroup key={year}>
-              <SelectLabel>{year}</SelectLabel>
-              {months.slice().map((month) => {
-                const date = `${year}-${month}`;
-                return (
-                  <SelectItem key={month} value={date}>
-                    <div className="flex items-center">
-                      <Calendar className="mr-2 h-4 w-4" />
-                      {formatDateToMonthYear(date)}
-                    </div>
-                  </SelectItem>
-                );
-              })}
-            </SelectGroup>
-          ))}
-        </SelectContent>
-      </Select>
-    </div>
+    <Select value={selectedMonth} onValueChange={handleValueChange}>
+      <SelectTrigger>
+        <SelectValue placeholder="Select Month" />
+      </SelectTrigger>
+      <SelectContent>
+        {sortedMonths.map(([year, months]) => (
+          <SelectGroup key={year}>
+            <SelectLabel>{year}</SelectLabel>
+            {months.slice().map((month) => {
+              const date = `${year}-${month}`;
+              return (
+                <SelectItem key={month} value={date}>
+                  <div className="flex items-center">
+                    <Calendar className="mr-2 h-4 w-4" />
+                    {formatDateToMonthYear(date)}
+                  </div>
+                </SelectItem>
+              );
+            })}
+          </SelectGroup>
+        ))}
+      </SelectContent>
+    </Select>
   );
 };