added first content layouts

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

@@ -12,9 +12,14 @@
           <img class="SectionHeader-logo SectionHeader-logo--small" :src="$withBase('img/logo-sm.svg')" alt="ITVSH Design System" width="49" height="40"/>
         </a>
         <p class="Base-h1 u-textTransform--upper">Dokumentation</p>
-        <div class="SectionHeader-backLink">
-          <a href="https://www.design-system.sh/" class="Base-link">
-            zum <span class="u-textTransform--upper">Digital Design System</span>
+        <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>
+            <span class="SectionHeader-backLink-icon">
+              <svg class="u-scalingInlineSVG" focusable="false" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" role="img" viewBox="0 0 512 512" preserveAspectRatio="xMidYMin slice" style="padding-bottom: 100%;">
+                <path d="M290.132 34l-34.06 34.06 163.722 163.72H0v48.175h419.794L256.072 443.677l34.06 34.06L512 255.868z"/>
+              </svg>
+            </span>
           </a>
         </div>
       </div>

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

+<template>
+  <main class="page-container">
+    <slot name="top" />
+    <Content class="theme-content"/>
+    <slot name="bottom" />
+  </main>
+</template>
+<script>
+
+export default {
+  props: ['sidebarItems']
+}
+</script>

src/.vuepress/theme/components/PageEdit.vue

@@ -11,3 +11,5 @@
     </div>
   </footer>
 </template>
+
+

src/.vuepress/theme/config.js

@@ -59,6 +59,7 @@ module.exports = {
    * ref：https://v1.vuepress.vuejs.org/theme/default-theme-config.html
    */
   themeConfig: {
+    title: 'ITVSH Design System Dokumentation',
     logo: '/img/logo.svg',
     repoLabel: 'Gitlab',
     repo: 'https://gitlab.nc-lab.de/nc/Design-System-Doku',
@@ -67,19 +68,13 @@ module.exports = {
     editLinkText: 'Hilf uns diese Seite zu verbessern!',
     lastUpdated: true,
     searchPlaceholder: 'Suche',
+    search: true,
     smoothScroll: true,
     navbar: false,
-    sidebar: {
-      '/guide/': [
-        {
-          title: 'Guide',
-          collapsable: false,
-          children: [
-            '',
-            'using-vue',
+    displayAllHeaders: true,
+    sidebar: [
+      '/',
+      '/introduction',
     ]
   }
-      ],
-    }
-  }
 }

src/.vuepress/theme/layouts/GlobalLayout.vue

@@ -3,21 +3,9 @@
   <div id="global-layout">
     <Header/>
     <main id="main" class="SectionMain">
-      <div class="u-container">
-        <div class="u-limitWidth-12 u-align-center">
-          <div class="GridCol2MainAside-row u-row">
-            <div class="GridCol2MainAside-col-aside u-col u-stack--2">
-              <SearchBox/>
-            </div>
-            <div class="GridCol2MainAside-col-main u-col u-stack--2">
       <transition name="fade-transform" mode="out-in">
         <component :is="layout" />
       </transition>
-            </div>
-          </div>
-
-        </div>
-      </div>
     </main>
     <Footer/>
   </div>
@@ -27,23 +15,81 @@
 import Header from '@theme/components/Header.vue';
 import Footer from '@theme/components/Footer.vue';
 import SearchBox from '@SearchBox'
+import Sidebar from '@parent-theme/components/Sidebar';
+import { resolveSidebarItems } from '@parent-theme/util'
 export default {
   computed: {
     layout () {
       if (this.$page.path) {
         if (this.$frontmatter.layout) {
-          // You can also check whether layout exists first as the default global layout does.
           return this.$frontmatter.layout
         }
         return 'Layout'
       }
       return 'NotFound'
+    },
+    shouldShowNavbar () {
+      const { themeConfig } = this.$site
+      const { frontmatter } = this.$page
+      if (
+          frontmatter.navbar === false
+          || themeConfig.navbar === false) {
+        return false
+      }
+      return (
+          this.$title
+          || themeConfig.logo
+          || themeConfig.repo
+          || themeConfig.nav
+          || this.$themeLocaleConfig.nav
+      )
+    },
+    shouldShowSidebar () {
+      const { frontmatter } = this.$page
+      return (
+          !frontmatter.home
+          && frontmatter.sidebar !== false
+          && this.sidebarItems.length
+      )
+    },
+    sidebarItems () {
+      return resolveSidebarItems(
+          this.$page,
+          this.$page.regularPath,
+          this.$site,
+          this.$localePath
+      )
+    },
+  },
+  methods: {
+    toggleSidebar (to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+      this.$emit('toggle-sidebar', this.isSidebarOpen)
+    },
+    // side swipe
+    onTouchStart (e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      }
+    },
+    onTouchEnd (e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x
+      const dy = e.changedTouches[0].clientY - this.touchStart.y
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true)
+        } else {
+          this.toggleSidebar(false)
+        }
+      }
     }
   },
   components: {
     Header,
     Footer,
-    SearchBox
+    SearchBox,
+    Sidebar
   }
 }
 </script>

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

 <template>
   <div class="theme-container">
