docs: migrate to content (#795)

* docs: migrate to content * fix: missing nuxt-edge * docs: add logos * docs: add icon.png * fix: icon was wrong size
nuxt-community · Aug 13, 2020 · f650fc70a146554ddb45713768e5c96ed980863a · f650fc7
1 parent 509d9d6
commit f650fc70a146554ddb45713768e5c96ed980863a
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+.nuxt
+dist
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
diff --git a/docs/api/readme.md b/docs/api/readme.md
diff --git a/docs/content/en/api-index.md b/docs/content/en/api-index.md
@@ -0,0 +1,10 @@
+---
+title: API
+description: 'Zero-boilerplate authentication support for Nuxt.js!'
+position: 50
+category: API
+---
+
+- [options](./api/options)
+- [auth](./api/auth)
+- [storage](./api/storage)
diff --git a/docs/api/auth.md → docs/content/en/api/auth.md b/docs/api/auth.md → docs/content/en/api/auth.md
@@ -1,4 +1,9 @@
-# auth
+---
+title: auth
+description: This module globally injects `$auth` instance, meaning that you can access it anywhere using `this.$auth`.
+position: 51
+category: API
+---
 
 [Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/core/auth.ts)
 
@@ -107,6 +112,7 @@ await this.$auth.fetchUser()
 ```
 
 ### `hasScope(scopeName)`
+
 Check if user has a specific scope:
 
 ```js
@@ -151,5 +157,6 @@ export default function({ $auth }) {
 ```
 
 ## tokens
+
 **Token** and **Refresh Token** are available on `$auth.token` and `$auth.refreshToken`.
 Both have getters and setters and other helpers. Documented in [tokens.md](tokens.md)
diff --git a/docs/api/options.md → docs/content/en/api/options.md b/docs/api/options.md → docs/content/en/api/options.md
@@ -1,4 +1,9 @@
-# options
+---
+title: options
+description: General options shared with all strategies. See defaults.ts for defaults.
+position: 52
+category: API
+---
 
 General options shared with all strategies. See [defaults.ts](https://github.com/nuxt-community/auth-module/blob/dev/src/module/defaults.ts) for defaults.
 

diff --git a/docs/api/refreshController.md → docs/content/en/api/refreshController.md b/docs/api/refreshController.md → docs/content/en/api/refreshController.md
@@ -1,4 +1,10 @@
-# refresh controller
+---
+title: refresh controller
+description: Refresh Controller can be initialized in a scheme to add refresh support.
+position: 54
+category: API
+---
+
 
 [Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/inc/refresh-controller.ts)
 

diff --git a/docs/api/storage.md → docs/content/en/api/storage.md b/docs/api/storage.md → docs/content/en/api/storage.md
@@ -1,4 +1,9 @@
-# storage
+---
+title: storage
+description: Auth module has a built-in powerful and universal storage to keep tokens and profile data.
+position: 53
+category: API
+---
 
 [Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/core/storage.ts)
 

diff --git a/docs/api/tokens.md → docs/content/en/api/tokens.md b/docs/api/tokens.md → docs/content/en/api/tokens.md
@@ -1,4 +1,9 @@
-# tokens
+---
+title: tokens
+description: Token and Refresh Token are available on `$auth.token` and `$auth.refreshToken`. Both have getters and setters and other helpers.
+position: 55
+category: API
+---
 
 [Token Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/inc/token.ts) and [Refresh Token Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/inc/refresh-token.ts)
 

diff --git a/docs/content/en/glossary.md b/docs/content/en/glossary.md
@@ -0,0 +1,24 @@
+---
+title: Glossary
+description: Glossary of auth terms
+position: 71
+category: Glossary
+---
+
+## Scheme
+
+Schemes define authentication logic.
+
+Read more in [Schemes and Strategies](./guide/scheme) section.
+
+## Strategy
+
+Strategy is a configured instance of Scheme.
+
+Read more in [Schemes and Strategies](./guide/schemes) section.
+
+## Provider
+
+Provider auto-configures schemes.
+
+Read more in [Providers](./guide/provider) section.
diff --git a/docs/guide/middleware.md → docs/content/en/guide/middleware.md b/docs/guide/middleware.md → docs/content/en/guide/middleware.md
@@ -1,4 +1,9 @@
-# Middleware
+---
+title: Middleware
+description: 'You can enable `auth` middleware either globally or per route.'
+position: 3
+category: Guide
+---
 
 You can enable `auth` middleware either globally or per route.
 When this middleware is enabled on a route and `loggedIn` is `false` user will be redirected to `redirect.login` route. (`/login` by default)
@@ -13,7 +18,7 @@ export default {
 
 Globally setting in `nuxt.config.js`:
 
-```js
+```js{}[nuxt.config.js]
 router: {
   middleware: ['auth']
 }

diff --git a/docs/guide/provider.md → docs/content/en/guide/provider.md b/docs/guide/provider.md → docs/content/en/guide/provider.md
@@ -1,4 +1,9 @@
-# Providers
+---
+title: Providers
+description: Providers are an abstraction on top of Schemes.
+position: 5
+category: Guide
+---
 
 Providers are an abstraction on top of Schemes.
 They make it super easy to integrate with popular authentication services. They can do even more by provider required server-side changes such as token signing and you can also write your own provider.
diff --git a/docs/guide/scheme.md → docs/content/en/guide/scheme.md b/docs/guide/scheme.md → docs/content/en/guide/scheme.md
@@ -1,6 +1,10 @@
-# Schemes
-
-Schemes define authentication logic. Strategy is a configurated instance of Scheme. You can have multiple schemes and strategies in your project.
+---
+title: Schemes
+description: Schemes define authentication logic. Strategy is a configured instance of Scheme. You can have multiple schemes and strategies in your project.
+position: 4
+category: Guide
+---
+Schemes define authentication logic. Strategy is a configured instance of Scheme. You can have multiple schemes and strategies in your project.
 
 `auth.strategies` option is an object. Keys are strategy name and values are configuration.
 

diff --git a/docs/content/en/guide/setup.md b/docs/content/en/guide/setup.md
@@ -0,0 +1,57 @@
+---
+title: Setup
+description: 'Zero-boilerplate authentication support for Nuxt.js!'
+position: 2
+category: Guide
+---
+
+Check the [Nuxt.js documentation](https://nuxtjs.org/guides/configuration-glossary/configuration-modules) for more information about installing and using modules in Nuxt.js.
+
+## Installation
+
+
+<alert type="warning">
+
+This docs are for next version of nuxt-auth module which is unstable. Use with caution!
+
+</alert>
+
+Add `@nuxtjs/auth-next @nuxtjs/axios` dependencies to your project:
+
+<code-group>
+  <code-block label="Yarn" active>
+
+  ```bash
+  yarn add @nuxtjs/auth-next @nuxtjs/axios
+  ```
+
+  </code-block>
+  <code-block label="NPM">
+
+  ```bash
+  npm install @nuxtjs/auth-next @nuxtjs/axios
+  ```
+
+  </code-block>
+</code-group>
+
+Then, add `@nuxtjs/xxx` to the `modules` section of `nuxt.config.js`:
+
+```js{}[nuxt.config.js]
+{
+  modules: [
+    '@nuxtjs/axios',
+    '@nuxtjs/auth-next'
+  ],
+  auth: {
+    // Options
+  }
+}
+```
+
+<alert type="warning"> 
+
+IMPORTANT
+When adding `auth-module` to a new Nuxt project ensure you have [activated the Vuex store](https://nuxtjs.org/guide/vuex-store/#activate-the-store). More information on how to do that can be found on the [Nuxt Getting Started Guide](https://nuxtjs.org/guides/directory-structure/store).
+
+</alert>
diff --git a/docs/content/en/index.md b/docs/content/en/index.md
@@ -0,0 +1,36 @@
+---
+title: Introduction
+description: 'Zero-boilerplate authentication support for Nuxt.js!'
+position: 1
+category: ''
+
+---
+
+<img src="/preview.png" class="light-img" />
+<img src="/preview-dark.png" class="dark-img" />
+
+Auth Module for [NuxtJS](https://nuxtjs.org).
+
+Zero-boilerplate authentication support for Nuxt.js!
+
+## Getting Started
+
+If it is first time using this module, reading resources below in order is recommended:
+
+1. [Add auth and axios modules](./guide/setup)
+2. [Setup auth middleware](./guide/middleware)
+3. [Configure local scheme](./schemes/local)
+4. [Customize options](./api/options)
+5. [Use `$auth` service](./api/auth)
+
+You can also watch a video introduction by VueScreencasts. It covers the same material, but in the context of a working Nuxt app.
+
+[![Nuxt Auth - Authentication and Authorization in NuxtJS](https://img.youtube.com/vi/zzUpO8tXoaw/0.jpg)](https://youtu.be/zzUpO8tXoaw)
+
+## More Resources
+
+* [Glossary](./glossary)
+* [GitHub](https://github.com/nuxt-community/auth-module)
+* [Releases](https://github.com/nuxt-community/auth-module/releases)
+* [Examples](https://github.com/nuxt-community/auth-module/tree/dev/examples)
+* [Demo](https://nuxt-auth.herokuapp.com)
diff --git a/docs/providers/auth0.md → docs/content/en/providers/auth0.md b/docs/providers/auth0.md → docs/content/en/providers/auth0.md
@@ -1,4 +1,9 @@
-# Auth0
+---
+title: Auth0
+description: Auth0 is a great authentication-as-a-service platform for free!
+position: 31
+category: Providers
+---
 
 [Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/providers/auth0.ts)
 
@@ -31,7 +36,7 @@ User will be redirected to a page like this:
 <img align="center" src="https://cdn2.auth0.com/docs/media/articles/web/hosted-login.png">
 
 
-💁 This provider is based on [oauth2 scheme](../schemes/oauth2.md) and supports all scheme options.
+💁 This provider is based on [oauth2 scheme](../schemes/oauth2) and supports all scheme options.
 
 ## Obtaining `clientId`, `domain`, and `audience`
 
@@ -50,6 +55,7 @@ On logout, local `auth` is reset and you will be instantly redirected to `Auth0`
 To make sure you are redirected to the right page, you need to setup two things:
 * Go to into the `Tenant Settings` > `Advanced` and enter the allowed URL(s) you can redirect to in `Allowed Logout URLs`, such as `http://localhost:3000`
 * Add `logoutRedirectUri` to your config and add the value you just configured:
+
 ```js
 auth: {
   strategies: {
@@ -67,6 +73,7 @@ this.$auth.logout()
 ```
 
 ## PKCE Grant flow 
+
 From [Auth0](https://auth0.com/docs/flows/concepts/auth-code-pkce)
 > The PKCE-enhanced Authorization Code Flow introduces a secret created by the calling application that can be verified by the authorization server;this secret is called the Code Verifier. Additionally, the calling app creates a transform value of the Code Verifier called the Code Challenge and sends this value over HTTPS to retrieve an Authorization Code. This way, a malicious attacker can only intercept the Authorization Code, and they cannot exchange it for a token without the Code Verifier.
 
@@ -75,7 +82,8 @@ To configure the `PKCE Grant flow` instead of the default `Implicit Grant flow`,
 - Applications > "your app" > Settings > Show Advanced Settings > Grant Types > enable Refresh Token (and disable Implicit)
 - APIs > "your api" > Allow Offline Access > enable
 - `nuxt.config.js`:
-```js
+
+```js{}[nuxt.config.js]
 auth: {
   strategies: {
     auth0: {

diff --git a/docs/providers/facebook.md → docs/content/en/providers/facebook.md b/docs/providers/facebook.md → docs/content/en/providers/facebook.md
@@ -1,4 +1,9 @@
-# Facebook
+---
+title: Facebook
+description: This provider is based on oauth2 scheme and supports all scheme options
+position: 32
+category: Providers
+---
 
 [Source Code](https://github.com/nuxt-community/auth-module/blob/dev/src/providers/facebook.ts)
 
@@ -24,7 +29,7 @@ Anywhere in your application logic:
 this.$auth.loginWith('facebook')
 ```
 
-💁 This provider is based on [oauth2 scheme](../schemes/oauth2.md) and supports all scheme options.
+💁 This provider is based on [oauth2 scheme](../schemes/oauth2) and supports all scheme options.
 
 ## Obtaining `clientId`