Merge pull request #208 from Lemoncode/feature/play-ground-seo

Feature/play ground seo

Author: brauliodiez

front/src/app/embalse/[embalse]/page.tsx

@@ -12,6 +12,7 @@ import {
   mapEmbalseToReservoirData,
   mapHistoricalReservoirToViewModel,
 } from "@/pods/embalse/embalse.mapper";
+import { formatEmbalseDisplayName } from "@/pods/embalse/embalse-name.helper";
 
 export const revalidate = 300; // ISR: regenerar cada 5 minutos
 
@@ -20,7 +21,7 @@ export async function generateMetadata({ params }: Props): Promise<Metadata> {
   const embalseSlug = await getEmbalseBySlugCached(embalse);
 
   return {
-    title: embalseSlug.nombre,
+    title: `Embalse de ${formatEmbalseDisplayName(embalseSlug.nombre)}`,
     alternates: { canonical: `/embalse/${embalse}` },
   };
 }

front/src/app/page.tsx

@@ -1,7 +1,12 @@
+import type { Metadata } from "next";
 import { EmbalseSearch } from "@/pods/embalse-search";
 import { getEmbalsesCollection } from "@/pods/embalse-search/api";
 
-export const dynamic = "force-dynamic";
+export const revalidate = 300;
+
+export const metadata: Metadata = {
+  title: { absolute: "Estado de los embalses de España — InfoEmbalse" },
+};
 
 const RootPage = async () => {
   const embalses = await getEmbalsesCollection();

front/src/pods/embalse-search/embalse-search.tsx

@@ -65,9 +65,9 @@ export const EmbalseSearch: React.FC<Props> = (props) => {
           aria-labelledby="search-title"
         >
           <div className="text-center">
-            <h2 id="search-title" className="font-bold">
-              Embalses
-            </h2>
+            <h1 id="search-title" className="font-bold">
+              Estado de los embalses de España
+            </h1>
           </div>
           <div>
             <p className="text-sm">

front/src/pods/embalse/components/reservoir-card-gauge.tsx

@@ -9,6 +9,7 @@ import { GaugeChart } from "./reservoir-gauge";
 import { GaugeLegend } from "./reservoir-gauge/gauge-chart/components/gauge-legend.component";
 import { HistoryChart } from "./chart";
 import { useIsMobile } from "./useIsMobile";
+import { formatEmbalseDisplayName } from "../embalse-name.helper";
 interface Props {
   name: string;
   reservoirData: ReservoirData;
@@ -38,7 +39,7 @@ export const ReservoirCardGauge: React.FC<Props> = (props) => {
       aria-labelledby="gauge-title"
     >
       <h2 id="gauge-title" className="text-center">
-        {name}
+        {formatEmbalseDisplayName(name)}
       </h2>
       {isMobile && (
         <div className="join">

front/src/pods/embalse/embalse-name.helper.spec.ts

@@ -0,0 +1,33 @@
+import { describe, it, expect } from "vitest";
+import { formatEmbalseDisplayName } from "./embalse-name.helper";
+
+describe("formatEmbalseDisplayName", () => {
+  it("flips comma-inverted El", () => {
+    expect(formatEmbalseDisplayName("Atazar, El")).toBe("El Atazar");
+    expect(formatEmbalseDisplayName("Pardo, El")).toBe("El Pardo");
+    expect(formatEmbalseDisplayName("Villar, El")).toBe("El Villar");
+  });
+
+  it("flips comma-inverted La", () => {
+    expect(formatEmbalseDisplayName("Jarosa, La")).toBe("La Jarosa");
+  });
+
+  it("handles compound suffix with hyphen and parens", () => {
+    expect(formatEmbalseDisplayName("Vellón,El-(Pedrezuela)")).toBe(
+      "El Vellón (Pedrezuela)",
+    );
+  });
+
+  it("leaves untouched names without inverted article", () => {
+    expect(formatEmbalseDisplayName("Navacerrada")).toBe("Navacerrada");
+    expect(formatEmbalseDisplayName("Entrepeñas")).toBe("Entrepeñas");
+    expect(formatEmbalseDisplayName("Cáceres - Guadiloba")).toBe(
+      "Cáceres - Guadiloba",
+    );
+    expect(formatEmbalseDisplayName("Gabriel y Galán")).toBe("Gabriel y Galán");
+  });
+
+  it("returns empty string for empty input", () => {
+    expect(formatEmbalseDisplayName("")).toBe("");
+  });
+});

front/src/pods/embalse/embalse-name.helper.ts

@@ -0,0 +1,12 @@
+const INVERTED_ARTICLE_PATTERN = /^(.+?),\s*(El|La|Los|Las)\b\s*(.*)$/;
+
+export const formatEmbalseDisplayName = (rawName: string): string => {
+  if (!rawName) return "";
+  const match = rawName.match(INVERTED_ARTICLE_PATTERN);
+  if (!match) return rawName.trim();
+
+  const [, baseName, article, rest] = match;
+  const cleanedRest = rest.replace(/^[-\s]+/, "").trim();
+  const tail = cleanedRest ? ` ${cleanedRest}` : "";
+  return `${article} ${baseName.trim()}${tail}`.replace(/\s+/g, " ").trim();
+};