-    <slot class="theme-content" />
+    <div class="u-container">
+      <div class="u-limitWidth-12 u-align-center">
+
+        <div class="GridCol2MainAside-row u-row">
+          <div class="GridCol2MainAside-col-aside u-col u-stack--2">
+            <SearchBox/>
+            <Sidebar :items="sidebarItems" @toggle-sidebar="toggleSidebar">
+              <template #top>
+                <slot name="sidebar-top"/>
+              </template>
+              <template #bottom>
+                <slot name="sidebar-bottom"/>
+              </template>
+            </Sidebar>
+          </div>
+          <div class="GridCol2MainAside-col-main u-col u-stack--2">
+            <Content class="theme-content"/>
+            <Home v-if="$page.frontmatter.home" />
+            <Page v-else :sidebar-items="sidebarItems">
+              <template #top>
+                <slot name="page-top" />
+              </template>
+              <template #bottom>
+                <slot name="page-bottom" />
+              </template>
+            </Page>
+          </div>
+        </div>
         <PageEdit />
+
+      </div>
+    </div>
   </div>
 </template>
 <script>
-import PageEdit from "@theme/components/PageEdit";
+import PageEdit from "@parent-theme/components/PageEdit";
+import Home from "@parent-theme/components/Home";
+import Page from "@theme/components/Page";
+import SearchBox from '@SearchBox'
+import Sidebar from '@parent-theme/components/Sidebar';
+import { resolveSidebarItems } from '@parent-theme/util'
 export default {
   components: {
-    PageEdit
+    PageEdit,
+    Page,
+    SearchBox,
+    Sidebar,
+    Home
+  },
+  data () {
+    return {
+      isSidebarOpen: false
+    }
+  },
+  computed: {
+    shouldShowNavbar () {
+      const { themeConfig } = this.$site
+      const { frontmatter } = this.$page
+      if (
+          frontmatter.navbar === false
+          || themeConfig.navbar === false) {
+        return false
+      }
+      return (
+          this.$title
+          || themeConfig.logo
+          || themeConfig.repo
+          || themeConfig.nav
+          || this.$themeLocaleConfig.nav
+      )
+    },
+    shouldShowSidebar () {
+      const { frontmatter } = this.$page
+      return (
+          !frontmatter.home
+          && frontmatter.sidebar !== false
+          && this.sidebarItems.length
+      )
+    },
+    sidebarItems () {
+      return resolveSidebarItems(
+          this.$page,
+          this.$page.regularPath,
+          this.$site,
+          this.$localePath
+      )
+    },
+    pageClasses () {
+      const userPageClass = this.$page.frontmatter.pageClass
+      return [
+        {
+          'no-navbar': !this.shouldShowNavbar,
+          'sidebar-open': this.isSidebarOpen,
+          'no-sidebar': !this.shouldShowSidebar
+        },
+        userPageClass
+      ]
+    }
+  },
+  mounted () {
+    this.$router.afterEach(() => {
+      this.isSidebarOpen = false
+    })
+  },
+  methods: {
+    toggleSidebar (to) {
+      this.isSidebarOpen = typeof to === 'boolean' ? to : !this.isSidebarOpen
+      this.$emit('toggle-sidebar', this.isSidebarOpen)
+    },
+    // side swipe
+    onTouchStart (e) {
+      this.touchStart = {
+        x: e.changedTouches[0].clientX,
+        y: e.changedTouches[0].clientY
+      }
+    },
+    onTouchEnd (e) {
+      const dx = e.changedTouches[0].clientX - this.touchStart.x
+      const dy = e.changedTouches[0].clientY - this.touchStart.y
+      if (Math.abs(dx) > Math.abs(dy) && Math.abs(dx) > 40) {
+        if (dx > 0 && this.touchStart.x <= 80) {
+          this.toggleSidebar(true)
+        } else {
+          this.toggleSidebar(false)
+        }
+      }
+    }
   }
 }
 </script>

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

