docs: rewrite

LICENSE.md

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2022 Baroshem <jakub.andrzejewski.dev@gmail.com>
+Copyright (c) 2023 Baroshem <jakub.andrzejewski.dev@gmail.com>
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -5,101 +5,59 @@
 [![npm version][npm-version-src]][npm-version-href]
 [![npm downloads][npm-downloads-src]][npm-downloads-href]
 [![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
-[![Codecov][codecov-src]][codecov-href]
 [![License][license-src]][license-href]
+[![Nuxt][nuxt-src]][nuxt-href]
 
-> [OWASP Top 10](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#nodejs-security-cheat-sheet) module that adds a few security improvements in form of a customizable server middlewares to your [Nuxt](https://v3.nuxtjs.org) application. All middlewares can be modified or disabled if needed. They can also be configured to work only on certain routes. By default all middlewares are configured to work globally.
+> Security module for Nuxt based on [OWASP Top 10](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#nodejs-security-cheat-sheet) and [helmet](https://helmetjs.github.io/) that adds security browser headers, protection middlewares, CORS, and more.
 
-- [✨  Release Notes](https://github.com/Baroshem/nuxt-security/releases)
 - [📖  Read the documentation](https://nuxt-security.vercel.app)
+- [👾  Playground](https://stackblitz.com/github/baroshem/nuxt-security?file=.stackblitz%2Fnuxt.config.ts)
+- [✨  Intro video](https://www.youtube.com/watch?v=8ac30Py8Ses)
 
 ## Features
 
 - Nuxt 3 ready
-- Same Security headers set as by popular Express.js middleware [helmet](https://helmetjs.github.io/)
-- Hidden 'X-Powered-By' header
+- Security browser headers
 - Request Size Limiter
 - Rate Limiter
-- XSS Validator for both GET and POST requests
+- XSS Validator for GET and POST requests
 - CORS Handler similar to popular Express.js middleware
 - Allowed HTTP Methods Restricter
-- Basic Auth support
-- TypeScript support
-
-[📖  Read the documentation](https://nuxt-security.vercel.app)
-
-## Preview
+- Hidden 'X-Powered-By' header
+- `[Optional]` Basic Auth support
 
-[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/baroshem/nuxt-security?file=.stackblitz%2Fnuxt.config.ts)
+## Usage
 
-## Setup
+Install the module:
 
 ```sh
-yarn add nuxt-security # yarn
-npm i nuxt-security # npm
+npm i nuxt-security --save-dev # yarn or pnpm
 ```
 
-## Usage
-
-The only thing you need to do to use the module in the default configuration is to register the module in the `modules` array in `nuxt.config.ts`:
-
-```javascript
-// nuxt.config.js
+Add the module in the `modules` array in `nuxt.config.ts`:
 
-{
-  modules: [
-    "nuxt-security",
-  ],
-  security: {} // optional
-}
+```js
+export default defineNuxtConfig({
+  modules: ["nuxt-security"],
+})
 ```
 
-The module will configure for you several response headers with the values recommended by Helmet as well as custom middlewares for rate and request limiting, xss validation, and CORS handling. More to come soon!
+And that's it! The module will now register route roules and server middlewares globally so that your application will be more secured.
 
-If you wish to modify them you can do so from the configuration:
+## Configuration
 
-```javascript
-// nuxt.config.js
+You can pass configuration to the module in the `nuxt.config.ts` like following:
 
-{
-  modules: [
-    "nuxt-security",
-  ],
+```ts
+export default defineNuxtConfig({
+  modules: ["nuxt-security"],
   security: {
-    requestSizeLimiter: {
-      value: {
-        maxRequestSizeInBytes: 3000000,
-        maxUploadFileRequestInBytes: 9000000,
-      },
-      route: '/upload-file'
-    }
+    // options
   }
-}
-```
-
-Or, you can pass options directly
-
-```js{}[nuxt.config.js]
-export default defineNuxtConfig({
-  modules: [
-  [
-    'nuxt-security',
-    {
-      requestSizeLimiter: {
-        value: {
-          maxRequestSizeInBytes: 3000000,
-          maxUploadFileRequestInBytes: 9000000,
-        },
-        route: '/upload-file'
-      }
-      // Other options
-    }
-  ]
-  ]
 })
 ```
 
-For all available configuration options check out the [docs](https://nuxt-security.vercel.app)
+For all available configuration options check out the [docs](https://nuxt-security.vercel.app).
 
 ## Development
 
@@ -118,7 +76,7 @@ For all available configuration options check out the [docs](https://nuxt-securi
 [npm-downloads-href]: https://npmjs.com/package/nuxt-security
 [github-actions-ci-src]: https://github.com/baroshem/nuxt-security/actions/workflows/ci.yml/badge.svg
 [github-actions-ci-href]: https://github.com/baroshem/nuxt-security/actions?query=workflow%3Aci
-[codecov-src]: https://img.shields.io/codecov/c/github/baroshem/nuxt-security.svg
-[codecov-href]: https://codecov.io/gh/baroshem/nuxt-security
 [license-src]: https://img.shields.io/npm/l/nuxt-security.svg
 [license-href]: https://npmjs.com/package/nuxt-security
+[nuxt-src]: https://img.shields.io/badge/Nuxt-18181B?logo=nuxt.js
+[nuxt-href]: https://nuxt.com

docs/content/1.getting-started/1.setup.md

@@ -0,0 +1,52 @@
+---
+title: Setup
+description: "Having more secure Nuxt project is only one command away ✨"
+---
+
+## Installation
+
+1. Install `nuxt-security` module:
+
+::code-group
+
+```bash [Yarn]
+yarn add --dev nuxt-security
+```
+
+```bash [NPM]
+npm install nuxt-security --save-dev
+```
+
+```bash [PNPM]
+pnpm add -D nuxt-security
+```
+
+::
+
+2. Enable the module in your Nuxt configuration:
+
+```js{}[nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['nuxt-security']
+})
+```
+
+::alert{type="success"}
+That's it! The Nuxt Security module will now register routeRoules and middlewares to make your application more secure ✨
+::
+
+## Configuration
+
+You can add configuration to the module like following:
+
+```js{}[nuxt.config.ts]
+export default defineNuxtConfig({
+  security: {
+    // options
+  }
+})
+```
+
+::alert{type="info"}
+You can find more about configuring `nuxt-security` [here](/getting-started/configuration).
+::

docs/content/1.getting-started/2.configuration.md

@@ -5,12 +5,29 @@ description: ''
 
 The module by default will register middlewares and route roules to make your application more secure. If you need, you can also modify or disable any of middlewares/routes if you do not need them or your project cannot use them (i.e. some Statically Generated websites will not be able to use middlewares).
 
+You can add configuration to the module like following:
+
+```js{}[nuxt.config.ts]
+export default defineNuxtConfig({
+  security: {
+    requestSizeLimiter: {
+      value: {
+        maxRequestSizeInBytes: 3000000,
+        maxUploadFileRequestInBytes: 9000000,
+      },
+      route: '/upload-file'
+    }
+    // Other options
+  }
+})
+```
+
 ## Configuration Types
 
 Each middleware configuration object is build using same TS type:
 
 ```ts
-export type MiddlewareConfiguration<MIDDLEWARE> = {
+type MiddlewareConfiguration<MIDDLEWARE> = {
   value: MIDDLEWARE;
   route: string;
 }
@@ -22,7 +39,7 @@ export type MiddlewareConfiguration<MIDDLEWARE> = {
 All module configuration is the following type:
 
 ```ts
-export interface ModuleOptions {
+interface ModuleOptions {
   headers: SecurityHeaders | false;
   requestSizeLimiter: MiddlewareConfiguration<RequestSizeLimiter> | false;
   rateLimiter: MiddlewareConfiguration<RateLimiter> | false;
@@ -35,11 +52,11 @@ export interface ModuleOptions {
 }
 ```
 
-All above `ModuleOptions` are explained in more details in the [next chapter](/middlewares/headers)
+All above `ModuleOptions` are explained in more details in the [next chapter](/security/headers)
 
 ## Default configuration
 
-This module will by default set the following configuration options to enable middlewares:
+This module will by default set the following configuration options to enable middlewares and route roules:
 
 ```ts
 security: {
@@ -155,3 +172,21 @@ security: {
 ```
 
 To read more about every security middleware, go to that middleware page in middlewares section.
+
+## Using with Nuxt DevTools
+
+In order to make this module work with Nuxt DevTools add following configuration to your projects:
+
+```js{}[nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['nuxt-security', '@nuxt/devtools'],
+  security: {
+    headers: {
+      crossOriginEmbedderPolicy: {
+        value: process.env.NODE_ENV === 'development' ? 'unsafe-none' : 'require-corp',
+        route: '/**',
+      }
+    },
+  },
+});
+```

docs/content/1.index.md

@@ -9,11 +9,11 @@ layout: fluid
 ---
 cta:
   - Get Started
-  - /getting-started/quick-start
+  - /getting-started/setup
 secondary:
   - Star on GitHub →
   - https://github.com/baroshem/nuxt-security
-snippet: yarn add nuxt-security
+snippet: yarn add --dev nuxt-security
 ---
 
 #title
@@ -25,14 +25,13 @@ Security Module for Nuxt based on OWASP Top 10 and Helmet
 #extra
   ::list
     - Nuxt 3 ready
-    - Same Security headers set as by popular Express.js middleware [helmet](https://helmetjs.github.io/)
-    - Hidden 'X-Powered-By' header
+    - Security browser headers
     - Request Size Limiter
     - Rate Limiter
-    - XSS Validator for both GET and POST requests
+    - XSS Validator for GET and POST requests
     - CORS Handler similar to popular Express.js middleware
     - Allowed HTTP Methods Restricter
-    - Basic Auth support
-    - TypeScript support
+    - Hidden 'X-Powered-By' header
+    - `[Optional]` Basic Auth support
   ::
 ::