Use VuePress docs (#55)

Author: kyvg

.github/workflows/docs.yml

@@ -0,0 +1,44 @@
+name: docs
+
+on:
+ # trigger deployment on every push to main branch
+ push:
+ branches: [update-docs]
+ # trigger deployment manually
+ workflow_dispatch:
+
+jobs:
+ docs:
+ runs-on: ubuntu-latest
+
+ steps:
+ - uses: actions/checkout@v3
+ with:
+ # fetch all commits to get last updated time or other git log info
+ fetch-depth: 0
+
+ - name: Setup Node.js
+ uses: actions/setup-node@v3
+ with:
+ # choose node.js version to use
+ node-version: 18
+ # cache deps for pnpm
+ cache: npm
+
+ # run build script
+ - run: npm ci
+ - run: npm run build --if-present
+ - run: npm run docs:build
+
+ # please check out the docs of the workflow for more details
+ # @see https://github.com/crazy-max/ghaction-github-pages
+ - name: Deploy to GitHub Pages
+ uses: crazy-max/ghaction-github-pages@v2
+ with:
+ # deploy to gh-pages branch
+ target_branch: gh-pages
+ # deploy the default output dir of VuePress
+ build_dir: docs/.vuepress/dist
+ env:
+ # @see https://docs.github.com/en/actions/reference/authentication-in-a-workflow#about-the-github_token-secret
+ GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -6,6 +6,7 @@ demo/dist
 test/unit/coverage
 *.map
 .vscode
-docs/
 temp/
 dist/src/
+.temp
+.cache

demo/index.html

@@ -0,0 +1,10 @@
+import { defineClientConfig } from "@vuepress/client"
+import Demo from "../.vuepress/components/Demo.vue"
+import Notification from "../../dist/index.es"
+
+export default defineClientConfig({
+ enhance(context) {
+ context.app.use(Notification);
+ context.app.component('Demo', Demo)
+ },
+})

demo/src/main.ts

@@ -1,11 +1,5 @@
 <template>
- <div id="app">
- <h2>
- Vue.js Notification
- <br>
- <a href="https://github.com/kyvg/vue3-notification/blob/master/README.md" target="readme">Readme</a>
- <a href="https://github.com/kyvg/vue3-notification/" target="issues">Github</a>
- </h2>
+ 
  <!-- CSS animation example -->
  <Notifications
  group="foo-css"
@@ -14,15 +8,6 @@
  :speed="500"
  />
 
- <!-- Velocity animation example -->
- <Notifications
- group="foo-velocity"
- position="bottom right"
- animation-type="velocity"
- dangerously-set-inner-html
- :speed="500"
- />
-
  <!-- Custom style example -->
  <notifications
  group="custom-style"
@@ -105,33 +90,6 @@
  </button>
  </div>
 
- <p>
- Velocity animation:
- </p>
-
- <div class="block">
- <button
- class="success"
- @click="show('foo-velocity', 'success')"
- >
- <i class="icon ion-information-circled" />
- SUCCESS
- </button>
- <button
- class="warn"
- @click="show('foo-velocity', 'warn')"
- >
- <i class="icon ion-alert-circled" />
- WARNING
- </button>
- <button
- class="error"
- @click="show('foo-velocity', 'error')"
- >
- <i class="icon ion-close-circled" />
- ERROR
- </button>
- </div>
  <div>
  <p>Custom style:</p>
  <button @click="show('custom-style')">
@@ -151,7 +109,6 @@
  </button>
  </div>
  </div>
- </div>
 </template>
 
 <script>
@@ -162,17 +119,6 @@ export default defineComponent({
  data() {
  return {
  id: 0,
- animation: {
- enter: {
- opacity: [1, 0],
- translateX: [0, -300],
- scale: [1, 0.2],
- },
- leave: {
- opacity: 0,
- height: 0,
- },
- },
  };
  },
  methods: {
@@ -202,86 +148,36 @@ export default defineComponent({
 </script>
 
 <style lang="scss">
-body {
- font-family: 'Avenir', Helvetica, Arial, sans-serif;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-
- padding: 0;
- padding-top: 80px;
- margin: 0;
-
- h2 {
- font-weight: 300;
-
- a {
- color: black;
- font-size: 12px;
- }
- }
-
+.content {
  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);
+ border: none;
+ border-radius: 2000px;
+ padding: 10px 20px;
+ color: #FFFFFF;
+ background-color: var(--code-bg-color);
 
  &.success {
- background: #68CD86;
+ background: var(--c-tip);
  }
 
  &.warn {
- background: #ffb648;
+ background: var(--c-warning);
  }
 
- &.error {
- background: #E54D42;
- }
 
- &:active {
- opacity: 0.8;
+ &.error {
+ background: var(--c-danger);
  }
  }
 
- #app {
- text-align: center;
- color: #2c3e50;
 
- .content {
- margin: 0 auto;
- max-width: 420px;
- }
+ .block {
+ display: flex;
+ gap: 10px;
+ align-items: center;
+ width: 100%;
  }
 }
-
-.sub-button {
- display: inline-block;
- float: right;
- background: #E54D42;
- padding: 4px;
- box-shadow: 0 5px 15px 0px rgba(46, 61, 73, 0.1);
-}
-
 /*
  EXAMPLES
 */

docs/.vuepress/client.ts

@@ -0,0 +1,29 @@
+import { defaultTheme, defineUserConfig } from 'vuepress'
+
+export default defineUserConfig({
+ lang: 'en-US',
+ title: 'Vue.js Notification',
+ base: "/vue3-notification/",
+ theme: defaultTheme({
+ repo: "https://github.com/kyvg/vue3-notification",
+ contributors: false,
+ editLink: true,
+ docsBranch: 'master',
+ colorMode: "light",
+ colorModeSwitch: false,
+ navbar: [
+ {
+ text: "Demo",
+ link: '/'
+ },
+ {
+ text: "Get started",
+ link: "/guide",
+ },
+ {
+ text: "API Reference",
+ link: "/api",
+ },
+ ]
+ }),
+})

demo/src/App.vue docs/.vuepress/components/Demo.vuedemo/src/App.vue renamed to docs/.vuepress/components/Demo.vue

@@ -0,0 +1,7 @@
+---
+sidebar: false
+---
+
+<h2> Vue 3 notification library 💬 </h2>
+
+<demo />

docs/.vuepress/config.ts

@@ -0,0 +1,65 @@
+---
+title: API Reference
+---
+
+<h2> API Reference </h2>
+
+The majority of settings for the Notifications component are configured using props:
+
+```vue
+<notifications
+ position="bottom right" 
+ classes="my-custom-class"
+ :width="200"
+/>
+```
+
+### Props
+
+::: tip
+Note that all props are optional.
+:::
+
+| Name | Type | Default | Description |
+| ---------------- | ------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------- |
+| position | String/Array | 'top right' | Part of the screen where notifications will pop out |
+| width | Number/String | 300 | Width of notification holder, can be `%`, `px` string or number.<br>Valid values: '100%', '200px', 200 |
+| classes | String/Array | 'vue-notification' | List of classes that will be applied to notification element |
+| group | String | null | Name of the notification holder, if specified |
+| duration | Number | 3000 | Time (in ms) to keep the notification on screen (if **negative** - notification will stay **forever** or until clicked) |
+| speed | Number | 300 | Time (in ms) to show / hide notifications |
+| animation-type | String | 'css' | Type of animation, currently supported types are `css` and `velocity` |
+| animation-name | String | null | Animation name required for `css` animation |
+| animation | Object | Custom | Animation configuration for Velocity animation |
+| max | Number | Infinity | Maximum number of notifications that can be shown in notification holder |
+| reverse | Boolean | false | Show notifications in reverse order |
+| ignoreDuplicates | Boolean | false | Ignore repeated instances of the same notification |
+| closeOnClick | Boolean | true | Close notification when clicked |
+| pauseOnHover | Boolean | false | Keep the notification open while mouse hovers on notification |
+| dangerouslySetInnerHtml | Boolean | false | Use [v-html](https://vuejs.org/api/built-in-directives.html#v-html) to set `title` and `text` |
+
+### Events
+| Name | Type | Description |
+| ---------------- | -------------------------------- | -------------------------------------------- |
+| click | (item: NotificationItem) => void | The callback function that is triggered when notification was clicked
+| destroy | (item: NotificationItem) => void | The callback function that is triggered when notification was destroyes
+| start | (item: NotificationItem) => void | The callback function that is triggered when notification was appeared
+
+### Plugin options
+
+Configure the plugin itself using an additional options object:
+
+```js
+app.use(Notifications, { name: "alert" });
+```
+
+::: warning
+Setting `componentName` can cause issues when using SSR.
+:::
+
+All options are optional:
+
+| Name | Type | Default | Description |
+| ------------- | ------ |----------------|-------------------------------------------------------------------------------|
+| name | String | notify | Defines the instance name. It's prefixed with the dollar sign. E.g. `this.$notify` |
+| componentName | String | notifications | The component's name |