Docs overhaul: search, back-to-top, medium-zoom, top-level tutorial, …

…revamp index (nuwave#994)

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <a href="https://www.lighthouse-php.com">
-    <img src="logo.png" alt=lighthouse-logo" width="150" height="150">
+    <img src="./logo.png" alt=lighthouse-logo" width="150" height="150">
   </a>
 </div>
 

assets/default-schema.graphql

@@ -5,8 +5,8 @@ scalar DateTime @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date
 scalar Date @scalar(class: "Nuwave\\Lighthouse\\Schema\\Types\\Scalars\\Date")
 
 type Query {
-    users: [User!]! @paginate(type: "paginator" model: "App\\User")
-    user(id: ID @eq): User @find(model: "App\\User")
+    users: [User!]! @paginate(defaultCount: 10)
+    user(id: ID @eq): User @find
 }
 
 type User {

docker-compose.yml

@@ -23,4 +23,4 @@ services:
     working_dir: /app
     ports:
     - 8080:8080
-    entrypoint: /bin/bash -c "echo 'Run `docker-compose exec node bash` followed by `yarn` and `yarn docs:dev` to work on the docs.' && tail -F /dev/null"
+    entrypoint: /bin/bash -c "echo 'Run `docker-compose exec node bash` followed by `yarn` and `yarn start` to work on the docs.' && tail -F /dev/null"

docs/.github/README.md

@@ -40,7 +40,7 @@ Then, start Vue Press in development mode (with hot reloading).
 
     cd docs/
     yarn
-    yarn docs:dev
+    yarn start
 
 > Keep a eye on the console when editing pages.
 If an error occurs, it might be necessary to restart the compilation process.
@@ -58,7 +58,7 @@ docker-compose exec node bash
 yarn
 
 # Start Vue Press in development mode (with hot reloading)
-yarn docs:dev
+yarn start
 ```
 
 Finally, navigate to http://localhost:8080
@@ -84,7 +84,7 @@ The [@paginate](directives.md#paginate) directive is great!
 Always use relative paths according to folder structure.
 
 ```md
-See the [Tutorial](../getting-started/tutorial.md) for more info.
+See [configuration](../getting-started/configuration.md) for more info.
 ```
 
 ## Versioning
@@ -116,7 +116,7 @@ in a single PR.
 1. Enter a new version number. We only tag minor releases, so `3.1` will get separate
 docs, but `3.1.4` will not.
 
-        yarn docs:version 3.1
+        yarn bump-version 3.1
 
 This will copy the contents of `docs/master/` into `docs/<version>/`
 and place a new version number in `docs/.vuepress/versions.json`.

docs/.vuepress/config.js

@@ -19,27 +19,39 @@ module.exports = {
         editLinks: true, //  "Edit this page" at the bottom of each page
         lastUpdated: 'Last Updated', //  "Last Updated" at the bottom of each page
         repo: 'nuwave/lighthouse', //  Github repo
-        docsDir: 'docs/', //  Github repo docs folder    
+        docsDir: 'docs/', //  Github repo docs folder
         versions: {
             latest: versioning.versions.latest,
             selected: versioning.versions.latest,
             all: versioning.versions.all
         },
-        search: false,
         nav: [
             {
-                text: `Docs`,
+                text: 'Docs',
                 items: versioning.linksFor('getting-started/installation.md') // TODO create custom component
             },
+            {
+                text: 'Tutorial',
+                link: '/tutorial/'
+            },
             {
                 text: 'Resources',
-                link: '/pages/resources.md'
+                link: '/resources/'
             },
             {
                 text: 'Users',
-                link: '/pages/users.md'
+                link: '/users/'
             }
         ],
         sidebar: versioning.sidebars
-    }
+    },
+    plugins: [
+        ['@vuepress/back-to-top', true],
+        ['@vuepress/medium-zoom', true],
+        ['@vuepress/search', {
+            searchMaxSuggestions: 10,
+            // Only search the latest version, e.g. 4.3, otherwise many duplicates will show up
+            test: `/${versioning.versions.latest.replace('.', '\\.')}/`
+        }]
+    ]
 }

docs/.vuepress/styles/index.styl

@@ -14,88 +14,18 @@ h1, h2, h3
   HOME
 *******************************/
 
-.home-container h2
-  border-bottom: none
-
-.home .highlights
-  padding 1.2rem 0
-  margin-top 1rem
-  display flex
-  flex-wrap wrap
-  align-items flex-start
-  align-content stretch
-  justify-content space-between
-
-.home .highlight
-  flex-grow 1
-  max-width 48%
-
-  @media (max-width 719px)
-    max-width: 100% !important
-
-.home .highlight h2
-  font-weight 800
-  border none !important
-  margin-top 10px
-
-.home .feature h2
-  font-weight 800 !important
-
-/******************************
-  CONTENT
-*******************************/
-
-.content img
-  border #f3f3f3 1px solid !important
-  border-radius 6px !important
-
-.content p
-  margin-bottom: 1.5em
-
-.content:not(.custom) > h2
-  margin-top: 3rem !important
-  padding-top: 0 !important
-  margin-bottom: 1.6rem !important
-
-.container
-  margin-left: auto
-  margin-right: auto
-
-.button
-  border: 1px solid #a74ff4;
-  display: inline-block;
-  line-height: 1.2em;
-  padding: 10px;
-  text-decoration: none!important;
-  text-transform: uppercase;
-  transition: background .3s,color .3s;
-  border-color: #2b2644;
-  color: #2b2644;
-  font-size: .75rem;
-  font-weight: 700;
-  letter-spacing: .05em;
-  background-color: #fff;
-  border-radius: 0;
-
-.custom-block .custom-block-title
-  margin-top: 0.5rem
-  margin-bottom: 0.5rem
-
-/******************************
-  HERO
-*******************************/
-
-.home
-  padding: 0 !important
-  max-width: 100% !important
-
-.home .hero
-  display: none !important
+.hero img
+    height: 10em
+    width: 10em
 
 /******************************
   CODE
 *******************************/
 
+div[class~="language-graphql"]:before {
+    content: "graphql";
+}
+
 pre,
 pre[class*="language-"],
 pre code[class*="language-"]
@@ -146,24 +76,6 @@ pre code[class*="language-"] .token.comment
   .navbar .home-link .can-hide
     display: inline-block !important
 
-/******************************
-  BLOCKS
-*******************************/
-
-.custom-block-title
-  font-weight 800 !important
-
-.custom-block.danger
-  background-color #fff6f6 !important
-  border-color #ffe6e6 !important
-
-.custom-block.warning
-  background-color rgba(239, 224, 153, 0.3) !important
-  border-color #ecd45a !important
-
-.custom-block.tip
-  border-color #cec3d6 !important
-
 /******************************
   SIDEBAR
 *******************************/
@@ -207,13 +119,6 @@ pre code[class*="language-"] .token.comment
     .nav-links a.nav-link, .nav-links a.repo-link, .nav-links .dropdown-title
       color #fff
 
-/******************************
-  FOOTER
-*******************************/
-
-.footer
-  text-align: center
-
 /******************************
   USERS
 *******************************/

docs/.vuepress/styles/palette.styl

@@ -1,5 +1,5 @@
 $accentColor = #a74ff4
 $borderColor = #ddd
-$backgroundColor = #2b2644;
+$backgroundColor = #2b2644
 $primaryFont = 'Miriam Libre'
 $secondaryFont = -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif