Use breadCrumb title as page title

packages/dito/app/resources/content.ts

@@ -8,7 +8,7 @@ import {
   ROUTE_LANDING,
   ROUTE_METHODS,
   ROUTE_METHODS_COLLECT_IT_SYSTEMS,
-  ROUTE_METHODS_FIVE_PRINCIPALS,
+  ROUTE_METHODS_FIVE_PRINCIPLES,
   ROUTE_METHODS_RESPONSIBLE_ACTORS,
   ROUTE_METHODS_TASKS_PROCESSES,
   ROUTE_METHODS_TECHNICAL_FEASIBILITY,
@@ -171,7 +171,7 @@ Damit die digitale Umsetzung reibungslos klappt, muss die Regelung digitaltaugli
 4. Prinzip 4: Klare Regelungen für eine digitale Ausführung finden
 5. Prinzip 5: Automatisierung ermöglichen
 
-[Details und Beispiele](${ROUTE_METHODS_FIVE_PRINCIPALS.url})`,
+[Details und Beispiele](${ROUTE_METHODS_FIVE_PRINCIPLES.url})`,
   },
 };
 
@@ -505,7 +505,7 @@ Die fünf Prinzipien für digitaltaugliche Gesetzgebung decken unterschiedliche
         buttons: [
           {
             text: "Fünf Prinzipien nutzen",
-            href: ROUTE_METHODS_FIVE_PRINCIPALS.url,
+            href: ROUTE_METHODS_FIVE_PRINCIPLES.url,
           },
         ],
       },
@@ -809,13 +809,13 @@ Vereinbaren Sie einen Termin unter [0151/40 76 78 39](tel:0151/40767839) oder [d
       {
         text: "Zum nächsten Schritt",
         look: "tertiary",
-        href: ROUTE_METHODS_FIVE_PRINCIPALS.url,
+        href: ROUTE_METHODS_FIVE_PRINCIPLES.url,
       },
     ],
   },
 } as TMethodPage;
 
