feat: created docs

windx-foobar · Jan 24, 2024 · 8e0a99b · 8e0a99b
2 parents 2b3cac2 + ad21185
commit 8e0a99b
Show file tree

Hide file tree

Showing 17 changed files with 3,931 additions and 1,410 deletions.
diff --git a/docs/.gitignore b/docs/.gitignore
@@ -0,0 +1 @@
+.nuxt3
diff --git a/docs/app.config.ts b/docs/app.config.ts
@@ -0,0 +1,44 @@
+export default defineAppConfig({
+  docus: {
+    title: 'Nuxt 3 Notification',
+    description: 'The best place to start your documentation.',
+    // image: 'https://user-images.githubusercontent.com/904724/185365452-87b7ca7b-6030-4813-a2db-5e65c785bf88.png',
+    image: '',
+    socials: {
+      // twitter: 'nuxt_js',
+      github: 'windx-foobar/nuxt3-notifications',
+      // nuxt: {
+      //   label: 'Nuxt',
+      //   icon: 'simple-icons:nuxtdotjs',
+      //   href: 'https://nuxt.com'
+      // }
+      npm: {
+        label: 'NPM',
+        icon: 'simple-icons:npm',
+        href: 'https://www.npmjs.com/package/nuxt3-notifications'
+      }
+    },
+    // github: {
+    //   dir: '.starters/default/content',
+    //   branch: 'main',
+    //   repo: 'docus',
+    //   owner: 'nuxt-themes',
+    //   edit: true
+    // },
+    aside: {
+      level: 1,
+      collapsed: false,
+      exclude: []
+    },
+    main: {
+      padded: true,
+      fluid: false
+    },
+    header: {
+      logo: true,
+      showLinkIcon: true,
+      exclude: [],
+      fluid: false
+    }
+  }
+})
diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
@@ -0,0 +1,10 @@
+<template>
+  <div>Nuxt 3 Notifications</div>
+</template>
+
+<style lang="scss" scoped>
+div {
+  font-size: 1.2rem;
+  font-weight: 600;
+}
+</style>
diff --git a/docs/components/content/Playground.vue b/docs/components/content/Playground.vue
@@ -0,0 +1,240 @@
+<script lang="ts" setup>
+const { notify } = useNotification();
+
+const id = useState('id', () => 0);
+
+function show(group: string, type = '') {
+  const text = `
+    This is notification text!
+    <br>
+    Date: ${new Date()}
+  `;
+
+  notify({
+    group,
+    title: `Test ${type} notification #${id.value++}`,
+    text,
+    type,
+    data: {
+      randomNumber: Math.random()
+    }
+  });
+}
+
+function clean(group: string) {
+  notify({ group, clean: true });
+}
+</script>
+
+<template>
+  <div id="demo">
+    <!-- CSS animation example -->
+    <NuxtNotifications group="foo-css" position="bottom left" :speed="500" />
+
+    <!-- Custom style example -->
+    <NuxtNotifications group="custom-style" position="top center" :max="3" :width="400" />
+
+    <!-- Custom template example -->
+    <NuxtNotifications
+      group="custom-template"
+      :duration="5000"
+      :width="500"
+      position="top left"
+    >
+      <template #body="{ item }">
+        <div class="custom-template">
+          <div class="custom-template-icon">
+            <i class="icon ion-android-checkmark-circle" />
+          </div>
+          <div class="custom-template-content">
+            <div class="custom-template-title">
+              {{ item.title }}
+
+              <p>Random number: {{ item.data.randomNumber }}</p>
+            </div>
+            <div class="custom-template-text" v-html="item.text" />
+          </div>
+          <div class="custom-template-close" @click="close">
+            <i class="icon ion-android-close" />
+          </div>
+        </div>
+      </template>
+    </NuxtNotifications>
+
+    <!-- Full width example -->
+    <NuxtNotifications group="full-width" width="100%" />
+
+    <div class="content">
+      <p>CSS animation:</p>
+      <div class="block">
+        <button class="success" @click="show('foo-css', 'success')">
+          <i class="icon ion-information-circled" />
+          SUCCESS
+        </button>
+        <button class="warn" @click="show('foo-css', 'warn')">
+          <i class="icon ion-alert-circled" />
+          WARNING
+        </button>
+        <button class="error" @click="show('foo-css', 'error')">
+          <i class="icon ion-close-circled" />
+          ERROR
+        </button>
+        <button class="info" @click="show('foo-css', 'info')">
+          <i class="icon ion-close-circled" />
+          INFO
+        </button>
+      </div>
+      <div>
+        <p></p>
+        <p>Custom style:</p>
+        <button @click="show('custom-style')">top center (max=3)</button>
+        <p></p>
+        <p>Custom template:</p>
+        <button @click="show('custom-template')">show top left</button>
+        <p />
+        <button @click="clean('custom-template')"><u>clean all</u> top left</button>
+        <p />
+        <button @click="show('full-width')">show top (full width)</button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+#demo {
+  button {
+    display: inline-block;
+    box-sizing: border-box;
+    border: 0;
+    border-radius: 3px;
+    color: white;
+    vertical-align: top;
+    text-decoration: none;
+    font-size: 12px;
+    font-family: inherit;
+    cursor: pointer;
+    outline: none;
+    transition: all 500ms;
+    padding: 12px;
+    box-shadow: none;
+    background: #02ccba;
+    font-weight: 600;
+    width: 100%;
+    letter-spacing: 1px;
+    box-shadow: 0 5px 15px 0px rgba(46, 61, 73, 0.1);
+
+    &.success {
+      background: #68cd86;
+    }
+
+    &.warn {
+      background: #ffb648;
+    }
+
+    &.error {
+      background: #e54d42;
+    }
+
+    &.info {
+      background: #02ccba;
+    }
+
+    &:active {
+      opacity: 0.8;
+    }
+  }
+
+  .sub-button {
+    display: inline-block;
+    float: right;
+    background: #e54d42;
+    padding: 4px;
+    box-shadow: 0 5px 15px 0px rgba(46, 61, 73, 0.1);
+  }
+
+  /*
+    EXAMPLES
+  */
+  .notification.n-light {
+    margin: 10px;
+    margin-bottom: 0;
+    border-radius: 3px;
+    font-size: 13px;
+    padding: 10px 20px;
+    color: #495061;
+    background: #eaf4fe;
+    border: 1px solid #d4e8fd;
+
+    .notification-title {
+      letter-spacing: 1px;
+      text-transform: uppercase;
+      font-size: 10px;
+      color: #2589f3;
+    }
+  }
+
+  .custom-template {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    text-align: left;
+    font-size: 13px;
+    margin: 5px;
+    margin-bottom: 0;
+    align-items: center;
+    justify-content: center;
+
+    &,
+    & > div {
+      box-sizing: border-box;
+    }
+
+    background: #e8f9f0;
+    border: 2px solid #d0f2e1;
+
+    .custom-template-icon {
+      flex: 0 1 auto;
+      color: #15c371;
+      font-size: 32px;
+      padding: 0 10px;
+    }
+
+    .custom-template-close {
+      flex: 0 1 auto;
+      padding: 0 20px;
+      font-size: 16px;
+      opacity: 0.2;
+      cursor: pointer;
+
+      &:hover {
+        opacity: 0.8;
+      }
+    }
+
+    .custom-template-content {
+      padding: 10px;
+      flex: 1 0 auto;
+      color: black;
+
+      .custom-template-title {
+        letter-spacing: 1px;
+        text-transform: uppercase;
+        font-size: 10px;
+        font-weight: 600;
+      }
+    }
+  }
+
+  .block {
+    display: flex;
+
+    > *:not(:last-child) {
+      margin-right: 30px;
+    }
+  }
+
+  p {
+    margin-bottom: 1rem;
+  }
+}
+</style>
diff --git a/docs/content/0.index.md b/docs/content/0.index.md
@@ -0,0 +1,28 @@
+---
+title: Home
+navigation: false
+layout: page
+main:
+  fluid: false
+---
+
+:ellipsis{right=0px width=75% blur=150px}
+
+::block-hero
+---
+cta:
+  - Get started
+  - /docs/introduction/getting-started
+secondary:
+  - Open on GitHub →
+  - https://github.com/windx-foobar/nuxt3-notifications
+---
+
+#title
+Nuxt 3 notification library 🗨️
+
+#description
+A nuxt module for simplifying the use of [vue3-notification](https://kyvg.github.io/vue3-notification/)
+
+#support
+::