feat: first draft v5 docs

Author: devCrossNet

.vuepress/config.js

@@ -8,19 +8,7 @@ module.exports = {
             lang: 'en',
             title: 'Vuesion',
             description:
-                'Vuesion is a boilerplate that helps product teams build faster than ever with fewer headaches and modern best practices across engineering & design.',
-        },
-        '/ru/': {
-            lang: 'ru-Ru',
-            title: 'Vuesion',
-            description:
-                'Vuesion - стартовая сборка Vue JS для быстрого прототипирования с готовой архитектурой для больших приложений',
-        },
-        '/ko/': {
-            lang: 'ko',
-            title: 'Vuesion',
-            description:
-                'Vuesion은 설계 전반에 사용할 수 있는 최신 사례들을 활용하여, 팀이 고민거리 없이 신속하게 서비스를 구축할 수 있도록 돕는 VueJS 보일러 플레이트입니다.',
+                'Vuesion is a boilerplate that empowers product teams to build faster with modern best practices across engineering and design. It features a full-stack framework, comprehensive design system, robust testing, and seamless internationalization.',
         },
     },
     head: [
@@ -113,12 +101,12 @@ module.exports = {
                 editLinkText: 'Edit this page on GitHub',
                 nav: [
                     {
-                        text: 'Interactive Demo',
-                        link: 'https://vuesion.herokuapp.com/',
+                        text: 'Storybook',
+                        link: 'https://vuesion.herokuapp.com/storybook/',
                     },
                     {
-                        text: 'Design System',
-                        link: 'https://vuesion.herokuapp.com/storybook',
+                        text: 'Figma UIKit',
+                        link: 'https://www.figma.com/community/file/1080868611324978249',
                     },
                     {
                         text: 'Discord',
@@ -170,41 +158,30 @@ module.exports = {
                     ],
                     '/en/v5/': [
                         {
-                            title: 'General',
+                            title: 'Guide',
                             collapsable: false,
                             children: [
-                                'introduction',
-                                // 'FAQ'
+                                'guide/introduction',
+                                'guide/getting-started',
+                                'guide/concepts',
+                                'guide/development',
+                                'guide/design-system',
+                                'guide/community-and-support',
                             ],
                         },
                         {
-                            title: 'Getting started',
+                            title: 'Tutorials',
                             collapsable: false,
                             children: [
-                                'guide/install',
-                                // 'guide/run',
-                                // 'guide/test',
-                                // 'guide/cli',
-                                // 'guide/clean-up',
-                                // 'guide/contribute',
+                                'tutorials/layout-components',
+                                'tutorials/i18n',
+                                'tutorials/theming',
                             ],
                         },
-                        // {
-                        //     title: 'Deep dives',
-                        //     collapsable: false,
-                        //     children: [
-                        //         'deep_dives/build',
-                        //         'deep_dives/design-system',
-                        //         'deep_dives/i18n',
-                        //         ['https://nuxtjs.org/docs/2.x/deployment/deploying-to-21yunbox', 'Deployment'],
-                        //         'deep_dives/update',
-                        //         'deep_dives/npm-scripts',
-                        //         'deep_dives/vuex',
-                        //     ],
-                        // },
                     ],
                 },
             },
         },
     },
+    plugins: ['mermaidjs']
 };

.vuepress/public/android-chrome-192x192.png

