Add theme option to MDX content

Signed-off-by: Eduard Itrich <eduard.itrich@porsche.de> on-behalf-of: @porscheofficial <open_source_office@porsche.de>
porscheofficial · Oct 30, 2023 · b34232d · b34232d
1 parent 56a991e
commit b34232d
Show file tree

Hide file tree

Showing 14 changed files with 140 additions and 132 deletions.
diff --git a/content/blog/oss-review-toolkit.mdx b/content/blog/oss-review-toolkit.mdx
@@ -11,7 +11,7 @@ author:
 readTime: 5min
 ---
 
-<ImageText imageSrc="/assets/blog/ort/1.jpg" imageAlt="Taycan, 2021, Porsche AG" left
+<ImageText imageSrc="/assets/blog/ort/1.jpg" imageAlt="Taycan, 2021, Porsche AG" theme="light" left
     title="How would you explain the OSS Review Toolkit project to a five-year-old? What problem does it solve for Porsche?">
     Like the ingredients list on food that allows customers to make a conscious
     decision on what they can or want to eat, we as a company need to know
@@ -33,7 +33,7 @@ readTime: 5min
     with.
 </ImageText>
 
-<Section spacing="xxl">
+<Section spacing="xl">
     <Textblock>
     **What is ORT?** OSS Review Toolkit (ORT) is an orchestration toolkit that helps
     the Porsche AG OSO to connect with product source code repositories which allows
@@ -63,7 +63,7 @@ readTime: 5min
 </Section>
 
 
-<ImageText imageSrc="/assets/blog/ort/2.jpg" imageAlt="Photo by Arnold Francisca on Unsplash"
+<ImageText imageSrc="/assets/blog/ort/2.jpg" imageAlt="Photo by Arnold Francisca on Unsplash" theme="light"
     title="By contributing to the OSS Review Toolkit, the Open Source Office made a big step ahead in Porsche’s FOSS movement. What was the initial motivation to take this path? Why have you chosen to collaborate with an open-source community rather than buying a commercial solution?">
     As the Porsche Open Source Office we always wanted to lead by example and prove
     the collaboration model that open-source communities offer to share knowledge
@@ -75,7 +75,7 @@ readTime: 5min
     utilized by the entire company and all respective subsidiaries.
 </ImageText>
 
-<ImageText imageSrc="/assets/blog/ort/3.jpg" imageAlt="Taycan Turbo S, light painting by 'Lumenman' Bernhard Rauscher, 2019, Porsche AG" left
+<ImageText imageSrc="/assets/blog/ort/3.jpg" imageAlt="Taycan Turbo S, light painting by 'Lumenman' Bernhard Rauscher, 2019, Porsche AG" theme="light" left
     title="With a glimpse into the future: What are your further plans regarding FOSS Contributions? Who would you like to see next joining our FOSS Contributor community?">
     The Porsche Open Source Office is currently developing central platforms that
     are based on open-source technologies such as the FOSS Hub portal and Data

diff --git a/content/blog/porsche-design-system.mdx b/content/blog/porsche-design-system.mdx
@@ -11,7 +11,7 @@ author:
 readTime: 5min
 ---
 
-<ImageText imageSrc="/assets/blog/pds/1.jpg" imageAlt="Marcel Bertram"
+<ImageText imageSrc="/assets/blog/pds/1.jpg" imageAlt="Marcel Bertram" theme="light"
     title="Tell us a little more about yourself, your role at Porsche and what topics drive you.">
     Being part of the company for more than twelve years, I had the opportunity
     to be part of the very first agile product teams at Porsche. During my
@@ -23,7 +23,7 @@ readTime: 5min
     all our digital touchpoints.
 </ImageText>
 
-<ImageText imageSrc="/assets/blog/pds/2.jpg" imageAlt="Marcel Bertram" left
+<ImageText imageSrc="/assets/blog/pds/2.jpg" imageAlt="Marcel Bertram" theme="light" left
     title="You are currently maintaining Porsche's open-source project Porsche Design System on GitHub. How would you explain your project to a five-year-old? What problem does your project solve for Porsche?">
     The Porsche Design System is comparable to a Lego set that offers
     ready-to-use building blocks (coded and designed components) and a clear
