docs(studio): apply notion like editor changes

Author: larbish

docs/content/2.get-started.md

@@ -20,12 +20,15 @@ Add `@nuxtjs/supabase` dev dependency to your project:
 ```bash [pnpm]
 pnpm add -D @nuxtjs/supabase
 ```
+
 ```bash [yarn]
 yarn add --dev @nuxtjs/supabase
 ```
+
 ```bash [NPM]
 npm install @nuxtjs/supabase --save-dev
 ```
+
 ```bash [bun]
 bun add -D @nuxtjs/supabase
 ```
@@ -41,7 +44,7 @@ export default defineNuxtConfig({
 
 Add `SUPABASE_URL` and `SUPABASE_KEY` to the `.env`:
 
-```zsh [env]
+```bash [env]
 SUPABASE_URL="https://example.supabase.co"
 SUPABASE_KEY="<your_key>"
 ```
@@ -65,7 +68,7 @@ export default defineNuxtConfig({
 
 ### `url`
 
-Default: `process.env.SUPABASE_URL` (ex: https://example.supabase.co)
+Default: `process.env.SUPABASE_URL` (ex: <https://example.supabase.co>)
 
 The unique Supabase URL which is supplied when you create a new project in your project dashboard.
 
@@ -81,14 +84,12 @@ Default: `process.env.SUPABASE_SERVICE_KEY`
 
 Supabase 'service role key', has super admin rights and can bypass your Row Level Security.
 
-
 ### `redirect`
 
 Default: `true`
 
 Redirect automatically to the configured login page if a non authenticated user is trying to access a guarded. You can disable all redirects by setting this option to false.
 
-
 ### `redirectOptions`
 
 Default:
@@ -101,10 +102,11 @@ Default:
     cookieRedirect: false,
   }
 ```
-- `login`: User will be redirected to this path if not authenticated or after logout. 
+
+- `login`: User will be redirected to this path if not authenticated or after logout.
 - `callback`: This is the path the user will be redirect to after supabase login redirection. Should match configured `redirectTo` option of your [signIn method](https://supabase.com/docs/reference/javascript/auth-signinwithoauth). Should also be configured in your Supabase dashboard under `Authentication -> URL Configuration -> Redirect URLs`.
 - `exclude`: Routes to exclude from the redirect. `['/foo', '/bar/*']` will exclude the `foo` page and all pages in your `bar` folder.
-- `cookieRedirect`: Sets a cookie containing the path an unauthenticated user tried to access. The cookie can then be used on the [`/confirm`](https://supabase.nuxtjs.org/authentication#confirm-page-confirm) page to redirect the user to the page they previously tried to visit. 
+- `cookieRedirect`: Sets a cookie containing the path an unauthenticated user tried to access. The cookie can then be used on the [`/confirm`](https://supabase.nuxtjs.org/authentication#confirm-page-confirm) page to redirect the user to the page they previously tried to visit.
 
 ### `cookieName`
 
@@ -121,11 +123,13 @@ Cookie name used for storing access and refresh tokens, added in front of `-acce
     secure: true
   }
 ```
+
 Options for cookies used to share tokens between server and client, refer to [cookieOptions](https://nuxt.com/docs/api/composables/use-cookie#options) for available settings. Please note that the lifetime set here does not determine the Supabase session lifetime.
 
 ### `clientOptions`
 
 Default:
+
 ```ts
   clientOptions: {
     auth: {
@@ -135,14 +139,16 @@ Default:
       autoRefreshToken: true
     },
   }
-  ```
+```
 
 Supabase client options [available here](https://supabase.com/docs/reference/javascript/initializing#parameters).
 
 ## Versions
 
 `0.1.x` versions are wrapped around `supabase-js v1`.
-<br>
+
+:br
+
 `1.x.x` versions are wrapped around `supabase-js v2`.
 
 ## Demo

docs/content/3.authentication.md

@@ -1,7 +1,7 @@
 ---
 title: Authentication
 icon: heroicons:lock-closed
-description: 'Authenticate your user thanks to the PKCE Oauth protocol that enables secure exchange of refresh and access tokens between an application and the authorization server'
+description: Authenticate your user thanks to the PKCE Oauth protocol that enables secure exchange of refresh and access tokens between an application and the authorization server
 ---
 
 With the default options, the module requires a log-in page and a confirm page to handle the [PKCE authorization code flow](https://supabase.com/docs/guides/resources/glossary#pkce). If you want to understand how it works under the hood, you can read this [section](https://supabase.com/docs/guides/auth/server-side-rendering#understanding-the-authentication-flow).
@@ -14,8 +14,7 @@ For advanced users who want to implement the auth behaviour themselves, you can
 
 ## Log-in page - `/login`
 
-Each time a user is trying to access a page that needs authentication, he will automatically be redirected to the configured log in page. If you want to allow access to "public" page, you just need to add them in the [exclude](/get-started#redirectoptions) redirect option. 
-
+Each time a user is trying to access a page that needs authentication, he will automatically be redirected to the configured log in page. If you want to allow access to "public" page, you just need to add them in the [exclude](/get-started#redirectoptions) redirect option.
 
 ::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
 Ensure to activate the authentication providers you want in the Supabase Dashboard under `Authentication -> Providers`.
@@ -61,24 +60,47 @@ The confirmation page receives the supabase callback. From there you can check t
 The redirect URL must be configured in your Supabase dashboard under `Authentication -> URL Configuration -> Redirect URLs`.
 ::
 
-
 ```vue [pages/confirm.vue]
 <script setup lang="ts">
 const user = useSupabaseUser()
 
-// Pull in the config to get cookie details
-const config = useRuntimeConfig().public.supabase;
-const { cookieName } = config;
-const redirectPath = useCookie(`${cookieName}-redirect-path`).value;
+watch(user, () => {
+  if (user.value) {
+      // Redirect to protected page
+      return navigateTo('/')
+  }
+}, { immediate: true })
+</script>
+
+<template>
+  <div>Waiting for login...</div>
+</template>
+```
+
+### Redirect path
+
+You can easily handle redirection to the initial requested route after login.
 
+::callout{icon="i-heroicons-light-bulb"}
+You must enable the `cookieRedirect` option of the [redirectOptions](/get-started#redirectoptions) to allow cookie storage and take benefit of this feature.
+::
+
+```vue [pages/confirm.vue]
+<script setup lang="ts">
+const user = useSupabaseUser()
+
+// Get redirect path from cookies
+const config = useRuntimeConfig().public.supabase.cookieName
+const redirectPath = useCookie(`${cookieName}-redirect-path`).value
 
 watch(user, () => {
   if (user.value) {
-      useCookie(`${cookieName}-redirect-path`).value = null // Clear the cookie
-      return navigateTo(redirectPath || '/'); // Redirect or go to protected page
+      // Clear cookie
+      useCookie(`${cookieName}-redirect-path`).value = null
+      // Redirect to path
+      return navigateTo(redirectPath || '/'); 
   }
 }, { immediate: true })
-
 </script>
 <template>
   <div>Waiting for login...</div>

docs/content/4.usage/composables/useSupabaseClient.md

@@ -60,7 +60,7 @@ const { data: restaurant } = await useAsyncData('restaurant', async () => {
 
 ## Realtime
 
-Based on [Supabase Realtime](https://github.com/supabase/realtime), listen to changes in your PostgreSQL Database and broadcasts them over WebSockets. 
+Based on [Supabase Realtime](https://github.com/supabase/realtime), listen to changes in your PostgreSQL Database and broadcasts them over WebSockets.
 
 To enable it, make sure you have turned on the [Realtime API](https://supabase.com/docs/guides/api#realtime-api) for your table.
 
@@ -109,4 +109,3 @@ import type { Database } from '~/types'
 const client = useSupabaseClient<Database>()
 </script>
 ```
-

docs/content/4.usage/services/1.serverSupabaseClient.md

@@ -3,9 +3,8 @@ title: serverSupabaseClient
 description: Make requests to the Supabase API on server side with the serverSupabaseClient service
 ---
 
-
-::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
- This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
+::callout{color="amber" icon="i-heroicons-exclamation-triangle-20-solid"}
+This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
 ::
 
 This function is working similary as the [useSupabaseClient](/usage/composables/usesupabaseclient) composable but is designed to be used in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes).

docs/content/4.usage/services/2.serverSupabaseServiceRole.md

@@ -1,14 +1,15 @@
 ---
 title: serverServiceRole
 description: Make requests with super admin rights to the Supabase API with the serverSupabaseServiceRole service
-navigation.title: serverSupabaseServiceRole
+navigation:
+  title: serverSupabaseServiceRole
 ---
 
-::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
- This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
+::callout{color="amber" icon="i-heroicons-exclamation-triangle-20-solid"}
+This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
 ::
 
-This function is designed to work only in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes), there is no vue composable equivalent. 
+This function is designed to work only in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes), there is no vue composable equivalent.
 
 It works similary as the [serverSupabaseClient](/usage/services/serversupabaseclient) but it provides a client with super admin rights that can bypass your [Row Level Security](https://supabase.com/docs/guides/auth/row-level-security).
 

docs/content/4.usage/services/3.serverSupabaseUser.md

@@ -3,8 +3,8 @@ title: serverSupabaseUser
 description: Get your Supabase user from serverside with the serverSupabaseUser service
 ---
 
-::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"}
- This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
+::callout{color="amber" icon="i-heroicons-exclamation-triangle-20-solid"}
+This section assumes you're familiar with [Nitro](https://v3.nuxtjs.org/guide/concepts/server-engine), the server engine powered by Nuxt.
 ::
 
 This function is similar to the [useSupabaseUser](/usage/composables/usesupabaseuser) composable but is used in [server routes](https://nuxt.com/docs/guide/directory-structure/server#server-routes).

docs/content/5.demo.md

@@ -18,4 +18,4 @@ Follow the instruction in the [demo Readme](https://github.com/nuxt-community/su
 
 ## Source code
 
-The source code is available on Github in the [demo/ directory](https://github.com/nuxt-community/supabase-module/tree/main/demo).
+The source code is available on Github in the [demo/ directory](https://github.com/nuxt-community/supabase-module/tree/main/demo).

docs/content/6.changelog.md

@@ -6,4 +6,5 @@ description: Discover the latest updates of the Supabase Module
 
 Discover the lastest updates.
 
-:releases
+::releases
+::

docs/content/7.roadmap.md

@@ -4,4 +4,8 @@ description: Discover our kaban board for the next release of the Supabase modul
 icon: heroicons:map
 ---
 
-:volta-board{token="eyJzdGF0dXNlcyI6WyJ0cmlhZ2UiLCJiYWNrbG9nIiwidG9kbyIsImluX3Byb2dyZXNzIiwiaW5fcmV2aWV3IiwiZG9uZSIsInJlbGVhc2VkIiwiY2FuY2VsbGVkIl0sImZpbHRlcnMiOnt9LCJvd25lciI6Im51eHQtbW9kdWxlcyIsIm5hbWUiOiJzdXBhYmFzZSJ9"}
+::volta-board
+---
+token: eyJzdGF0dXNlcyI6WyJ0cmlhZ2UiLCJiYWNrbG9nIiwidG9kbyIsImluX3Byb2dyZXNzIiwiaW5fcmV2aWV3IiwiZG9uZSIsInJlbGVhc2VkIiwiY2FuY2VsbGVkIl0sImZpbHRlcnMiOnt9LCJvd25lciI6Im51eHQtbW9kdWxlcyIsIm5hbWUiOiJzdXBhYmFzZSJ9
+---
+::