mittwald · Lisa18289 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024 · Nov 6, 2024
diff --git a/packages/docs/src/app/[...slug]/page.tsx b/packages/docs/src/app/[...slug]/page.tsx
@@ -1,10 +1,10 @@
-import MainContent from "@/app/_components/layout/MainContent/MainContent";
+import TopContent from "@/app/_components/layout/TopContent/TopContent";
 import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory";
 import type { StaticParams } from "@/lib/mdx/MdxFile";
 import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
 import { Tabs } from "@mittwald/flow-react-components/Tabs";
 import React from "react";
-import TabContent from "@/app/_components/layout/TabContent/TabContent";
+import MainContent from "@/app/_components/layout/MainContent/MainContent";
 import { Link } from "@mittwald/flow-react-components/Link";
 import { IconExternalLink } from "@mittwald/flow-react-components/Icons";
 
@@ -51,27 +51,44 @@ export default async function Page(props: Props) {
   );
 
   const component = indexMdxFile?.mdxSource.frontmatter.component;
+  const showTabs = !!developMdxFile || !!guidelinesMdxFile;
 
   return (
     <>
-      {indexMdxFile && <MainContent mdxFile={indexMdxFile} />}
+      {indexMdxFile && <TopContent mdxFile={indexMdxFile} />}
 
-      {(overviewMdxFile || developMdxFile || guidelinesMdxFile) && (
+      {!showTabs && overviewMdxFile && (
+        <LayoutCard>
+          <MainContent mdxFile={overviewMdxFile} />
+        </LayoutCard>
+      )}
+      {overviewMdxFile && showTabs && (
         <LayoutCard>
           <Tabs>
             {overviewMdxFile && (
-              <TabContent mdxFile={overviewMdxFile} tabTitle="Overview" />
+              <MainContent
+                showTabs
+                mdxFile={overviewMdxFile}
+                tabTitle="Overview"
+              />
             )}
             {developMdxFile && (
-              <TabContent mdxFile={developMdxFile} tabTitle="Develop" />
+              <MainContent
+                showTabs
+                mdxFile={developMdxFile}
+                tabTitle="Develop"
+              />
             )}
             {guidelinesMdxFile && (
-              <TabContent mdxFile={guidelinesMdxFile} tabTitle="Guidelines" />
+              <MainContent
+                showTabs
+                mdxFile={guidelinesMdxFile}
+                tabTitle="Guidelines"
+              />
             )}
           </Tabs>
         </LayoutCard>
       )}
-
       {component && (
         <Link
           href={`https://github.com/mittwald/flow/issues/new?title=Feedback%20on%20${component}%20component`}

diff --git a/packages/docs/src/app/_components/layout/MainContent/MainContent.tsx b/packages/docs/src/app/_components/layout/MainContent/MainContent.tsx
@@ -1,45 +1,44 @@
 import type { FC } from "react";
 import React from "react";
-import Heading from "@mittwald/flow-react-components/Heading";
-import { Link } from "@mittwald/flow-react-components/Link";
-import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
-import { Section } from "@mittwald/flow-react-components/Section";
-import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
-import { IconExternalLink } from "@mittwald/flow-react-components/Icons";
 import type { MdxFile } from "@/lib/mdx/MdxFile";
 import MdxFileView from "@/lib/mdx/components/MdxFileView";
+import { Tab, TabTitle } from "@mittwald/flow-react-components/Tabs";
+import styles from "../../../layout.module.scss";
+import { MdxFileFactory } from "@/lib/mdx/MdxFileFactory";
+import * as path from "path";
 
 interface Props {
   mdxFile: MdxFile;
+  tabTitle?: string;
+  showTabs?: boolean;
 }
 
-export const MainContent: FC<Props> = (props) => {
-  const { mdxFile } = props;
+export const MainContent: FC<Props> = async (props) => {
+  const { mdxFile, tabTitle, showTabs } = props;
 
-  const component = mdxFile.mdxSource.frontmatter.component;
-
-  return (
-    <>
-      <LayoutCard>
-        <ColumnLayout l={component ? [1, 1] : [1]} m={[1]}>
-          <Section>
-            <Heading level={1}>{mdxFile.getTitle()}</Heading>
+  const indexFile = await MdxFileFactory.fromFile(
+    "src/content/" + path.dirname(mdxFile.filename) + "/index.mdx",
+  );
 
-            {mdxFile.mdxSource.frontmatter.description}
+  const content = (
+    <div className={styles.tabContent}>
+      <MdxFileView
+        mdxFile={mdxFile.serialize()}
+        indexFile={indexFile.serialize()}
+      />
+    </div>
+  );
 
-            {component && (
-              <Link href={mdxFile.getGitHubUrl()}>
-                GitHub
-                <IconExternalLink />
-              </Link>
-            )}
-          </Section>
+  if (showTabs) {
+    return (
+      <Tab>
+        <TabTitle>{tabTitle}</TabTitle>
+        {content}
+      </Tab>
+    );
+  }
 
-          <MdxFileView mdxFile={mdxFile.serialize()} />
-        </ColumnLayout>
-      </LayoutCard>
-    </>
-  );
+  return <> {content} </>;
 };
 
 export default MainContent;
diff --git a/packages/docs/src/app/_components/layout/TabContent/TabContent.tsx b/packages/docs/src/app/_components/layout/TabContent/TabContent.tsx
diff --git a/packages/docs/src/app/_components/layout/TabContent/index.ts b/packages/docs/src/app/_components/layout/TabContent/index.ts
diff --git a/packages/docs/src/app/_components/layout/TopContent/TopContent.tsx b/packages/docs/src/app/_components/layout/TopContent/TopContent.tsx
@@ -0,0 +1,45 @@
+import type { FC } from "react";
+import React from "react";
+import Heading from "@mittwald/flow-react-components/Heading";
+import { Link } from "@mittwald/flow-react-components/Link";
+import { LayoutCard } from "@mittwald/flow-react-components/LayoutCard";
+import { Section } from "@mittwald/flow-react-components/Section";
+import { ColumnLayout } from "@mittwald/flow-react-components/ColumnLayout";
+import { IconExternalLink } from "@mittwald/flow-react-components/Icons";
+import type { MdxFile } from "@/lib/mdx/MdxFile";
+import MdxFileView from "@/lib/mdx/components/MdxFileView";
+
+interface Props {
+  mdxFile: MdxFile;
+}
+
+export const TopContent: FC<Props> = (props) => {
+  const { mdxFile } = props;
+
+  const component = mdxFile.mdxSource.frontmatter.component;
+
+  return (
+    <>
+      <LayoutCard>
+        <ColumnLayout l={component ? [1, 1] : [1]} m={[1]}>
+          <Section>
+            <Heading level={1}>{mdxFile.getTitle()}</Heading>
+
+            {mdxFile.mdxSource.frontmatter.description}
+
+            {component && (
+              <Link href={mdxFile.getGitHubUrl()}>
+                GitHub
+                <IconExternalLink />
+              </Link>
+            )}
+          </Section>
+
+          <MdxFileView mdxFile={mdxFile.serialize()} />
+        </ColumnLayout>
+      </LayoutCard>
+    </>
+  );
+};
+
+export default TopContent;
diff --git a/packages/docs/src/app/_components/layout/TopContent/index.ts b/packages/docs/src/app/_components/layout/TopContent/index.ts
@@ -0,0 +1,3 @@
+import TopContent from "@/app/_components/layout/TopContent/TopContent";
+
+export default TopContent;
diff --git a/packages/docs/src/content/02-foundations/01-design/05-typography/index.mdx b/packages/docs/src/content/02-foundations/01-design/05-typography/index.mdx
@@ -2,77 +2,6 @@
 title: Typography
 ---
 
-# Fonts
-
-Für Benutzeroberflächen wird hauptsächlich die Font **Inter** verwendet. Sie
-wird z. B. in [Headings](/03-components/content/heading), im Body und in den
-Components eingesetzt. Im Code wird die Font Size immer in REM angegeben, damit
-die Schrift vom User leicht vergrößert werden kann. <br/> Die Line Height
-beträgt immer min. 150 % der Höhe der Font.
-
----
-
-# Headings
-
-[Headings](/03-components/content/heading) zeichnen sich durch ihre Farbe und
-die große Auswahl an verschiedenen Größen zur Strukturierung aus.
-
-|                                        | REM       | PX    | Line Height |
-| -------------------------------------- | --------- | ----- | ----------- |
-| <Heading level={1}>Heading 1</Heading> | 2 rem     | 32 px | 48 lh       |
-| <Heading level={2}>Heading 2</Heading> | 1,25 rem  | 20 px | 30 lh       |
-| <Heading level={3}>Heading 3</Heading> | 1.125 rem | 18 px | 27 lh       |
-| <Heading level={4}>Heading 4</Heading> | 1 rem     | 16 px | 24 lh       |
-| <Heading level={5}>Heading 5</Heading> | 1 rem     | 16 px | 24 lh       |
-
----
-
-# Text
-
-Text wird überall auf Benutzeroberflächen verwendet, vom Fließtext bis hin zu
-kleinen Hinweisen. Bei Small kann zwischen den Line Heights 21 und 24 gewählt
-werden, da gerade 24lh gut in das Layout passt und 21lh für kleinere Höhen
-besser geeignet ist.
-
-|                                 | REM       | PX    | Line Height   |
-| ------------------------------- | --------- | ----- | ------------- |
-| Text (Body)                     | 1 rem     | 16 px | 24 lh         |
-| **Text (Body)**                 | 1 rem     | 16 px | 24 lh         |
-| <small>Text (Small)</small>     | 0,875 rem | 14 px | 21 lh / 24 lh |
-| **<small>Text (Small)</small>** | 0,875 rem | 14 px | 21 lh / 24 lh |
-
----
-
-# Label
-
-[Labels](03-components/content/label) sind durch ihre graue Farbe und
-Bold-Darstellung als beschreibendes Element in komplexeren Components gut
-erkennbar.
-
-|                      | REM       | PX    | Line Height   |
-| -------------------- | --------- | ----- | ------------- |
-| <Label>Label</Label> | 0,875 rem | 14 px | 21 lh / 24 lh |
-
----
-
-# Links
-
-Frei stehende [Links](/03-components/navigation/link) werden in Bold
-dargestellt. Im Fließtext stehende Links verfügen über einen Unterstrich, um sie
-im Text besser erkennen zu können (s. Accessibility).
-
-|                   | REM       | PX    | Line Height |
-| ----------------- | --------- | ----- | ----------- |
-| <Link>Link</Link> | 0,875 rem | 14 px | 24 lh       |
-| [Link]()          | 1 rem     | 16 px | 24 lh       |
-
----
-
-# Code
-
-Um Code von der anderen Font abzuheben, wird bei Code **Fira Code** verwendet,
-da sie einen eher technisches Aussehen hat.
-
-|        | REM       | PX    | Line Height |
-| ------ | --------- | ----- | ----------- |
-| `code` | 0,875 rem | 14 px | 24 lh       |
+Typography strukturiert den Inhaltsbereich, indem sie eine visuelle Hierarchie
+schafft. Darüber hinaus erhöht eine gute Typography die Lesbarkeit und stärkt
+die Marke im Erscheinungsbild.
diff --git a/packages/docs/src/content/02-foundations/01-design/05-typography/overview.mdx b/packages/docs/src/content/02-foundations/01-design/05-typography/overview.mdx
@@ -0,0 +1,74 @@
+# Fonts
+
+Für Benutzeroberflächen wird hauptsächlich die Font **Inter** verwendet. Sie
+wird z. B. in [Headings](/03-components/content/heading), im Body und in den
+Components eingesetzt. Im Code wird die Font Size immer in REM angegeben, damit
+die Schrift vom User leicht vergrößert werden kann. <br/> Die Line Height
+beträgt immer min. 150 % der Höhe der Font.
+
+---
+
+# Headings
+
+[Headings](/03-components/content/heading) zeichnen sich durch ihre Farbe und
+die große Auswahl an verschiedenen Größen zur Strukturierung aus.
+
+|                                        | REM       | PX    | Line Height |
+| -------------------------------------- | --------- | ----- | ----------- |
+| <Heading level={1}>Heading 1</Heading> | 2 rem     | 32 px | 48 lh       |
+| <Heading level={2}>Heading 2</Heading> | 1,25 rem  | 20 px | 30 lh       |
+| <Heading level={3}>Heading 3</Heading> | 1.125 rem | 18 px | 27 lh       |
+| <Heading level={4}>Heading 4</Heading> | 1 rem     | 16 px | 24 lh       |
+| <Heading level={5}>Heading 5</Heading> | 1 rem     | 16 px | 24 lh       |
+
+---
+
+# Text
+
+Text wird überall auf Benutzeroberflächen verwendet, vom Fließtext bis hin zu
+kleinen Hinweisen. Bei Small kann zwischen den Line Heights 21 und 24 gewählt
+werden, da gerade 24lh gut in das Layout passt und 21lh für kleinere Höhen
+besser geeignet ist.
+
+|                                 | REM       | PX    | Line Height   |
+| ------------------------------- | --------- | ----- | ------------- |
+| Text (Body)                     | 1 rem     | 16 px | 24 lh         |
+| **Text (Body)**                 | 1 rem     | 16 px | 24 lh         |
+| <small>Text (Small)</small>     | 0,875 rem | 14 px | 21 lh / 24 lh |
+| **<small>Text (Small)</small>** | 0,875 rem | 14 px | 21 lh / 24 lh |
+
+---
+
+# Label
+
+[Labels](03-components/content/label) sind durch ihre graue Farbe und
+Bold-Darstellung als beschreibendes Element in komplexeren Components gut
+erkennbar.
+
+|                      | REM       | PX    | Line Height   |
+| -------------------- | --------- | ----- | ------------- |
+| <Label>Label</Label> | 0,875 rem | 14 px | 21 lh / 24 lh |
+
+---
+
+# Links
+
+Frei stehende [Links](/03-components/navigation/link) werden in Bold
+dargestellt. Im Fließtext stehende Links verfügen über einen Unterstrich, um sie
+im Text besser erkennen zu können (s. Accessibility).
+
+|                   | REM       | PX    | Line Height |
+| ----------------- | --------- | ----- | ----------- |
+| <Link>Link</Link> | 0,875 rem | 14 px | 24 lh       |
+| [Link]()          | 1 rem     | 16 px | 24 lh       |
+
+---
+
+# Code
+
+Um Code von der anderen Font abzuheben, wird bei Code **Fira Code** verwendet,
+da sie einen eher technisches Aussehen hat.
+
+|        | REM       | PX    | Line Height |
+| ------ | --------- | ----- | ----------- |
+| `code` | 0,875 rem | 14 px | 24 lh       |
diff --git a/packages/docs/src/content/02-foundations/02-structure/01-layout/overview.mdx b/packages/docs/src/content/02-foundations/02-structure/01-layout/overview.mdx
@@ -1,3 +1,5 @@
+# Best Practices
+
 Ein Layout fügt verschiedene Elemente der Benutzeroberfläche zu einer logischen
 Struktur zusammen. Die folgenden Punkte sind hilfreich, um ein gutes Layout zu
 erstellen:
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import TopContent from "@/app/_components/layout/TopContent/TopContent";

		export default TopContent;