upgrade-dependencies

.eslintrc.js

@@ -21,8 +21,8 @@ module.exports = {
       {
         ignore: [
           "contentlayer/generated",
-          "next-contentlayer/hooks",
-          "contentlayer/source-files",
+          "next-contentlayer2/hooks",
+          "contentlayer2/source-files",
         ],
       },
     ],

.github/workflows/deploy.yml

@@ -46,9 +46,9 @@ jobs:
         env:
           BASE_URL: "https://opensource.porsche.com"
       - name: Setup Pages
-        uses: actions/configure-pages@v3
+        uses: actions/configure-pages@v5
       - name: Upload artifact
-        uses: actions/upload-pages-artifact@v1
+        uses: actions/upload-pages-artifact@v3
         with:
           path: ./out
 
@@ -64,4 +64,4 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v2
+        uses: actions/deploy-pages@v4

LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2024 Dr. Ing. h.c. F. Porsche AG
+Copyright (c) 2025 Dr. Ing. h.c. F. Porsche AG
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -100,7 +100,7 @@ This project is a joint initiative of [Porsche AG](https://www.porsche.com) and
 
 ## ✒️ License
 
-Copyright © 2024 Dr. Ing. h.c. F. Porsche AG
+Copyright © 2025 Dr. Ing. h.c. F. Porsche AG
 
 Dr. Ing. h.c. F. Porsche AG publishes the Porsche Open Source Platform software and accompanied documentation (if any) subject to the terms of the [MIT license](./LICENSE.md). All rights not explicitly granted to you under the MIT license remain the sole and exclusive property of Dr. Ing. h.c. F. Porsche AG.
 

contentlayer.config.ts

@@ -3,9 +3,9 @@ import {
   makeSource,
   LocalDocument,
   defineNestedType,
-} from "contentlayer/source-files";
+} from "contentlayer2/source-files";
 
-/** @type {import('contentlayer/source-files').ComputedFields} */
+/** @type {import('contentlayer2/source-files').ComputedFields} */
 const computedFields = {
   slug: {
     type: "string",

next.config.js

@@ -35,7 +35,7 @@ const nextConfig = {
     return config;
   },
 };
-const { withContentlayer } = require("next-contentlayer");
+const { withContentlayer } = require("next-contentlayer2");
 const withBundleAnalyzer = require("@next/bundle-analyzer")({
   enabled: process.env.ANALYZE === "true",
 });

package.json

@@ -15,44 +15,46 @@
     "prettier:ci": "prettier --check ./",
     "prettier:fix": "prettier --write ./",
     "playwright:run": "yarn playwright test",
-    "contentlayer:build": "contentlayer build",
+    "contentlayer:build": "contentlayer2 build",
     "test:ci": "yarn contentlayer:build && yarn prettier:ci && yarn tsc --noEmit --noEmitHelpers && yarn lint:ci"
   },
   "dependencies": {
-    "@porsche-design-system/components-js": "3.21.0",
-    "@porsche-design-system/components-react": "3.21.0",
-    "@primer/octicons": "19.8.0",
-    "contentlayer": "0.3.4",
+    "@porsche-design-system/components-js": "3.22.1",
+    "@porsche-design-system/components-react": "3.22.1",
+    "@primer/octicons": "19.12.0",
+    "contentlayer2": "0.5.3",
     "date-fns": "2.30.0",
-    "next": "13.5.6",
-    "next-contentlayer": "0.3.4",
-    "next-image-export-optimizer": "1.12.2",
-    "prism-react-renderer": "2.3.1",
-    "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "next": "15.0.4",
+    "next-contentlayer2": "0.5.3",
+    "next-image-export-optimizer": "1.18.0",
+    "prism-react-renderer": "2.4.0",
+    "react": "19.0.0",
+    "react-dom": "19.0.0"
   },
   "devDependencies": {
-    "@axe-core/playwright": "4.8.4",
-    "@next/bundle-analyzer": "13.5.6",
-    "@next/eslint-plugin-next": "13.5.6",
-    "@playwright/test": "1.41.1",
+    "@axe-core/playwright": "4.10.1",
+    "@next/bundle-analyzer": "15.0.4",
+    "@next/eslint-plugin-next": "15.0.4",
+    "@playwright/test": "1.49.0",
     "@porscheofficial/eslint-config-porschedigital-react": "4.0.0",
     "@porscheofficial/prettier-config-porschedigital": "4.0.0",
-    "@types/mdx": "2.0.11",
-    "@types/node": "20.11.14",
-    "@types/react": "18.2.50",
-    "@types/react-dom": "18.2.18",
-    "dotenv": "16.4.1",
-    "eslint": "8.56.0",
+    "@types/mdx": "2.0.13",
+    "@types/node": "20.17.9",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2",
+    "dotenv": "16.4.6",
+    "eslint": "8.57.1",
     "http-server": "14.1.1",
     "js-yaml-loader": "1.2.2",
-    "playwright-core": "1.41.1",
-    "prettier": "3.2.4",
-    "typescript": "5.3.3",
-    "typescript-plugin-css-modules": "5.0.2"
+    "playwright-core": "1.49.0",
+    "prettier": "3.4.1",
+    "typescript": "5.7.2",
+    "typescript-plugin-css-modules": "5.1.0"
   },
   "resolutions": {
     "semver": "7.5.3",
-    "word-wrap": "aashutoshrathi/word-wrap"
+    "word-wrap": "aashutoshrathi/word-wrap",
+    "@types/react": "19.0.1",
+    "@types/react-dom": "19.0.2"
   }
 }

