📖: Add contributor story on ORT (#26)

* Add Contributor Story on ORT
* Add more MDX components for ORT story
* Remove double PText component

The PText component is already given
by the respective paragraphs within
the MDX document.

* Remove unwanted paragraph from headline
* Add images for ORT story
* Fix missing OpenGraph description
* Rephrase technical foundation to core service
* Add theme option to MDX content
* Adjust spacing for featured blog posts
* Adjust ratio of second ORT blog image
* Add year to blog post date
* Ignore playwright errors on svg elements for now

This error needs to be fixed upstream in next-image-export-optimizer

---------

Signed-off-by: Eduard Itrich <eduard.itrich@porsche.de>
on-behalf-of: @porscheofficial <open_source_office@porsche.de>

content/blog/oss-review-toolkit.mdx

@@ -0,0 +1,93 @@
+---
+title: OSS Review Toolkit
+date: 2023-11-03
+image: /assets/blog/ort/hero.jpg
+descriptionShort: In this contributor story, the Open Source Office (OSO) at Porsche AG explains why it has chosen OSS Review Toolkit (ORT) as their core service for all in-house developed initiatives and why they preferred to collaborate with the community rather than buying a commercial solution.
+author:
+  name: OSS Review Toolkit (ORT)
+  description: The OSS Review Toolkit (ORT) is a Free and Open Source Software (FOSS) orchestration toolkit to – among other features – manage open-source software dependencies and ensure compliance with a configurable set of policies. Initially founded by multiple companies and later donated to the Linux Foundation, the open-source project quickly gained track among the FOSS community. A growing number of companies, such as HERE Technologies, BMW or Deutsche Telekom Systems are evaluating or already implemented ORT within their FOSS compliance process.
+  image: https://raw.githubusercontent.com/oss-review-toolkit/ort/main/logos/logo.png
+  slug: https://oss-review-toolkit.org/ort/
+readTime: 5min
+---
+
+<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
+    exactly what open-source dependencies make up our Porsche software products.
+    This allows us to comply with all license conditions that come with the
+    open-source libraries in use.
+
+    To answer all questions in the compliance journey where multiple actors are
+    playing a role in the lifecycle, the utmost important area becomes the process
+    around compliance and the data. But how do you collect all this information when
+    multiple products are being developed having a wide variety of technology stacks
+    used and each product must be compliant before they get released outside the Porsche
+    environment?
+
+    To find the solution to the problem statement, the Porsche AG OSO came up with an
+    already existing community-based open-source software which is called OSS Review
+    Toolkit (ORT). Moreover, extensive research was carried out before ORT was taken
+    into the decision-making process and then this software was decided to move forward
+    with.
+</ImageText>
+
+<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
+    us to analyze the data, provides us the flexibility to run scanning on the collected
+    data, and generates the necessary reports.
+
+    **What do we do with the Reports?** The reports are deeply analyzed further to
+    detect possible irregularities of the software libraries used in the product team
+    development lifecycle within the Porsche environment. This helps us to be able to
+    perform data enrichment by curating the data within ORT.
+
+    **How do we offer ORT within the Porsche Environment?** ORT is offered as a core
+    service to our product teams within Porsche AG and its subsidiaries. As ORT is an
+    orchestrator, it comes with sequential stages which helps us distribute the concerned
+    stage to different parties in an automated manner. This means, that the first stage of
+    ORT which is “Analyzer” can be used as a decentralized service by product teams to generate
+    metadata by connecting and running on their code repository. The remaining stages are
+    controlled centrally by the OSO. Because of this setup, the Open Source Office and Product
+    Teams work together having a handshake to help accomplish the journey of compliance.
+
+    **What is the bottom line?** The compliance journey goes hand in hand when the
+    majority of Porsche products are using FOSS in the development lifecycle. At the
+    end of the day, we have a precise overview of all open-source components our
+    products are relying on, which we can use, for instance, to ensure FOSS
+    compliance and create the well-known Open Source Software Notice.
+    </Textblock>
+</Section>
+
+
+<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
+    across company borders, shorten development cycles, drive innovation, and save
+    costs. The initial motivation was not to merely consume FOSS to ensure
+    compliance but rather to build a cross-functional open-source ecosystem to
+    embrace a holistic approach, including contribution and collaboration towards
+    the community. Today, we can proudly say that our open-source ecosystem is
+    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" 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
+    Platform, where the FOSS data of all product teams is centrally aggregated,
+    enriched, and curated. This will allow us to leverage all four core strategies,
+    including FOSS compliance, contribution, inner source, and vulnerability
+    management on one joint platform and create a one-stop shop for open source at
+    Porsche.
+
+    The plan is to release these products as open-source projects to start building
+    a community around our ecosystem. We are already conducting initial discussions
+    with potential allies and are looking forward to the coming time in which we
+    will further develop our open-source ecosystem together with further experts and
+    community members.
+</ImageText>

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

content/static/FOSS_MOVEMENT.mdx

@@ -4,9 +4,7 @@
   align="center"
   size="small"
   className={"keyvalues"}
->
-  Our Key Values and Principles
-</PDisplay>
+>Our Key Values and Principles</PDisplay>
 
 <KeyValue
   text="Move from #commercial-software to #free-open-source-software, wherever possible"

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;
 }

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

@@ -71,7 +71,7 @@ const BlogPage: React.FC<PageProps> = ({ params }: PageProps) => {
     notFound();
   }
 
-  const formatDate = format(parseISO(blog.date), "do LLLL");
+  const formatDate = format(parseISO(blog.date), "do LLLL yyyy");
   const hashes = blog.hashTags ? `· #${blog.hashTags.join(" #")}` : "";
   const description = `${formatDate} · ${blog.readTime} reading time ${hashes}`;
 
@@ -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 && (

src/app/blog/page.tsx

@@ -12,7 +12,7 @@ const BlogPage: React.FC = () => {
         imageSrc={heroImage}
         imageAlt="AI generated Porsche Taycan"
       />
-      <Section grid={false}>
+      <Section grid={false} spacing="l">
         <BlogsSection isFeatured showHeading={false} />
       </Section>
     </main>

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>

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>
       )}

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>
       )}

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>
       )}