Use title with jurisdiction for guide page titles (#706)

Author: uncenter

web/src/constants/jurisdictions.ts

@@ -73,6 +73,7 @@ export const JURISDICTIONS = {
 >;
 
 export type JurisdictionId = keyof typeof JURISDICTIONS;
+export type JurisdictionName = (typeof JURISDICTIONS)[JurisdictionId]["name"];
 
 export const JURISDICTION_OPTIONS = Object.entries(JURISDICTIONS).map(
   ([id, jurisdiction]) => ({

web/src/content.config.ts

@@ -5,7 +5,10 @@ import { ANNOTATION_TYPES } from "./constants/annotations";
 import { CATEGORIES } from "./constants/categories";
 import { COLOR_KEYS } from "./constants/colors";
 import type { FormConfig } from "./constants/forms";
-import { JURISDICTIONS } from "./constants/jurisdictions";
+import {
+  JURISDICTIONS,
+  type JurisdictionName,
+} from "./constants/jurisdictions";
 import type { PDFDefinition } from "./constants/pdf";
 import { SERVICES } from "./constants/services";
 
@@ -120,7 +123,7 @@ const jurisdictions = defineCollection({
       namesakeSupport: jurisdiction.namesakeSupport,
     })),
   schema: z.object({
-    name: z.string(),
+    name: z.string<JurisdictionName>(),
     territory: z.boolean(),
     namesakeSupport: z.enum(["full", "prioritized", "none"]),
   }),

web/src/lib/utils/__tests__/formatTitleWithJurisdiction.test.ts

@@ -0,0 +1,14 @@
+import { describe, expect, it } from "vitest";
+import { formatTitleWithJurisdiction } from "../formatTitleWithJurisdiction";
+
+describe("formatTitleWithJurisdiction", () => {
+  it("renders the title correctly with the jurisdiction", () => {
+    expect(formatTitleWithJurisdiction("Court Order", "Massachusetts")).toEqual(
+      "Massachusetts Court Order",
+    );
+  });
+
+  it("renders the title correctly without the jurisdiction", () => {
+    expect(formatTitleWithJurisdiction("Passport")).toEqual("Passport");
+  });
+});

web/src/lib/utils/formatTitleWithJurisdiction.ts

@@ -0,0 +1,16 @@
+import type { JurisdictionName } from "#constants/jurisdictions.ts";
+
+/**
+ * Given a title and jurisdiction
+ * return the full string to display in the page title.
+ *
+ * @example
+ * formatPageTitle("Court Order", "Massachusetts")
+ * // "Massachusetts Court Order"
+ */
+export function formatTitleWithJurisdiction(
+  title: string,
+  jurisdiction?: JurisdictionName,
+) {
+  return `${jurisdiction ? `${jurisdiction} ` : ""}${title}`;
+}

web/src/pages/guides/[...slug].astro

@@ -5,6 +5,7 @@ import GuideFooter from "#components/GuideFooter.astro";
 import StubBanner from "#components/StubBanner.astro";
 import TableOfContents from "#components/TableOfContents.astro";
 import ProseLayout from "#layouts/ProseLayout.astro";
+import { formatTitleWithJurisdiction } from "#lib/utils/formatTitleWithJurisdiction.ts";
 
 export async function getStaticPaths() {
   const guides = await getCollection("guides", ({ data }) => !data.unlisted);
@@ -20,14 +21,14 @@ const jurisdiction = guide.data.jurisdiction
   ? await getEntry(guide.data.jurisdiction)
   : null;
 
-const searchTitle = jurisdiction
-  ? `${jurisdiction.data.name}: ${guide.data.title}`
-  : guide.data.title;
+const title = formatTitleWithJurisdiction(
+  guide.data.title,
+  jurisdiction?.data.name,
+);
 ---
 
 <ProseLayout
-  title={guide.data.title}
-  searchTitle={searchTitle}
+  title={title}
   description={guide.data.description}
   annotation="box"
   breadcrumbs={[