Staging

.env

@@ -1,3 +1,3 @@
-COMPLETE_URL=https://geops.com/api/callback
-ORIGIN=geops.com
+COMPLETE_URL=https://stag.geops.com/api/callback
+ORIGIN=geops.com,stag.geops.com
 NEXT_SHARP_PATH="./node_modules/sharp"

app/de/cases/[slug]/page.js

@@ -0,0 +1,25 @@
+import getContentList from "../../../../lib/getContentList.js";
+import { getCasesSlugProps } from "../../../../lib/getProps.js";
+import { generateCasesSlugMetadata } from "../../../../lib/getMetadata.js";
+import CasesArticle from "../../../../components/CasesArticle.js";
+
+export async function generateMetadata({ params: { slug } }) {
+  const md = await generateCasesSlugMetadata("de", slug);
+  return md;
+}
+
+export async function generateStaticParams() {
+  const list = getContentList("de", {
+    collections: ["cases"],
+    fields: ["slug"],
+  });
+
+  return list.map(({ slug }) => ({
+    slug,
+  }));
+}
+
+export default async function Page({ params: { slug } }) {
+  const props = await getCasesSlugProps("de", slug);
+  return <CasesArticle {...props} />;
+}

app/de/cases/page.js

@@ -0,0 +1,13 @@
+import CasesIndex from "../../../components/CasesIndex.js";
+import { getCasesProps } from "../../../lib/getProps.js";
+import { generateCasesMetadata } from "../../../lib/getMetadata.js";
+
+export async function generateMetadata() {
+  const md = await generateCasesMetadata("de", "/de/cases", "/en/cases");
+  return md;
+}
+
+export default async function Page() {
+  const props = await getCasesProps("de");
+  return <CasesIndex {...props} />;
+}

app/en/cases/[slug]/page.js

@@ -0,0 +1,25 @@
+import getContentList from "../../../../lib/getContentList.js";
+import { getCasesSlugProps } from "../../../../lib/getProps.js";
+import { generateCasesSlugMetadata } from "../../../../lib/getMetadata.js";
+import CasesArticle from "../../../../components/CasesArticle.js";
+
+export async function generateMetadata({ params: { slug } }) {
+  const md = await generateCasesSlugMetadata("en", slug);
+  return md;
+}
+
+export async function generateStaticParams() {
+  const list = getContentList("en", {
+    collections: ["cases"],
+    fields: ["slug"],
+  });
+
+  return list.map(({ slug }) => ({
+    slug,
+  }));
+}
+
+export default async function Page({ params: { slug } }) {
+  const props = await getCasesSlugProps("en", slug);
+  return <CasesArticle {...props} />;
+}

app/en/cases/page.js

@@ -0,0 +1,13 @@
+import CasesIndex from "../../../components/CasesIndex.js";
+import { getCasesProps } from "../../../lib/getProps.js";
+import { generateCasesMetadata } from "../../../lib/getMetadata.js";
+
+export async function generateMetadata() {
+  const md = await generateCasesMetadata("de", "/de/cases", "/en/cases");
+  return md;
+}
+
+export default async function Page() {
+  const props = await getCasesProps("en");
+  return <CasesIndex {...props} />;
+}

components/Article.js

@@ -5,22 +5,22 @@ import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { useI18n } from "../lib/i18n";
 import namedCodesToUnicode from "../lib/namedCodesToUnicode";
 