@@ -4,5 +4,6 @@
  * ref：https://v1.vuepress.vuejs.org/config/#index-styl
  */
 
-.home .hero img
-  max-width 450px!important
+.sidebar {
+  position: relative;
+}

src/.vuepress/theme/styles/sass/layout/_SectionHeader.scss

@@ -88,17 +88,42 @@
 .SectionHeader-backLink {
   margin-left: auto;
 
-  &::after {
-    content: "";
-    display: inline-block;
-    vertical-align: middle;
-    width: 0.8em;
-    height: 0.8em;
-    margin-top: -0.2em;
-    margin-left: 0.5em;
-    background-repeat: no-repeat;
-    background-size: 0.8em;
-    background-image: functions.svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="#{icons.$symbol-link-section-viewbox}" preserveAspectRatio="xMidYMin slice" ><g fill="#{colors.$color-itvsh-blau}">#{icons.$symbol-link-section}</g></svg>');
+  & .Base-link {
+    display: inline-flex;
+    align-items: center;
+  }
+}
+
+.SectionHeader-backLink-text {
+  display: none;
+
+  @include mixins.respond-to(constants.$mobile-break) {
+    @include mixins.font-AvenirNextLTPro-Demi;
+    color: colors.$color-sh-blau;
+    display: block;
+  }
+}
+
+.SectionHeader-backLink-icon {
+  display: inline-flex;
+  width: 30px;
+  height: 30px;
+  background-color: colors.$color-itvsh-magenta;
+  border-radius: 5px 50% 50% 5px;
+  @include mixins.padding(5px);
+  justify-content: center;
+  align-items: center;
+  margin-left: 1em;
+  transition: transform 0.2s ease;
+
+
+  & svg {
+    fill: colors.$color-white;
+    will-change: auto;
+  }
 
+  &:hover,
+  .u-linkWrap:hover & {
+    transform: translateX(constants.$nudge);
   }
 }

src/.vuepress/theme/styles/sass/layout/_SectionMain.scss

@@ -6,6 +6,7 @@
   position: relative;
   z-index: functions.z(constants.$z-main, main);
   padding-top: constants.$header-height-mobile;
+  margin-top: constants.$gutter-width*2;
 
   @include mixins.respond-to(constants.$mobile-break) {
     padding-top: constants.$header-height-desktop;

src/.vuepress/README.md → src/README.md

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

src/introduction.md

+---
+home: false
+tagline: Dokumentation zum Design System des ITVSH
+---
+# Et adversa evincitque erat stabat damnavit gerens
+
+## 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.
+
+    var mpAddressRuntime = drop_media - exbibyte;
+    var tiger_cookie_camera = copyright_localhost.lteScroll(syn_vpi_terminal);
+    var sharewareWeb = pageNanometer(management.storage(program_barcraft_hot) +
+            qbe, copy_ascii, bluetooth(uri, dimmBig, adf_remote) * itLogin);
+    var handleYahooRate = 4 / cycleConfiguration;
+    dock_array(definition,
+            minicomputerMultimediaSkyscraper.thirdDitheringUgc.formulaWddm(-3),
+            officeVirtualization);
+
+## 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.
+