New v4 (Crow) guide (feathersjs-ecosystem#1316)

Author: daffl

.gitignore

@@ -41,4 +41,5 @@ _book/
 
 .idea/
 exapp/
-.vuepress/dist
+.vuepress/dist
+!.vscode/

.travis.yml

@@ -0,0 +1,21 @@
+{
+	"tstabs": {
+		"scope": "markdown",	
+		"prefix": [ "tstabs" ],
+		"body": [
+			":::: tabs :options=\"{ useUrlFragment: false }\"",
+			"::: tab \"JavaScript\"",
+			"```js",
+			"$1",
+			"```",
+			":::",
+			"::: tab \"TypeScript\"",
+			"```ts",
+			"$2",
+			"```",
+			":::",
+			"::::"
+		],
+		"description": "JavaScript/TypeScript tabs"
+	}
+}

.vscode/tstab.code-snippets

@@ -10,31 +10,25 @@ module.exports = {
     sidebarDepth: 2,
     sidebar: {
       '/guides/': [{
-        title: 'The basics',
+        title: 'The Feathers guide',
         collapsable: false,
         children: [
-          'basics/',
           'basics/setup.md',
           'basics/starting.md',
+          'basics/generator.md',
           'basics/services.md',
           'basics/hooks.md',
-          'basics/rest.md',
-          'basics/databases.md',
-          'basics/real-time.md',
-          'basics/clients.md',
-          'basics/generator.md'
+          'basics/authentication.md',
+          'basics/frontend.md',
+          'basics/testing.md'
         ]
-      }, {
-        title: 'A chat application',
+      }, 'frameworks.md', 'security.md', 'migrating.md'],
+      '/help/': [{
+        title: 'Help',
         collapsable: false,
         children: [
-          'chat/',
-          'chat/creating.md',
-          'chat/service.md',
-          'chat/authentication.md',
-          'chat/processing.md',
-          'chat/frontend.md',
-          'chat/testing.md'
+          '/help/',
+          '/help/faq.md'
         ]
       }],
       '/api/': [{
@@ -80,7 +74,7 @@ module.exports = {
           'authentication/client.md'
         ]
       }, {
-        title: 'Database',
+        title: 'Databases',
         collapsable: false,
         children: [
           'databases/adapters.md',
@@ -89,33 +83,55 @@ module.exports = {
         ],
       }],
       '/cookbook/': [{
+        title: 'General',
+        collapsable: false,
+        children: [
+          'general/scaling.md'
+        ]
+      }, {
         title: 'Authentication',
+        collapsable: false,
         children: [
           'authentication/anonymous.md'
         ]
       }, {
         title: 'Express',
+        collapsable: false,
         children: [
-          'express/file-uploading.md'
+          'express/file-uploading.md',
+          'express/view-engine.md'
         ]
-      }],
-      '/': [
-        '/guides/',
-        '/api/',
-        '/faq/',
-        'migrating.md'
-      ]
+      }]
     },
     nav: [
       { text: 'Guides', link: '/guides/' },
       { text: 'API', link: '/api/' },
       { text: 'Cookbook', link: '/cookbook/' },
-      { text: 'FAQ', link: '/faq/' },
+      { text: 'Help', link: '/help/' },
       {
         text: 'Ecosystem',
-        link: 'https://github.com/feathersjs/awesome-feathersjs'
+        items: [{
+          text: 'Awesome Feathersjs',
+          link: 'https://github.com/feathersjs/awesome-feathersjs'
+        }, {
+          text: 'Previous versions',
+          items: [{
+            text: 'Buzzard (v3)',
+            link: 'https://buzzard.docs.feathersjs.com/'
+          }, {
+            text: 'Auk (v2)',
+            link: 'https://auk.docs.feathersjs.com/'
+          }, {
+            text: 'Legacy (v1)',
+            link: 'https://legacy.docs.feathersjs.com/'
+          }]
+        }]
       }
     ]
   },
-  plugins: ['@vuepress/last-updated', 'tabs']
+  plugins: [
+    '@vuepress/last-updated',
+    [ '@dovyp/vuepress-plugin-clipboard-copy', true ],
+    'tabs'
+  ]
 };

.vuepress/config.js