@@ -32,8 +32,9 @@ readTime: 5min
     applications. By supporting multiple popular frameworks such as React,
     Angular and Vue, continuously testing for compatibility with a wide
     range of browsers and creating a growing set of re-usable components, we
-    made a huge step ahead in the industry, which I am still proud of. Our
-    design system unlocks capacities among all Porsche design and
+    made a huge step ahead in the industry, which I am still proud of.
+
+    Our design system unlocks capacities among all Porsche design and
     development teams that otherwise would have to reinvent the wheel by
     adapting, implementing, and verifying the design guide on their own –
     multiplied by all our available teams. We have an extremely high
@@ -42,7 +43,7 @@ readTime: 5min
     single system we can collectively optimize.
 </ImageText>
 
-<ImageText imageSrc="/assets/blog/pds/3.jpg" imageAlt="Marcel Bertram"
+<ImageText imageSrc="/assets/blog/pds/3.jpg" imageAlt="Marcel Bertram" theme="light"
     title="By publishing the Porsche Design System as an open-source project, you have made a big step ahead in our FOSS movement. What was your initial motivation to take this path? Can you tell us why you have chosen to release your project on GitHub?">
     There are several reasons why we agreed on open sourcing the Porsche
     Design System. We wanted to drastically lower the barrier to access and
@@ -65,7 +66,7 @@ readTime: 5min
     are doing.
 </ImageText>
 
-<ImageText imageSrc="/assets/blog/pds/4.jpg" imageAlt="Marcel Bertram" left
+<ImageText imageSrc="/assets/blog/pds/4.jpg" imageAlt="Marcel Bertram" theme="light" left
     title="What did you learn along the way? What were the benefits of this strategy for you, your team and Porsche?">
     Publishing the Porsche Design System under a free and open license simplified a
     lot of things for us. Not only did we reduce the complexity of access
@@ -85,7 +86,7 @@ readTime: 5min
     our field.
 </ImageText>
 
-<ImageText imageSrc="/assets/blog/pds/5.jpg" imageAlt="Marcel Bertram"
+<ImageText imageSrc="/assets/blog/pds/5.jpg" imageAlt="Marcel Bertram" theme="light"
     title="With a glimpse into the future: What are your further plans regarding FOSS Contributions? Who would you like to see next joining our FOSS Contributor community?">
     We already discussed the idea of generalizing the Porsche Design System.
     Currently, PDS is limited to creating Porsche-branded applications. In

diff --git a/src/app/blog/[...slug]/page.module.scss b/src/app/blog/[...slug]/page.module.scss
@@ -2,6 +2,10 @@
 
 .descriptionShort {
   grid-column: $pds-grid-narrow-column-start / $pds-grid-narrow-column-end !important;
-  margin-top: $pds-spacing-fluid-x-large;
-  margin-bottom: $pds-spacing-fluid-x-large;
+  margin: $pds-spacing-fluid-x-large 0;
+}
+
+.blog-content {
+  background: $pds-theme-light-background-base;
+  padding: $pds-spacing-fluid-x-large 0;
 }
diff --git a/src/app/blog/[...slug]/page.tsx b/src/app/blog/[...slug]/page.tsx
@@ -93,8 +93,8 @@ const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
         </Textblock>
       </Section>
 
