added new components and build folder

src/.vuepress/theme/components/Header.vue

@@ -2,16 +2,18 @@
   <header id="header" class="SectionHeader-container u-container u-print-hide">
     <div class="SectionHeader u-limitWidth-12 u-align-center">
       <div class="SectionHeader-metaSection ">
-        <a href="#" class="SectionHeader-logoSection">
-          <img class="SectionHeader-logo SectionHeader-logo--large" :src="$withBase('img/logo-lg.svg')" alt="ITVSH Design System" width="437" height="40"/>
-        </a>
+        <div href="/" class="SectionHeader-logoSection">
+          <img class="SectionHeader-logo SectionHeader-logo--large" :src="$withBase('/img/logo-lg.svg')" alt="ITVSH Design System" width="437" height="40"/>
+        </div>
       </div>
 
       <div class="SectionHeader-menuSection" id="primarynavigation" aria-label="Primär">
-        <a href="#" class="SectionHeader-logoSection" tabindex="-1">
-          <img class="SectionHeader-logo SectionHeader-logo--small" :src="$withBase('img/logo-sm.svg')" alt="ITVSH Design System" width="49" height="40"/>
+        <a href="/" class="SectionHeader-logoSection" tabindex="-1">
+          <img class="SectionHeader-logo SectionHeader-logo--small" :src="$withBase('/img/logo-sm.svg')" alt="ITVSH Design System" width="49" height="40"/>
         </a>
+        <a href="/">
           <p class="Base-h1 u-textTransform--upper">Dokumentation</p>
+        </a>
         <div class="SectionHeader-backLink u-linkWrap">
           <a href="https://www.design-system.sh/" class="Base-link" title="Zur Design System Informations Webseite">
             <span class="SectionHeader-backLink-text">zum <span class="u-textTransform--upper">&nbsp;Digital Design System</span></span>

src/.vuepress/theme/components/Page.vue

@@ -2,12 +2,16 @@
   <main class="page-container">
     <slot name="top" />
     <Content class="theme-content"/>
+    <PageEdit />
     <slot name="bottom" />
   </main>
 </template>
 <script>
-
+import PageEdit from "@parent-theme/components/PageEdit";
 export default {
+  components: {
+    PageEdit
+  },
   props: ['sidebarItems']
 }
 </script>

src/.vuepress/theme/components/SWUpdatePopup.vue

+<template>
+  <SWUpdatePopup v-slot="{ enabled, reload, message, buttonText }">
+    <div
+        v-if="enabled"
+        class="my-sw-update-popup">
+      {{ message }}<br>
+      <button @click="reload">{{ buttonText }}</button>
+    </div>
+  </SWUpdatePopup>
+</template>
+
+<script>
+import SWUpdatePopup from '@vuepress/plugin-pwa/lib/SWUpdatePopup.vue'
+
+export default {
+  components: { SWUpdatePopup }
+}
+</script>
+
+<style>
+.my-sw-update-popup {
+  text-align: right;
+  position: fixed;
+  bottom: 20px;
+  right: 20px;
+  background-color: #fff;
+  font-size: 20px;
+  padding: 10px;
+  border: 5px solid #3eaf7c;
+}
+
+.my-sw-update-popup button {
+  border: 1px solid #fefefe;
+}
+</style>

src/.vuepress/theme/config.js

