Feat/151 page metadata

src/app/chart/layout.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Bar Chart",
+};
+
+export default function ChartLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return children;
+}

src/app/chart/page.tsx

@@ -242,6 +242,10 @@ export default function ChartPage() {
         [setChartType],
     );
 
+    useEffect(() => {
+        document.title = `${chartType === "bar" ? "Bar Chart" : "Line Chart"} | MHD`;
+    }, [chartType]);
+
     // Keyboard shortcuts for chart type
     useHotkey("b", () => handleChartTypeChange("bar"));
     useHotkey("l", () => handleChartTypeChange("line"));

src/app/layout.tsx

@@ -22,8 +22,12 @@ import { Suspense } from "react";
 import InvalidURLHandler from "@/components/InvalidURLHandler";
 
 export const metadata: Metadata = {
-    title: "MHD",
-    description: "MHD",
+    title: {
+        template: "%s | MHD",
+        default: "MHD",
+    },
+    description:
+        "Data visualization dashboard for Massachusetts History Society's annual contest, Massachusetts History Day.",
     icons: { icon: "/favicon.png" },
 };
 

src/app/map/layout.tsx

@@ -0,0 +1,9 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Heatmap",
+};
+
+export default function MapLayout({ children }: { children: React.ReactNode }) {
+    return children;
+}

src/app/map/page.tsx

@@ -135,7 +135,7 @@ function HeatMapPage() {
     );
     const regionView = rawRegionView.toLowerCase();
 
-    const [showSchools, setShowSchools] = useQueryState(
+    const [showSchools] = useQueryState(
         "showSchools",
         parseAsBoolean.withDefault(true),
     );
@@ -440,13 +440,6 @@ function HeatMapPage() {
                         </div>
                     </div>
                 </div>
-
-                <Button
-                    onClick={() => setShowSchools(!showSchools)}
-                    className="w-32 py-2"
-                >
-                    {showSchools ? "Hide Schools" : "Show Schools"}
-                </Button>
             </div>
             <div className="flex-1 rounded-2xl overflow-hidden border border-slate-200 relative">
                 {schoolDataError ? (

src/app/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from "next";
 import { Suspense } from "react";
 import Dashboard from "@/components/Dashboard";
 import { DashboardSkeleton } from "@/components/skeletons/DashboardSkeleton";
 
+export const metadata: Metadata = {
+    title: "Dashboard | MHD",
+};
+
 export default function Home() {
     return (
         <Suspense fallback={<DashboardSkeleton />}>

src/app/schools/[name]/layout.tsx

@@ -0,0 +1,19 @@
+export async function generateMetadata({
+    params,
+}: {
+    params: Promise<{ name: string }>;
+}) {
+    const { name } = await params;
+    const decoded = decodeURIComponent(name)
+        .replace(/-/g, " ")
+        .replace(/\b\w/g, (c) => c.toUpperCase());
+    return { title: decoded };
+}
+
+export default function SchoolProfileLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return children;
+}

src/app/schools/[name]/page.tsx

@@ -383,15 +383,17 @@ export default function SchoolProfilePage() {
                 </Link>
 
                 {/* Project type distribution — same 3-col grid as stats; spans 2 cells */}
-                <div className="grid grid-cols-3 gap-8">
-                    <div className="col-span-2 min-w-0">
-                        <PieChart
-                            slices={projectCategoryDistribution(projects)}
-                            legendTitle="Project Type Distribution"
-                            emptyMessage="No project data"
-                        />
+                {projects.length !== 0 && (
+                    <div className="grid grid-cols-3 gap-8">
+                        <div className="col-span-2 min-w-0">
+                            <PieChart
+                                slices={projectCategoryDistribution(projects)}
+                                legendTitle="Project Type Distribution"
+                                emptyMessage="No project data"
+                            />
+                        </div>
                     </div>
-                </div>
+                )}
 
                 {/* School location map */}
                 <div className="rounded-lg space-y-4">

src/app/schools/layout.tsx

@@ -0,0 +1,16 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: {
+        template: "%s | MHD",
+        default: "Schools",
+    },
+};
+
+export default function SchoolsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return children;
+}

src/app/settings/layout.tsx

@@ -0,0 +1,13 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+    title: "Settings",
+};
+
+export default function SettingsLayout({
+    children,
+}: {
+    children: React.ReactNode;
+}) {
+    return children;
+}

src/app/signin/page.tsx

@@ -1,6 +1,11 @@
+import type { Metadata } from "next";
 import AuthForm from "@/components/AuthForm";
 import WarpShader from "@/components/WarpShader";
 
+export const metadata: Metadata = {
+    title: "Sign In",
+};
+
 export default async function SignInPage({
     searchParams,
 }: {

src/app/upload/page.tsx

@@ -10,8 +10,13 @@
  *
  **************************************************************/
 
+import type { Metadata } from "next";
 import SpreadsheetState from "@/components/SpreadsheetState";
 
+export const metadata: Metadata = {
+    title: "Upload",
+};
+
 export default function UploadPage() {
     return <SpreadsheetState />;
 }