docs: add docs website (#2)

README.md

@@ -13,13 +13,13 @@
 
 **⚠️ `nuxt-ionic` is currently a work in progress. ⚠️**
 
-- [x] Zero-config required
-- [x] Auto-import Ionic components and composables throughout your app
-- [x] Ionic Router integration
-- [x] Pre-rendering auto-configuration
-- [x] Mobile meta tags
-- [x] PWA support with [`nuxt-pwa-module`](https://github.com/kevinmarrec/nuxt-pwa-module)
-- [x] Works out-of-the-box with Capacitor to build mobile apps
+- Zero-config required
+- Auto-import Ionic components and composables
+- Ionic Router integration
+- Pre-render routes
+- Mobile meta tags
+- PWA support with [`nuxt-pwa-module`](https://github.com/kevinmarrec/nuxt-pwa-module)
+- Works out-of-the-box with [Capacitor](https://capacitorjs.com/) to build mobile apps
 
 ## Quick setup
 

docs/.env.example

@@ -0,0 +1,3 @@
+# Create one with no scope selected on https://github.com/settings/tokens/new
+# This token is used for fetching the repository releases.
+GITHUB_TOKEN=

docs/.gitignore

@@ -0,0 +1,12 @@
+node_modules
+*.iml
+.idea
+*.log*
+.nuxt
+.vscode
+.DS_Store
+coverage
+dist
+sw.*
+.env
+.output

docs/components/Logo.vue

@@ -0,0 +1,21 @@
+<template>
+  <div
+    class="flex flex-row items-center gap-2 u-text-gray-900 tracking-tight font-extrabold"
+  >
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        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"
+      ></path>
+    </svg>
+    nuxt/ionic
+  </div>
+</template>

docs/content/1.index.md

@@ -0,0 +1,35 @@
+---
+title: 'Get Started'
+navigation: false
+layout: fluid
+---
+
+::block-hero
+---
+cta:
+  - Get Started
+  - /getting-started
+secondary:
+  - Open on GitHub →
+  - https://github.com/danielroe/nuxt-ionic
+snippet: yarn add --dev nuxt-ionic
+---
+
+#title
+Nuxt/[Ionic]{ .text-primary-500 }
+
+#description
+Batteries-included [Ionic](https://ionicframework.com/) integration for Nuxt.
+
+#extra
+::list
+- Zero-config required
+- Auto-import Ionic components and composables
+- Ionic Router integration
+- Pre-render routes
+- Mobile meta tags
+- PWA support with [`nuxt-pwa-module`](https://github.com/kevinmarrec/nuxt-pwa-module)
+- Works out-of-the-box with [Capacitor](https://capacitorjs.com/) to build mobile apps
+::
+
+::

docs/content/2.getting-started.md

@@ -0,0 +1,90 @@
+---
+title: Getting started
+description: ''
+---
+
+## Installation
+
+Add `nuxt-ionic` to your project's dev dependencies:
+
+::code-group
+
+```bash [yarn]
+yarn add --dev nuxt-ionic
+```
+
+```bash [npm]
+npm install nuxt-ionic -D
+```
+
+```bash [pnpm]
+pnpm install nuxt-ionic -D
+```
+
+::
+
+Then add the module to your Nuxt configuration:
+
+```js{}[nuxt.config.js]
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: ['nuxt-ionic']
+})
+```
+
+You're good to go!
+
+## Options
+
+While not required, you can configure the features that are enabled:
+
+```js
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  modules: ['nuxt-ionic'],
+  ionic: {
+    integrations: {
+      //
+    },
+    css: {
+      //
+    },
+  },
+})
+```
+
+### `integrations`
+
+- **meta**
+
+  Default: `true`
+  Disable to take full control of meta tags
+
+- **pwa**
+
+  Default: `true`
+  Disable to take full control of icon generation, manifest and service worker installation
+
+- **router**
+
+  Default: `true`
+  Disable to configure Ionic Router yourself
+
+### `css`
+
+- **core**
+
+  Default: `true`
+  Disable to import these CSS files manually.
+
+- **basic**
+
+  Default: `true`
+  Disable to import these CSS files manually.
+
+- **utilities**
+
+  Default: `false`
+  Enable to add extra Ionic CSS utilities

docs/content/3.usage.md

@@ -0,0 +1,46 @@
+---
+title: Usage
+description: ''
+---
+
+## Page routing
+
+Out of the box, you can start building your Ionic application with by creating routes within `~/pages` directory. To access the router, you should use `useIonRouter()` rather than an import from `vue-router`.
+
+Nuxt utilities like `definePageMeta` will continue to work, but you likely not try to use `<NuxtPage>` or `<NuxtLayout>`.
+
+::alert
+The root component of every page should be the `<ion-page>` component.
+::
+
+## Components
+
+All Ionic Vue components should be auto-imported throughout your app. (If you find one that isn't, please open an issue.) Although your IDE should be aware of these everywhere, they are not globally registered and are only imported within the components that use them.
+
+For more on how component imports work, see [the Nuxt documentation](https://v3.nuxtjs.org/guide/directory-structure/components#components-directory).
+
+## Helper functions
+
+Nuxt provides a number of Ionic hooks/composables via auto-imports within your app:
+
+`createAnimation`, `createGesture`, `getPlatforms`, `getTimeGivenProgression`, `iosTransitionAnimation`, `isPlatform`, `mdTransitionAnimation`, `menuController`, `onIonViewWillEnter`, `onIonViewDidEnter`, `onIonViewWillLeave`, `onIonViewDidLeave`, `useBackButton`, `useKeyboard`, `useIonRouter`
+
+For more on what these do, you can read the [Ionic docs](https://ionicframework.com/docs/). For more on how auto-imports work, see [the Nuxt documentation](https://v3.nuxtjs.org/guide/concepts/auto-imports#auto-imports).
+
+## Advanced
+
+### Customising your root `app.vue`
+
+If you need to customise the default Ionic `app.vue` file, you can create a new one in your project's source directory.
+
+This is the default:
+
+```vue [app.vue]
+<template>
+  <div class="md">
+    <ion-app>
+      <ion-router-outlet />
+    </ion-app>
+  </div>
+</template>
+```

docs/content/4.changelog.md

@@ -0,0 +1,9 @@
+---
+layout: docs
+toc: false
+title: Changelog
+description: Discover the latest updates.
+---
+
+::releases
+::

docs/content/_theme.yml

@@ -0,0 +1,32 @@
+title: nuxt/ionic
+
+layout: docs
+
+url: "https://ionic.roe.dev/"
+
+description: Batteries-included Ionic integration for Nuxt.
+
+socials:
+  twitter: "danielcroe"
+  github: "danielroe/nuxt-ionic"
+
+debug: false
+
+github:
+  root: docs/content
+  edit: true
+  releases: true
+
+header:
+  title: false
+  logo: true
+
+footer:
+  credits:
+    icon: IconDocus
+    text: Powered by Docus
+    href: https://docus.com
+  icons:
+    - label: Nuxt
+      href: https://nuxtjs.org
+      component: IconNuxt

docs/nuxt.config.ts

@@ -0,0 +1,42 @@
+import { defineNuxtConfig } from 'nuxt'
+
+export default defineNuxtConfig({
+  extends: ['./node_modules/@docus/docs-theme'],
+  build: { transpile: [/dist\/runtime/] },
+  github: {
+    owner: 'danielroe',
+    repo: 'nuxt-ionic',
+    branch: 'main',
+  },
+  theme: {},
+  modules: ['@nuxthq/admin', '@docus/github', 'vue-plausible'],
+  plausible: {
+    url: 'ionic.roe.dev',
+  },
+  tailwindcss: {
+    config: {
+      important: true,
+      theme: {
+        extend: {
+          colors: {
+            primary: {
+              '50': '#84c3ff',
+              '100': '#7ab9ff',
+              '200': '#70afff',
+              '300': '#66a5ff',
+              '400': '#5c9bff',
+              '500': '#5291ff',
+              '600': '#4887f5',
+              '700': '#3e7deb',
+              '800': '#3473e1',
+              '900': '#2a69d7',
+            },
+          },
+        },
+      },
+    },
+  },
+  colorMode: {
+    preference: 'dark',
+  },
+})

docs/package.json

@@ -0,0 +1,20 @@
+{
+  "name": "nuxt-ionic-docs",
+  "description": "Batteries-included Ionic integration for Nuxt.",
+  "homepage": "https://github.com/danielroe/nuxt-ionic/",
+  "scripts": {
+    "dev": "nuxi dev",
+    "build": "nuxi build",
+    "generate": "nuxi build",
+    "preview": "nuxi preview"
+  },
+  "devDependencies": {
+    "@docus/docs-theme": "npm:@docus/[email protected]",
+    "@docus/github": "npm:@docus/[email protected]",
+    "nuxt": "^3.0.0-rc.4",
+    "vue-plausible": "^1.3.1"
+  },
+  "resolutions": {
+    "@vercel/nft": "0.18.2"
+  }
+}

docs/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "./.nuxt/tsconfig.json"
+}

package.json

@@ -36,6 +36,8 @@
     "dev": "nuxi dev playground",
     "dev:build": "nuxi build playground",
     "dev:prepare": "pnpm nuxt-module-build --stub && nuxi prepare playground",
+    "docs:dev": "nuxi dev docs",
+    "docs:build": "nuxi generate docs",
     "lint": "pnpm lint:all:eslint && pnpm lint:all:prettier",
     "lint:all:eslint": "pnpm lint:eslint --ext .ts,.js,.mjs,.cjs .",
     "lint:all:prettier": "pnpm lint:prettier \"{src,test}/**/*.{js,json,ts}\"",