docs: restore and update documentation

.npmrc

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

docs/.gitignore

@@ -10,3 +10,4 @@ dist
 sw.*
 .env
 .output
+.data

docs/app.config.ts

@@ -1,4 +1,10 @@
 export default defineAppConfig({
+  ui: {
+    colors: {
+      primary: 'blue',
+      neutral: 'zinc',
+    },
+  },
   docus: {
     title: 'nuxt/ionic',
     url: 'https://ionic.nuxtjs.org/',

docs/assets/css/main.css

@@ -0,0 +1,19 @@
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+
+:root {
+--color-blue: oklch(66.85% 0.17582 260.7);
+--color-blue-50: oklch(100% 0 none);
+--color-blue-100: oklch(98.081% 0.00906 258.34);
+--color-blue-200: oklch(89.967% 0.0486 260.89);
+--color-blue-300: oklch(82.018% 0.08975 261.51);
+--color-blue-400: oklch(74.222% 0.13277 261.06);
+--color-blue-500: oklch(66.85% 0.17582 260.7);
+--color-blue-600: oklch(57.957% 0.23039 261.17);
+--color-blue-700: oklch(49.935% 0.22723 261.78);
+--color-blue-800: oklch(40.624% 0.18173 261.53);
+--color-blue-900: oklch(30.965% 0.13179 260.75);
+--color-blue-950: oklch(25.869% 0.105 259.91);
+
+}

docs/components/Logo.vue → docs/components/AppHeaderLogo.vue

@@ -11,21 +11,21 @@
         fill-rule="evenodd"
         clip-rule="evenodd"
         d="M30.4327 9.05578L30.5633 9.36054C31.5211 11.4721 32 13.6925 32 16C32 24.8163 24.8163 32 16 32C7.18367 32 0 24.8163 0 16C0 7.18367 7.18367 0 16 0C18.5905 0 21.0503 0.609524 23.3143 1.7415L23.619 1.89388L23.3578 2.11156C22.7048 2.63401 22.2041 3.28707 21.8776 4.04898L21.7905 4.26667L21.5946 4.17959C19.8313 3.35238 17.9592 2.91701 16 2.91701C8.77279 2.91701 2.91701 8.77279 2.91701 16C2.91701 23.2272 8.77279 29.083 16 29.083C23.2272 29.083 29.083 23.2054 29.083 16C29.083 14.2803 28.7565 12.5823 28.0816 10.9932L27.9946 10.7755L28.2122 10.6884C28.9741 10.4054 29.6707 9.92653 30.215 9.31701L30.4327 9.05578ZM26.4707 9.36057C28.3102 9.36057 29.8014 7.8694 29.8014 6.02996C29.8014 4.19051 28.3102 2.69934 26.4707 2.69934C24.6313 2.69934 23.1401 4.19051 23.1401 6.02996C23.1401 7.8694 24.6313 9.36057 26.4707 9.36057ZM15.9999 8.70754C11.9727 8.70754 8.7074 11.9728 8.7074 16.0001C8.7074 20.0273 11.9727 23.2926 15.9999 23.2926C20.0271 23.2926 23.2924 20.0273 23.2924 16.0001C23.2924 11.9728 20.0271 8.70754 15.9999 8.70754Z"
-        fill="#5291ff"
+        fill="var(--color-blue-500)"
       />
     </svg>
-    nuxt/ionic
+    <span>
+      Nuxt <span style="color: var(--color-blue-500)">Ionic</span>
+    </span>
   </div>
 </template>
 
-<style scoped lang="ts">
-css({
-  '.logo': {
-    display: 'flex',
-    flexDirection: 'row',
-    alignItems: 'center',
-    gap: '0.5rem',
-    fontWeight: '800',
+<style scoped>
+  .logo {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 0.5rem;
+    font-weight: 800;
   }
-})
 </style>

docs/content/1.get-started/1.introduction.md

@@ -3,24 +3,22 @@ navigation.icon: uil:info-circle
 description: 'Batteries-included, zero-config needed, Ionic integration for Nuxt'
 ---
 
-# Introduction
-
 `@nuxtjs/ionic` provides a batteries-included, zero-config needed, Ionic integration for Nuxt.
 
 Supercharge your Ionic apps with the power of Nuxt, giving you the tremendous development experience you're used to
 when using Nuxt for web.
 
 Follow the installation guide to get going immediately, or continue reading to find out more about what this module provides.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Get started with our [Installation guide](/get-started/installation).
 ::
 
 ## What is Ionic?
 
 [The Ionic SDK](https://ionicframework.com/) is an open-source UI toolkit for building modern, cross-platform mobile apps from a single codebase. It deeply integrates with Vue for a delightful mobile dev experience.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read the [Ionic documentation for Vue](https://ionicframework.com/docs/vue/overview) to learn more about Vue development with Ionic.
 ::
 
@@ -37,14 +35,14 @@ This module attempts to get you going with Nuxt + Ionic quickly, providing sane
 - **Capacitor integration**: works out-of-the-box with [Capacitor](https://capacitorjs.com/) for shipping to native platforms like iOS and Android.
 ::
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [our features](/overview).
 ::
 
 ## Cookbook
 
 Our cookbook documentation provides common use-cases with code examples to get you going as fast as possible. And if you create something useful, come back and submit a PR to have it added to our cookbook.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Discover common recipes in [our cookbook](/cookbook).
 ::

docs/content/1.get-started/2.installation.md

@@ -1,12 +1,8 @@
 ---
 navigation.icon: uil:play-circle
-description: 'Get started with the ionic module for Nuxt'
+description: 'Get started quickly by installing and setting up this module with the following instructions.'
 ---
 
-# Installation
-
-Get started quickly by installing and setting up this module with the following instructions.
-
 ## Prerequisites
 
 - A fresh or existing Nuxt project
@@ -16,8 +12,12 @@ Get started quickly by installing and setting up this module with the following
 
 ## Installation
 
+::steps{level=3}
+
+### Add module
+
 Add `@nuxtjs/ionic` to your project's dev dependencies:
-```bash
+```bash [Terminal]
 npx nuxi@latest module add ionic
 ```
 
@@ -32,7 +32,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert{type="warning"}
+::callout{color="warning" icon="i-lucide-alert-triangle"}
 If deploying to iOS or Android, be aware the app must be able to run completely client-side. We recommend setting `ssr: false` in your nuxt config. Find out more in [deploying to both web and device](/cookbook/web-and-device).
 ::
 
@@ -57,11 +57,13 @@ pnpm dev -o
 ```
 
 ::
-
-::alert{type=success icon=✨ .font-bold}
+::callout{color="success" icon="i-lucide-check-circle" .font-bold}
 Well done! A browser window should automatically open for <http://localhost:3000>.
 ::
 
-::alert{type=info}
+
+::callout{color="info" icon="i-lucide-info"}
 The first time you start a Nuxt project with `@nuxtjs/ionic` enabled, a `ionic.config.json` file will be created if it doesn't already exist.
 ::
+
+::

docs/content/1.get-started/3.configuration.md

@@ -1,12 +1,12 @@
 ---
+title: Configuration
+description: >
+  This module provides configuration options for itself, as well as passing through configuration for ionic.
+  Configuration for capacitor is set in the usual way, via capacitor.config.ts.
 navigation.icon: uil:wrench
 ---
 
-# Configuration
 
-This module provides configuration options for itself, as well as passing through configuration for ionic.
-
-Configuration for capacitor is set in the usual way, via capacitor.config.ts.
 
 ### Module Config
 
@@ -97,7 +97,7 @@ export default defineNuxtConfig({
 })
 ```
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Please see the [Ionic Config Options](https://ionicframework.com/docs/vue/config#config-options) for available keys, values
 and examples of how they work.
 ::
@@ -106,6 +106,6 @@ and examples of how they work.
 
 Capacitor is configured via the `capacitor.config.ts` file - this is only required if you are targeting native devices such as iOS or Android.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Please see the [Capacitor Config docs](https://capacitorjs.com/docs/config) for more information.
 ::

docs/content/1.get-started/4.enabling-capacitor.md

@@ -1,9 +1,9 @@
 ---
+title: Enabling Capacitor
+description: ""
 navigation.icon: nonicons:capacitor-16
 ---
 
-# Enabling Capacitor
-
 [Capacitor](https://capacitorjs.com/) is a powerful tool for shipping to native platforms like iOS and Android, separate from or alongside your web app.
 
 The good news is that it's installed by default with `@nuxtjs/ionic`. You just need to enable it in your ionic app, and choose what platforms you want to support.
@@ -44,15 +44,15 @@ ionic capacitor add android
 
 ::
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [creating for iOS and Android here](/cookbook/creating-ios-android-apps).
 ::
 
 #### Run on iOS or Android
 
 Once an Android or iOS project is added with Capacitor, you can run your app on an iOS or Android emulator.
 
-::alert
+::callout
 Android Studio and SDK (for Android projects) or XCode (for iOS projects) are required to use the `npx cap open` or `npx cap run` command. See the [Capacitor Environment Setup docs](https://capacitorjs.com/docs/getting-started/environment-setup) for details.
 ::
 
@@ -65,6 +65,6 @@ To build, sync, and run your app:
 
 > Remember to run `npx cap sync` after every new build to ensure your Android and/or iOS project is up-to-date.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [local development for iOS and Android here](/cookbook/local-development).
 ::

docs/content/1.get-started/5.watch-outs.md

@@ -1,9 +1,9 @@
 ---
+title: Watchouts
+description: ""
 navigation.icon: uil:exclamation-triangle
 ---
 
-# Watchouts
-
 This page aims to succinctly mention things to watch out for when building your Nuxt-powered Ionic application, particularly for those familiar with regular Nuxt and Vue applications.
 
 ## Pages and Navigation
@@ -34,7 +34,7 @@ This is required by Ionic to set up page transitions and stack navigation. Each
 
 A current workaround is to `import { useRoute } from 'vue-router';`.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more [about routing here](/overview/routing).
 ::
 
@@ -46,7 +46,7 @@ This means the various mounted hooks, e.g. `onBeforeMount`, may not be called wh
 
 To help with this, Ionic has added extra lifecycle hooks which behave how you may have expected the mounted hooks to behave.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read about the [Ionic Vue lifecycle hooks here](https://ionicframework.com/docs/vue/lifecycle).
 ::
 
@@ -67,6 +67,6 @@ Because of this, some expected functionality from Nuxt or other modules may not
 
 When targeting iOS or Android devices, the build must be able to run completely on the clientside. We discuss [solutions for if you're targeting both web and device here](/cookbook/web-and-device).
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Learn more about [building for native devices here](/cookbook/creating-ios-android-apps).
 ::

docs/content/2.overview/1.routing.md

@@ -1,11 +1,9 @@
 ---
+title: Routing
+description: Routing within your Nuxt Ionic application will feel very similar, but with a couple of differences.
 navigation.icon: uil:sign-alt
 ---
 
-# Routing
-
-Routing within your Nuxt Ionic application will feel very similar, but with a couple of differences.
-
 By default, this module sets up the Ionic Router, or `IonRouter`. This router is built on top of `vue-router`, but with some changed functionality specifically for making it work better for mobile applications.
 
 ::list{type="success"}
@@ -38,15 +36,15 @@ This is required by Ionic to set up page transitions and stack navigation. Each
 </template>
 ```
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [`<ion-page>` here](https://ionicframework.com/docs/vue/navigation#ionpage).
 ::
 
 ### Defining page meta
 
 Nuxt utilities like `definePageMeta` are fully functional. However, you should avoid using `<NuxtPage>` or `<NuxtLayout>` as these will not function correctly, due to Ionic requiring an `<ion-router-outlet>` instead.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [`definePageMeta` here](https://nuxt.com/docs/api/utils/define-page-meta).
 ::
 
@@ -69,7 +67,7 @@ It will now be used as the root path, and will be routed to by default when visi
 
 Navigation can be done in several ways, using the `IonRouter` or certain `ion-` components.
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read about navigation in [Ionic's Vue Navigation docs](https://ionicframework.com/docs/vue/navigation).
 ::
 
@@ -94,7 +92,7 @@ const customAnimatedNavigation = () => router.navigate('/page2', 'forward', 'rep
 </script>
 ```
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [`useIonRouter() here`](https://ionicframework.com/docs/vue/navigation#navigating-using-useionrouter).
 ::
 
@@ -120,11 +118,11 @@ It's best used when simple routing is required, without any programmatic logic b
 ```
 
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read about [using the `router-link` attribute here](https://ionicframework.com/docs/vue/navigation#navigating-using-router-link).
 ::
 
-::alert{type="warning"}
+::callout{color="warning" icon="i-lucide-alert-triangle"}
 Avoid using `<NuxtLink>` for now as it currently is not integrated with the Ionic Router.
 ::
 
@@ -141,7 +139,7 @@ console.log(route.params.id)
 </script>
 ```
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [Nuxt route parmeters here](https://nuxt.com/docs/getting-started/routing#route-parameters). 
 ::
 
@@ -174,6 +172,6 @@ definePageMeta({
 
 ::
 
-::alert{type="info"}
+::callout{color="info" icon="i-lucide-info"}
 Read more about [Nuxt route middleware here](https://nuxt.com/docs/getting-started/routing#route-middleware).
 ::