From 9c36023eff6e61743f47cf1dc395cf069707da3f Mon Sep 17 00:00:00 2001
From: Daniel Thompson-Yvetot <denjell@sfosc.org>
Date: Sun, 15 Dec 2019 00:07:21 +0100
Subject: [PATCH] feat(meta): add OG, json-ld schema, routes Closes #6.

---
 docs-generator/quasar.conf.js                |   5 +-
 docs-generator/src/components/Hero.vue       |  63 +++++---
 docs-generator/src/components/UpScroller.vue |  14 ++
 docs-generator/src/index.template.html       |  17 +--
 docs-generator/src/layouts/MainLayout.vue    |  59 +++++++-
 docs-generator/src/markdown/book.md          |   4 +-
 docs-generator/src/markdown/bundler.md       |   9 ++
 docs-generator/src/markdown/patterns.md      |  73 ----------
 docs-generator/src/markdown/roadmap.md       |   0
 docs-generator/src/pages/API.vue             |   8 --
 docs-generator/src/pages/Book.vue            |   8 --
 docs-generator/src/pages/Bundler.vue         |  47 ++++++
 docs-generator/src/pages/Cli.vue             |   7 -
 docs-generator/src/pages/Frameworks.vue      |  47 ++++++
 docs-generator/src/pages/Governance.vue      |   8 --
 docs-generator/src/pages/Introduction.vue    |   7 -
 docs-generator/src/pages/Landing.vue         |  11 +-
 docs-generator/src/pages/Markdown.vue        |  39 +++++
 docs-generator/src/pages/Patterns.vue        |  14 +-
 docs-generator/src/pages/Quickstart.vue      |   8 --
 docs-generator/src/pages/Security.vue        |   8 --
 docs-generator/src/router/routes.js          | 142 +++++++++++++++++--
 22 files changed, 396 insertions(+), 202 deletions(-)
 create mode 100644 docs-generator/src/components/UpScroller.vue
 create mode 100644 docs-generator/src/markdown/bundler.md
 delete mode 100644 docs-generator/src/markdown/patterns.md
 delete mode 100644 docs-generator/src/markdown/roadmap.md
 create mode 100644 docs-generator/src/pages/Bundler.vue
 create mode 100644 docs-generator/src/pages/Frameworks.vue
 create mode 100644 docs-generator/src/pages/Markdown.vue

diff --git a/docs-generator/quasar.conf.js b/docs-generator/quasar.conf.js
index e4739e7..4ab62d3 100644
--- a/docs-generator/quasar.conf.js
+++ b/docs-generator/quasar.conf.js
@@ -42,7 +42,8 @@ module.exports = function (ctx) {
 
       // Quasar plugins
       plugins: [
-        'Notify'
+        'Notify',
+        'Meta'
       ]
     },
 
