From b34232dcf0c850f84823c7f8a8076f010f6317c6 Mon Sep 17 00:00:00 2001 From: Eduard Itrich Date: Mon, 30 Oct 2023 13:00:12 +0100 Subject: [PATCH] Add theme option to MDX content Signed-off-by: Eduard Itrich on-behalf-of: @porscheofficial --- content/blog/oss-review-toolkit.mdx | 8 +- content/blog/porsche-design-system.mdx | 15 +- src/app/blog/[...slug]/page.module.scss | 8 +- src/app/blog/[...slug]/page.tsx | 4 +- src/app/docs/[...slug]/page.tsx | 2 +- src/app/legal-notice/page.tsx | 2 +- src/app/page.tsx | 2 +- src/app/privacy/page.tsx | 2 +- src/components/01_atoms/MdxComponents.tsx | 214 +++++++++--------- src/components/02_molecules/author/author.tsx | 2 +- src/components/02_molecules/footer/Footer.tsx | 2 +- .../02_molecules/section/section.module.scss | 2 +- .../03_organisms/imageText/ImageText.tsx | 6 +- .../imageText/imageText.module.scss | 3 +- 14 files changed, 140 insertions(+), 132 deletions(-) diff --git a/content/blog/oss-review-toolkit.mdx b/content/blog/oss-review-toolkit.mdx index f99c67f..87ac3d9 100644 --- a/content/blog/oss-review-toolkit.mdx +++ b/content/blog/oss-review-toolkit.mdx @@ -11,7 +11,7 @@ author: readTime: 5min --- - 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. -
+
**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
- 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. - 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 index 0a074dd..ae51708 100644 --- a/content/blog/porsche-design-system.mdx +++ b/content/blog/porsche-design-system.mdx @@ -11,7 +11,7 @@ author: readTime: 5min --- - 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. - 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. - 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. - 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. - 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 index 825ff7a..3d5e9e8 100644 --- 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 index 7ca3c96..269f7f3 100644 --- a/src/app/blog/[...slug]/page.tsx +++ b/src/app/blog/[...slug]/page.tsx @@ -93,8 +93,8 @@ const BlogPage: React.FC = ({ params }: PageProps) => {
-
- +
+
{!!blog.author && ( diff --git a/src/app/docs/[...slug]/page.tsx b/src/app/docs/[...slug]/page.tsx index fe87465..1313260 100644 --- a/src/app/docs/[...slug]/page.tsx +++ b/src/app/docs/[...slug]/page.tsx @@ -71,7 +71,7 @@ const DocPage: React.FC = ({ params }: PageProps) => {
- +
diff --git a/src/app/legal-notice/page.tsx b/src/app/legal-notice/page.tsx index c742728..405d67d 100644 --- 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 && (
- +
)} diff --git a/src/app/page.tsx b/src/app/page.tsx index 1408631..b8a811b 100644 --- a/src/app/page.tsx +++ b/src/app/page.tsx @@ -51,7 +51,7 @@ const Home: React.FC = () => { {!!fossContent?.body.code && (
- +
)} diff --git a/src/app/privacy/page.tsx b/src/app/privacy/page.tsx index d75490d..2713838 100644 --- a/src/app/privacy/page.tsx +++ b/src/app/privacy/page.tsx @@ -28,7 +28,7 @@ const Privacy: React.FC = () => { {!!content?.body.code && (
- +
)} diff --git a/src/components/01_atoms/MdxComponents.tsx b/src/components/01_atoms/MdxComponents.tsx index 996ad20..ac88fca 100644 --- 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 }) => , - PLinkPure: ({ ...props }) => , - PTag: ({ ...props }) => , - ImageText: ({ - imageSrc, - imageAlt, - ...props - }: { - imageSrc: string | StaticImageData; - imageAlt: string; - }) => , - // @ts-expect-error TODO - ExportedImage: ({ ...props }) => , - // @ts-expect-error TODO - Section: ({ ...props }) =>
, - // @ts-expect-error TODO - KeyValue: ({ ...props }) => , - // @ts-expect-error TODO - Principle: ({ ...props }) => , - PDisplay: ({ ...props }) => , - h1: ({ children }: { children: React.ReactNode }) => ( - - {children} - - ), - h2: ({ children }: { children: React.ReactNode }) => ( - - {children} - - ), - h3: ({ children }: { children: React.ReactNode }) => ( - - {children} - - ), - h4: ({ children }: { children: React.ReactNode }) => ( - - {children} - - ), - h5: ({ children }: { children: React.ReactNode }) => ( - - {children} - - ), - ul: ({ children }: { children: React.ReactNode }) => ( - {children} - ), - ol: ({ children }: { children: React.ReactNode }) => ( - - {children} - - ), - li: ({ children }: { children: React.ReactNode }) => ( - {children} - ), - code: ({ children, ...props }: { children: React.ReactNode }) => ( - // @ts-expect-error expected? - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - {children} - ), - Textblock: ({ children, ...props }: { children: React.ReactNode }) => ( - // @ts-expect-error expected? - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - {children} - ), - a: ({ children, ...props }: { children: React.ReactNode }) => ( - // @ts-expect-error expected? - // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment - - {children} - - ), - p: ({ children }: { children: React.ReactNode }) => ( -

- {children} -

- ), +const CustomComponents = ( + theme: "dark" | "light" | undefined, +): MDXComponents => { + return { + PInlineNotification: ({ ...props }) => , + PLinkPure: ({ ...props }) => , + PTag: ({ ...props }) => , + ImageText: ({ + imageSrc, + imageAlt, + ...props + }: { + imageSrc: string | StaticImageData; + imageAlt: string; + }) => ( + + ), + ExportedImage: ({ ...props }) => , + Section: ({ ...props }) =>
, + KeyValue: ({ ...props }) => , + Principle: ({ ...props }) => , + PDisplay: ({ ...props }) => , + h1: ({ children }) => ( + + {children} + + ), + h2: ({ children }) => ( + + {children} + + ), + h3: ({ children }) => ( + + {children} + + ), + h4: ({ children }) => ( + + {children} + + ), + h5: ({ children }) => ( + + {children} + + ), + ul: ({ children }) => {children}, + ol: ({ children }) => ( + + {children} + + ), + li: ({ children }) => {children}, + code: ({ children, ...props }) => ( + {children} + ), + Textblock: ({ children }) => {children}, + a: ({ children, ...props }) => ( + + {children} + + ), + p: ({ children }) => ( +

+ {children} +

+ ), + }; }; interface MdxProps { code: string; + theme: "dark" | "light" | undefined; } -export const MdxComponents: React.FC = ({ code }: MdxProps) => { + +export const MdxComponents: React.FC = ({ + code, + theme, +}: MdxProps) => { const Component = useMDXComponent(code); - // @ts-expect-error expected? - return ; + return ; }; diff --git a/src/components/02_molecules/author/author.tsx b/src/components/02_molecules/author/author.tsx index 3dfffaa..32ae9a0 100644 --- 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 = ({ }) => { const Component = slug ? Link : "div"; return ( -
+
{
{!!content?.body.code && ( - + )} diff --git a/src/components/02_molecules/section/section.module.scss b/src/components/02_molecules/section/section.module.scss index 2c3ef72..0272eab 100644 --- a/src/components/02_molecules/section/section.module.scss +++ b/src/components/02_molecules/section/section.module.scss @@ -1,7 +1,7 @@ @use "@porsche-design-system/components-js/styles" as *; .section:first-of-type { - margin-top: $pds-spacing-fluid-x-large; + margin-top: 0; } .section { diff --git a/src/components/03_organisms/imageText/ImageText.tsx b/src/components/03_organisms/imageText/ImageText.tsx index ba6d4ee..333d4ae 100644 --- a/src/components/03_organisms/imageText/ImageText.tsx +++ b/src/components/03_organisms/imageText/ImageText.tsx @@ -11,6 +11,7 @@ interface ImageTextProps { left?: boolean; imageSrc: string | StaticImageData; imageAlt: string; + theme: "dark" | "light" | undefined; } export const ImageText: React.FC = ({ children, @@ -18,12 +19,13 @@ export const ImageText: React.FC = ({ left, imageSrc, imageAlt, + theme, }) => { return ( -
+
{title && ( - + {title} )} diff --git a/src/components/03_organisms/imageText/imageText.module.scss b/src/components/03_organisms/imageText/imageText.module.scss index 1f0f443..7c58630 100644 --- a/src/components/03_organisms/imageText/imageText.module.scss +++ b/src/components/03_organisms/imageText/imageText.module.scss @@ -38,7 +38,8 @@ img { object-fit: cover; - object-position: bottom; + object-position: center; + border-radius: $pds-border-radius-large; } } }