docs: restore and update documentation (#826)

Author: BobbieGoede

.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 renamed to 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/0.index.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/_dir.yml renamed to docs/content/1.get-started/.navigation.yml

@@ -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/1.introduction.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.
 ::