refactor: Added links to documentation in jsdoc

performance(docs): Removed redundant module - @formkit/auto-animate
oyedejioyewole · Jan 4, 2024 · 207ae4d · 207ae4d
1 parent 27e1035
commit 207ae4d
Show file tree

Hide file tree

Showing 10 changed files with 167 additions and 25 deletions.
diff --git a/docs/components/IntroBanner.vue b/docs/components/IntroBanner.vue
@@ -32,12 +32,11 @@ function generateIcons() {
 
 <template>
   <header
-    class="mx-auto grid h-screen w-[90%] select-none place-content-center gap-y-20 lg:w-3/4"
+    class="mx-auto grid h-screen w-[90%] place-content-center gap-y-20 lg:w-3/4"
   >
-    <h1
-      class="bg-gradient-to-r from-primary-400 via-primary-500 to-primary-400 bg-clip-text text-center font-serif text-5xl text-transparent lg:text-7xl"
-    >
-      Bootstrap Icons meets Nuxt
+    <h1 class="font-serif text-5xl text-primary-900 lg:text-7xl">
+      <span class="text-primary-500">Bootstrap Icons</span> meets
+      <span class="text-primary-500">Nuxt</span>
     </h1>
 
     <!-- Icon grid -->
@@ -53,8 +52,8 @@ function generateIcons() {
       </div>
     </div>
 
-    <!-- Try now -->
     <div class="flex flex-col justify-between gap-y-4 lg:flex-row">
+      <!-- Copy code -->
       <button
         class="flex w-full items-center justify-center gap-x-2 rounded-lg bg-primary-300 py-3 text-sm text-primary-900 lg:w-3/4 lg:gap-x-4"
         @click="copyToClipboard(($event.target as HTMLElement).innerText)"
@@ -63,11 +62,13 @@ function generateIcons() {
         <code>pnpm add -D nuxt-bootstrap-icons</code>
       </button>
 
+      <!-- Go to release notes -->
       <NuxtLink
         class="flex w-full items-center justify-center gap-x-2 rounded-full border border-primary-500 p-3 text-primary-500 transition hover:bg-primary-500 hover:text-primary-100 lg:w-[200px] lg:justify-around lg:gap-x-0"
         to="/release-notes"
-        >Release Notes <BootstrapIcon class="text-xl" name="arrow-right"
-      /></NuxtLink>
+      >
+        Release Notes <BootstrapIcon class="text-xl" name="arrow-right" />
+      </NuxtLink>
     </div>
   </header>
 </template>
diff --git a/docs/components/OgImage/Page.vue b/docs/components/OgImage/Page.vue
@@ -20,8 +20,7 @@ defineProps<{ title: string; description: string }>();
           );
         "
       >
-        <!-- <BootstrapIcon icon-name="bootstrap" /> -->
-        <!-- <PhosphorIconPhosphorLogo size="100" /> -->
+        <BootstrapIcon name="bootstrap" />
       </div>
     </div>
   </div>

diff --git a/docs/content/index.md b/docs/content/index.md
@@ -0,0 +1,105 @@
+---
+title: Documentation · nuxt-bootstrap-icons
+description: A simple wrapper for Bootstrap Icons in Nuxt
+---
+
+# Documentation
+
+If you are reading this, I want to take a moment to thank you for trying out this module 😅
+
+## Setup
+
+Follow the following steps to start using this module:
+
+1. Add the `nuxt-bootstrap-icons` module to your project as a `devDependency`
+
+   ```bash
+   $ pnpm add -D nuxt-bootstrap-icons
+   ```
+
+2. Add the module to the `modules` section of the `nuxt.config.ts`
+
+   ```ts
+   export default defineNuxtConfig({
+     bootstrapIcons: {}, // Override module options,
+     devtools: { enabled: true },
+     modules: ["nuxt-bootstrap-icons"],
+   });
+   ```
+
+Congratulations 🎉, you can now use any icon from Bootstrap Icons in your Nuxt project!
+
+Browse the available of icons [here.](https://icons.getbootstrap.com/)
+
+Before hurrying on now, lets go through some possible configuration you might want to do!
+
+## Configuration
+
+You can configure the module using the `bootstrapIcons` key in the `nuxt.config.ts`
+
+### Options
+
+<br>
+
+#### `display`
+
+1. **Default**: `inline`
+2. **Description**: Choose how you want to register and display components.
+3. **Type**: `String`
+
+```ts
+export default defineNuxtConfig({
+  bootstrapIcons: {
+    display: "inline", // or 'component'
+  },
+});
+```
+
+**Note**: When using `inline`, the module will register a component (depending on your prefix) which you can then use to display icons through the `name` property.
+
+On the other hand, when using `component`, the module will register all the available icons as components (prefixed from value in `nuxt.config`) which you can then use normally in your project.
+
+<br>
+
+#### `expose`
+
+1. **Default**: `false`
+2. **Description**: Enable to register components globally.
+3. **Type**: `Boolean`
+
+```ts
+export default defineNuxtConfig({
+  bootstrapIcons: {
+    expose: true,
+  },
+});
+```
+
+<br>
+
+#### `prefix`
+
+1. **Default:** `bootstrap-icon` or `BootstrapIcon`
+2. **Description:** The prefix of the component names.
+3. **Type:** `String`
+
+```ts
+export default defineNuxtConfig({
+  bootstrapIcons: {
+    prefix: "your-prefix", // or YourPrefix
+  },
+});
+```
+
+**Note**: if you have a multi word prefix, you should include a &mdash; between the words.
+
+<br>
+
+#### `showList`
+
+1. **Default:** `true`
+2. **Description:** Enable to generate a virtual file with the list of registered components at
+
+   `#build/nuxt-bootstrap-icons.json`
+
+3. **Type:** `Boolean`
diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue
@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <slot />
+
+    <footer class="mx-auto flex items-center justify-between py-10 lg:w-1/2">
+      <h1 class="text-lg tracking-wide text-primary-900">
+        Made with 🧋 · Hosted on Vercel
+      </h1>
+
+      <div class="flex items-center gap-x-4">
+        <!-- Repository -->
+        <NuxtLink
+          target="_blank"
+          to="https://github.com/OyewoleOyedeji/nuxt-bootstrap-icons"
+        >
+          <BootstrapIcon class="text-xl" name="github" />
+        </NuxtLink>
+
+        <!-- Nuxt -->
+        <NuxtLink target="_blank" to="https://nuxt.com">
+          <svg
+            width="25"
+            height="25"
+            viewBox="0 0 512 512"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M281.44 397.667H438.32C443.326 397.667 448.118 395.908 452.453 393.427C456.789 390.946 461.258 387.831 463.76 383.533C466.262 379.236 468.002 374.36 468 369.399C467.998 364.437 466.266 359.563 463.76 355.268L357.76 172.947C355.258 168.65 352.201 165.534 347.867 163.053C343.532 160.573 337.325 158.813 332.32 158.813C327.315 158.813 322.521 160.573 318.187 163.053C313.852 165.534 310.795 168.65 308.293 172.947L281.44 219.587L227.733 129.13C225.229 124.834 222.176 120.307 217.84 117.827C213.504 115.346 208.713 115 203.707 115C198.701 115 193.909 115.346 189.573 117.827C185.238 120.307 180.771 124.834 178.267 129.13L46.8267 355.268C44.3208 359.563 44.0022 364.437 44 369.399C43.9978 374.36 44.3246 379.235 46.8267 383.533C49.3288 387.83 53.7979 390.946 58.1333 393.427C62.4688 395.908 67.2603 397.667 72.2667 397.667H171.2C210.401 397.667 238.934 380.082 258.827 346.787L306.88 263.4L332.32 219.587L410.053 352.44H306.88L281.44 397.667ZM169.787 352.44H100.533L203.707 174.36L256 263.4L221.361 323.784C208.151 345.387 193.089 352.44 169.787 352.44Z"
+            />
+          </svg>
+        </NuxtLink>
+
+        <!-- Phosphor Icons -->
+        <NuxtLink target="_blank" to="https://icons.getbootstrap.com">
+          <BootstrapIcon class="text-xl" name="bootstrap-fill" />
+        </NuxtLink>
+      </div>
+    </footer>
+  </div>
+</template>
diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts
@@ -20,7 +20,6 @@ export default defineNuxtConfig({
     "notivue/nuxt",
     "nuxt-bootstrap-icons",
     "nuxt-og-image",
-    "@formkit/auto-animate/nuxt",
     "@nuxt/content",
     "@nuxtjs/google-fonts",
     "@nuxtjs/tailwindcss",

diff --git a/docs/package.json b/docs/package.json
@@ -10,7 +10,6 @@
     "postinstall": "nuxt prepare"
   },
   "devDependencies": {
-    "@formkit/auto-animate": "^0.8.1",
     "@nuxt/content": "^2.10.0",
     "@nuxtjs/google-fonts": "^3.1.3",
     "@nuxtjs/tailwindcss": "^6.10.3",

diff --git a/docs/pages/index.vue b/docs/pages/index.vue
@@ -14,9 +14,9 @@ defineOgImageComponent(
 
 const theme: NotivueTheme = {
   ...pastelTheme,
-  "--nv-success-accent": colors.primary[600],
+  "--nv-success-accent": colors.primary[900],
   "--nv-success-bg": colors.primary[300],
-  "--nv-success-fg": colors.primary[600],
+  "--nv-success-fg": colors.primary[900],
 };
 </script>
 
@@ -42,7 +42,7 @@ const theme: NotivueTheme = {
   }
 
   code {
-    @apply rounded-lg bg-primary-500 px-3 py-1 text-sm;
+    @apply rounded-lg bg-primary-300 px-3 py-1 text-sm;
   }
 
   h1,
@@ -69,7 +69,7 @@ const theme: NotivueTheme = {
     @apply text-xl font-bold lg:text-2xl;
 
     code {
-      @apply rounded-lg bg-primary-500 p-3;
+      @apply rounded-lg bg-primary-400 p-3;
     }
   }
 

diff --git a/docs/pages/release-notes.vue b/docs/pages/release-notes.vue
@@ -14,8 +14,9 @@ defineOgImageComponent(
     <NuxtLink
       to="/"
       class="flex w-fit items-center gap-x-2 rounded-full border border-primary-500 p-3 text-primary-500 transition hover:bg-primary-500 hover:text-primary-100"
-      ><BootstrapIcon class="text-xl" name="arrow-left" /> Go back</NuxtLink
     >
+      <BootstrapIcon class="text-xl" name="arrow-left" /> Go back
+    </NuxtLink>
     <ContentDoc class="space-y-8" id="release-notes" path="/release-notes" />
   </main>
 </template>

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/module.ts b/src/module.ts
@@ -15,27 +15,32 @@ export interface ModuleOptions {
    * Choose how you want to register and display components
    *
    * @default 'inline'
-   * @link https://nuxt-bootstrap-icons.vercel.app
+   * @link https://nuxt-bootstrap-icons.vercel.app#display
    */
   display: "inline" | "component";
 
   /**
    * Enable to register components globally
    *
    * @default false
+   * @link https://nuxt-bootstrap-icons.vercel.app#expose
    */
   expose: boolean;
 
   /**
    * The prefix of the component names
    *
    * @default "bootstrap-icon" or "BootstrapIcon"
+   * @link https://nuxt-bootstrap-icons.vercel.app#prefix
    */
   prefix: string;
 
   /**
    * Enable to generate a virtual file with the list
    * of registered components at `#build/nuxt-bootstrap-icons.json`
+   *
+   * @default false
+   * @link https://nuxt-bootstrap-icons.vercel.app#showlist
    */
   showList: boolean;
 }