@@ -18,11 +18,11 @@ module.exports = {
   head: [
     ['link', {rel: 'icon', href: '/logo.png'}],
     ['link', {rel: 'manifest', href: '/manifest.json'}],
-    ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+    ['meta', {name: 'theme-color', content: '#3A78B8'}],
     ['meta', {name: 'apple-mobile-web-app-capable', content: 'yes'}],
     ['meta', {name: 'apple-mobile-web-app-status-bar-style', content: 'black'}],
     ['link', {rel: 'apple-touch-icon', href: '/icons/apple-touch-icon-152x152.png'}],
-    ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
+    ['link', {rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3A78B8'}],
     ['meta', {name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png'}],
     ['meta', {name: 'msapplication-TileColor', content: '#000000'}]
   ],
@@ -30,8 +30,23 @@ module.exports = {
     [
       '@vuepress/plugin-back-to-top',
       '@vuepress/plugin-medium-zoom',
-      '@vuepress/plugin-last-updated',
-      '@vuepress/pwa',
+      ['@vuepress/pwa', {
+        serviceWorker: true,
+        popupComponent: 'MySWUpdatePopup',
+        updatePopup: {
+          message: "Neue Inhalte sind verfügbar.",
+          buttonText: "Aktualisieren"
+        }
+      }],
+      ['@vuepress/search', {
+        searchMaxSuggestions: 10
+      }],
+      '@vuepress/last-updated',
+      {
+        dateOptions: {
+          hour12: true
+        }
+      }
     ]
   ],
   module: {
@@ -72,9 +87,17 @@ module.exports = {
     smoothScroll: true,
     navbar: false,
     displayAllHeaders: true,
+
     sidebar: [
       '/',
-      '/introduction',
+      {
+        title: 'Introduction',
+        collapsable: false,
+        children: [
+          ['/introduction/', 'Kapitel 1'],
+          ['/introduction/Backend', 'Backend'],
+        ]
+      },
     ]
   }
 }

src/.vuepress/theme/index.js

@@ -8,6 +8,12 @@ module.exports = {
     }],
     ['@vuepress/search', {
       searchMaxSuggestions: 10
-    }]
+    }],
+    '@vuepress/last-updated',
+    {
+      dateOptions:{
+        hour12: true
+      }
+    }
   ]
 }

src/.vuepress/theme/layouts/Layout.vue

 <template>
-  <div class="theme-container">
+  <div class="theme-container" :class="pageClasses" @touchstart="onTouchStart" @touchend="onTouchEnd">
     <div class="u-container">
       <div class="u-limitWidth-12 u-align-center">
 
@@ -16,7 +16,7 @@
             </Sidebar>
           </div>
           <div class="GridCol2MainAside-col-main u-col u-stack--2">
-            <Content class="theme-content"/>
+            <slot class="theme-content"/>
             <Home v-if="$page.frontmatter.home" />
             <Page v-else :sidebar-items="sidebarItems">
               <template #top>
@@ -28,14 +28,12 @@
             </Page>
           </div>
         </div>
-        <PageEdit />
 
       </div>
     </div>
   </div>
 </template>
 <script>
-import PageEdit from "@parent-theme/components/PageEdit";
 import Home from "@parent-theme/components/Home";
 import Page from "@theme/components/Page";
 import SearchBox from '@SearchBox'
