docs: add usage and contributing

Author: Baroshem

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

@@ -0,0 +1,114 @@
+# Usage
+
+Learn how to use headers and middleware both globally and per route.
+
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+Nuxt Security by default registers a set of **global** Nuxt `routeRules` that will make your application more secure by default. Both headers and middleware can be easily configured and even disabled when needed.
+
+::alert{type="info"}
+ℹ Read more about security headers [here](https://cheatsheetseries.owasp.org/cheatsheets/Nodejs_Security_Cheat_Sheet.html#use-appropriate-security-headers).
+::
+
+## Global configuration
+
+To override default behavior for Nuxt Security globally, follow this pattern:
+
+```ts
+export default defineNuxtConfig({
+  security: {
+    headers: {
+      // certain header
+      xXSSProtection: '1',
+    },
+
+    // certain middleware
+    rateLimiter: {
+      // options
+    }
+  }
+})
+```
+
+## Per route configuration
+
+To enable per-route configuration, use the `routeRules` like following:
+
+```ts
+export default defineNuxtConfig({
+  routeRules: {
+    '/custom-route': {
+      headers: {
+        // certain header
+        'Cross-Origin-Embedder-Policy': 'require-corp'
+      },
+
+      // certain middleware
+      security: {
+        rateLimiter: {
+          // options
+        }
+      }
+    }
+  }
+})
+```
+
+You can also use route roules in pages like following:
+
+```vue
+<template>
+  <div>Hello from page</div>
+</template>
+
+<script setup lang="ts">
+defineRouteRules({
+  headers: {
+    'X-XSS-Protection': '1'
+  },
+  security: {
+    rateLimiter: {
+      tokensPerInterval: 3,
+      interval: 60000,
+    },
+  }
+})
+</script>
+```
+
+::alert{type="warning"}
+When using `routeRules`, make sure to:
+
+1. use the proper HTTP Header names like `Cross-Origin-Embedder-Policy` instead of `crossOriginEmbedderPolicy` and to not set 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).
+2. add middleware inside of `security` in certain route rule. This is a custom NuxtSecurity addition that does not exists in core Nuxt.
+::
+
+## Disabling functionality
+
+To disable certain middleware or headers, follow this pattern:
+
+```ts
+export default defineNuxtConfig({
+  // global
+  security: {
+    headers: {
+      // certain header
+      contentSecurityPolicy: false
+    },
+
+    // certain middleware
+    rateLimiter: false
+  },
+
+  // per route
+  routeRules: {
+    '/custom-route': {
+      security: {
+        rateLimiter: false
+      }
+    }
+  }
+})
+```

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

@@ -0,0 +1,31 @@
+# Contributing
+
+We can never thank you enough for your contributions. ❤️
+
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+::alert{type="info"}
+ℹ Read more about Nuxt contribution guide [here](https://nuxt.com/docs/community/contribution).
+::
+
+## How to contribute?
+
+- Clone [nuxt-security](https://github.com/Baroshem/nuxt-security) repository
+- Install dependencies using `yarn`
+- Run `yarn dev:prepare` to generate type stubs.
+
+## Nuxt Security
+
+- Use `yarn dev` to start the [playground](https://github.com/Baroshem/nuxt-security/tree/main/playground) in development mode.
+- Apply your changes
+- Add tests into the [test/](https://github.com/Baroshem/nuxt-security/tree/main/test) directory and run `yarn test` to make sure they pass.
+- Check the code style with `yarn lint`
+- Before creating a PR, make sure to run `yarn build` and that no errors are reported.
+
+### Documentation
+
+- Use `yarn dev:docs` to start the [documentation](https://github.com/Baroshem/nuxt-security/tree/main/docs) in development mode.
+- Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+- Update the content of the documentation in the [docs/content/](https://github.com/Baroshem/nuxt-security/tree/main/docs/content) directory.

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

@@ -4,6 +4,8 @@ Find answers for difficult questions.
 
 ---
 
+:ellipsis{right=0px width=75% blur=150px}
+
 ## Testing CORS configuration
 
 In the default configuration for CORS in Nuxt Security module, only the request that is coming from your origin (the same host by default) will be accepted and others will be rejected.

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

@@ -42,10 +42,10 @@
     "dev:generate": "nuxi generate playground",
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
     "dev:preview": "nuxi preview playground",
+    "dev:docs": "cd docs && yarn dev",
     "lint": "eslint --ext .js,.ts,.vue",
     "test": "vitest run --silent",
     "test:watch": "vitest watch",
-    "docs": "cd docs && yarn dev",
     "stackblitz": "cd .stackblitz && yarn && yarn dev"
   },
   "dependencies": {