-export const fivePrincipals = {
+export const fivePrinciples = {
   title: "Fünf Prinzipien für digitaltaugliche Gesetzgebung",
   principals: [
     {

packages/dito/app/resources/staticRoutes.ts

@@ -57,7 +57,7 @@ export const ROUTE_METHODS_COLLECT_IT_SYSTEMS: Route = {
   title: "IT-Systeme erfassen",
   parent: ROUTE_METHODS.url,
 };
-export const ROUTE_METHODS_FIVE_PRINCIPALS: Route = {
+export const ROUTE_METHODS_FIVE_PRINCIPLES: Route = {
   url: `${ROUTE_METHODS.url}/fuenf-prinzipien`,
   title: "Fünf Prinzipien",
   parent: ROUTE_METHODS.url,
@@ -103,7 +103,7 @@ const routes: Route[] = [
   ROUTE_METHODS_RESPONSIBLE_ACTORS,
   ROUTE_METHODS_TASKS_PROCESSES,
   ROUTE_METHODS_COLLECT_IT_SYSTEMS,
-  ROUTE_METHODS_FIVE_PRINCIPALS,
+  ROUTE_METHODS_FIVE_PRINCIPLES,
   ROUTE_METHODS_TECHNICAL_FEASIBILITY,
   ROUTE_DOCUMENTATION,
   ROUTE_IMPRINT,

packages/dito/app/routes/_index.tsx

@@ -9,9 +9,10 @@ import RichText from "@digitalcheck/shared/components/RichText";
 import { MetaFunction } from "@remix-run/react";
 import FeedbackBanner from "components/FeedbackBanner";
 import { header, landing, siteMeta } from "resources/content";
+import { ROUTE_LANDING } from "resources/staticRoutes";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${landing.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_LANDING.title} — ${siteMeta.title}` }];
 };
 
 export default function Index() {

packages/dito/app/routes/barrierefreiheit.tsx

@@ -4,9 +4,10 @@ import Header from "@digitalcheck/shared/components/Header";
 import RichText from "@digitalcheck/shared/components/RichText";
 import { MetaFunction } from "@remix-run/react";
 import { accessibility, siteMeta } from "resources/content";
+import { ROUTE_A11Y } from "resources/staticRoutes";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${accessibility.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_A11Y.title} — ${siteMeta.title}` }];
 };
 
 export default function Index() {

packages/dito/app/routes/datenschutz.tsx

@@ -4,9 +4,10 @@ import Header from "@digitalcheck/shared/components/Header";
 import RichText from "@digitalcheck/shared/components/RichText";
 import { MetaFunction } from "@remix-run/react";
 import { privacy, siteMeta } from "resources/content";
+import { ROUTE_PRIVACY } from "resources/staticRoutes";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${privacy.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_PRIVACY.title} — ${siteMeta.title}` }];
 };
 
 export default function Index() {

packages/dito/app/routes/dokumentation.tsx

@@ -10,9 +10,10 @@ import RichText from "@digitalcheck/shared/components/RichText";
 import { MetaFunction } from "@remix-run/react";
 import FeedbackBanner from "components/FeedbackBanner";
 import { documentation, header, siteMeta } from "resources/content";
+import { ROUTE_DOCUMENTATION } from "resources/staticRoutes";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${documentation.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_DOCUMENTATION.title} — ${siteMeta.title}` }];
 };
 
 export default function Index() {

packages/dito/app/routes/impressum.tsx

@@ -4,9 +4,10 @@ import Header from "@digitalcheck/shared/components/Header";
 import RichText from "@digitalcheck/shared/components/RichText";
 import { MetaFunction } from "@remix-run/react";
 import { imprint, siteMeta } from "resources/content";
+import { ROUTE_IMPRINT } from "resources/staticRoutes";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${imprint.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_IMPRINT.title} — ${siteMeta.title}` }];
 };
 
 export default function Index() {

packages/dito/app/routes/methoden.tsx

@@ -11,9 +11,10 @@ import { MetaFunction } from "@remix-run/react";
 import FeedbackBanner from "components/FeedbackBanner";
 import { renderToString } from "react-dom/server";
 import { header, methods, siteMeta } from "resources/content";
+import { ROUTE_METHODS } from "resources/staticRoutes";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${methods.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_METHODS.title} — ${siteMeta.title}` }];
 };
 
 export default function Index() {

packages/dito/app/routes/methoden_.$subPage.tsx

@@ -24,6 +24,7 @@ import {
 
 export type TMethodPage = {
   title: string;
+  pageTitle: string;
   subtitle: string;
   accordion?: {
     title: string;
@@ -76,18 +77,22 @@ export function loader({ params }: LoaderFunctionArgs) {
   switch (route) {
     case ROUTE_METHODS_RESPONSIBLE_ACTORS.url:
       content = responsibleActors;
+      content.pageTitle = ROUTE_METHODS_RESPONSIBLE_ACTORS.title;
       break;
 
     case ROUTE_METHODS_TASKS_PROCESSES.url:
       content = tasksProcesses;
+      content.pageTitle = ROUTE_METHODS_TASKS_PROCESSES.title;
       break;
 
     case ROUTE_METHODS_COLLECT_IT_SYSTEMS.url:
       content = collectITSystems;
+      content.pageTitle = ROUTE_METHODS_COLLECT_IT_SYSTEMS.title;
       break;
 
     case ROUTE_METHODS_TECHNICAL_FEASIBILITY.url:
       content = technicalFeasibility;
+      content.pageTitle = ROUTE_METHODS_TECHNICAL_FEASIBILITY.title;
       break;
   }
 
@@ -103,7 +108,7 @@ export function loader({ params }: LoaderFunctionArgs) {
 
 export const meta: MetaFunction<typeof loader> = ({ data }) => {
   if (data) {
-    return [{ title: `${data.title} — ${siteMeta.title}` }];
+    return [{ title: `${data.pageTitle} — ${siteMeta.title}` }];
   }
 };
 

packages/dito/app/routes/methoden_.fuenf-prinzipien.tsx

@@ -6,8 +6,11 @@ import Heading from "@digitalcheck/shared/components/Heading";
 import InfoBox from "@digitalcheck/shared/components/InfoBox";
 import { LoaderFunctionArgs } from "@remix-run/node";
 import { json, Link, MetaFunction, useLoaderData } from "@remix-run/react";
-import { fivePrincipals, siteMeta } from "resources/content";
-import { ROUTE_METHODS } from "resources/staticRoutes";
+import { fivePrinciples, siteMeta } from "resources/content";
+import {
+  ROUTE_METHODS,
+  ROUTE_METHODS_FIVE_PRINCIPLES,
+} from "resources/staticRoutes";
 import FeedbackBanner from "../components/FeedbackBanner.tsx";
 
 export function loader({ request }: LoaderFunctionArgs) {
@@ -24,7 +27,9 @@ export function loader({ request }: LoaderFunctionArgs) {
 }
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${fivePrincipals.title} — ${siteMeta.title}` }];
+  return [
+    { title: `${ROUTE_METHODS_FIVE_PRINCIPLES.title} — ${siteMeta.title}` },
+  ];
 };
 
 const slugify = (string: string) =>
@@ -35,8 +40,8 @@ export default function Index() {
 
   // TODO: this doesn't work atm when coming from the last methoden-page
   const nextStep = referrer.startsWith(ROUTE_METHODS.url)
-    ? fivePrincipals.nextStepMethods
-    : fivePrincipals.nextStep;
+    ? fivePrinciples.nextStepMethods
+    : fivePrinciples.nextStep;
 
   return (
     <>
@@ -45,13 +50,13 @@ export default function Index() {
           <Header
             heading={{
               tagName: "h1",
-              text: fivePrincipals.title,
+              text: fivePrinciples.title,
             }}
           />
           <div className="mt-64">
             <Heading tagName="div" text="Inhalt" className="font-bold" />
             <ol className="ds-stack-8 mt-16">
-              {fivePrincipals.principals.map((principal) => (
+              {fivePrinciples.principals.map((principal) => (
                 <li key={principal.label}>
                   <Link
                     to={`#${slugify(principal.label)}`}
@@ -65,7 +70,7 @@ export default function Index() {
           </div>
         </Container>
       </Background>
-      {fivePrincipals.principals.map((principal, index) => (
+      {fivePrinciples.principals.map((principal, index) => (
         <Background
           key={principal.content}
           backgroundColor={index % 2 === 0 ? "white" : "blue"}

packages/dito/app/routes/vorpruefung.$questionId/route.tsx

@@ -24,7 +24,7 @@ import PreCheckNavigation from "./PreCheckNavigation";
 const { questions, answerOptions, nextButton } = preCheck;
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${preCheck.start.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_PRECHECK.title} — ${siteMeta.title}` }];
 };
 
 export async function loader({ request, params }: LoaderFunctionArgs) {

packages/dito/app/routes/vorpruefung._index.tsx

@@ -9,14 +9,14 @@ import { LoaderFunctionArgs, json } from "@remix-run/node";
 import { MetaFunction } from "@remix-run/react";
 import FeedbackBanner from "components/FeedbackBanner";
 import { preCheck, siteMeta } from "resources/content";
-import { ROUTE_LANDING } from "resources/staticRoutes";
+import { ROUTE_LANDING, ROUTE_PRECHECK } from "resources/staticRoutes";
 import {
   getAnswersFromCookie,
   getHeaderFromCookie,
 } from "utils/cookies.server";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${preCheck.start.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_PRECHECK.title} — ${siteMeta.title}` }];
 };
 
 export async function loader({ request }: LoaderFunctionArgs) {

packages/dito/app/routes/vorpruefung.ergebnis/route.tsx

@@ -2,18 +2,18 @@ import { json, redirect, type LoaderFunctionArgs } from "@remix-run/node";
 import { MetaFunction, useLoaderData } from "@remix-run/react";
 
 import { preCheck, siteMeta } from "resources/content";
-import { ROUTE_PRECHECK } from "resources/staticRoutes";
+import { ROUTE_PRECHECK, ROUTE_RESULT } from "resources/staticRoutes";
 import type { Answers, Option } from "routes/vorpruefung.$questionId/route";
 import { getAnswersFromCookie } from "utils/cookies.server";
 import trackCustomEvent from "utils/trackCustomEvent.server";
 import ResultNegative from "./ResultNegative";
 import ResultPositive from "./ResultPositive";
 import ResultUnsure from "./ResultUnsure";
 
-const { result, questions } = preCheck;
+const { questions } = preCheck;
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${result.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_RESULT.title} — ${siteMeta.title}` }];
 };
 
 const getQuestionIDsOfOption = (answers: Answers, option: Option["value"]) =>

packages/dito/app/routes/vorpruefung.ergebnis_.einschaetzung.tsx

@@ -9,11 +9,15 @@ import { useForm } from "@rvf/remix";
 import { withZod } from "@rvf/zod";
 import { useEffect, useState } from "react";
 import { assessment, siteMeta } from "resources/content";
-import { ROUTE_ASSESSMENT_PDF, ROUTE_RESULT } from "resources/staticRoutes";
+import {
+  ROUTE_ASSESSMENT,
+  ROUTE_ASSESSMENT_PDF,
+  ROUTE_RESULT,
+} from "resources/staticRoutes";
 import { z } from "zod";
 
 export const meta: MetaFunction = () => {
-  return [{ title: `${assessment.title} — ${siteMeta.title}` }];
+  return [{ title: `${ROUTE_ASSESSMENT.title} — ${siteMeta.title}` }];
 };
 
 const validator = withZod(