@@ -101,7 +102,7 @@ module.exports = function (ctx) {
       manifest: {
         name: 'Tauri.studio',
         short_name: 'Tauri Apps Documentation',
-        // description: 'A Quasar Framework app',
+        description: 'Find out all about Tauri and read the docs.',
         display: 'standalone',
         orientation: 'portrait',
         background_color: '#ffffff',
diff --git a/docs-generator/src/components/Hero.vue b/docs-generator/src/components/Hero.vue
index e37f7a3..3bf8824 100644
--- a/docs-generator/src/components/Hero.vue
+++ b/docs-generator/src/components/Hero.vue
@@ -10,13 +10,13 @@
       <div>
         <router-link to="/">
           <div id="tauri-name--holder">
-            <img src="statics/tauri.svg" class="tauri-name scroll-determined" style="cursor:pointer">
+            <img src="statics/tauri.svg" class="tauri-name scroll-determined" style="cursor:pointer" alt="Tauri Wordmark" title="Tauri">
           </div>
         </router-link>
         <div v-if="buttons" class="row" style="margin-top:90px">
-          <q-btn dense size="small" to="/docs/quickstart"  class="btn" label="Quick Start" no-caps color="yellow-2" text-color="black"/>
-          <q-btn dense size="small" to="/docs/patterns" class="btn" label="Patterns" no-caps  color="yellow-2" text-color="black"/>
-          <q-btn v-if="showDocs" dense size="small" to="/docs" class="btn" label="Docs" no-caps  color="yellow-2" text-color="black"/>
+          <q-btn name="Quick Start" dense size="small" to="/docs/quickstart" class="btn" label="Quick Start" no-caps color="yellow-2" text-color="black"/>
+          <q-btn name="Patterns" dense size="small" to="/docs/patterns" class="btn" label="Patterns" no-caps color="yellow-2" text-color="black"/>
+          <q-btn name="Docs" v-if="showDocs" dense size="small" to="/docs" class="btn" label="Docs" no-caps  color="yellow-2" text-color="black"/>
         </div>
         <q-btn
           flat
@@ -36,24 +36,9 @@
         <div class="absolute-right" style="margin:18px 60px 0 0;">
           <q-btn-dropdown flat dense text-color="cyan-1" :label="current" no-caps class="q-mr-lg">
             <q-list color="yellow-2" >
-              <q-item dense clickable v-close-popup to="/docs" v-if="showDocs">
+              <q-item dense clickable v-close-popup to="/docs/introduction" v-if="showDocs">
                 <q-item-section>
-                  <q-item-label>Docs</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item dense clickable v-close-popup to="/book" v-if="showDocs">
-                <q-item-section>
-                    <q-item-label>Book</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item dense clickable v-close-popup to="/docs/api" v-if="showDocs">
-                <q-item-section>
-                    <q-item-label>API</q-item-label>
-                </q-item-section>
-              </q-item>
-              <q-item dense clickable v-close-popup to="/docs/cli" v-if="showDocs">
-                <q-item-section>
-                    <q-item-label>CLI</q-item-label>
+                  <q-item-label>Introduction</q-item-label>
                 </q-item-section>
               </q-item>
               <q-item dense clickable v-close-popup to="/docs/quickstart">
@@ -61,16 +46,52 @@
                   <q-item-label>Quick Start</q-item-label>
                 </q-item-section>
               </q-item>
+
+              <q-item dense clickable v-close-popup to="/security" v-if="showDocs">
+                <q-item-section>
+                  <q-item-label>Security</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+              <q-item dense clickable v-close-popup to="/docs/api" v-if="showDocs">
+                <q-item-section>
+                  <q-item-label>API</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item dense clickable v-close-popup to="/docs/cli" v-if="showDocs">
+                <q-item-section>
+                    <q-item-label>CLI</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-item dense clickable v-close-popup to="/docs/bundler" v-if="showDocs">
+                <q-item-section>
+                    <q-item-label>Bundler</q-item-label>
+                </q-item-section>
+              </q-item>
               <q-item dense clickable v-close-popup to="/docs/patterns">
                 <q-item-section>
                   <q-item-label>Patterns</q-item-label>
                 </q-item-section>
               </q-item>
+              <q-separator />
+              <q-item dense clickable v-close-popup to="/docs/frameworks">
+                <q-item-section>
+                  <q-item-label>Frameworks</q-item-label>
+                </q-item-section>
+              </q-item>
+              <q-separator />
+
+              <q-item dense clickable v-close-popup to="/book" v-if="showDocs">
+                <q-item-section>
+                    <q-item-label>Book</q-item-label>
+                </q-item-section>
+              </q-item>
               <q-item dense clickable v-close-popup to="/governance-and-guidance">
                 <q-item-section>
                   <q-item-label>Governance</q-item-label>
                 </q-item-section>
               </q-item>
+
             </q-list>
           </q-btn-dropdown>
         </div>
diff --git a/docs-generator/src/components/UpScroller.vue b/docs-generator/src/components/UpScroller.vue
new file mode 100644
index 0000000..8d67aca
--- /dev/null
+++ b/docs-generator/src/components/UpScroller.vue
@@ -0,0 +1,14 @@
+<template>
+<q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
+  <q-btn
+    fab
+    icon="keyboard_arrow_up"
+    :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"
+  />
+</q-page-scroller>
+</template>
+<script>
+export default {
+  name: 'UpScroller'
+}
+</script>
diff --git a/docs-generator/src/index.template.html b/docs-generator/src/index.template.html
index 4a5f0d2..4be91d5 100644
--- a/docs-generator/src/index.template.html
+++ b/docs-generator/src/index.template.html
@@ -1,22 +1,13 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <title><%= htmlWebpackPlugin.options.productName %></title>
-
     <meta charset="utf-8">
-    <title>Tauri Apps</title>
-    <meta name="title" content="Tauri Apps - Make smaller, faster more secure native apps">
-    <meta name="og:title" content="Tauri Apps - Make smaller, faster more secure native apps">
-    <meta name="twitter:title" content="Tauri Apps - Make smaller, faster more secure native apps">
-    <meta name="description" content="Tauri is a toolchain for building highly secure native apps that have tiny binaries and are very fast. Whether coming from the front-end with Angular, React or Vue - or building Rust-native solutions, Tauri solves the hard problems of safe User Interfaces.">
-    <meta name="og:description" content="Tauri is a toolchain for building highly secure native apps that have tiny binaries and are very fast. Whether coming from the front-end with Angular, React or Vue - or building Rust-native solutions, Tauri solves the hard problems of safe User Interfaces." >
-    <meta name="twitter:description" content="Tauri is a toolchain for building highly secure native apps that have tiny binaries and are very fast. Whether coming from the front-end with Angular, React or Vue - or building Rust-native solutions, Tauri solves the hard problems of safe User Interfaces.">
-
     <meta name="twitter:card" content="summary">
     <meta name="twitter:site" content="@tauriapps">
-    <meta property="og:type" content="article">
-    <meta property="og:image" content="https://tauri-apps.org/statics/thetaTauri-logo.png">
-    <meta property="og:site_name" content="Tauri Apps">
+    <meta property="og:image" content="https://tauri.studio/statics/thetaTauri_logo.png">
+    <meta property="og:type" content="website">
+    <meta property="twitter:image" content="https://tauri.studio/statics/thetaTauri_logo.png">
+    <meta property="og:site_name" content="Tauri Studio">
 
     <meta name="format-detection" content="telephone=no">
     <meta name="msapplication-tap-highlight" content="no">
diff --git a/docs-generator/src/layouts/MainLayout.vue b/docs-generator/src/layouts/MainLayout.vue
index 28fc8b6..587c69b 100644
--- a/docs-generator/src/layouts/MainLayout.vue
+++ b/docs-generator/src/layouts/MainLayout.vue
@@ -51,6 +51,7 @@
           <router-view />
         </hero>
       </keep-alive>
+      <UpScroller />
     </q-page-container>
 
     <div class="full-width text-center" :class="$q.dark.isActive ? 'bg-blue-grey-6' : 'bg-cyan-1'">
@@ -62,23 +63,23 @@
               <a href="mailto:contact@tauri-apps.org">Email</a>
             </q-item>
             <q-item clickable class="justify-center" dense>
-              <a href="https://discord.gg/SpmNs4S">Discord</a>
+              <a href="https://discord.gg/SpmNs4S" target="_blank" rel="noreferrer">Discord</a>
             </q-item>
             <q-item clickable class="justify-center" dense>
-              <a href="https://twitter.com/tauriapps">Twitter</a>
+              <a href="https://twitter.com/tauriapps" target="_blank" rel="noreferrer">Twitter</a>
             </q-item>
           </q-list>
         </div>
         <div class="col-6 col-md-4 col-sm-3" dense>
           <q-list>
             <q-item clickable class="justify-center" dense>
-              <a href="https://dev.to/tauri">Dev.to</a>
+              <a href="https://dev.to/tauri" target="_blank" rel="noreferrer">Dev.to</a>
             </q-item>
             <q-item clickable class="justify-center" dense>
-            <a href="https://opencollective.com/tauri">Open Collective</a>
+            <a href="https://opencollective.com/tauri" target="_blank" rel="noreferrer">Open Collective</a>
             </q-item>
             <q-item clickable class="justify-center" dense>
-              <a href="https://github.com/tauri-apps/tauri">Github</a>
+              <a href="https://github.com/tauri-apps/tauri" target="_blank" rel="noreferrer">Github</a>
             </q-item>
           </q-list>
         </div>
@@ -92,24 +93,68 @@
 </template>
 
 <script>
+/* eslint quotes: 0 */
+
 import { mapGetters } from 'vuex'
 import { scroll } from 'quasar'
 const { getScrollTarget, setScrollPosition } = scroll
 import { slugify, makeUrl } from 'assets/page-utils'
 import Hero from '../components/Hero'
+import UpScroller from 'src/components/UpScroller'
 
 export default {
   name: 'MainLayout',
   components: {
-    Hero
+    Hero: Hero,
+    UpScroller: UpScroller
   },
   data () {
     return {
       activeToc: 0
     }
   },
-
+  meta () {
+    return {
+      title: this.metaRoute.page_title,
+      meta: {
+        ogUrl: { name: 'og:title', content: this.metaRoute.page_title },
+        ogTitle: { name: 'og:title', content: this.metaRoute.page_title },
+        twitterTitle: { name: 'twitter:title', content: this.metaRoute.page_title },
+        ogSiteName: { name: 'og:site_name', content: this.metaRoute.site_name },
+        desc: { name: 'description', content: this.metaRoute.description },
+        ogDesc: { name: 'og:description', content: this.metaRoute.description },
+        twitterDesc: { name: 'twitter:description', content: this.metaRoute.description },
+        keywords: { name: 'keywords', content: this.metaRoute.tags }
+      },
+      script: {
+        ldJson: {
+          type: 'application/ld+json',
+          innerHTML: `
+{
+  "@context": "http://schema.org",
+  "@type": "",
+  "name": "${this.metaRoute.page_title}",
+  "author": {
+    "@type": "Organization",
+    "name": "Tauri"
+  },
+  "image": [
+    "https://tauri.studio/statics/thetaTauri_logo.png"
+  ],
+  "description": "${this.metaRoute.description}",
+  "keywords": "${this.metaRoute.tags}"
+}`
+        }
+      },
+      noscript: {
+        default: `Welcome to tauri.studio: ${this.metaRoute.page_title} This website requires JavaScript - and here you would have learned about the following: ${this.metaRoute.description}`
+      }
+    }
+  },
   computed: {
+    metaRoute () {
+      return this.$route.meta
+    },
     ...mapGetters({
       toc: 'common/toc'
     }),
diff --git a/docs-generator/src/markdown/book.md b/docs-generator/src/markdown/book.md
index c930e7d..ad5ee8e 100644
--- a/docs-generator/src/markdown/book.md
+++ b/docs-generator/src/markdown/book.md
@@ -1,4 +1,6 @@
-![book](/statics/images/bookCover.png)
+<div style="text-align:center">
+    <img src="/statics/images/bookCover.png" alt="Tauri - From Theory to Practice" title="Book Cover Mockup" style="max-width:80%">
+</div>
 
 ## Get the Book
 ::: info Tauri: From Theory to Practice
diff --git a/docs-generator/src/markdown/bundler.md b/docs-generator/src/markdown/bundler.md
new file mode 100644
index 0000000..e0a56c2
--- /dev/null
+++ b/docs-generator/src/markdown/bundler.md
@@ -0,0 +1,9 @@
+# Introduction
+
+The Tauri bundler is a rust based tool that lets you compose application binaries for the major desktop operating systems.
+
+## Linux
+
+## MacOS
+
+## Windows
\ No newline at end of file
diff --git a/docs-generator/src/markdown/patterns.md b/docs-generator/src/markdown/patterns.md
deleted file mode 100644
index eb0923f..0000000
--- a/docs-generator/src/markdown/patterns.md
+++ /dev/null
@@ -1,73 +0,0 @@
-# Introduction
-
-There are many ways to use Tauri, and on this page we have collected 4 major patterns.
-
-## Cloudish
-The Cloudish recipe is a pattern for maximum flexibility and app performance.


-### Features
-- ships with a rust-based localhost server

-- works out of the box
-
- can utilize CSP for extra security
-### Best When
-
- starting out building Tauri apps if you have never used Rust before.
-### Pros
-- easy to use
-- best WebAPI compliance


-### Cons:
-- hard to secure against Man in the Machine attacks
-
- gives you an easy excuse not to learn Rust
-## Trollbridge
-The Trollbridge recipe is a pattern for the highest degree of operational security.


-### Features
-
- render UI securely at bootstrap

-- promise based message passing

-- RW access to filesystem

-- STDOUT access to other binaries

-- extensible with Rust functions

-- whitelist for functional codegen
-- runtime message salting
-
- fASLR & AoT Compiling
-
-### Best When
-- you are paranoid about security but still need the power of Rust.


-
-### Pros
-- highly configurable and infinitely extensible	  
-
-### Cons
-- rust skills virtually required
-
-## Cloudbridge
-The Cloudbridge combines the flexibility of a localhost and the security of the bridge. 


-
-### Features
-- all bridge features

-- all localhost features
-
-### Best When
-- your project is complex and you need all the power available.
-
-### Pros
-- best of both worlds	  
-
-### Cons
-- rust skills helpful
-- complexity can make it challenging to keep your application from becoming 
bloated 
-
-## Hermit
-The Hermit recipe is a pattern for ultimate application isolation where all logic is self-contained.


-
-### Features
-- render UI securely at bootstrap

-- no communication with Rust

-- CSP blocks all external resources

-- fASLR  & AoT Compiling


-
-### Best When
-- you want to limit interaction with anything outside of the scope of the user interface like for a game.
-
-### Pros
-- safest possible distribution target  
-
-### Cons
-- limited device interaction
diff --git a/docs-generator/src/markdown/roadmap.md b/docs-generator/src/markdown/roadmap.md
deleted file mode 100644
index e69de29..0000000
diff --git a/docs-generator/src/pages/API.vue b/docs-generator/src/pages/API.vue
index 1b71926..465a855 100644
--- a/docs-generator/src/pages/API.vue
+++ b/docs-generator/src/pages/API.vue
@@ -2,14 +2,6 @@
   <div>
     <div id="padding" style="padding-top:260px"></div>
     <q-markdown :src="markdown" toc @data="onToc" no-line-numbers />
-
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/pages/Book.vue b/docs-generator/src/pages/Book.vue
index fc50872..29719fd 100644
--- a/docs-generator/src/pages/Book.vue
+++ b/docs-generator/src/pages/Book.vue
@@ -2,14 +2,6 @@
   <div>
     <div id="padding" style="padding-top:260px"></div>
     <q-markdown :src="markdown" toc @data="onToc" no-line-numbers no-highlight />
-
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-warning': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/pages/Bundler.vue b/docs-generator/src/pages/Bundler.vue
new file mode 100644
index 0000000..e293ca9
--- /dev/null
+++ b/docs-generator/src/pages/Bundler.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div id="padding" style="padding-top:260px"></div>
+    <q-markdown :src="markdown" toc @data="onToc" no-line-numbers no-highlight />
+  </div>
+</template>
+
+<script>
+import markdown from '../markdown/bundler.md'
+
+export default {
+  name: 'PageIndex',
+  data () {
+    return {
+      markdown: markdown
+    }
+  },
+
+  computed: {
+    toc:
+      {
+        get () {
+          return this.$store.state.common.toc
+        },
+        set (toc) {
+          // console.log('toc:', toc)
+          this.$store.commit('common/toc', toc)
+        }
+      }
+  },
+
+  methods: {
+    onToc (toc) {
+      // add anything not picked uip by the markdown processor
+      // toc.push({ id: 'Tauri-API', label: 'Tauri API', level: 1, children: Array(0) })
+      // toc.push({ id: 'Donate', label: 'Donate', level: 1, children: Array(0) })
+
+      this.toc = toc
+    }
+  }
+
+}
+</script>
+<style lang="stylus">
+  .q-markdown--line-numbers-wrapper
+    margin-bottom 14px
+</style>
diff --git a/docs-generator/src/pages/Cli.vue b/docs-generator/src/pages/Cli.vue
index 6daaf0a..2377a34 100644
--- a/docs-generator/src/pages/Cli.vue
+++ b/docs-generator/src/pages/Cli.vue
@@ -3,13 +3,6 @@
     <div id="padding" style="padding-top:260px"></div>
     <q-markdown :src="markdown" toc @data="onToc" no-line-numbers no-highlight />
 
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-warning': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/pages/Frameworks.vue b/docs-generator/src/pages/Frameworks.vue
new file mode 100644
index 0000000..a4b6826
--- /dev/null
+++ b/docs-generator/src/pages/Frameworks.vue
@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <div id="padding" style="padding-top:260px"></div>
+    <q-markdown :src="markdown" toc @data="onToc" line-number-alt="$" />
+  </div>
+</template>
+
+<script>
+import markdown from '../markdown/frameworks.md'
+
+export default {
+  name: 'PageIndex',
+  data () {
+    return {
+      markdown: markdown
+    }
+  },
+
+  computed: {
+    toc:
+      {
+        get () {
+          return this.$store.state.common.toc
+        },
+        set (toc) {
+          // console.log('toc:', toc)
+          this.$store.commit('common/toc', toc)
+        }
+      }
+  },
+
+  methods: {
+    onToc (toc) {
+      // add anything not picked uip by the markdown processor
+      // toc.push({ id: 'Tauri-API', label: 'Tauri API', level: 1, children: Array(0) })
+      // toc.push({ id: 'Donate', label: 'Donate', level: 1, children: Array(0) })
+
+      this.toc = toc
+    }
+  }
+
+}
+</script>
+<style lang="stylus">
+.q-markdown--line-numbers-wrapper
+  margin-bottom 14px
+</style>
diff --git a/docs-generator/src/pages/Governance.vue b/docs-generator/src/pages/Governance.vue
index 331da01..589269c 100644
--- a/docs-generator/src/pages/Governance.vue
+++ b/docs-generator/src/pages/Governance.vue
@@ -2,14 +2,6 @@
   <div>
     <div id="padding" style="padding-top:260px"></div>
     <q-markdown :src="markdown" toc @data="onToc" />
-
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/pages/Introduction.vue b/docs-generator/src/pages/Introduction.vue
index e36ba3e..d978e4c 100644
--- a/docs-generator/src/pages/Introduction.vue
+++ b/docs-generator/src/pages/Introduction.vue
@@ -67,13 +67,6 @@ And finally, there are a couple Rust communities on Discord that you can always
 - [Rust Development Discord](https://discord.gg/SG3m9pk)
     </q-markdown>
     <!-- <div class="text-center full-width" v-html="graph"></div> -->
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/pages/Landing.vue b/docs-generator/src/pages/Landing.vue
index 31f4061..3600937 100644
--- a/docs-generator/src/pages/Landing.vue
+++ b/docs-generator/src/pages/Landing.vue
@@ -85,13 +85,6 @@
     </q-card>
 
     <q-markdown :src="markdown" toc @data="onToc" />
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
@@ -196,7 +189,7 @@ export default {
           icon: 'ti-settings',
           claim: 'Tauri lets you use any frontend-framework to build apps, and it can be integrated into any pipeline.',
           btnLabel: 'Learn How!',
-          btnTarget: '/docs/examples'
+          btnTarget: '/docs/frameworks'
         },
         {
           icon: 'ti-package',
@@ -214,7 +207,7 @@ export default {
           icon: 'ti-shield',
           claim: 'With security features baked in and many additional tools available, your code will be safer than ever.',
           btnLabel: 'Be Safer!',
-          btnTarget: '/docs/security'
+          btnTarget: '/security'
         },
         {
           icon: 'ti-gift',
diff --git a/docs-generator/src/pages/Markdown.vue b/docs-generator/src/pages/Markdown.vue
new file mode 100644
index 0000000..6e138e6
--- /dev/null
+++ b/docs-generator/src/pages/Markdown.vue
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <div id="padding" style="padding-top:260px"></div>
+    <q-markdown :src="markdown" toc @data="onToc" no-line-numbers />
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Markdown',
+  data () {
+    return {
+      markdown: ''
+    }
+  },
+  computed: {
+    toc:
+      {
+        get () {
+          return this.$store.state.common.toc
+        },
+        set (toc) {
+          this.$store.commit('common/toc', toc)
+        }
+      }
+  },
+  methods: {
+    onToc (toc) {
+      this.toc = toc
+    }
+  },
+  mounted () {
+    // todo: get this workind so we don't have millions of pages
+    import(this.$route.meta.markdownSrc).then(data => {
+      this.markdown = data
+    })
+  }
+}
+</script>
diff --git a/docs-generator/src/pages/Patterns.vue b/docs-generator/src/pages/Patterns.vue
index c05f8ab..6d05511 100644
--- a/docs-generator/src/pages/Patterns.vue
+++ b/docs-generator/src/pages/Patterns.vue
@@ -8,7 +8,7 @@
     </p>
     <q-card class="q-mt-xl">
       <q-card-section class="text-center" style="padding-bottom:-20px">
-        <q-btn class="q-mx-xs" outline flat dense no-caps v-for="p in patterns" v-bind:key="p.id"  @click="pattern = p.name" :class="{'bg-cyan-2 text-black': pattern === p.name}" :disabled="pattern === p.name">{{ p.name }}</q-btn>
+        <q-btn :name="`${p.name} Selector`" class="q-mx-xs" outline flat dense no-caps v-for="p in patterns" v-bind:key="p.id"  @click="pattern = p.name" :class="{'bg-cyan-2 text-black': pattern === p.name}" :disabled="pattern === p.name">{{ p.name }}</q-btn>
       </q-card-section>
       <q-separator></q-separator>
       <q-card-section :class="$q.dark.isActive ? 'bg-blue-grey-6' : 'bg-cyan-1'">
@@ -16,7 +16,7 @@
           <small class="q-pa-md text-weight-bold">{{ active.most }}</small>
         </q-ribbon>
         <div id="tryout" class="fit row inline wrap" style="margin-top:26px">
-          <img class="col-1 q-mt-md q-mr-md" :src="`statics/patterns/${pattern}.png`" style="height:50px; width:auto">
+          <img class="col-1 q-mt-md q-mr-md" :src="`statics/patterns/${pattern}.png`" style="height:50px; width:auto" :alt="pattern" :title="pattern + ' badge'">
           <h4 class="col-grow text-weight-light" :class="$q.dark.isActive ? 'text-cyan-1' : 'text-cyan-10'" style="margin:-30px 0">{{ pattern }}</h4>
           <span class="col-12 q-pa-sm text-weight-bold text-black">{{ active.bestWhen }}</span>
 
@@ -72,21 +72,12 @@
     </q-card>
 
     <!-- <q-markdown :src="markdown" toc @data="onToc" /> -->
-
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-primary': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
 <script>
 // import markdown from '../markdown/patterns.md'
 // import * as mermaid from 'mermaid'
-
 const colors = {
   blue: {
     light: '#BAE5F2',
@@ -100,7 +91,6 @@ const colors = {
 
 export default {
   name: 'Patterns',
-
   data () {
     return {
       // markdown: markdown,
diff --git a/docs-generator/src/pages/Quickstart.vue b/docs-generator/src/pages/Quickstart.vue
index d7ce134..5879d92 100644
--- a/docs-generator/src/pages/Quickstart.vue
+++ b/docs-generator/src/pages/Quickstart.vue
@@ -2,14 +2,6 @@
   <div>
     <div id="padding" style="padding-top:260px"></div>
     <q-markdown :src="markdown" toc @data="onToc" line-number-alt="$" />
-
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-warning': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/pages/Security.vue b/docs-generator/src/pages/Security.vue
index e934276..bf39fe4 100644
--- a/docs-generator/src/pages/Security.vue
+++ b/docs-generator/src/pages/Security.vue
@@ -2,14 +2,6 @@
   <div>
     <div id="padding" style="padding-top:260px"></div>
     <q-markdown :src="markdown" toc @data="onToc" line-number-alt="$" />
-
-    <q-page-scroller position="bottom-right" :scroll-offset="150" :offset="[18, 18]">
-      <q-btn
-        fab
-        icon="keyboard_arrow_up"
-        :class="{ 'text-black bg-grey-4': $q.dark.isActive, 'text-white bg-warning': !$q.dark.isActive }"
-      />
-    </q-page-scroller>
   </div>
 </template>
 
diff --git a/docs-generator/src/router/routes.js b/docs-generator/src/router/routes.js
index 6622b0f..53cb38e 100644
--- a/docs-generator/src/router/routes.js
+++ b/docs-generator/src/router/routes.js
@@ -5,9 +5,50 @@ const routes = [
     path: '/',
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/Landing.vue'), meta: { name: 'Menu' } },
-      { path: '/governance-and-guidance', component: () => import('pages/Governance.vue'), meta: { name: 'Governance' } },
-      { path: '/book', component: () => import('pages/Book.vue'), meta: { name: 'Book' } }
+      {
+        path: '',
+        component: () => import('pages/Landing.vue'),
+        meta: {
+          name: 'Menu',
+          page_title: 'Tauri Studio - Make smaller, faster more secure native apps with Rust.',
+          description: 'Tauri is a toolchain for building highly secure native apps that have tiny binaries and are very fast. Whether coming from the front-end with Gatsby, Svelte, Vue, Angular or React - Tauri solves the hard problems of safe User Interfaces for all the desktop platforms.',
+          tags: 'tauri, native-apps, rust, polyglot, vue, svelte, react, gatsby, quasar',
+          url: 'https://tauri.studio/'
+        }
+      },
+      {
+        path: '/governance-and-guidance',
+        component: () => import('pages/Governance.vue'),
+        meta: {
+          name: 'Governance',
+          page_title: 'Tauri Governance.',
+          description: 'Tauri seeks to mitigate bus-factor by working in a collective, transparent and accountable way. We follow the greater-good affirmation, maintain our budget at opencollective and seek to comply with the best-practices outlined by the SFOSC.',
+          tags: 'tauri, SFOSC, open-source, accountability, best-practice',
+          url: 'https://tauri.studio/governance-and-guidance'
+        }
+      },
+      {
+        path: '/book',
+        component: () => import('pages/Book.vue'),
+        meta: {
+          name: 'Book',
+          page_title: 'Tauri - The Book.',
+          description: 'Some may think that Tauri is complex - they would be right. That is why we are writing the book about it. Discover its contents and how to get your hands on an advance copy.',
+          tags: 'tauri, book, e-book, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/book'
+        }
+      },
+      {
+        path: '/security',
+        component: () => import('pages/Security.vue'),
+        meta: {
+          name: 'Security',
+          page_title: 'Tauri - Security.',
+          description: 'Learn about the current and forthcoming security approaches that Tauri apps use and that you can profit from.',
+          tags: 'tauri, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/security'
+        }
+      }
     ]
   },
   {
@@ -17,13 +58,94 @@ const routes = [
     },
     component: () => import('layouts/MainLayout.vue'),
     children: [
-      { path: '', component: () => import('pages/Introduction.vue'), meta: { name: 'Docs' } },
-      { path: '/docs/quickstart', component: () => import('pages/Quickstart.vue'), meta: { name: 'Quickstart' } },
-      { path: '/docs/patterns', component: () => import('pages/Patterns.vue'), meta: { name: 'Patterns' } },
-      { path: '/docs/examples', component: () => import('pages/Examples.vue'), meta: { name: 'Examples' } },
-      { path: '/docs/security', component: () => import('pages/Security.vue'), meta: { name: 'Security' } },
-      { path: '/docs/api', component: () => import('pages/API.vue'), meta: { name: 'API' } },
-      { path: '/docs/cli', component: () => import('pages/Cli.vue'), meta: { name: 'CLI' } }
+      {
+        path: '/docs', // todo: make this a nice list
+        component: () => import('pages/Introduction.vue'),
+        meta: {
+          name: 'Docs',
+          page_title: 'Tauri - Documentation Overview.',
+          description: 'Learn about how Tauri works under the hood.',
+          tags: 'open-source, native-apps, development, macos, windows, linux, documentation',
+          url: 'https://tauri.studio/docs'
+        }
+      },
+      {
+        path: '/docs/introduction',
+        component: () => import('pages/Introduction.vue'),
+        meta: {
+          name: 'Introduction',
+          page_title: 'Tauri - The Overview.',
+          description: 'Learn about how Tauri works from a high-level and about the technology under the hood.',
+          tags: 'open-source, native-apps, development, macos, windows, linux, documentation, tauri',
+          url: 'https://tauri.studio/docs/introduction'
+        }
+      },
+      {
+        path: '/docs/quickstart',
+        component: () => import('pages/Quickstart.vue'),
+        meta: {
+          name: 'Quickstart',
+          page_title: 'Tauri - Setup your environment in 5 minutes.',
+          description: 'Learn how to get your Linux, Mac or Windows development machine up and running with Node and Rust in order to make Tauri Apps.',
+          tags: 'tauri, quick-start, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/quickstart'
+        }
+      },
+      {
+        path: '/docs/patterns',
+        component: () => import('pages/Patterns.vue'),
+        meta: {
+          name: 'Patterns',
+          page_title: 'Tauri - Design Patterns',
+          description: 'Learn about the variety of systems you can design with simple configuration changes - now includes flowcharts and grading to make it easier to compare and choose!',
+          tags: 'tauri, architecture, flowcharts, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/patterns'
+        }
+      },
+      {
+        path: '/docs/frameworks',
+        component: () => import('pages/Frameworks.vue'),
+        meta: {
+          name: 'Patterns',
+          page_title: 'Tauri - Design Patterns',
+          description: 'Learn about the variety of systems you can design with simple configuration changes - now includes flowcharts and grading to make it easier to compare and choose!',
+          tags: 'tauri, architecture, flowcharts, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/patterns'
+        }
+      },
+      {
+        path: '/docs/api',
+        component: () => import('pages/API.vue'),
+        meta: {
+          name: 'API',
+          page_title: 'Tauri - API',
+          description: 'Learn about the various endpoints and communication protocols that Tauri enables you to use',
+          tags: 'books, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/api'
+        }
+      },
+      {
+        path: '/docs/cli',
+        component: () => import('pages/CLI.vue'),
+        meta: {
+          name: 'CLI',
+          page_title: 'Tauri - Node.js CLI.',
+          description: 'Learn about the Node CLI commands and their configurations.',
+          tags: 'books, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/cli'
+        }
+      },
+      {
+        path: '/docs/bundler',
+        component: () => import('pages/Bundler.vue'),
+        meta: {
+          name: 'CLI',
+          page_title: 'Tauri - Rust Bundler.',
+          description: 'Learn about the Rust bundler.',
+          tags: 'books, open-source, native-apps, development, macos, windows, linux',
+          url: 'https://tauri.studio/docs/cli'
+        }
+      }
     ]
   }
 ]