docs[DST-519]: Clean up Marigold Docs/ Improve Nav

.changeset/sweet-toys-shop.md

@@ -0,0 +1,12 @@
+---
+"@marigold/docs": patch
+---
+
+docs[DST-519]: Clean up Marigold Docs/ Improve Navigation
+
+- deleted old files (scripts, about , release)
+- updated some faqs
+- improved the navigation structure
+- added overview pages
+- improved folder structure in code (a bit)
+- adjust some links

docs/app/_components/Navigation.tsx

@@ -17,7 +17,7 @@ interface NavigationLink {
 
 interface NavigationSubsection {
   name: string;
-  links: NavigationLink[];
+  links?: NavigationLink[];
 }
 interface NavigationSection {
   name: string;
@@ -27,7 +27,7 @@ interface NavigationSection {
 }
 
 export const useNavigation = (): NavigationSection[] => {
-  const navigation = siteConfig.navigation;
+  const navigation = [...siteConfig.navigation] as NavigationSection[];
 
   return navigation.map(({ name, slug, subsections = [] }) => {
     // Section Page = has a section but NO subsection
@@ -44,19 +44,22 @@ export const useNavigation = (): NavigationSection[] => {
         href: `/${page.slug}`,
         badge: page.badge,
       })),
-      subsections: subsections.map(subsection => ({
-        name: subsection.name,
-        links: allContentPages
-          .filter(
-            // Subsection Page = has a section AND a subsection
-            page => page.section === slug && page.subsection === subsection.slug
-          )
-          .map(page => ({
-            name: page.title,
-            href: `/${page.slug}`,
-            badge: page.badge,
-          })),
-      })),
+      subsections: subsections.map(
+        (subsection: { name: string; slug: string }) => ({
+          name: subsection.name,
+          links: allContentPages
+            .filter(
+              // Subsection Page = has a section AND a subsection
+              page =>
+                page.section === slug && page.subsection === subsection.slug
+            )
+            .map(page => ({
+              name: page.title,
+              href: `/${page.slug}`,
+              badge: page.badge,
+            })),
+        })
+      ),
     };
   });
 };