@@ -43,7 +41,6 @@ import Sidebar from '@parent-theme/components/Sidebar';
 import { resolveSidebarItems } from '@parent-theme/util'
 export default {
   components: {
-    PageEdit,
     Page,
     SearchBox,
     Sidebar,

src/.vuepress/theme/styles/index.styl

@@ -6,4 +6,31 @@
 
 .sidebar {
   position: relative;
+  background-color: transparent;
+  width: 100%;
+  margin: 0;
+  top: 0;
+  left: 0;
+  bottom: unset;
+  border-right: none;
+  overflow-y: auto;
+}
+
+.sidebar-heading {
+  padding-left: 0;
+}
+
+.sidebar-group a.sidebar-link {
+  padding-left: 1rem;
+}
+
+.suggestions {
+  z-index: 11;
+}
+
+
+// SearchBox
+
+.search-box input {
+  width: 100%;
 }

src/.vuepress/theme/styles/palette.styl

@@ -4,7 +4,7 @@
  * ref：https://v1.vuepress.vuejs.org/zh/config/#palette-styl
  */
 
-$accentColor = #3eaf7c
-$textColor = #2c3e50
-$borderColor = #eaecef
-$codeBgColor = #282c34
+$accentColor = #3A78B8
+$textColor = #333333
+$borderColor = #E5EAEF
+$codeBgColor = #003064

src/.vuepress/theme/styles/sass/components/_Hamburger.scss

-@use "../abstracts/colors";
-@use "../abstracts/mixins";
-
-.Hamburger {
-  border: none;
-  background-color: transparent;
-  padding: 0;
-  margin: 0;
-  color: colors.$color-sh-blau;
-  fill: currentColor;
-  transition: color 0.2s ease;
-  cursor: pointer;
-  display: flex;
-  align-items: center;
-
-  &:hover,
-  &:focus {
-    color: colors.$color-sh-rot;
-  }
-}
-
-.Hamburger-label {
-  @include mixins.font-AvenirNextLTPro-Regular;
-  @include mixins.font-size(18px);
-  line-height: 1;
-  margin-right: 0.5em;
-}
-
-.Hamburger-icon {
-  width: 22px;
-  height: 22px;
-  position: relative;
-}
-
-.Hamburger-icon-hamburger {
-  display: block;
-  visibility: visible;
-  opacity: 1;
-  transform: scale(1, 1);
-  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
-
-  .is-open & {
-    visibility: hidden;
-    opacity: 0;
-    transform: scale(1, 0.5);
-  }
-}
-
-.Hamburger-icon-close {
-  position: absolute;
-  top: 0;
-  display: block;
-  visibility: hidden;
-  opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
-  transform: scale(0.5) rotate(-45deg);
-
-  .is-open & {
-    visibility: visible;
-    opacity: 1;
-    transform: scale(1)  rotate(0deg);
-  }
-}

src/.vuepress/theme/styles/sass/components/_HeroHeadline.scss

-@use "../abstracts/colors";
-@use "../abstracts/constants";
-@use "../abstracts/mixins";
-
-.HeroHeadline {
-  background-color: colors.$color-sh-blau-05;
-  @include mixins.padding-top(constants.$gutter-width*4);
-
-  &::after {
-    content: "";
-    display: block;
-    background-image: linear-gradient(-10deg, colors.$color-white calc(50% - 1px), colors.$color-sh-blau-05 50%);
-    padding-bottom: 18%;
-  }
-}
-
-.HeroHeadline-grid {
-  position: relative;
-}
-
-.HeroHeadline-backlink {
-
-  margin-bottom: 0.25em;
-
-  @include mixins.respond-to-grid(7){
-    position: absolute;
-    bottom: 0;
-    left: -1.5em;
-    margin-bottom: 0;
-  }
-}

src/.vuepress/theme/styles/sass/components/_IconTeaser.scss

-@use "../abstracts/colors";
-@use "../abstracts/constants";
-@use "../abstracts/mixins";
-
-.IconTeaser {
-  position: relative;
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-}
-
-.IconTeaser-icon {
-  position: relative;
-  width: 100%;
-  max-width: 100px;
-  height: auto;
-  display: block;
-  overflow: hidden;
-  transform: translate3d(0, 0, 0);
-  text-align: center;
-  opacity: 1;
-  @include mixins.margin-bottom(constants.$gutter-width*2);
-}
-
-.IconTeaser-icon-container svg {
-  padding-bottom: 100%;
-}

src/.vuepress/theme/styles/sass/components/_LoadMoreButton.scss

-@use "../abstracts/colors";
-
-.LoadMoreButton {
-
-  color: colors.$color-white;
-  fill: currentColor;
-  background-color: colors.$color-sh-blau;
-  //@include rfs(80px, width);
-  //@include rfs(80px, height);
-  //padding: 33%;
-  width: 80px;
-  height: 80px;
-  padding: 26px;
-  display: block;
-  border-radius: 50%;
-  margin: 0 auto;
-  transition: background-color 0.2s ease;
-  line-height: 1;
-  align-self: center;
-
-
-  &:hover {
-    background-color: colors.$color-sh-rot;
-  }
-
-  &.is-loading {
-    outline: 0 !important;
-    pointer-events: none;
-    cursor: pointer;
-    background-color: colors.$color-sh-rot;
-    animation: spin 1s linear infinite;
-  }
-}

src/.vuepress/theme/styles/sass/components/_NewsDefaultTeaser.scss

-@use "../abstracts/colors";
-
-.NewsDefaultTeaser {
-  position: relative;
-
-  & > * + * {
-    margin-top: 1em;
-  }
-}
-
-.NewsDefaultTeaser-imageContainer {
-  position: relative;
-  overflow: hidden;
-
-  &::after {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    width: 280px;
-    height: 50.4px;
-    content: "";
-    display: block;
-    background-image: linear-gradient(-10deg, colors.$color-sh-blau calc(50% - 1px), transparent 50%);
-  }
-}
-
-.NewsDefaultTeaser-link {
-  display: block;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: colors.$color-sh-rot;
-  }
-
-  &::after {
-    content: "";
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    z-index: 1;
-    top: 0;
-    left: 0;
-  }
-}
-
-.NewsDefaultTeaser-icon {
-  display: inline-block;
-  width: 1em;
-  color: colors.$color-sh-blau;
-  fill: currentColor;
-  transition: color 0.2s ease;
-
-  .NewsDefaultTeaser-link:hover ~ & {
-    color: colors.$color-sh-rot;
-  }
-}

src/.vuepress/theme/styles/sass/components/_RevealImage.scss

-@use "../abstracts/constants";
-@use "../abstracts/mixins";
-
-.RevealImage {
-  background-size: cover;
-  background-repeat: no-repeat;
-  background-position: center;
-  position: relative;
-
-  @include mixins.padding-top(constants.$gutter-width*40);
-
-  // https://stackoverflow.com/questions/23236158/how-to-replicate-background-attachment-fixed-on-ios
-  @include mixins.respond-to-grid(8) {
-    background-attachment: fixed;
-  }
-}
-
-//.RevealImage-col-content {
-//  position: relative;
-//  z-index: 1;
-//
-//  background-color: colors.$color-sh-blau;
-//  padding: constants.$gutter-width;
-//  margin-left: auto;
-//  margin-right: 0;
-//
-//  @include mixins.respond-to-grid(5) {
-//    width: 50%;
-//  }
-//}

src/.vuepress/theme/styles/sass/components/_SocialChannelLink.scss

-@use "../abstracts/colors";
-@use "../abstracts/constants";
-
-.SocialChannelLink-grid {
-  text-align: left;
-}
-
-.SocialChannelLink-grid-item {
-
-  display: inline-block;
-  margin-left: constants.$gutter-width*2;
-  margin-bottom: constants.$gutter-width;
-
-  &:first-child {
-    margin-left: 0;
-  }
-
-}
-
-.SocialChannelLink {
-  display: block;
-  pointer-events: auto;
-  width: 28px;
-  height: 28px;
-  color: colors.$color-white;
-  fill: currentColor;
-  transition: transform 0.1s ease;
-  line-height: 1;
-
-  &:focus,
-  &:hover {
-    transform: scale(1.2);
-  }
-}

src/.vuepress/theme/styles/sass/components/_VerticalProgress.scss

-@use "../abstracts/colors";
-@use "../abstracts/constants";
-@use "../abstracts/mixins";
-@use "sass:math";
-
-.VerticalProgress {
-  position: relative;
-}
-
-.VerticalProgress-container {
-  background-color: colors.$color-sh-blau-05;
-
-  &:nth-child(even) {
-    background-color: colors.$color-sh-blau-10;
-  }
-}
-
-.VerticalProgress-step {
-  position: relative;
-  display: flex;
-  flex-flow: column wrap;
-  justify-content: flex-start;
-  align-items: center;
-  @include mixins.padding(constants.$gutter-width*4 constants.$gutter-width*2);
-
-  @include mixins.respond-to-grid(5) {
-    flex-flow: row wrap;
-  }
-
-  @include mixins.respond-to-grid(8) {
-    flex-flow: row nowrap;
-  }
-
-  &::after {
-    content: '';
-    display: block;
-    width: 0;
-    height: 0;
-    border-left: 40px solid transparent;
-    border-right: 40px solid transparent;
-
-    border-top: 20px solid colors.$color-sh-blau-05;
-
-    position: absolute;
-    top: 100%;
-    left: 50%;
-    transform: translateX(-50%);
-    opacity: 1;
-  }
-
-  &.is-even {
-    &::after {
-      border-top: 20px solid colors.$color-sh-blau-10;
-    }
-  }
-
-  &.is-last {
-    &::after {
-      opacity: 0;
-      visibility: hidden;
-    }
-  }
-}
-
-.VerticalProgress-header {
-  display: inline-flex;
-  align-items: center;
-  flex-basis: 100%;
-  width: 100%;
-
-  @include mixins.margin-bottom(constants.$gutter-width*2);
-
-  @include mixins.respond-to-grid(8) {
-    margin-bottom: 0;
-    flex-basis: math.percentage(4 / 12);
-    width: math.percentage(4 / 12);
-  }
-}
-
-.VerticalProgress-prefix {
-  position: relative;
-  @include mixins.default-h1;
-  margin: 0;
-  @include mixins.padding(constants.$nudge constants.$gutter-width);
-  @include mixins.padding-right(constants.$gutter-width*2);
-  text-align: center;
-  background-size: 100%;
-  width: auto;
-  max-width: 80px;
-  max-height: 80px;
-  background-image: linear-gradient(135deg, colors.$color-itvsh-magenta 0%, colors.$color-itvsh-magenta 100%);
-  border-radius: 5px 50% 50% 5px;
-  color: colors.$color-white;
-  transition: background-image 0.2s ease;
-  @include mixins.margin-right(constants.$gutter-width);
-  z-index: 1;
-
-  &::before {
-    content: '';
-    border-radius: inherit;
-    background-image: linear-gradient(135deg, colors.$color-itvsh-blau 0%, colors.$color-itvsh-magenta 100%);
-    display: block;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    width: 100%;
-    z-index: -1;
-    transition: opacity 0.45s ease;
-  }
-
-  &:hover,
-  .u-linkWrap:hover & {
-    &::before {
-      opacity: 1;
-    }
-  }
-}
-
-.VerticalProgress-icon {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  max-width: 50%;
-  display: block;
-  overflow: hidden;
-  flex-basis: 100%;
-  transform: translate3d(0, 0, 0);
-  text-align: center;
-  opacity: 1;
-  @include mixins.margin-bottom(constants.$gutter-width);
-
-  @include mixins.respond-to-grid(5) {
-    margin-bottom: 0;
-    max-width: 100%;
-    flex-basis: math.percentage(2 / 12);
-    @include mixins.margin-right(math.percentage(1 / 12));
-  }
-
-  @include mixins.respond-to-grid(8) {
-    max-width: 100%;
-    flex-basis: math.percentage(1 / 12);
-    @include mixins.margin-right(math.percentage(1 / 12));
-  }
-}
-
-.VerticalProgress-icon-container svg {
-  padding-bottom: 100%;
-}
-
-.VerticalProgress-content {
-  width: 100%;
-  @include mixins.margin-bottom(constants.$gutter-width*2);
-  text-align: center;
-
-  @include mixins.respond-to-grid(5) {
-    margin-bottom: 0;
-    text-align: left;
-    flex-basis: math.percentage(6 / 12);
-    width: math.percentage(6 / 12);
-  }
-
-  @include mixins.respond-to-grid(8) {
-    flex-basis: math.percentage(4 / 12);
-    width: math.percentage(4 / 12);
-  }
-}
-
-.VerticalProgress-linkIconWrap {
-  display: flex;
-  flex-basis: 100%;
-  justify-content: center;
-  align-items: center;
-
-  @include mixins.respond-to-grid(5) {
-    margin-left: auto;
-    margin-right: auto;
-    flex-basis: math.percentage(2 / 12);
-  }
-
-  @include mixins.respond-to-grid(8) {
-    margin-left: auto;
-    margin-right: 0;
-  }
-}
-
-.VerticalProgress-linkIcon {
-  display: flex;
-  position: relative;
-  justify-content: center;
-  align-items: center;
-  width: 40px;
-  height: 40px;
-  background-size: 100%;
-  background-image: linear-gradient(135deg, colors.$color-itvsh-magenta 0%, colors.$color-itvsh-magenta 100%);
-  border-radius: 100%;
-  fill: colors.$color-white;
-  padding: 10px;
-  z-index: 1;
-
-  &::before {
-    content: '';
-    border-radius: inherit;
-    background-image: linear-gradient(135deg, colors.$color-itvsh-blau 0%, colors.$color-itvsh-magenta 100%);
-    display: block;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0;
-    width: 100%;
-    z-index: -1;
-    transition: opacity 0.45s ease;
-  }
-
-  &:hover,
-  .u-linkWrap:hover & {
-    &::before {
-      opacity: 1;
-    }
-  }
-}

src/.vuepress/theme/styles/sass/pages/_ProcessNavigation.scss

-@use "../abstracts/colors";
-@use "../abstracts/mixins";
-@use "../abstracts/constants";
-
-.ProcessNavigation-container {
-  position: relative;
-  width: 100%;
-  background-color: colors.$color-sh-blau-05;
-}
-
-.ProcessNavigation {
-  display: grid;
-  grid-template-columns: repeat(6, minmax(170px, 1fr));
-  grid-template-rows: 1fr;
-  gap: 0 constants.$gutter-width;
-  grid-template-areas: ". . . . . .";
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-snap-align: start;
-  scroll-snap-type: x mandatory;
-  cursor: ew-resize;
-
-  @include mixins.respond-to(constants.$mobile-break) {
-    &::-webkit-scrollbar {
-      display: none;
-      width: 0;
-      background: transparent;
-    }
-    -ms-overflow-style: -ms-autohiding-scrollbar; // Hide Scrollbar until hover for EDGE
-  }
-}
-
-.ProcessNavigation-item {
-  scroll-snap-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-}
-
-.ProcessNavigation-link {
-  position: relative;
-  text-align: center;
-  width: 100%;
-  display: flex;
-  flex-flow: column nowrap;
-  justify-content: center;
-  align-items: center;
-  @include mixins.padding(constants.$gutter-width constants.$nudge);
-
-  &:focus {
-    outline-offset: -2px !important;
-  }
-}
-
-.ProcessNavigation-icon {
-  position: relative;
-  width: 100%;
-  max-width: 60px;
-  height: auto;
-  display: none;
-  overflow: hidden;
-  transform: translate3d(0, 0, 0);
-  text-align: center;
-  opacity: 1;
-  @include mixins.margin(constants.$nudge);
-
-  @include mixins.respond-to(constants.$mobile-break) {
-    display: block;
-  }
-}
-
-.ProcessNavigation-icon-container svg {
-  padding-bottom: 100%;
-}
-
-.ProcessNavigation-label {
-  position: relative;
-  width: 100%;
-  @include mixins.default-h6;
-  color: colors.$color-white;
-  border-top-right-radius: 50px;
-  border-bottom-right-radius: 50px;
-  background-color: colors.$color-sh-blau;
-  @include mixins.padding(constants.$nudge constants.$gutter-width*2);
-  will-change: background-color;
-  transition: background-color 0.2s ease;
-
-  &::before {
-    content: '';
-    left: 0;
-    top: 0;
-    position: absolute;
-    width: 1.25rem;
-    height: 100%;
-    border-radius: 0 50% 50% 0;
-    background-color: colors.$color-sh-blau-05;
-    display: inline-block;
-    vertical-align: middle;
-  }
-
-  &:hover,
-  .is-activePage &,
-  .u-linkWrap:hover & {
-    background-color: colors.$color-itvsh-magenta;
-  }
-}

src/.vuepress/theme/styles/sass/screen.scss

@@ -53,22 +53,13 @@
 // components
 @use "components/Copyrights";
 @use "components/FullImage";
-@use "components/Hamburger";
-@use "components/HeroHeadline";
-@use "components/IconTeaser";
 @use "components/Infobox";
 @use "components/MagnificPopup";
 @use "components/MenuSitemapPages";
-@use "components/NewsDefaultTeaser";
 @use "components/GridCol2Even";
 @use "components/GridCol3Even";
 @use "components/GridCol2MainAside";
-@use "components/LoadMoreButton";
-@use "components/RevealImage";
-@use "components/SocialChannelLink";
 @use "components/YouTubeVideo";
-@use "components/VerticalProgress";
 
 
 // pages
-@use "pages/ProcessNavigation";

src/README.md

 ---
 home: true
+sidebar: true
 tagline: Dokumentation zum Design System des ITVSH
 features:
 - title: Feature 1 Title

src/components/README.md

+---
+title: Komponenten
+tagline: Dokumentation zum Design System des ITVSH
+---
+# Komponenten
+
+## Et multa caeno
+
+Lorem markdownum acernae: rorat et fessa spesque stivave sustinuere feres
+convertit has Iovem corpora patulosque frons viribus, criminis. Tempore sit in
+solito. Animum iras, intremuere ficto servat nec Pergama tot sit. Quoque maesta
+in Triptolemo ut interea occupat caestibus *lacrimae semper*, habet. Atria quae
+finitur rivo in verbisque lassa, et esse, igitur.
+
+- Satiata apte aedificat mirabile testis inposita
+- Mutet lingua onus
+- Aliis enim quater
+- Medios poenas spargensque vota conclamat pulvere solebat
+
+## Equis ille intravit erimus
+
+Has est onus, sit et quoque redeuntque putes tinus dantur, sibi Pandioniae.
+Duarum cura sollemnia pater Alemoniden instar nostrumque referam Emathiis
+dicere: pressit spinae Haemoniae, cornua urbem vixque; aquas. Ad et palustribus
+dextra. Solus colla tu possim sanguisque eras seductaque quos accepere incidit
+tenet ut terras se postquam, tibi. Afuerunt prohibet fecit distabat
+[quoque](http://petitisconataque.net/) adstas, cum bellator terque di dabatur,
+suo.
+
+## Arcuit dedit
+
+**Esset vitio Xanthique** ipsumque ego requiris **adsuetus minanti** laedunt
+forem id cruori super, inpune ascendere et silet datis. Sua flebile: sub
+vertitur Marsya, unda quos etiam sermonibus inpositus ossa animalia easdem matri
+gestumque ictibus contribuere Caystro.
+
+``` html
+<ul>
+  <li
+    v-for="todo in todos"
+    :key="todo.id"
+  >
+    {{ todo.text }}
+  </li>
+</ul>
+```
+
+## Vult vestigia templa
+
+Arcus hanc in virent *frenisque suoque haberet*, desinere o adfuit praeter
+dederat [lacrimis honor](http://bene-bimembres.net/parte-faciebant) pallidiora.
+Ducere quaesitamque gemit, sciet manu fontis, et semper culpam regnumque,
+**ora**. Victrix Annus. Enim atque Caesareo proles ex verba **amor quoque**
+generis et misit, sceleratus viribus Clymeneia.
+
+Amphitrite alumnus pictae procerum quaterque iurare. Modo alatur, in, sanguis ut
+flammas Pelasgi et [ferendo](http://quem-est.com/) saepe; resumptis transitus.
+