-function CodeBlock({ className, children }) {
+export function CodeBlock({ className, children }) {
   let lang = "text"; // default monospaced text
   if (className && className.startsWith("lang-")) {
     lang = className.replace("lang-", "");
   }
   return <SyntaxHighlighter language={lang}>{children}</SyntaxHighlighter>;
 }
 
-function PreBlock({ children, ...rest }) {
+export function PreBlock({ children, ...rest }) {
   if ("type" in children && children["type"] === "code") {
     return CodeBlock(children["props"]);
   }
   return <pre {...rest}>{children}</pre>;
 }
 
-function ArticleImage({ alt, imageSizes, src, title }) {
+export function ArticleImage({ alt, imageSizes, src, title }) {
   const { height, width } = imageSizes[src] || {};
   if (!height || !width) {
     return `Fehler: Bildgröße für ${src} konnte nicht ermittelt werden.`;
@@ -31,7 +31,7 @@ function ArticleImage({ alt, imageSizes, src, title }) {
   );
 }
 
-function ResponsiveImage({ alt, desktop, mobile, imageSizes, title }) {
+export function ResponsiveImage({ alt, desktop, mobile, imageSizes, title }) {
   return (
     <>
       {desktop && (

components/CareerContent.js

@@ -7,6 +7,7 @@ import ArrowCircleIcon from "./icons/ArrowCircleIcon.js";
 import CaretIcon from "./icons/CaretIcon.js";
 import Button from "./Button";
 import Hero from "./Hero.js";
+import Testimonial from "./Testimonial.js";
 
 const { screens } = resolveConfig(tailwindConfig).theme;
 
@@ -136,29 +137,18 @@ function CareerTestimonials({ items }) {
       className={`container mx-auto grid gap-8 grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 items-center mb-10 px-8 justify-center w-full`}
     >
       {items?.map((testimonial) => (
-        <div
-          className={`pt-20 flex flex-col md:last:odd:col-span-2 lg:last:odd:col-span-1 items-center `}
+        <Testimonial
           key={testimonial.author}
-        >
-          <div
-            className={`bg-gray-lighter p-8 rounded-xl relative flex flex-col gap-4 max-w-[400px] ${items.length % 2 === 0 ? "xl:min-h-[450px] 2xl:min-h-[380px] xl:max-w-[320px]" : ""} md:min-h-[400px] min-h-[350px]`}
-          >
-            <Image
-              src={`/images/career/${testimonial.image}`}
-              alt={testimonial.author}
-              width={150}
-              height={150}
-              className="rounded-full absolute -top-20 left-1/2 translate-x-[-50%]"
-            />
-            <p className="mt-20 text-lg italic text-center">
-              &#171;{testimonial.quote}&#187;
-            </p>
-            <p className="mt-auto text-sm text-center">
-              <span className="text-green">{testimonial.author}</span>,{" "}
-              {testimonial.position}
-            </p>
-          </div>
-        </div>
+          author={testimonial.author}
+          quote={testimonial.quote}
+          portrait={`/images/career/${testimonial.portrait}`}
+          position={testimonial.position}
+          className={
+            items.length % 2 === 0
+              ? "xl:min-h-[450px] 2xl:min-h-[380px] xl:max-w-[320px]"
+              : ""
+          }
+        />
       ))}
     </div>
   );

components/CaseDetails.js

@@ -0,0 +1,25 @@
+import { useI18n } from "../lib/i18n";
+
+export function CaseDetails({ timeline, service }) {
+  const { t } = useI18n();
+  return (
+    <div className="text-gray-700 my-8 grid gap-8 md:grid-cols-2">
+      {service && (
+        <div>
+          <h3>
+            <strong>{t("cases.service")}</strong>
+          </h3>
+          <span>{service}</span>
+        </div>
+      )}
+      {timeline && (
+        <div>
+          <h3>
+            <strong>{t("cases.timeline")}</strong>
+          </h3>
+          <span>{timeline}</span>
+        </div>
+      )}
+    </div>
+  );
+}

components/CaseTestimonial.js

@@ -0,0 +1,25 @@
+import Image from "next/image";
+
+function CaseTestimonial({ quote, author, portrait, position }) {
+  return (
+    <div className="bg-white relative flex flex-col md:flex-row gap-8 md:gap-16 items-center">
+      {portrait ? (
+        <Image
+          src={portrait}
+          alt={author}
+          width={150}
+          height={150}
+          className="rounded-full object-cover not-prose"
+        />
+      ) : null}
+      <div>
+        <p className="text-lg italic text-center">&#171;{quote}&#187;</p>
+        <p className="mt-auto text-sm text-center">
+          <span className="text-green">{author}</span>, {position}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+export default CaseTestimonial;

components/CasesArticle.js

@@ -0,0 +1,34 @@
+"use client";
+
+import { ch } from "./Contact.js";
+import ContactPerson from "./ContactPerson.js";
+import Layout from "./Layout.js";
+import RelatedList from "./RelatedList.js";
+import CasesArticleBody from "./CasesArticleBody.js";
+
+export default function CasesArticle(props) {
+  const { related, case: caseItem } = props;
+
+  if (!caseItem) {
+    return null;
+  }
+
+  return (
+    <Layout
+      title={caseItem.title}
+      description={caseItem.summary}
+      path={`/cases`}
+      translationPath={`/cases`}
+      slugByLocale={caseItem.slugByLocale}
+      shareImg={caseItem?.cover}
+    >
+      <CasesArticleBody case={caseItem} />
+      <ContactPerson
+        person={{ ...ch, email: caseItem.contactEmail || ch.email }}
+        subtitle={caseItem.contactSubtitle}
+        title={caseItem.contactTitle}
+      />
+      <RelatedList dark list={related} />
+    </Layout>
+  );
+}

components/CasesArticleBody.js

@@ -0,0 +1,105 @@
+import PageHeader from "./PageHeader.js";
+import Markdown from "markdown-to-jsx";
+import { ArticleImage, PreBlock, ResponsiveImage } from "./Article.js";
+import namedCodesToUnicode from "../lib/namedCodesToUnicode.js";
+import { CaseDetails } from "./CaseDetails.js";
+import Image from "next/image.js";
+import CaseTestimonial from "./CaseTestimonial.js";
+
+function Testimonials({ testimonials = [] }) {
+  return testimonials.length > 0 ? (
+    <div className="mt-8 flex flex-col gap-8">
+      {testimonials.map(
+        ({ text: quote, name: author, position, portrait }, index) => (
+          <CaseTestimonial
+            key={index}
+            quote={quote}
+            author={author}
+            position={position}
+            portrait={portrait}
+          />
+        ),
+      )}
+    </div>
+  ) : null;
+}
+
+function CasesArticleBody({ case: caseItem }) {
+  const {
+    cover,
+    content: { lead, title, sections },
+    testimonials,
+    testimonialsOnTop,
+    imageSizes,
+  } = caseItem;
+
+  return (
+    <>
+      <PageHeader src={cover} srcMobile={cover} titleDown />
+      <article className="container prose prose-xl mx-auto mb-16 max-w-screen-lg break-words px-8 pt-8 lg:pt-0">
+        <div>
+          <p>{caseItem.customer?.fullName}</p>
+          <h1 className="!leading-snug text-balance text-green">{title}</h1>
+          <Markdown
+            options={{
+              forceBlock: true,
+              overrides: {
+                img: {
+                  component: ArticleImage,
+                  props: { imageSizes },
+                },
+                ResponsiveImage: {
+                  component: ResponsiveImage,
+                  props: { imageSizes },
+                },
+                pre: PreBlock,
+              },
+              namedCodesToUnicode,
+            }}
+          >
+            {lead}
+          </Markdown>
+        </div>
+        {testimonialsOnTop ? (
+          <Testimonials testimonials={testimonials} />
+        ) : null}
+        {sections?.length &&
+          sections.map(({ title, text, image, imagePosition, highlight }) => {
+            const imageClass = /top|left/.test(imagePosition)
+              ? "lg:order-[-1]"
+              : "mt-0";
+            const containerClass = /right|left/.test(imagePosition)
+              ? "lg:grid-cols-2"
+              : "";
+            return (
+              <div
+                key={title}
+                className={`grid grid-cols-1 gap-8 lg:gap-16 items-center ${containerClass}`}
+              >
+                <div>
+                  <h2 className={highlight ? "text-green" : ""}>{title}</h2>
+                  <Markdown options={{ forceBlock: true }}>{text}</Markdown>
+                </div>
+                {image && imageSizes[image]?.width && (
+                  <Image
+                    src={image}
+                    alt={title || ""}
+                    width={imageSizes[image]?.width}
+                    height={imageSizes[image]?.height}
+                    className={imageClass}
+                  />
+                )}
+              </div>
+            );
+          })}
+
+        {testimonialsOnTop ? null : (
+          <Testimonials testimonials={testimonials} />
+        )}
+        <CaseDetails timeline={caseItem.timeline} service={caseItem.service} />
+      </article>
+    </>
+  );
+}
+
+export default CasesArticleBody;