docs: add new documentation

docs/.npmrc

@@ -0,0 +1 @@
+shamefully-hoist=true

docs/README.md

@@ -0,0 +1 @@
+# New Directus Nuxt Module Docs

docs/app.config.ts

@@ -0,0 +1,18 @@
+export default defineAppConfig({
+ docus: {
+ title: 'Nuxt Directus',
+ description: 'Easily connect your Nuxt application to your directus server',
+ image: '/cover.png',
+ socials: {
+ twitter: 'heyconnery',
+ github: 'Intevel/nuxt-directus'
+ },
+ header: {
+ logo: true
+ },
+ github: {
+ owner: 'directus-community',
+ repo: 'nuxt-directus'
+ }
+ }
+})

docs/components/content/Logo.vue

@@ -0,0 +1,18 @@
+
+<template>
+ <svg
+ xmlns="http://www.w3.org/2000/svg"
+ width="128"
+ height="32"
+ viewBox="0 0 655 400"
+ fill="none"
+ class="h-8 text-[#000000] dark:text-white"
+ >
+ <path
+ fill-rule="evenodd"
+ clip-rule="evenodd"
+ d="M523.601 252.423C520.562 251.663 518.03 250.904 515.75 249.891C514.066 249.142 512.658 248.255 511.424 247.23C510.604 246.548 510.253 245.475 510.354 244.414C511.576 231.693 510.232 220.473 511.445 207.858C516.51 156.708 548.672 172.914 577.543 164.558C594.121 159.889 610.699 150.699 616.757 132.622C617.749 129.663 616.876 126.445 614.814 124.102C595.903 102.602 574.966 83.6047 552.218 67.324C475.953 13.0326 376.837 -9.51171 285.815 3.67573C282.367 4.17531 280.559 7.99477 282.443 10.9256C293.971 28.8624 309.18 43.5413 326.621 54.3456C329.791 56.309 328.517 60.5504 324.879 59.7348C316.325 57.8172 305.335 54.0776 294.999 46.7845C294.003 46.0817 292.719 45.9047 291.587 46.3562C286.966 48.1987 280.294 50.8554 274.779 53.2355C271.605 54.6056 270.959 58.6986 273.572 60.9629C319.29 100.587 385.799 106.61 437.877 74.9015C441.05 72.9698 446.129 76.9392 445.108 80.5098C443.471 86.2295 441.559 94.0919 439.523 104.8C426.608 170.129 389.38 165.064 343.29 148.606C251.192 115.23 198.943 143.731 152.491 87.3124C149.263 83.3922 143.589 82.0331 139.749 85.3568C130.16 93.658 124.485 105.775 124.485 118.726C124.485 134.067 132.404 147.207 144.143 155.073C145.611 156.057 147.562 155.641 148.658 154.254C151.519 150.634 153.859 148.235 156.773 146.717C159.962 145.056 161.517 149.618 158.825 152.001C148.959 160.736 146.127 171.14 139.68 191.652C129.55 223.81 133.855 256.728 86.4978 265.337C61.4264 266.603 61.9329 283.568 52.8161 308.89C42.2354 339.452 28.3803 352.989 2.73808 379.696C-0.768963 383.349 -1.0697 389.189 2.78449 392.474C13.0273 401.202 23.5906 401.682 34.3291 397.261C60.9199 386.12 81.4329 351.683 100.68 329.4C122.206 304.585 173.868 315.22 212.868 290.912C233.901 278.016 246.539 261.544 242.497 236.869C241.846 232.894 246.394 230.506 248.044 234.18C251.175 241.155 253.228 248.596 254.082 256.283C254.305 258.299 256.107 259.79 258.132 259.676C300.326 257.304 354.891 303.838 405.884 316.429C408.985 317.194 411.19 313.613 409.437 310.942C406.21 306.03 403.468 300.932 401.283 295.723C399.028 290.311 397.319 285.06 396.11 279.992C395.165 276.028 400.957 274.963 402.934 278.527C416.012 302.097 442.148 324.23 478.523 326.868C490.932 327.881 504.608 326.361 518.789 322.057C535.757 316.993 551.458 310.409 570.198 313.954C584.127 316.486 597.042 323.576 605.146 335.477C616.518 352.059 640.522 356.452 653.316 339.122C655.058 336.764 655.204 333.611 654.053 330.915C625.882 264.892 554.348 260.357 523.601 252.423Z"
+ fill="currentColor"
+ />
+ </svg>
+</template>

docs/components/content/feedback-box.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+import { ref } from "vue";
+
+const isSubmitted = ref(false);
+
+async function submitFeedback(feedback: number) {
+ if (typeof window !== "undefined") {
+ const user_id = window.localStorage.getItem("feedback-uuid");
+
+ if (!user_id) return;
+
+ await $fetch("https://directus.conner-bachmann.de/feedback", {
+ method: "POST",
+ body: {
+ feedback: feedback,
+ route: useRoute().path,
+ user_id,
+ },
+ headers: {
+ "Content-Type": "application/json",
+ },
+ });
+
+ isSubmitted.value = true;
+ }
+}
+</script>
+
+<template>
+ <div class="feedback-box-wrapper">
+ <div v-if="!isSubmitted">
+ <p>What do you think?</p>
+ <h2>How helpful was this article?</h2>
+ <div class="feedback-box-list">
+ <div class="feedback-box-item" @click="submitFeedback(1)">
+ <h3>Worst Doc ever 🥲</h3>
+ </div>
+ <div class="feedback-box-item" @click="submitFeedback(2)">
+ <h3>Not helpful 🤬</h3>
+ </div>
+ <div class="feedback-box-item" @click="submitFeedback(3)">
+ <h3>Helpful 😊</h3>
+ </div>
+ <div class="feedback-box-item" @click="submitFeedback(4)">
+ <h3>Super Helpful 😍</h3>
+ </div>
+ </div>
+ </div>
+ <div v-else class="transition-opacity">
+ <h2>Thank you for your feedback!</h2>
+ </div>
+ </div>
+</template>
+
+<style scoped>
+.feedback-box-wrapper {
+ display: flex;
+ justify-content: start;
+ flex-direction: column;
+ text-align: start;
+ padding: 1rem;
+ border: 2px #9661ffcc dashed;
+ border-radius: 5px;
+}
+
+p {
+ color: gray;
+ font-size: 1rem;
+}
+
+h2 {
+ font-size: 1.2rem;
+ font-weight: bold;
+}
+
+.feedback-box-list {
+ display: flex;
+ justify-content: start;
+ flex-direction: row;
+ margin-top: 1rem;
+}
+
+.feedback-box-item {
+ padding: 0.3rem 0.5rem;
+ border: 2px #3c3c3c6c solid;
+ border-radius: 10px;
+ margin-right: 0.8rem;
+}
+
+.feedback-box-item:hover {
+ cursor: pointer;
+ background-color: #9661ff;
+ color: white;
+}
+
+</style>