@@ -9,42 +9,12 @@
   "start_url": "/docs/en/",
   "icons": [
     {
-      "src": "/icon-72x72.png",
-      "sizes": "72x72",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-96x96.png",
-      "sizes": "96x96",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-128x128.png",
-      "sizes": "128x128",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-144x144.png",
-      "sizes": "144x144",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-152x152.png",
-      "sizes": "152x152",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-192x192.png",
+      "src": "/android-chrome-192x192",
       "sizes": "192x192",
       "type": "image/png"
     },
     {
-      "src": "/icon-384x384.png",
-      "sizes": "384x384",
-      "type": "image/png"
-    },
-    {
-      "src": "/icon-512x512.png",
+      "src": "/android-chrome-512x512",
       "sizes": "512x512",
       "type": "image/png"
     }

.vuepress/public/android-chrome-512x512.png

@@ -1,12 +1,22 @@
-@import url('https://fonts.googleapis.com/css?family=Inter:300,400,500,600,700,800|Lora:300,400,500,600,700,800&display=swap');
+@import url('https://fonts.bunny.net/css?family=Inter:400,600,900|Lora:400,600&display=swap');
 
 html, body {
   font-family: 'Inter', sans-serif;
   font-weight: 400;
-  background: #f1f3f5;
+  background: #ffffff;
+  color: #141518;
 }
 
-h1, h2, h3, h4, h5, h6 {
+img, div[class*="language-"] {
+  border-radius: 16px !important;
+}
+
+h1 {
+  font-family: 'Inter', sans-serif;
+  font-weight: 900;
+}
+
+h2, h3, h4, h5, h6 {
   font-family: 'Inter', sans-serif;
   font-weight: 600;
 }
@@ -15,7 +25,7 @@ h1, h2, h3, h4, h5, h6 {
   height: 56px !important;
   min-height: 56px !important;
   line-height: 1.5 !important;
-  background: #f1f3f5;
+  background: #ffffff;
 }
 
 .navbar .logo {
@@ -27,14 +37,41 @@ h1, h2, h3, h4, h5, h6 {
 
 .sidebar {
   top: 56px;
-  background: #f1f3f5;
+  background: #ffffff;
 }
 
 .links, .search-box input {
-  background-color: #f1f3f5 !important;
+  background-color: #ffffff !important;
 }
 
 code {
-  background-color: #282c2e !important;
+  background-color: #272a31 !important;
   color: #fff !important;
 }
+
+blockquote, .description {
+    color: #4c535f !important;
+}
+
+.mermaid-diagram .node circle {
+  fill: #663CCB !important;
+  stroke: #663CCB !important;
+  stroke-width: 2px !important;
+}
+
+.mermaid-diagram .node .nodeLabel {
+  color: #fff !important;
+  font-family: 'Inter', sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+}
+.mermaid-diagram .edgeLabels {
+  transform: translateY(-10px);
+}
+.mermaid-diagram .edgeLabels > .edgeLabel span {
+  color: #3f444e !important;
+  background-color: transparent !important;
+  font-family: 'Inter', sans-serif;
+  font-weight: 400;
+  font-size: 14px;
+}

.vuepress/public/apple-touch-icon.png

@@ -1,8 +1,8 @@
 // colors
-$accentColor = #cf508d
-$textColor = #313437
-$borderColor = #d7dbdf
-$codeBgColor = #282c34
+$accentColor = #663ccb
+$textColor = #141518
+$borderColor = #eff0f2
+$codeBgColor = #272a31
 $arrowBgColor = #cf508d
 $badgeTipColor = #30a46c
 $badgeWarningColor = #dba70c

.vuepress/public/favicon-16x16.png

@@ -0,0 +1,5 @@
+# Versions
+[v4 Docs](./v4)
+
+[v5 Docs](./v5)
+

.vuepress/public/favicon-32x32.png

@@ -2,27 +2,6 @@
 home: true
 heroImage: /logo.png
 actionText: Get Started →
-actionLink: ./introduction
-features:
-  - title: Quick scaffolding
-    details: Create components, pages, vuex-modules, stories, interfaces, fixtures - and their tests - right from the CLI
-  - title: Server-side-rendering
-    details: Use server-side-rendering, create a single-page-app or generate static HTML powered by Nuxt.js
-  - title: Industry-standard i18n support
-    details: Scalable apps need to support multiple languages, easily add and support multiple languages
-  - title: Progressive-Web-App
-    details: Offline-first support with service-workers and a lighthouse score as high as possible
-  - title: Customizable Design System
-    details: Includes a blueprint for a 100% customizable, themeable Design System with 35+ components
-  - title: Storybook
-    details: Allows interactive development, testing and sharing of UI components in various property states
-  - title: Figma UIKit
-    details: The included Figma design system file includes the basics and all components of the Vuesion design system and it's perfectly in sync with storybook
-  - title: GraphQL
-    details: includes a blueprint how to use vue-apollo with the auth-module, axios-module (re-authentication) and the composition-api
-  - title: DX, Code quality and maintenance
-    details: TypeScript, Eslint, commit message lint, prettier and husky set up will help you to keep a high code quality
-
-
-footer: MIT Licensed | Copyright © 2018 - present Johannes Werner
+actionLink: ./guide/introduction
+footer: MIT Licensed | Copyright © 2018 - present Werner-Most Ideen GmbH
 ---