feat(docs): landing page work

rstoenescu · rstoenescu · commit 5b6e060b08b9 · 2019-02-07T16:39:47.000+02:00
diff --git a/docs/src/assets/menu.js b/docs/src/assets/menu.js
@@ -843,7 +843,7 @@ module.exports = [
   {
     name: 'Getting Started',
     icon: 'flight_takeoff',
-    path: 'getting-started',
+    path: 'start',
     children: gettingStarted
   },
   {
diff --git a/docs/src/layouts/Layout.vue b/docs/src/layouts/Layout.vue
@@ -2,23 +2,19 @@
 q-layout.doc-layout(view="hHh LpR lff", @scroll="onScroll")
   q-header.header(elevated)
     q-toolbar
-      q-btn.q-mr-sm(v-if="hasDrawer", flat, dense, round, @click="leftDrawerState = !leftDrawerState", aria-label="Menu")
+      q-btn.q-mr-sm(flat, dense, round, @click="leftDrawerState = !leftDrawerState", aria-label="Menu")
         q-icon(name="menu")
 
       q-btn.quasar-logo.text-bold(key="logo", flat, no-caps, no-wrap, stretch, to="/")
         q-avatar
           img(src="https://cdn.quasar-framework.org/img/quasar-logo.png")
         q-toolbar-title(shrink) Quasar
 
-      template(v-if="hasDrawer !== true")
-        q-separator.q-mx-xs(vertical, dark, inset)
-        q-btn.text-bold(key="docs", flat, stretch, no-caps, to="/getting-started/pick-quasar-flavour", label="Docs")
-
       q-space
 
       header-menu.self-stretch.row.no-wrap(v-if="$q.screen.gt.xs")
 
-      q-btn.q-ml-xs(v-show="hasDrawer", flat, dense, round, @click="rightDrawerState = !rightDrawerState", aria-label="Menu")
+      q-btn.q-ml-xs(flat, dense, round, @click="rightDrawerState = !rightDrawerState", aria-label="Menu")
         q-icon(name="assignment")
 
   q-footer.text-white.text-center.footer
@@ -43,7 +39,6 @@ q-layout.doc-layout(view="hHh LpR lff", @scroll="onScroll")
     div Copyright © 2015 - {{ year }} PULSARDEV SRL, Razvan Stoenescu
 
   q-drawer(
-    v-if="hasDrawer"
     v-model="leftDrawerState"
     bordered
     show-if-above
@@ -67,7 +62,6 @@ q-layout.doc-layout(view="hHh LpR lff", @scroll="onScroll")
       app-menu.q-mb-lg
 
   q-drawer(
-    v-if="hasDrawer"
     v-model="rightDrawerState"
     side="right"
     content-class="bg-grey-2"
@@ -91,11 +85,6 @@ q-layout.doc-layout(view="hHh LpR lff", @scroll="onScroll")
           q-item-section(v-if="toc.sub === true", side) •
           q-item-section {{ toc.title }}
 
-      .flex.justify-center.q-mt-sm
-        .bg-grey.flex.flex-center.text-white(
-          style="width: 160px; height: 243px"
-        ) Ad
-
   q-page-container
     transition(
       enter-active-class="animated fadeIn"
@@ -132,7 +121,7 @@ export default {
     $route () {
       this.leftDrawerState = true
       this.rightDrawerState = true
-      this.hasDrawer === true && this.$nextTick(() => {
+      this.$nextTick(() => {
         this.updateActiveToc(document.documentElement.scrollTop || document.body.scrollTop)
       })
     }
@@ -148,10 +137,6 @@ export default {
   },
 
   computed: {
-    hasDrawer () {
-      return this.$store.getters.hasDrawer
-    },
-
     leftDrawerState: {
       get () {
         return this.$store.state.leftDrawerState
@@ -212,11 +197,9 @@ export default {
     },
 
     onScroll ({ position }) {
-      if (this.scrollingPage === true || this.hasDrawer !== true) {
-        return
+      if (this.scrollingPage !== true) {
+        this.updateActiveToc(position)
       }
-
-      this.updateActiveToc(position)
     },
 
     updateActiveToc (position) {
@@ -266,7 +249,7 @@ export default {
 
 .footer
   font-size 11px
-  padding 24px 0
+  padding 16px 0
 
   &__icons
     font-size 28px
diff --git a/docs/src/pages/Landing.vue b/docs/src/pages/Landing.vue
@@ -1,17 +1,36 @@
 <template lang="pug">
-q-page(padding)
-  div.flex
-    div.row
-      h4 Quasar - Empowering your websites and apps
-      div.row.col-12
-        img(src='https://cdn.quasar-framework.org/img/responsive-logo.png')
-
-      div.col-12.q-pt-sm Todo... Meanwhile, go to <doc-link to="/getting-started/pick-quasar-flavour">Documentation pages</doc-link>.
-
-      div.col-12.q-pt-md If you encounter a problem you can’t solve, you can also get help from:
-        li the Quasar <doc-link to="https://forum.quasar-framework.org/">forum</doc-link>.
-        li the <doc-link to="https://discord.gg/5TDhbDg">Discord chat server</doc-link>.
-        li You can also get updates on new versions and features by following us on <doc-link to="https://twitter.com/quasarframework">Twitter</doc-link>.
+.landing
+  section.landing__toolbar.bg-primary.text-white
+    q-toolbar.q-pa-none
+      q-btn.quasar-logo.text-bold(flat, no-caps, no-wrap, to="/start")
+        q-avatar
+          img(src="https://cdn.quasar-framework.org/img/quasar-logo.png")
+        q-toolbar-title(shrink) Get started
+
+      q-space
+
+      q-btn.q-mr-sm(type="a", flat, icon="fab fa-github", href="https://github.com/quasarframework/quasar", target="_blank")
+      q-btn.q-mr-sm(type="a", flat, icon="fab fa-twitter", href="https://twitter.com/quasarframework", target="_blank")
+      q-btn.q-mr-sm(type="a", flat, icon="fab fa-medium", href="https://medium.com/quasar-framework", target="_blank")
+      q-btn.q-mr-sm(type="a", flat, icon="fab fa-discord", href="https://discord.gg/5TDhbDg", target="_blank")
+      q-btn(type="a", flat, icon="fas fa-comments", href="https://forum.quasar-framework.org/", target="_blank")
+
+  section.bg-primary.text-white
+    .landing__hero.row
+      .col-8.flex.items-center
+        .q-gutter-md
+          .text-h1
+            div.text-weight-bold Quasar
+            div Framework
+
+          div
+            .q-gutter-md.row.items-center
+              q-btn(push, color="white", text-color="primary", to="/start", label="Get started")
+              .text-body2 v{{ $q.version }}
+
+      .col-4.row.items-center.justify-end
+        img.landing__logo(src="https://cdn.quasar-framework.org/logo/svg/quasar-logo.svg")
+
 </template>
 
 <script>
@@ -23,3 +42,40 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">
+.landing
+
+  > section
+    display flex
+    justify-content center
+    position relative
+    padding 0 16px
+
+    > div
+      position relative
+      max-width 800px
+      width 100%
+
+  &__toolbar
+
+    &:before
+      content ''
+      position absolute
+      top 0
+      right 0
+      bottom 0
+      left 0
+      background linear-gradient(to bottom, rgba(0,0,0,.2), transparent 70%)
+
+    .q-btn
+      border-radius 0 0 5px 5px
+      align-self stretch
+
+  &__hero
+    min-height 70vh
+
+  &__logo
+    width 184px
+    height 184px
+</style>
diff --git a/docs/src/pages/introduction-to-quasar.md b/docs/src/pages/introduction-to-quasar.md
@@ -78,4 +78,4 @@ And finally, it’s worth mentioning the significant amount of time taken to wri
 Except for Vue, which takes half a day to pick up and will change you forever, there is no requirement for you to know the other technologies. They are all integrated and configured in Quasar for you.
 
 ## Get started in under a minute
-Having said this, let's [get started](/getting-started/pick-quasar-flavour)! You'll be running a website or app in under a minute.
+Having said this, let's [get started](/start)! You'll be running a website or app in under a minute.
diff --git a/docs/src/pages/quasar-cli/developing-electron-apps/build-commands.md b/docs/src/pages/quasar-cli/developing-electron-apps/build-commands.md
@@ -1,7 +1,7 @@
 ---
 title: Electron Build Commands
 ---
-[Quasar CLI](/getting-started/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
+[Quasar CLI](/start/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
 
 ## Developing
 ```bash
diff --git a/docs/src/pages/quasar-cli/developing-pwa/build-commands.md b/docs/src/pages/quasar-cli/developing-pwa/build-commands.md
@@ -1,7 +1,7 @@
 ---
 title: PWA Build Commands
 ---
-[Quasar CLI](/getting-started/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
+[Quasar CLI](/start/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
 
 ## Developing
 ```bash
diff --git a/docs/src/pages/quasar-cli/developing-spa/build-commands.md b/docs/src/pages/quasar-cli/developing-spa/build-commands.md
@@ -1,7 +1,7 @@
 ---
 title: PWA Build Commands
 ---
-[Quasar CLI](/getting-started/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
+[Quasar CLI](/start/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
 
 Developing:
 ```bash
diff --git a/docs/src/pages/quasar-cli/developing-ssr/build-commands.md b/docs/src/pages/quasar-cli/developing-ssr/build-commands.md
@@ -1,7 +1,7 @@
 ---
 title: SSR Build Commands
 ---
-[Quasar CLI](/getting-started/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
+[Quasar CLI](/start/quasar-cli) makes it incredibly simple to develop or build the final distributables from your source code.
 
 ## Developing
 ```bash
diff --git a/docs/src/pages/start/contribution-guide.md b/docs/src/pages/start/contribution-guide.md
diff --git a/docs/src/pages/start/how-to-use-vue.md b/docs/src/pages/start/how-to-use-vue.md
diff --git a/docs/src/pages/start/pick-quasar-flavour.md b/docs/src/pages/start/pick-quasar-flavour.md
@@ -6,7 +6,7 @@ title: Getting Started - Pick Quasar Flavour
 
 There are three methods for using Quasar:
  * UMD/Standalone (embed into an existing project through CDN, progressive integration)
- * Development with Quasar CLI (**the premium developer experience for free, recommended**)
+ * Quasar CLI (**the premium developer experience for free, recommended**)
  * Vue CLI 3 plugin
 
 Here's a quick comparison:
@@ -33,9 +33,9 @@ Here's a quick comparison:
 ## UMD / Standalone (uses CDN)
 If you'd like to embed Quasar into your existing website project, integrating it in a progressive manner, then go for the UMD/Standalone (Unified Module Definition) version.
 
-Get started by [reading more](/getting-started/umd) about it.
+Get started by [reading more](/start/umd) about it.
 
-## Development with Quasar CLI (The best developer experience)
+## Quasar CLI (best developer experience)
 If you want to be able to build:
 * a SPA (Single Page Application/Website),
 * a SSR (Server-side Rendered App/Website),
@@ -62,7 +62,11 @@ Note that you don't need different projects in order to build any one of the app
 
 To understand more about Quasar CLI, be sure to check its section on the main menu. With this knowledge under your belt, you'll be able to take full advantage of all of Quasar CLI's many great features.
 
-More info: [Getting started with Quasar CLI](/getting-started/quasar-cli).
+More info: [Getting started with Quasar CLI](/start/quasar-cli).
 
 ## Vue CLI 3 plugin
-To work with Quasar via its Vue CLI 3 plugin, head on to [Vue CLI 3 Quasar plugin](/getting-started/vue-cli-plugin) documentation page.
+To work with Quasar via its Vue CLI 3 plugin, head on to [Vue CLI 3 Quasar plugin](/start/vue-cli-plugin) documentation page.
+
+::: danger
+Vue CLI 3 Quasar Plugin has not been updated to support v1.0-beta yet. Will be updated soon.
+:::
diff --git a/docs/src/pages/start/quasar-cli.md b/docs/src/pages/start/quasar-cli.md
diff --git a/docs/src/pages/start/roadmap.md b/docs/src/pages/start/roadmap.md
diff --git a/docs/src/pages/start/umd.md b/docs/src/pages/start/umd.md
diff --git a/docs/src/pages/start/upgrade-guide.md b/docs/src/pages/start/upgrade-guide.md
diff --git a/docs/src/pages/start/vue-cli-plugin.md b/docs/src/pages/start/vue-cli-plugin.md
@@ -1,6 +1,11 @@
 ---
 title: Vue CLI 3 Quasar Plugin
 ---
+
+::: danger
+Vue CLI 3 Quasar Plugin has not been updated to support v1.0-beta yet. Will be updated soon.
+:::
+
 To work with Quasar via its Vue CLI 3 plugin, you will need to make sure you have vue-cli 3.x.x installed globally. To make sure you have Vue CLI 3.0, use this command:
 
 ```bash
diff --git a/docs/src/router/routes.js b/docs/src/router/routes.js
@@ -1,12 +1,7 @@
 import Layout from 'layouts/Layout.vue'
 import menu from 'assets/menu.js'
 
-const docsPages = [
-  {
-    path: '',
-    component: () => import('pages/Landing.vue')
-  }
-]
+const docsPages = []
 
 function parseMenuNode (node, __path) {
   const prefix = __path + (node.path !== void 0 ? '/' + node.path : '')
@@ -27,6 +22,14 @@ menu.forEach(node => {
 })
 
 const routes = [
+  {
+    path: '/',
+    component: () => import('pages/Landing.vue')
+  },
+  {
+    path: '/start',
+    redirect: '/start/pick-quasar-flavour'
+  },
   {
     path: '/',
     component: Layout,
diff --git a/docs/src/store/index.js b/docs/src/store/index.js
@@ -16,12 +16,6 @@ export default function (/* { ssrContext } */) {
       toc: []
     },
 
-    getters: {
-      hasDrawer (state) {
-        return state.route !== void 0 && state.route.path !== '/'
-      }
-    },
-
     mutations: {
       updateLeftDrawerState (state, opened) {
         state.leftDrawerState = opened

Original file line number	Diff line number	Diff line change
`@@ -843,7 +843,7 @@ module.exports = [`
`843`	`843`	`{`
`844`	`844`	`name: 'Getting Started',`
`845`	`845`	`icon: 'flight_takeoff',`
`846`		`- path: 'getting-started',`
	`846`	`+ path: 'start',`
`847`	`847`	`children: gettingStarted`
`848`	`848`	`},`
`849`	`849`	`{`