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

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/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"]
 }