src/app/blog/[...slug]/page.tsx

@@ -24,11 +24,10 @@ const getParams = (params: { slug?: string[] }): Blog | null => {
 };
 
 // eslint-disable-next-line @typescript-eslint/require-await,func-style
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const doc = allBlogs.find((file) => file.slugAsParams === params.slug[0]);
   if (!doc) return {};
   const { title } = doc;
@@ -64,8 +63,13 @@ export const generateStaticParams = (): PageProps["params"][] => {
   }));
 };
 
-const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
-  const blog = getParams(params);
+const BlogPage: ({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) => Promise<React.JSX.Element> = async ({ params }) => {
+  const { slug } = await params;
+  const blog = getParams({ slug: [slug] });
 
   if (!blog) {
     notFound();

src/app/docs/[...slug]/page.tsx

@@ -21,11 +21,10 @@ const getParams = (params: { slug?: string[] }): Doc | null => {
 };
 
 // eslint-disable-next-line @typescript-eslint/require-await,func-style
-export async function generateMetadata({
-  params,
-}: {
-  params: { slug: string };
+export async function generateMetadata(props: {
+  params: Promise<{ slug: string }>;
 }): Promise<Metadata> {
+  const params = await props.params;
   const doc = allDocs.find((file) => file.slugAsParams === params.slug[0]);
   if (!doc) return {};
   const { title } = doc;
@@ -53,8 +52,13 @@ export const generateStaticParams = (): PageProps["params"][] => {
     slug: doc.slugAsParams.split("/"),
   }));
 };
-const DocPage: React.FC<PageProps> = ({ params }: PageProps) => {
-  const doc = getParams(params);
+const DocPage: ({
+  params,
+}: {
+  params: Promise<{ slug: string }>;
+}) => Promise<React.JSX.Element> = async ({ params }) => {
+  const { slug } = await params;
+  const doc = getParams({ slug: [slug] });
 
   if (!doc) {
     notFound();

src/app/page.tsx

@@ -4,6 +4,7 @@
   PText,
 } from "@porsche-design-system/components-react/ssr";
 import { allStatics } from "contentlayer/generated";
+import Link from "next/link";
 import importProjects from "../../data/projects.yml";
 import importNews from "../../data/news.yml";
 import importMemberships from "../../data/memberships.yml";
@@ -32,7 +33,7 @@
       <HeroSection
         title="Porsche Open Source Platform"
         subtitle="FOSS@Porsche"
         imageSrc={heroImage}
         imageAlt="AI generated Porsche Taycan"
       />
       <Section id="foss-movement" spacing="none">
@@ -106,9 +107,10 @@
         </PHeading>
         <Textblock className={s.text}>
           <PText theme="dark" size="medium" align="center">
-            Our <a href="/docs">growing documentation</a> provides transparency
-            on how Porsche is contributing to open source and the standards we
-            are endorsing for new projects to foster healthy communities.
+            Our <Link href="/docs">growing documentation</Link> provides
+            transparency on how Porsche is contributing to open source and the
+            standards we are endorsing for new projects to foster healthy
+            communities.
           </PText>
         </Textblock>
         <DocsSection />

src/app/sitemap.tsx

@@ -3,6 +3,8 @@ import { allBlogs, allDocs } from "contentlayer/generated";
 import { format, parseISO } from "date-fns";
 import { BASE_URL } from "../config";
 
+export const dynamic = "force-static";
+
 const Sitemap = (): MetadataRoute.Sitemap => {
   const blogs = allBlogs.map((doc) => ({
     url: `${BASE_URL}${doc.slug}`,

src/components/01_atoms/MdxComponents.tsx

@@ -1,6 +1,7 @@
 /* eslint-disable react/jsx-props-no-spreading */
 import * as React from "react";
-import { useMDXComponent } from "next-contentlayer/hooks";
+// eslint-disable-next-line import/no-unresolved
+import { getMDXComponent } from "next-contentlayer2/hooks";
 import type { MDXComponents } from "mdx/types";
 import {
   PDisplay,
@@ -105,11 +106,16 @@ const CustomComponents = (
       </PTextList>
     ),
     li: ({ children }) => <PTextListItem>{children}</PTextListItem>,
-    code: ({ children, ...props }) => (
+    code: ({ children, ...props }: React.AnchorHTMLAttributes<HTMLElement>) => (
       <Codeblock wrapperClassName={props.className}>{children}</Codeblock>
     ),
     Textblock: ({ children }) => <Textblock>{children}</Textblock>,
-    a: ({ children, ...props }) => <a href={props.href}>{children}</a>,
+    a: ({
+      children,
+      ...props
+    }: React.AnchorHTMLAttributes<HTMLAnchorElement>) => (
+      <a href={props.href}>{children}</a>
+    ),
     p: ({ children }) => <PText theme={theme}>{children}</PText>,
   };
 };
@@ -123,7 +129,7 @@ export const MdxComponents: React.FC<MdxProps> = ({
   code,
   theme,
 }: MdxProps) => {
-  const Component = useMDXComponent(code);
+  const Component = getMDXComponent(code);
 
   return <Component components={CustomComponents(theme)} />;
 };

src/components/02_molecules/footer/Footer.tsx

@@ -161,7 +161,7 @@ export const Footer: React.FC = () => {
       <PDivider className={s.divider} theme="dark" />
       <div className={s.notice}>
         <div className={s.linkBar}>
-          © 2024 Dr. Ing. h.c. F. Porsche AG.{" "}
+          © 2025 Dr. Ing. h.c. F. Porsche AG.{" "}
           {linksNotice.map((link) => (
             <PLinkPure key={link.url} theme="dark" icon="none" underline>
               <Link href={{ pathname: link.url }}>{link.name}.</Link>

src/components/02_molecules/navigation/Navigation.tsx

@@ -12,6 +12,7 @@ import {
   PFlyoutMultilevelItem,
   PLinkPure,
   PLinkTile,
+  PHeading,
 } from "@porsche-design-system/components-react/ssr";
 import ExportedImage from "next-image-export-optimizer";
 import s from "./navigation.module.scss";
@@ -80,6 +81,7 @@ export const Navigation: React.FC<NavigationProps> = () => {
         activeIdentifier={flyoutNavigationActiveIdentifier}
         onDismiss={onDismiss}
         onUpdate={onUpdate}
+        theme="light"
       >
         {homeLinks.map((link) => (
           <PLinkPure
@@ -120,15 +122,21 @@ export const Navigation: React.FC<NavigationProps> = () => {
               sizes="(max-width: 759px) 100vw, 50vw"
             />
           </PLinkTile>
-          <h3>Further Stories</h3>
+          <PHeading tag="h3" size="small">
+            Further Stories
+          </PHeading>
           {otherDocs.map((link) => (
-            <Link
-              href={{ pathname: link.slug }}
+            <PLinkPure
+              href={link.slug}
               onClick={onDismiss}
               key={link.title}
+              alignLabel="start"
+              icon="none"
+              stretch
+              className={s.navSubLink}
             >
               {link.title}
-            </Link>
+            </PLinkPure>
           ))}
         </PFlyoutMultilevelItem>
         <PFlyoutMultilevelItem
@@ -137,13 +145,17 @@ export const Navigation: React.FC<NavigationProps> = () => {
           key="docs"
         >
           {allDocs.map((link) => (
-            <Link
-              href={{ pathname: link.slug }}
+            <PLinkPure
+              href={link.slug}
               onClick={onDismiss}
               key={link.title}
+              alignLabel="start"
+              icon="none"
+              stretch
+              className={s.navSubLink}
             >
               {link.title}
-            </Link>
+            </PLinkPure>
           ))}
         </PFlyoutMultilevelItem>
       </PFlyoutMultilevel>

src/components/02_molecules/navigation/navigation.module.scss

@@ -21,6 +21,12 @@
   padding: $pds-spacing-fluid-small;
 }
 
+.navSubLink {
+  width: auto;
+  margin-top: $pds-spacing-static-small;
+}
+
 .navLinkImage {
   position: relative;
+  margin-bottom: $pds-spacing-fluid-medium;
 }

src/components/04_templates/pageLayout/PageLayout.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable react/require-default-props */
+import type { JSX } from "react";
 import { Header } from "../../02_molecules/header/Header";
 import { Footer } from "../../02_molecules/footer/Footer";
 

tsconfig.json

@@ -1,6 +1,6 @@
 {
   "compilerOptions": {
-    "target": "es5",
+    "target": "ES2018",
     "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
@@ -16,21 +16,21 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "contentlayer/generated": ["./.contentlayer/generated"],
+      "contentlayer/generated": ["./.contentlayer/generated"]
     },
     "plugins": [
       { "name": "typescript-plugin-css-modules" },
       {
-        "name": "next",
-      },
-    ],
+        "name": "next"
+      }
+    ]
   },
   "include": [
     "next-env.d.ts",
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated",
+    ".contentlayer/generated"
   ],
-  "exclude": ["node_modules"],
+  "exclude": ["node_modules"]
 }