Create infrastructure and template for component pages

[ti10le]

We need a structure to create all component markdown pages. Before we add all mdx files from storybook to gatsby we have to add one functional and good looking example.

Structure:

• Headline
• Component Description
  • Typical component description (written by UX/UI)
  • Component Description what users/developers need to know about the Usage (written by Marigold developers)
• Props table
• Import
• Usage Examples

Todos for mdx in gatsby:

• [x] enable code highlighting with `...`
• [x] enable code block highlighting with ```tsx or ```jsx
• [x] enable own table styling in gatsby markdown

[viktoria-schwarz]

In the headline you mention to create a template, is that intentional? Or should we rather just start with one component and the outline you gave and then adjust this to each individual component. I don't think working with a real template saves us time....

Also I don't fully understand your point

enable own table styling in gatsby markdown

Can you explain what you mean by that?

[ti10le]

Or should we rather just start with one component and the outline you gave and then adjust this to each individual component.

This is what I mean

Can you explain what you mean by that?

It means that actually you got a non-bordered table with no padding, etc. if you create a table in gatsby. You need to add a plugin or s.e. to show a nice table view

[ti10le]

Template could be a few things. It's not 100% clear. What I mean: Create something like a frame/base structure to show how to add our existing stories pages to Gatsby. Not sure if its just adding a few plugins and copy/paste some parts or a Gatsby template for the whole page. This is what we have to find out 🤷🏽‍♂️ Difficult to explain in a good way.. maybe talk about it on monday

[viktoria-schwarz]

We conclude we want all component pages in our documentation with the same structure (the one given in this issue). We need to look for suitable plugins to implement the table, code blocks and code highlighting.

[ti10le]

actually we have:

• table highlighting
• inline code highlighting with: `
• code block highlighting: ```tsx
• live code block highlighting: ```tsx live-code
• only code highlighting without preview: ```tsx code-only

[sebald]

What we should do in this cycle for this umbrella issue:

• [ ] Dynamic navigation based on content (#1056 is some groundwork for that) --> #1111
• [ ] Unify the gatsby configs for SSR and browser. We "wraps" need to be in both! --> #1112
• [x] we should not have all the MDX components setup there.

[ti10le]

actually we have:

• text highlighting
• heading highlighting
• table highlighting
• inline code highlighting with: `
• code block highlighting: ```tsx
• live code block highlighting: ```tsx live
• only code highlighting without preview: ```tsx code

[ti10le]

Two open points in #1111 and #1112