-      <div className="mdx-content">
-        <MdxComponents code={blog.body.code} />
+      <div className={`mdx-content ${s["blog-content"]}`}>
+        <MdxComponents code={blog.body.code} theme="light" />
       </div>
 
       {!!blog.author && (

diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx
@@ -71,7 +71,7 @@ const DocPage: React.FC<PageProps> = ({ params }: PageProps) => {
 
       <Section>
         <Textblock className="mdx-content">
-          <MdxComponents code={doc.body.code} />
+          <MdxComponents code={doc.body.code} theme="dark" />
         </Textblock>
       </Section>
     </main>

diff --git a/src/app/legal-notice/page.tsx b/src/app/legal-notice/page.tsx
@@ -29,7 +29,7 @@ const Legal: React.FC = () => {
       {!!content?.body.code && (
         <Section>
           <Textblock id="docs" className="mdx-content">
-            <MdxComponents code={content.body.code} />
+            <MdxComponents code={content.body.code} theme="dark" />
           </Textblock>
         </Section>
       )}

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -51,7 +51,7 @@ const Home: React.FC = () => {
       {!!fossContent?.body.code && (
         <div className={s["foss-movement"]}>
           <Section>
-            <MdxComponents code={fossContent.body.code} />
+            <MdxComponents code={fossContent.body.code} theme="dark" />
           </Section>
         </div>
       )}

diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx
@@ -28,7 +28,7 @@ const Privacy: React.FC = () => {
       {!!content?.body.code && (
         <Section>
           <Textblock id="docs" className="mdx-content">
-            <MdxComponents code={content.body.code} />
+            <MdxComponents code={content.body.code} theme="dark" />
           </Textblock>
         </Section>
       )}

diff --git a/src/components/01_atoms/MdxComponents.tsx b/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";
+import type { MDXComponents } from "mdx/types";
 import {
   PDisplay,
   PHeading,
@@ -20,118 +21,117 @@ import { Section } from "../02_molecules/section/section";
 import { KeyValue } from "../02_molecules/foss_movement/KeyValue";
 import { Principle } from "../02_molecules/foss_movement/Principle";
 
-const components = {
-  PInlineNotification: ({ ...props }) => <PInlineNotification {...props} />,
-  PLinkPure: ({ ...props }) => <PLinkPure {...props} />,
-  PTag: ({ ...props }) => <PTag {...props} />,
-  ImageText: ({
-    imageSrc,
-    imageAlt,
-    ...props
-  }: {
-    imageSrc: string | StaticImageData;
-    imageAlt: string;
-  }) => <ImageText imageSrc={imageSrc} imageAlt={imageAlt} {...props} />,
-  // @ts-expect-error TODO
-  ExportedImage: ({ ...props }) => <ExportedImage {...props} />,
-  // @ts-expect-error TODO
-  Section: ({ ...props }) => <Section {...props} />,
-  // @ts-expect-error TODO
-  KeyValue: ({ ...props }) => <KeyValue {...props} />,
-  // @ts-expect-error TODO
-  Principle: ({ ...props }) => <Principle {...props} />,
-  PDisplay: ({ ...props }) => <PDisplay {...props} />,
-  h1: ({ children }: { children: React.ReactNode }) => (
-    <PHeading
-      align="center"
-      size={{ base: "large", s: "x-large" }}
-      theme="dark"
-      tag="h1"
-    >
-      {children}
-    </PHeading>
-  ),
-  h2: ({ children }: { children: React.ReactNode }) => (
-    <PHeading
-      size={{ base: "medium", s: "large" }}
-      align="left"
-      theme="dark"
-      tag="h2"
-    >
-      {children}
-    </PHeading>
-  ),
-  h3: ({ children }: { children: React.ReactNode }) => (
-    <PHeading
-      size={{ base: "small", s: "medium" }}
-      align="left"
-      theme="dark"
-      tag="h3"
-    >
-      {children}
-    </PHeading>
-  ),
-  h4: ({ children }: { children: React.ReactNode }) => (
-    <PHeading
-      size={{ base: "small", s: "small" }}
-      align="left"
-      theme="dark"
-      tag="h4"
-    >
-      {children}
-    </PHeading>
-  ),
-  h5: ({ children }: { children: React.ReactNode }) => (
-    <PHeading
-      size={{ base: "small", s: "small" }}
-      align="left"
-      theme="dark"
-      tag="h5"
-    >
-      {children}
-    </PHeading>
-  ),
-  ul: ({ children }: { children: React.ReactNode }) => (
-    <PTextList theme="dark">{children}</PTextList>
-  ),
-  ol: ({ children }: { children: React.ReactNode }) => (
-    <PTextList theme="dark" type="numbered">
-      {children}
-    </PTextList>
-  ),
-  li: ({ children }: { children: React.ReactNode }) => (
-    <PTextListItem>{children}</PTextListItem>
-  ),
-  code: ({ children, ...props }: { children: React.ReactNode }) => (
-    // @ts-expect-error expected?
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <Codeblock wrapperClassName={props.className}>{children}</Codeblock>
-  ),
-  Textblock: ({ children, ...props }: { children: React.ReactNode }) => (
-    // @ts-expect-error expected?
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <Textblock spacing={props.spacing}>{children}</Textblock>
-  ),
-  a: ({ children, ...props }: { children: React.ReactNode }) => (
-    // @ts-expect-error expected?
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-    <PLinkPure theme="dark" underline icon="none" href={props.href}>
-      {children}
-    </PLinkPure>
-  ),
-  p: ({ children }: { children: React.ReactNode }) => (
-    <p>
-      <PText theme="dark">{children}</PText>
-    </p>
-  ),
+const CustomComponents = (
+  theme: "dark" | "light" | undefined,
+): MDXComponents => {
+  return {
+    PInlineNotification: ({ ...props }) => <PInlineNotification {...props} />,
+    PLinkPure: ({ ...props }) => <PLinkPure {...props} />,
+    PTag: ({ ...props }) => <PTag {...props} />,
+    ImageText: ({
+      imageSrc,
+      imageAlt,
+      ...props
+    }: {
+      imageSrc: string | StaticImageData;
+      imageAlt: string;
+    }) => (
+      <ImageText
+        imageSrc={imageSrc}
+        imageAlt={imageAlt}
+        theme={theme}
+        {...props}
+      />
+    ),
+    ExportedImage: ({ ...props }) => <ExportedImage {...props} />,
+    Section: ({ ...props }) => <Section {...props} />,
+    KeyValue: ({ ...props }) => <KeyValue {...props} />,
+    Principle: ({ ...props }) => <Principle {...props} />,
+    PDisplay: ({ ...props }) => <PDisplay {...props} />,
+    h1: ({ children }) => (
+      <PHeading
+        align="center"
+        size={{ base: "large", s: "x-large" }}
+        theme={theme}
+        tag="h1"
+      >
+        {children}
+      </PHeading>
+    ),
+    h2: ({ children }) => (
+      <PHeading
+        size={{ base: "medium", s: "large" }}
+        align="left"
+        theme={theme}
+        tag="h2"
+      >
+        {children}
+      </PHeading>
+    ),
+    h3: ({ children }) => (
+      <PHeading
+        size={{ base: "small", s: "medium" }}
+        align="left"
+        theme={theme}
+        tag="h3"
+      >
+        {children}
+      </PHeading>
+    ),
+    h4: ({ children }) => (
+      <PHeading
+        size={{ base: "small", s: "small" }}
+        align="left"
+        theme={theme}
+        tag="h4"
+      >
+        {children}
+      </PHeading>
+    ),
+    h5: ({ children }) => (
+      <PHeading
+        size={{ base: "small", s: "small" }}
+        align="left"
+        theme={theme}
+        tag="h5"
+      >
+        {children}
+      </PHeading>
+    ),
+    ul: ({ children }) => <PTextList theme={theme}>{children}</PTextList>,
+    ol: ({ children }) => (
+      <PTextList theme={theme} type="numbered">
+        {children}
+      </PTextList>
+    ),
+    li: ({ children }) => <PTextListItem>{children}</PTextListItem>,
+    code: ({ children, ...props }) => (
+      <Codeblock wrapperClassName={props.className}>{children}</Codeblock>
+    ),
+    Textblock: ({ children }) => <Textblock>{children}</Textblock>,
+    a: ({ children, ...props }) => (
+      <PLinkPure theme={theme} underline icon="none" href={props.href}>
+        {children}
+      </PLinkPure>
+    ),
+    p: ({ children }) => (
+      <p>
+        <PText theme={theme}>{children}</PText>
+      </p>
+    ),
+  };
 };
 
 interface MdxProps {
   code: string;
+  theme: "dark" | "light" | undefined;
 }
-export const MdxComponents: React.FC<MdxProps> = ({ code }: MdxProps) => {
+
+export const MdxComponents: React.FC<MdxProps> = ({
+  code,
+  theme,
+}: MdxProps) => {
   const Component = useMDXComponent(code);
 
-  // @ts-expect-error expected?
-  return <Component components={components} />;
+  return <Component components={CustomComponents(theme)} />;
 };
diff --git a/src/components/02_molecules/author/author.tsx b/src/components/02_molecules/author/author.tsx
@@ -19,7 +19,7 @@ export const Author: React.FC<AuthorProps> = ({
 }) => {
   const Component = slug ? Link : "div";
   return (
-    <Section>
+    <Section spacing="xl">
       <Component
         className={`${s.author} ${slug ? s.link : ""}`}
         href={{ pathname: slug }}