docs: rewrite

Author: Baroshem

docs/app.config.ts

@@ -1,8 +1,14 @@
 export default defineAppConfig({
+  github: {
+    owner: 'Baroshem',
+    repo: 'nuxt-security',
+    branch: 'main'
+  },
   docus: {
     title: 'Nuxt Security',
     description: '🛡️ Security Module for Nuxt based on HTTP Headers and Middleware',
     image: '/preview.jpg',
+    url: 'https://nuxt-security.vercel.app',
     socials: {
       twitter: 'jacobandrewsky',
       github: 'baroshem/nuxt-security',
@@ -15,15 +21,19 @@ export default defineAppConfig({
     aside: {
       level: 1
     },
-    // github: {
-    //   dir: 'docs/content',
-    //   root: 'docs/content',
-    //   edit: true,
-    //   releases: true,
-    //   owner: 'baroshem',
-    //   repo: 'nuxt-security',
-    //   branch: 'main'
-    // },
+    github: {
+      dir: 'docs/content',
+      root: 'docs/content',
+      edit: true,
+      releases: true,
+      owner: 'baroshem',
+      repo: 'nuxt-security',
+      branch: 'main'
+    },
+    cover: {
+      src: '/preview.png',
+      alt: 'Security Module for Nuxt based on HTTP Headers and Middleware'
+    },
     header: {
       logo: true
     }

docs/content/0.index.md

@@ -29,7 +29,7 @@ Automatically configure your app to follow OWASP security patterns and principle
 
 ::card-grid
 #title
-What's included
+<div class="center heading">Protect your app with <br/> <span class=highlight>no configuration</span></div>
 
 #root
 :ellipsis{left=0px width=40rem top=10rem blur=140px}
@@ -78,6 +78,24 @@ What's included
   ::
 ::
 
+::block-hero
+---
+cta:
+  - 🚀 Get Started
+  - /documentation/getting-started/setup
+---
+#title
+<div class="heading">Discover how it helps ship<br/> <span class=highlight>secure applications</span></div>
+
+
+#description
+Nuxt Security solves several security issues automatically by implementing Headers and Middleware accordingly to OWASP & OWASP Top 10 documents. For others, it provides optional middleware that will help you handle more advanced cases like Cross Site Request Forgery.
+
+#support
+:video-player{src="https://www.youtube.com/watch?v=8RDPrptc9uU"}
+::
+
+
 <style>
   .cta {
     color: rgb(15, 23, 42) !important;
@@ -93,4 +111,15 @@ What's included
   .highlight {
     color: #00dc82
   }
+
+  .center {
+    text-align: center;
+  }
+
+  .heading {
+    margin-bottom: 40px;
+    font-size: 48px;
+    font-weight: 700;
+    line-height: 48px;
+  }
 </style>

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

@@ -4,6 +4,8 @@ Having more secure Nuxt project is only one command away ✨
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 Install `nuxt-security` module:
 
 ::code-group

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

@@ -4,63 +4,9 @@ Nuxt Security is configured with sensible defaults.
 
 ---
 
-The module by default will register **global** middleware and route roules to make your application more secure. You can also modify or disable any of middlewares/routes or your project cannot use them (i.e. some Statically Generated websites will not be able to use middlewares).
-
-## Global middleware
-
-You can add **global** configuration to the module like following:
-
-```js{}[nuxt.config.ts]
-export default defineNuxtConfig({
-  security: {
-    // Options
-  }
-})
-```
-
-You can disable them from the module configuration like following:
-
-```js{}[nuxt.config.ts]
-export default defineNuxtConfig({
-  security: {
-    rateLimiter: false
-  }
-})
-```
-
-In general, the `security` object in nuxt configuration should be used to register functionality that will be used **globally** in your application. For per route configuration, check out the next section.
-
-## Per route middleware
+:ellipsis{right=0px width=75% blur=150px}
 
-By default, middlewares are configured to work globally, but you can easily configure them per route by using `routeRules`:
-
-```js{}[nuxt.config.ts]
-export default defineNuxtConfig({
-  routeRules: {
-    '/custom-route': {
-      security: {
-        // Options
-      }
-    }
-  }
-})
-```
-
-By adding this you will have global middleware for all routes (regarding rate limiting) and specific configuration to the `/custom-route` route.
-
-You can also disable certain middlewares per route like following:
-
-```js{}[nuxt.config.ts]
-export default defineNuxtConfig({
-  routeRules: {
-    '/custom-route': {
-      security: {
-        rateLimiter: false
-      }
-    }
-  }
-})
-```
+The module by default will register **global** middleware and route roules to make your application more secure. You can also modify or disable any of middlewares/routes or your project cannot use them (i.e. some Statically Generated websites will not be able to use middlewares).
 
 ## Types
 
@@ -83,7 +29,7 @@ interface ModuleOptions {
 }
 ```
 
-All above `ModuleOptions` are explained in more details in the [next chapter](/security/headers)
+All above `ModuleOptions` are explained in more details in the next sections.
 
 ## Default
 

docs/content/1.documentation/1.getting-started/3.headers.md

@@ -4,6 +4,8 @@ Nuxt Security automatically registers HTTP security headers.
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 A set of **global** Nuxt `routeRules` that will add appropriate security headers to your response that will make your application more secure by default. All headers can be overriden by using the module configuration. Check out all the available types [here](https://github.com/Baroshem/nuxt-security/blob/main/src/types.ts).
 
 It will help you solve [this](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers) security problem.
@@ -39,7 +41,7 @@ export default defineNuxtConfig({
 ```
 
 ::alert{type="warning"}
-When using `routeRules`, make sure to use the proper HTTP Header names like `Cross-Origin-Embedder-Policy` instead of `crossOriginEmbedderPolicy`.
+When using `routeRules`, make sure to use the proper HTTP Header names like `Cross-Origin-Embedder-Policy` instead of `crossOriginEmbedderPolicy` and to not nset the headers inside `security`. These headers are handled by Nuxt and you can check more [here](https://nuxt.com/docs/guide/concepts/rendering#hybrid-rendering).
 ::
 
 ## Disabling header

docs/content/1.documentation/1.getting-started/4.middleware.md

@@ -4,6 +4,8 @@ Nuxt Security automatically registers middleware to handle several security issu
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 A set of **global** Nuxt `routeRules` that will add appropriate security middleware that will make your application more secure by default. Every middleware can be overriden by using the module configuration.
 
 ## Global configuration
@@ -38,6 +40,10 @@ export default defineNuxtConfig({
 })
 ```
 
+::alert{type="warning"}
+When using `routeRules`, make sure to add middleware inside of `security` in certain route rule. This is a custom NuxtSecurity addition that does not exists in core Nuxt.
+::
+
 ## Disabling middleware
 
 To disable given middleware, pass `false` .

docs/content/1.documentation/2.headers/1.csp.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 Content Security Policy (CSP) helps prevent unwanted content from being injected/loaded into your webpages. This can mitigate cross-site scripting (XSS) vulnerabilities, clickjacking, formjacking, malicious frames, unwanted trackers, and other web client-side attacks.
 
 ::alert{type="info"}

docs/content/1.documentation/2.headers/2.permissions-policy.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 Permissions Policy provides mechanisms for web developers to explicitly declare what functionality can and cannot be used on a web site. You define a set of "policies" that restrict what APIs the site's code can access or modify the browser's default behavior for certain features.
 
 ::alert{type="info"}

docs/content/1.documentation/2.headers/3.other.md

@@ -4,6 +4,7 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
 
 ## Cross-Origin-Embedder-Policy
 

docs/content/1.documentation/3.middleware/1.rate-limiter.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 Stores ip addresses of a requests in lru-cache and will throw an `429 Too Many Requests` error when there will be too many requests. Based on <https://unstorage.unjs.io/>
 
 ::alert{type="warning"}

docs/content/1.documentation/3.middleware/2.request-size-limiter.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 This middleware works for `GET`, `POST`, and `DELETE` methods and will throw an `413 Payload Too Large` error when the payload will be larger than the one set in the configuration.
 
 ::alert{type="info"}

docs/content/1.documentation/3.middleware/3.xss-validator.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 This middleware works for both `GET`, `POST` methods and will throw an `400 Bad Request` error when the either body or query params will contain unsecure code. Based on <https://github.com/leizongmin/js-xss>
 
 ::alert{type="info"}

docs/content/1.documentation/3.middleware/4.cors-handler.md

@@ -4,12 +4,16 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 This middleware will help you set your CORS options and it is based on built in [H3 CORS](https://github.com/unjs/h3) functionality
 
 ::alert{type="info"}
 ℹ Read more about Cross Origin Resource Sharing [here](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS).
 ::
 
+Testing CORS configuration can be done by running one application with NuxtSecurity enabled and creating a second application (that is running on a different port) that will send a request to the first app. Then, a CORS error could be easily observed that proves that CORS is working as expected.
+
 ## Usage
 
 This middleware is enabled globally by default. You can customize it both globally and per route like following:

docs/content/1.documentation/3.middleware/5.allowed-methods-restricter.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 This middleware works by default for `*` HTTP Methods and will throw an `405 Method Not Allowed` error when the there will be a request sent with an HTTP Method that is not allowed.
 
 ::alert{type="info"}

docs/content/1.documentation/3.middleware/6.basic-auth.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 This middleware will implement Basic Auth in your application. Only users with correct credentials passed to the browser prompt will be able to see the application. Others will be automatically rejected.
 
 ::alert{type="info"}

docs/content/1.documentation/3.middleware/7.csrf.md

@@ -4,6 +4,8 @@
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 Cross-Site Request Forgery (CSRF) is an attack that forces an end user to execute unwanted actions on a web application in which they’re currently authenticated. With a little help of social engineering (such as sending a link via email or chat), an attacker may trick the users of a web application into executing actions of the attacker’s choosing. If the victim is a normal user, a successful CSRF attack can force the user to perform state changing requests like transferring funds, changing their email address, and so forth. If the victim is an administrative account, CSRF can compromise the entire web application.
 
 ::alert{type="info"}

docs/content/1.documentation/4.utils/1.hide-x-powered-by-header.md

@@ -0,0 +1,26 @@
+# Hide `X-Powered-By`
+
+:badge[Enabled]{type="success"} Avoid leaking info about your framework.
+
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+`X-Powered-By` header is used to inform what technology is used in the server side. This is an unnecessary header causing information leakage, so it should be removed from your application.
+
+::alert{type="info"}
+ℹ Read more about it [here](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers).
+::
+
+Fortunately, `nuxt-security` module hides this header by default so your application is not leaking this information in the response headers.
+
+However, if you prefer not to have this changed, you can always disable this functionality from the module configuration (which is not recommended but possible) like the following:
+
+```js{}[nuxt.config.ts]
+export default defineNuxtConfig({
+  modules: ['nuxt-security'],
+  security: {
+    hidePoweredBy: false
+  }
+})
+```

docs/content/1.documentation/4.advanced/1.utils.md docs/content/1.documentation/4.utils/2.remove-console-loggers.md

@@ -1,31 +1,10 @@
-# Utils
+# Remove Console Loggers
 
-:badge[Enabled]{type="success"} Additional utilies that help secure your app.
+:badge[Enabled]{type="success"} Avoid shipping console.logs and debuggers into production.
 
 ---
 
-## Hide `X-Powered-By` header
-
-`X-Powered-By` header is used to inform what technology is used in the server side. This is an unnecessary header causing information leakage, so it should be removed from your application.
-
-::alert{type="info"}
-ℹ Read more about it [here](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers).
-::
-
-Fortunately, `nuxt-security` module hides this header by default so your application is not leaking this information in the response headers.
-
-However, if you prefer not to have this changed, you can always disable this functionality from the module configuration (which is not recommended but possible) like the following:
-
-```js{}[nuxt.config.ts]
-export default defineNuxtConfig({
-  modules: ['nuxt-security'],
-  security: {
-    hidePoweredBy: false
-  }
-})
-```
-
-## Remove Console Loggers
+:ellipsis{right=0px width=75% blur=150px}
 
 By default, your application will allow log all activity in the browser when you write `console.log(user)` that can lead to some unwanted information leakage.
 

docs/content/1.documentation/4.advanced/2.good-practices.md docs/content/1.documentation/5.advanced/2.good-practices.md

@@ -4,6 +4,8 @@ Learn how you can make your app even more secure.
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 ## Only return what is necessary
 
 If you just need a certain field of an object, you should only return the specific fields required. In other words, if you only need to list names of the users available, you are not returning their email addresses or credit card numbers in addition to their full names.