Skip to content

Commit 591616a

Browse files
feat: use contentlayer; split content (#15)
* feat: use contentlayer; split content * feat: adjust eslint * feat: add blog/doc section * feat: add feature card * feat: sort blogs by date * ci: build content * feat: change typo / assets * feat: remove import * feat: add new components to adjust detail pages * chore: update packages * chore: remove component workaround * chore: refactor list image component to render mdx content * chore: define author as optional * chore: add sitemap * chore: a11y check based on sitemap urls * chore: change base url * Move data directory to same level as content directory * ⬆️ Upgrade dependencies * 📝 feat: Initial draft for contributor story on PDS * chore: exclude carousel * Rework TextImage component, add PDS blog assets * 🐛 fix: outdated yarn lockfile * 🎨 Add section around instructional description * 💄 Minor improvements to PDS interview * Add blog to navigation flyout * feat: add metadata to blog and docs * Fix description of hashTags frontmatter property * feat: migrate mdx files to contentlayer * 💄 style: Adapt newest docs proposal by UX team * 💄 style: Docs section * ✨ feat: Add blog component to homepage * 📦 Add bundle-analyzer, move playwright to devDep * 📦 Add yarn workspace tools plugin * chore: clean up code * linkfix https://todogroup.org/resources/case-studies/porsche/ (#22) * Update Open Source Software Notice --------- Signed-off-by: Eduard Itrich <[email protected]> Co-authored-by: Eduard Itrich <[email protected]> on-behalf-of: @porscheofficial <[email protected]>
1 parent 63adebf commit 591616a

File tree

93 files changed

+9929
-1724
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

93 files changed

+9929
-1724
lines changed

.eslintrc.js

+13-1
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,18 @@ module.exports = {
1414
"react/react-in-jsx-scope": "off",
1515
"arrow-body-style": "off",
1616
"@typescript-eslint/no-magic-numbers": "off",
17+
// https://github.com/contentlayerdev/contentlayer/issues/48#issuecomment-1123983319
18+
"import/no-unresolved": [
19+
// eslint-disable-next-line no-magic-numbers
20+
2,
21+
{
22+
ignore: [
23+
"contentlayer/generated",
24+
"next-contentlayer/hooks",
25+
"contentlayer/source-files",
26+
],
27+
},
28+
],
1729
},
1830
overrides: [
1931
{
@@ -32,7 +44,7 @@ module.exports = {
3244
},
3345
{
3446
files: [
35-
"src/mdx-components.tsx",
47+
"src/MdxComponents.tsx",
3648
"src/app/**/page.tsx",
3749
"src/app/**/layout.tsx",
3850
"src/app/**/not-found.tsx",

.gitignore

+3
Original file line numberDiff line numberDiff line change
@@ -56,3 +56,6 @@ next-env.d.ts
5656
/test-results/
5757
/playwright-report/
5858
/playwright/.cache/
59+
60+
# contentlayer
61+
.contentlayer

.prettierignore

+1
Original file line numberDiff line numberDiff line change
@@ -9,3 +9,4 @@ graphqlrc.js
99
.yarn
1010
*.md
1111
*.mdx
12+
.contentlayer

.yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs

+28
Large diffs are not rendered by default.

.yarnrc.yml

+2
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,7 @@ nodeLinker: node-modules
33
plugins:
44
- path: .yarn/plugins/@yarnpkg/plugin-interactive-tools.cjs
55
spec: "@yarnpkg/plugin-interactive-tools"
6+
- path: .yarn/plugins/@yarnpkg/plugin-workspace-tools.cjs
7+
spec: "@yarnpkg/plugin-workspace-tools"
68

79
yarnPath: .yarn/releases/yarn-3.5.1.cjs

NOTICE.txt

+6,109-365
Large diffs are not rendered by default.
+96
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,96 @@
1+
---
2+
title: Porsche Design System
3+
date: 2023-08-30
4+
image: /assets/blog/pds/hero.jpg
5+
descriptionShort: The Porsche Design System provides all the fundamental UXI guidelines and pattern-based web components to build brand driven, consistent and intuitive designs for digital Porsche products. Marcel Bertram, Specialist Digital Marketing UI/UX at Porsche, explains why this project was published as an open-source project and what his team learned along this way.
6+
author:
7+
name: Porsche Design System
8+
description: The Porsche Design System provides the design fundamentals and elements for efficiently creating aesthetic and high-quality web applications, including easy-to-use Figma and UX Pin libraries, coded Web Components and comprehensive usage guidelines. Everything is built and tested following the Porsche quality standards and corporate design principles.
9+
image: https://raw.githubusercontent.com/porsche-design-system/porsche-design-system/main/packages/crest/src/porsche-crest%403x.png
10+
slug: https://designsystem.porsche.com/
11+
readTime: 5min
12+
---
13+
14+
<ImageText imageSrc="/assets/blog/pds/1.jpg" imageAlt="Marcel Bertram"
15+
title="Tell us a little more about yourself, your role at Porsche and what topics drive you.">
16+
Being part of the company for more than twelve years, I had the opportunity
17+
to be part of the very first agile product teams at Porsche. During my
18+
journey through various roles in marketing with a focus on digital products,
19+
we started a strategy for pushing the practice of qualitative UX design with
20+
the first shared service and inner-source system product: The digital
21+
Porsche Design System. The main goals are to ensure an efficient but still
22+
high-quality, brand-consistent implementation of our design language across
23+
all our digital touchpoints.
24+
</ImageText>
25+
26+
<ImageText imageSrc="/assets/blog/pds/2.jpg" imageAlt="Marcel Bertram" left
27+
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?">
28+
The Porsche Design System is comparable to a Lego set that offers
29+
ready-to-use building blocks (coded and designed components) and a clear
30+
manual on how and where to use them. This set allows us to build
31+
high-qualitative frontends, ranging from marketing pages to digital
32+
applications. By supporting multiple popular frameworks such as React,
33+
Angular and Vue, continuously testing for compatibility with a wide
34+
range of browsers and creating a growing set of re-usable components, we
35+
made a huge step ahead in the industry, which I am still proud of. Our
36+
design system unlocks capacities among all Porsche design and
37+
development teams that otherwise would have to reinvent the wheel by
38+
adapting, implementing, and verifying the design guide on their own –
39+
multiplied by all our available teams. We have an extremely high
40+
standard regarding quality, performance, and aesthetics for our
41+
products. The PDS standardizes our digital products and creates one
42+
single system we can collectively optimize.
43+
</ImageText>
44+
45+
<ImageText imageSrc="/assets/blog/pds/3.jpg" imageAlt="Marcel Bertram"
46+
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?">
47+
There are several reasons why we agreed on open sourcing the Porsche
48+
Design System. We wanted to drastically lower the barrier to access and
49+
use our system and thus lift the adoption and engagement. The Porsche
50+
Group encompasses many subsidiaries and has a broad partner network.
51+
Instead of hiding our repositories on an on-premises platform, we made
52+
it publicly available, allowing every single team, partner, and supplier
53+
to access and use the PDS without any hassle. At the same time, we have
54+
removed the complexity of having to worry about access and
55+
authentication – saving us time and effort and lower the risk of
56+
frustration with our consumers.
57+
58+
But this step was also a model of success from a not purely pragmatic
59+
standpoint. We are already receiving the first code changes from individual
60+
contributors outside of the Porsche Group. Bringing the Porsche brand to a
61+
developer portal such as GitHub is a brilliant side-effect of this move.
62+
Our fans and customers can directly connect with us, join a growing community,
63+
and experience the Porsche brand in a totally new way. It is thrilling to see
64+
how the number of stars on GitHub is growing and people really liking what we
65+
are doing.
66+
</ImageText>
67+
68+
<ImageText imageSrc="/assets/blog/pds/4.jpg" imageAlt="Marcel Bertram" left
69+
title="What did you learn along the way? What were the benefits of this strategy for you, your team and Porsche?">
70+
Publishing the Porsche Design System under a free and open license simplified a
71+
lot of things for us. Not only did we reduce the complexity of access
72+
management, as stated previously, but also communication is drastically
73+
simplified. While questions and issues around the PDS have reached us through
74+
various channels, everything can now be found on one single platform, allowing
75+
others to search for already solved problems or give feedback on our components.
76+
77+
One thing we learned is the importance of automation and a high test-coverage
78+
within our repositories. Ensuring both enabled us to reduce the time needed to
79+
review and merge new pull requests. We are therefore looking forward to
80+
receiving further contributions – both from inside and outside of the company!
81+
82+
Ultimately, coding and collaborating in the wild also proved that we are paying
83+
more attention to ensuring compliance, quality, and security of our projects.
84+
Transparency is thus not only a freedom, but also a precursor for advancing in
85+
our field.
86+
</ImageText>
87+
88+
<ImageText imageSrc="/assets/blog/pds/5.jpg" imageAlt="Marcel Bertram"
89+
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?">
90+
We already discussed the idea of generalizing the Porsche Design System.
91+
Currently, PDS is limited to creating Porsche-branded applications. In
92+
the spirit of FOSS, we would like to extend our design system to a
93+
framework that can incorporate any arbitrary corporate identity. It
94+
would be cool to see other brands facilitating, contributing and
95+
collaborating based on our system.
96+
</ImageText>

src/app/docs/cla/CONTRIBUTOR_LICENSE_AGREEMENT.mdx content/docs/cla.mdx

+7
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,10 @@
1+
---
2+
title: Contributor License Agreement
3+
date: 2023-08-02
4+
image: /assets/heroImage2.png
5+
descriptionShort: How you can contribute to our open-source projects
6+
---
7+
18
Thank you for your interest in contributing to an open source software project
29
initiated and/or maintained by Us.
310

src/app/docs/contributing/CONTRIBUTING_UPSTREAM.mdx content/docs/contributing.mdx

+10-7
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,18 @@
1-
import { InlineNotification } from "../../../components/01_atoms/InlineNotification";
2-
import { LinkPure } from "../../../components/01_atoms/LinkPure";
3-
import { Tag } from "../../../components/01_atoms/Tag";
1+
---
2+
title: Contributing Upstream
3+
date: 2023-08-02
4+
image: /assets/heroImage2.png
5+
descriptionShort: How we contribute to open-source projects
6+
---
47

58
## How we contribute to open-source projects
69

7-
<InlineNotification theme="dark" dismissButton={false}>
10+
<PInlineNotification theme="dark" dismissButton={false}>
811
The purpose of this document is to provide transparency on how Porsche is
912
contributing to open-source projects and the standards we're endorsing. The
1013
intended audience is both interested visitors as well as employees of Porsche
1114
AG and subsidiaries.
12-
</InlineNotification>
15+
</PInlineNotification>
1316

1417
### Preliminary steps
1518

@@ -19,9 +22,9 @@ limited to contributing code but should also embrace non-code contributions such
1922
as design, translations, bug reporting, UX Improvement, recruiting, testing,
2023
documentation, project and community management, communication and many more.
2124
Our employees are provided with all means and information on our contribution
22-
policy in our <LinkPure theme="dark" icon="lock" underline="true"
25+
policy in our <PLinkPure theme="dark" icon="lock" underline="true"
2326
href="https://skyway.porsche.com/confluence/display/OSO/Contribution+Guide">
24-
corporate wiki.</LinkPure>
27+
corporate wiki.</PLinkPure>
2528

2629
Furthermore, we appreciate any contribution to the FOSS projects we're maintaining.
2730
You can find more information on the agreement under which you can contribute to

src/app/docs/creating/CREATING_FOSS.mdx content/docs/creating.mdx

+18-15
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,25 @@
1-
import { InlineNotification } from "../../../components/01_atoms/InlineNotification";
2-
import { LinkPure } from "../../../components/01_atoms/LinkPure";
3-
import { Tag } from "../../../components/01_atoms/Tag";
1+
---
2+
title: Creating FOSS
3+
date: 2023-08-02
4+
image: /assets/heroImage2.png
5+
descriptionShort: How we publish and manage new open-source projects
6+
---
47

58
## How we manage new open-source projects
69

7-
<InlineNotification theme="dark" dismissButton={false}>
10+
<PInlineNotification theme="dark" dismissButton={false}>
811
The purpose of this document is to provide transparency on how Porsche is
912
managing new open-source projects and the standards we're endorsing to foster
1013
healthy communities. The intended audience is both interested visitors as well
1114
as employees of Porsche AG and subsidiaries.
12-
</InlineNotification>
15+
</PInlineNotification>
1316

1417
### Preliminary steps
1518

1619
We support and encourage our employees to launch and maintain new FOSS projects.
1720
Our employees can find more information on our contribution policy in our
18-
<LinkPure theme="dark" icon="lock" underline="true"
19-
href="https://skyway.porsche.com/confluence/display/OSO/Contribution+Guide">corporate wiki.</LinkPure>
21+
<PLinkPure theme="dark" icon="lock" underline="true"
22+
href="https://skyway.porsche.com/confluence/display/OSO/Contribution+Guide">corporate wiki.</PLinkPure>
2023

2124
### Our GitHub flow
2225

@@ -34,19 +37,19 @@ with a minimal set of the following branch protection rules:
3437
More information on our GitHub flow can be found in the [Porsche Development
3538
Guidance.](https://devguidance.porsche.com/coding/vcs/git-branching-model/#nowadays-widely-adopted-github-flow)
3639

37-
<InlineNotification theme="dark" dismissButton={false}>
40+
<PInlineNotification theme="dark" dismissButton={false}>
3841
To contribute to an open-source project maintained by Porsche, please fork the
3942
repository, commit your changes to a separate branch and get them merged into
4043
the default branch via a reviewed pull request. More information on how to
4144
contribute to our projects can be found in the CONTRIBUTING.md file of the
4245
particular project.
43-
</InlineNotification>
46+
</PInlineNotification>
4447

4548
### Necessary files and documents
4649

4750
The following files and documents are generally included in all our open-source projects:
4851

49-
1. A pull request template <Tag theme="dark">.github/PULL_REQUEST_TEMPLATE.md</Tag>:
52+
1. A pull request template <PTag theme="dark">.github/PULL_REQUEST_TEMPLATE.md</PTag>:
5053

5154
```markdown
5255
### Pull Request Checklist
@@ -61,19 +64,19 @@ The following files and documents are generally included in all our open-source
6164
checkbox "**I have read and accept the Contributor License Agreement**" is
6265
always required.
6366

64-
2. The unmodified license text of the FOSS project in a file named <Tag
65-
theme="dark">LICENSE.md</Tag>.
67+
2. The unmodified license text of the FOSS project in a file named <PTag
68+
theme="dark">LICENSE.md</PTag>.
6669

67-
3. A <Tag theme="dark">README.md</Tag> that introduces and explains the FOSS
70+
3. A <PTag theme="dark">README.md</PTag> that introduces and explains the FOSS
6871
project. We're following the [makeareadme.com](https://makeareadme.com/)
6972
template for writing good READMEs.
7073

71-
4. A file <Tag theme="dark">CONTRIBUTING.md</Tag> that explains how to contribute to
74+
4. A file <PTag theme="dark">CONTRIBUTING.md</PTag> that explains how to contribute to
7275
the FOSS project.
7376

7477
5. If third-party components are distributed as a bundled
7578
release, a compulsory Open Source Software Notice in a file named
76-
<Tag theme="dark">NOTICE.txt</Tag>.
79+
<PTag theme="dark">NOTICE.txt</PTag>.
7780

7881
### Fostering a welcoming community
7982

File renamed without changes.

src/app/FOSS_MOVEMENT.mdx content/static/FOSS_MOVEMENT.mdx

+4-8
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,12 @@
1-
import { Display } from "../components/01_atoms/Display";
2-
import { KeyValue } from "../components/02_molecules/foss_movement/KeyValue";
3-
import { Principle } from "../components/02_molecules/foss_movement/Principle";
4-
import s from "./page.module.scss";
5-
6-
<Display
1+
<PDisplay
72
tag="h2"
83
theme="dark"
94
align="center"
105
size="small"
11-
className={s.keyvalues}
6+
className={"keyvalues"}
127
>
138
Our Key Values and Principles
14-
</Display>
9+
</PDisplay>
1510

1611
<KeyValue
1712
text="Move from #commercial-software to #free-open-source-software, wherever possible"
@@ -80,3 +75,4 @@ import s from "./page.module.scss";
8075
upstream projects by being provided with lean but compliant processes.
8176
</Principle>
8277
</KeyValue>
78+
File renamed without changes.
File renamed without changes.

0 commit comments

Comments
 (0)