docs/content/0.index.md

@@ -0,0 +1,32 @@
+---
+title: Home
+description: 🐰 Easily integrate Directus to your Nuxt application.
+navigation: false
+layout: page
+---
+
+::block-hero
+---
+cta:
+ - Get Started
+ - /getting-started/setup
+secondary:
+ - Star on GitHub →
+ - https:/directus-community/nuxt-directus
+snippet: npm i -D nuxt-directus
+---
+
+#title
+Nuxt Directus
+
+#description
+🐰 Easily integrate [Directus](https://directus.io) to your [Nuxt](https://nuxt.com) application.
+
+#extra
+ ::list
+ - Nuxt 3 ready
+ - Handle authentication
+ - RESTful methods
+ - TypeScript support
+ ::
+::

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

@@ -0,0 +1,61 @@
+# Setup
+
+Connect to Directus easily from Nuxt with following commands ✨
+
+---
+
+## Installation
+
+1. Add `nuxt-directus` dependency to your project:
+
+::code-group
+
+```bash [Yarn]
+yarn add --dev nuxt-directus
+```
+
+```bash [NPM]
+npm install --save-dev nuxt-directus
+```
+
+```bash [PNPM]
+pnpm add -D nuxt-directus
+```
+
+::
+
+2. Add it to your `modules` section in your `nuxt.config`:
+
+```ts
+export default defineNuxtConfig({
+ modules: ['nuxt-directus']
+})
+```
+
+3. Configure your Directus Server in the `nuxt.config`:
+
+```ts
+export default defineNuxtConfig({
+ modules: ['nuxt-directus'],
+ directus: {
+ url: ""
+ }
+})
+```
+
+## Options
+
+You can customize the module's behavior by using the `directus` property in `nuxt.config`:
+
+```ts [nuxt.config]
+export default {
+ directus: {
+ // Options
+ }
+}
+```
+
+See the [module options](/getting-started/options).
+
+::feedback-box
+::

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

@@ -0,0 +1,41 @@
+# Options
+
+Configure Nuxt Directus easily with the `directus` property.
+
+---
+
+```ts [nuxt.config]
+export default {
+ // Defaults options
+ directus: {
+ autoFetch: true,
+ }
+}
+```
+
+## `url`
+
+- No default - **Required**
+
+The url to which requests are made to. 
+
+## `autoFetch`
+
+- Default: `true`
+
+Should the user be fetched automatically
+
+## `fetchUserParams`
+
+- No default - **Optional**
+
+The Parameters which should be sent when the user is fetched, see [DirectusQueryParams](https:/directus-community/nuxt-directus/blob/313a5a227e1d8b88a43d92c79b47a87d92a21fc5/src/runtime/types/index.d.ts#L26)
+
+## `token`
+
+- No default - **Optional**
+
+A static token
+
+::feedback-box
+::

docs/content/1.getting-started/_dir.yml

@@ -0,0 +1,2 @@
+title: Getting Started
+icon: heroicons-outline:lightning-bolt

docs/content/en/usage/useDirectusAuth.md → docs/content/2.composables/1.useDirectusAuth.md

@@ -1,8 +1,5 @@
----
-title: "useDirectusAuth"
-description: "Learn how to use Nuxt & Directus"
-position: 10
-category: "Usage"
+# `useDirectusAuth`
+
 ---
 
 > Check out the Directus [Authentication](https://docs.directus.io/reference/authentication/) documentation.
@@ -57,7 +54,7 @@ const router = useRouter();
 
 const onSubmit = async () => {
  try {
- var newUser = await createUser({ email: "", password: "" });
+ const newUser = await createUser({ email: "", password: "" });
  } catch (e) {}
 };
 </script>
@@ -132,3 +129,6 @@ definePageMeta({
 })
 </script>
 ```
+
+::feedback-box
+::

docs/content/en/usage/useDirectusUser.md → docs/content/2.composables/2.useDirectusUser.md

@@ -1,8 +1,5 @@
----
-title: "useDirectusUser"
-description: "Learn how to use Nuxt & Directus"
-position: 9
-category: "Usage"
+# `useDirectusUser`
+
 ---
 
 If you are logged in you can access the user everywhere, if you are not logged in `undefined` is returned.
@@ -11,6 +8,9 @@ If you are logged in you can access the user everywhere, if you are not logged i
 <script setup>
 const user = useDirectusUser();
 
-var email = user.value.email;
+const email = user.value.email;
 </script>
 ```
+
+::feedback-box
+::