@@ -2,3 +2,4 @@ $accentColor = #D513A5
 $textColor = #2c3e50
 $borderColor = #eaecef
 $codeBgColor = #FAFAFA
+$secondaryColor = #33CCFF

.vuepress/public/img/header-event-filters.jpg

@@ -5,25 +5,24 @@
     <Content/>
 
     <footer class="page-edit">
-      <div
-        class="edit-link"
-        v-if="editLink"
-      >
-        <a
-          :href="editLink"
-          target="_blank"
-          rel="noopener noreferrer"
-        >{{ editLinkText }}</a>
-        <OutboundLink/>
-      </div>
-
-      <div
-        class="last-updated"
-        v-if="lastUpdated"
-      >
-        <span class="prefix">{{ lastUpdatedText }}: </span>
-        <span class="time">{{ lastUpdated }}</span>
-      </div>
+      <blockquote>
+        <p>
+          Anything unclear or missing?
+          <a :href="commentLink" target="_blank" rel="noopener noreferrer">
+            Leave a comment
+          </a>
+          <OutboundLink/> or <a
+            :href="editLink"
+            target="_blank"
+            rel="noopener noreferrer"
+          >{{ editLinkText }}</a>
+          <OutboundLink/>
+        </p>
+        <small>
+          <span class="prefix">{{ lastUpdatedText }}: </span>
+          <span class="time">{{ lastUpdated }}</span>
+        </small>
+      </blockquote>
     </footer>
 
     <div class="page-nav" v-if="prev || next">
@@ -121,6 +120,18 @@ export default {
       }
     },
 
+    commentLink () {
+      const {
+        repo,
+        docsRepo = repo
+      } = this.$site.themeConfig
+
+      return (outboundRE.test(docsRepo)
+        ? docsRepo
+        : `https://github.com/${docsRepo}`) +
+        `/issues/new?title=Comment: ${this.$page.title} (${this.$page.relativePath})`
+    },
+
     editLinkText () {
       return (
         this.$themeLocaleConfig.editLinkText
@@ -201,7 +212,7 @@ function flatten (items, res) {
 
 .page-edit
   @extend $wrapper
-  padding-top 1rem
+  padding-top 0
   padding-bottom 1rem
   overflow auto
   .edit-link

.vuepress/public/img/header-hooks.jpg

@@ -1,10 +1,14 @@
+.code-copy {
+  top: 20px !important;
+}
+
 .content
   code
     color lighten($textColor, 20%)
     padding 0.25rem 0.5rem
     margin 0
     font-size 0.85em
-    background-color rgba(27,31,35,0.05)
+    background-color $codeBgColor
     border-radius 3px
     .token
       &.deleted
@@ -14,9 +18,9 @@
       &.keyword
         color lighten($accentColor, 50%)
       &.string
-        color #33CCFF
-      &.function, &.class-name, &.property
         color complement($accentColor)
+      &.function, &.class-name, &.property
+        color #33CCFF
 
 .content
   pre, pre[class*="language-"]
@@ -139,3 +143,6 @@ div[class~="language-bash"]:before
 
 div[class~="language-php"]:before
   content "php"
+
+div[class*="language-"] pre .code-copy
+  opacity: 0.5

.vuepress/public/img/header-provider-primus.jpg

@@ -120,6 +120,7 @@ h1, h2, h3, h4, h5, h6
 
 h1
   font-size 2.2rem
+  color: $secondaryColor
 
 h2
   font-size 1.65rem
@@ -175,6 +176,13 @@ th, td
     .sidebar
       top 0
 
+pre
+  background-color $codeBgColor
+  color lighten($textColor, 40%)
+
+code
+  background-color $codeBgColor
+  color lighten($textColor, 40%)
 
 @media (min-width: ($MQMobile + 1px))
   .theme-container.no-sidebar
@@ -184,3 +192,16 @@ th, td
       padding-left 0
 
 @require 'mobile.styl'
+
+footer.page-edit blockquote
+  border-left: 0.5rem solid $secondaryColor
+  background-color: lighten($secondaryColor, 85%)
+  padding: 1em
+  
+  p
+    color: $textColor
+  
+  small
+    padding-top: 1em
+    display: block
+    text-align: right