@@ -99,7 +102,7 @@ export const Navigation = ({ onClick }: NavigationProps) => {
                   {name}
                 </div>
                 <div className="border-secondary-300 ml-0.5 flex flex-col border-l">
-                  {links.map(({ name, href, badge }) => (
+                  {links?.map(({ name, href, badge }) => (
                     <div key={href}>
                       <NavLink
                         className="flex items-center gap-4"

docs/app/_components/SiteHeader.tsx

@@ -14,9 +14,9 @@ export const SiteHeader = () => (
       <SiteLogo />
       <SiteNavigation />
     </div>
-    <div className="hidden md:block">
+    <div className="hidden lg:block">
       <Link href="https://marigold-rapp.vercel.app/" variant="cta">
-        <span className="hidden xl:inline">Discover new </span>Tutorials!
+        <span className="hidden 2xl:inline">Discover new </span>Tutorials!
       </Link>
     </div>
     <div className="flex flex-1 flex-col items-stretch md:block md:flex-initial">

docs/app/_components/SiteNavigation.tsx

@@ -10,10 +10,7 @@ export const SiteNavigation = () => {
   const sections = navigation.map(section => ({
     name: section.name,
     slug: section.slug,
-    link:
-      section.subsections.length > 0
-        ? section.subsections[0].links[0]
-        : section.links[0],
+    link: section.links[0],
   }));
 
   return (

docs/content/components/application/provider/provider.mdx

@@ -7,7 +7,7 @@ caption: Provider which applies the theme.
 Without the `<MarigoldProvider>` you can't get the theme on your components. So it is necessary to use.
 
 You just have to wrap your components around the `<MarigoldProvider>` to make it work.
-If you want to get more information about the setup go to [Getting Started](/introduction/getting-started/#bootstrapping).
+If you want to get more information about the setup go to [Getting Started](/getting-started/installation/#bootstrapping).
 
 ```tsx
 import { Button, MarigoldProvider } from '@marigold/components';

docs/content/components/collection/table/table.mdx

@@ -187,7 +187,7 @@ To make async sorting more convenient, you can use the `useAsyncList` hook. The
 
 ### Handling numeric values
 
-With our formatting helper components for dates and numeric values you can easily ensure consistent and accurate display. See [NumericFormat](../formatters/numericformat/numericFormat), [DateFormat](../formatters/dateformat/dateFormat) for more informations.
+With our formatting helper components for dates and numeric values you can easily ensure consistent and accurate display. See [NumericFormat](../formatters/numericformat), [DateFormat](../formatters/dateformat) for more informations.
 
 Also you see how to use the `align` property on the columns. With that you can set the content of a column to left, center or right.
 
@@ -317,7 +317,7 @@ Choosing the right alternative to data tables is crucial for effectively display
   </li>
 </ul>
 
-Is there still not the right alternative for you please [get in touch](../../introduction/get-in-touch) with us!
+Is there still not the right alternative for you please [get in touch](../../resources/get-in-touch) with us!
 
 ## Related
 

docs/content/components/content/icon/icon.mdx

@@ -3,13 +3,13 @@ title: Icon
 caption: Component to render Icons.
 ---
 
-On this page you can learn how [Marigold Icons](/concepts/icons/) should be used.
+On this page you can learn how [Marigold Icons](/foundations/icons/) should be used.
 Icons itself can be used to improve visual interest and get users attention.
 
 The size of the icon can be change via the `size` prop. The default size is `24px`.
 The color of the icon refers to the property [`currentcolor`](https://www.w3schools.com/colors/colors_currentcolor.asp).
 
-For a full list of the available Icons go to the [Marigold Icons](/concepts/icons/).
+For a full list of the available Icons go to the [Marigold Icons](/foundations/icons/).
 
 ## Import
 
@@ -33,7 +33,7 @@ To import a specific component you just have to use the name of the icon directl
 import { DesignTicket } from '@marigold/icons';
 ```
 
-Alternatively you can go to [Marigold Icons](/concepts/icons/) and click on an Icon in the list to copy them as `<svg>` Element.
+Alternatively you can go to [Marigold Icons](/foundations/icons/) and click on an Icon in the list to copy them as `<svg>` Element.
 
 ## Props
 

docs/content/components/content/section-message/section-message.mdx

@@ -39,18 +39,18 @@ import { SectionMessage } from '@marigold/components';
 
 ### Info Section Message
 
-This is the default info `<SectionMessage>`. The color is in a blue tone and contains the [`<Info>`](/concepts/icons/#info) icon.
+This is the default info `<SectionMessage>`. The color is in a blue tone and contains the [`<Info>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-info.demo.tsx" />
 
 ### Warning Section Message
 
-Here you can see the warning `<SectionMessage>`. The color is in a yellow tone and contains the[`<Notification>`](/concepts/icons/#info) icon.
+Here you can see the warning `<SectionMessage>`. The color is in a yellow tone and contains the[`<Notification>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-warn.demo.tsx" />
 
 ### Error Section Message
 
-The error `<SectionMessage>` is colored in a red tone and contains the [`<Exclamation>`](/concepts/icons/#info) icon.
+The error `<SectionMessage>` is colored in a red tone and contains the [`<Exclamation>`](/foundations/icons/#info) icon.
 
 <ComponentDemo file="./section-message-error.demo.tsx" />

docs/content/components/content/svg/svg.mdx

@@ -27,6 +27,6 @@ In this example you can see how to use the `<SVG>` element.
 
 ### Colorize
 
-To modify the color, adjust the `color` prop using a [design token](/introduction/design-tokens).
+To modify the color, adjust the `color` prop using a [design token](/foundations/design-tokens).
 
 <ComponentDemo file="./svg-color.demo.tsx" />

docs/content/components/form/form/form.mdx

@@ -5,7 +5,7 @@ caption: Wrap your fields to submit user data and enable input validation.
 
 The `<Form>` component acts as a container for a set of fields, enabling data transmission to a server. It operates like a standard HTML form, initiating either a request based on the specified `method` attribute.
 
-Additionally, the `<Form>` allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the [Validation](/concepts/validation) guide to learn more about form validation.
+Additionally, the `<Form>` allows to validate user input and offers feedback for incorrect data entries, enhancing the overall resilience and user-friendliness of the form submission process. See the [Validation](/foundations/validation) guide to learn more about form validation.
 
 ## Import
 
@@ -41,7 +41,7 @@ The `<Form>` component handles passed errors, typically received from a server a
 
 <ComponentDemo file="./form-validation-errors.demo.tsx" />
 
-For more information about form validation, see the [Validation](/concepts/validation) guide.
+For more information about form validation, see the [Validation](/foundations/validation) guide.
 
 ### Focus Management
 
@@ -54,6 +54,6 @@ As you can see in the previous server errors example, when a user submits a form
 <SectionMessage type="info">
   <SectionMessage.Title>Want more?!</SectionMessage.Title>
   <SectionMessage.Content>
- You can find more examples and usages of the `<Form>` component on the [Validation](/concepts/validation) page and in the [Forms](/recipes/form-recipes) recipes.
+ You can find more examples and usages of the `<Form>` component on the [Validation](/foundations/validation) page and in the [Forms](/recipes/form-recipes) recipes.
   </SectionMessage.Content>
 </SectionMessage>

docs/content/components/form/number-field/number-field.mdx

@@ -324,7 +324,7 @@ the user about the error. The message disappears automatically when all requirem
     },
     {
       title: 'NumericFormat',
-      href: '../formatters/numericformat/numericFormat',
+      href: '../formatters/numericformat',
       caption:
         'Helper component for formatting numeric based on the current language and locale-specific conventions.',
       icon: (

docs/content/components/hooks-and-utils/useResponsiveValue/useResponsiveValue.mdx

@@ -10,7 +10,7 @@ You can pass the following parameters to your useResponsiveValue hook:
 
 The first parameter of the hook will be the values as array which defines the breakpoints. The second argument must be the `defaultIndex` which points opn the default value.
 
-If you want to have a look on all possible breakpoints from the theme you can have a look [here](../introduction/design-tokens#breakpoints).
+If you want to have a look on all possible breakpoints from the theme you can have a look [here](../foundations/design-tokens#breakpoints).
 
 Also with Tailwind some new class names came along which you can use to add styles by using the responsive modifiers (like: sm:text-sm).
 

docs/content/components/layout/inline/inline.mdx

@@ -6,12 +6,12 @@ badge: updated
 
 The `<Inline>` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). It aligns its content horizontally in a row and automatically wraps to a new line when there isn't enough space on the screen.
 
-Use the inline component in combination with other layout components to easily [create customized layouts](../../concepts/layouts).
+Use the inline component in combination with other layout components to easily [create customized layouts](../../foundations/layouts).
 
 ## Usage
 
 If you have more than two elements you can use the `<Inline>` component to arrange elements horizontally according to the space required.
-For adding the space between the elements you need to use the `space` property and set it to a supported [space value](../../introduction/design-tokens#spacing).
+For adding the space between the elements you need to use the `space` property and set it to a supported [space value](../../foundations/design-tokens#spacing).
 
 <ComponentDemo file="./inline-elements.demo.tsx" />
 
@@ -51,7 +51,7 @@ For horizontally alignment you can use the `alignX` prop.
   items={[
         {
       title: 'Building layouts',
-      href: '../../concepts/layouts',
+      href: '../../foundations/layouts',
       caption: 'Learn how to build layouts.',
       icon: (
       <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">

docs/content/components/layout/split/split.mdx

@@ -40,7 +40,7 @@ What applies to the inline is also possible with the stack component. You have t
   items={[
     {
       title: 'Building layouts',
-      href: '../../concepts/layouts',
+      href: '../../foundations/layouts',
       caption: 'Learn how to build layouts.',
       icon: (
         <svg

docs/content/components/layout/stack/stack.mdx

@@ -6,11 +6,11 @@ badge: updated
 
 The `<Stack>` component is a responsive layout component based on [CSS Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox). The stack is basically a flexbox column that acts as a container that aligns its children vertically in new lines. The component should be used wherever you need to arrange elements stacked on top of each other.
 
-Use the stack component in combination with other layout components to easily [create customized layouts](../../concepts/layouts).
+Use the stack component in combination with other layout components to easily [create customized layouts](../../foundations/layouts).
 
 ## Usage
 
-The use of `<Stack>` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../introduction/design-tokens#spacing).
+The use of `<Stack>` is recommended if you have two or more elements that must be the same distance apart. For the space you have to use our supported [space values](../../foundations/design-tokens#spacing).
 
 In this example you can see, the space prop ensures that each child is separated by the same space which maintains visual consistency.
 
@@ -59,7 +59,7 @@ The following example shows how stacks can be nested within each other. You see
   items={[
     {
       title: 'Building layouts',
-      href: '../../concepts/layouts',
+      href: '../../foundations/layouts',
       caption: 'Learn how to build layouts.',
       icon: (
         <svg