docs(docusaurus): initial documentation on docusaurus (#5)

Author: rogeralbinoi

.dockerignore

@@ -0,0 +1,2 @@
+*/node_modules
+*.log

.env

@@ -0,0 +1 @@
+GIT_USER=rogeralbinoi

Dockerfile

@@ -0,0 +1,10 @@
+FROM node:8.11.4
+
+WORKDIR /app/website
+
+EXPOSE 3000 35729
+COPY ./docs /app/docs
+COPY ./website /app/website
+RUN yarn install
+
+CMD ["yarn", "start"]

docker-compose.yml

@@ -0,0 +1,18 @@
+version: "3"
+
+services:
+  docusaurus:
+    build: .
+    ports:
+      - 3000:3000
+      - 35729:35729
+    volumes:
+      - ./docs:/app/docs
+      - ./website/blog:/app/website/blog
+      - ./website/core:/app/website/core
+      - ./website/i18n:/app/website/i18n
+      - ./website/pages:/app/website/pages
+      - ./website/static:/app/website/static
+      - ./website/sidebars.json:/app/website/sidebars.json
+      - ./website/siteConfig.js:/app/website/siteConfig.js
+    working_dir: /app/website

docs/installation.md

@@ -0,0 +1,27 @@
+---
+id: installation
+title: Installation
+sidebar_label: Installation
+---
+
+
+## YARN
+
+```sh
+yarn add lazyload-vue
+```
+
+## NPM
+
+```sh
+npm install lazyload-vue --save
+```
+
+When used with a module system, you must explicitly install LazyloadVue via Vue.use():
+
+```js
+import Vue from 'vue'
+import LazyloadVue from 'lazyload-vue'
+
+Vue.use(LazyloadVue)
+```

docs/instances.md

@@ -0,0 +1,41 @@
+---
+id: instances
+title: Instances
+---
+
+## Options documentation
+
+Check options section on documentation: [vanilla-lazyload](https://github.com/verlok/lazyload)
+
+## Example
+
+### App.vue
+
+```js
+import LazyloadVue from 'lazyload-vue'
+
+Vue.use(LazyloadVue, {
+    instances: {
+        // configure root instance
+        root: {
+            elements_selector: '.lazy-custom-root'
+        },
+        // optional foobar instance
+        foobar: {
+            elements_selector: '.lazy-webp'
+            to_webp: true // enable switch to webp
+        }
+    }
+})
+```
+
+### MyComponent.vue
+
+```html
+<template>
+  <div>
+    <img v-lazy-src="http://lorempixel.com/300/300">
+    <img v-lazy-src:foobar="http://lorempixel.com/300/300">
+  </div>
+</template>
+```

docs/lazy-container.md

@@ -0,0 +1,21 @@
+---
+id: lazy-container
+title: lazy-container
+---
+
+## Example
+
+```html
+<template>
+  <div v-lazy-container class="scrollingPanel">
+    <img v-lazy-src="http://lorempixel.com/300/300" />
+    ... other images
+  </div>
+</template>
+<style>
+  .scrollingPanel {
+    overflow-y: scroll;
+    -webkit-overflow-scrolling: touch;
+  }
+</style>
+```

docs/lazy-src.md

@@ -0,0 +1,12 @@
+---
+id: lazy-src
+title: lazy-src
+---
+
+## Example
+
+```html
+<template>
+  <img v-lazy-src="http://lorempixel.com/300/300" />
+</template>
+```

docs/what-is.md

@@ -0,0 +1,6 @@
+---
+id: what-is
+title: What is LazyloadVue?
+---
+
+Vue Plugin for [vanilla-lazyload](https://github.com/verlok/lazyload)

website/README.md

@@ -0,0 +1,193 @@
+This website was created with [Docusaurus](https://docusaurus.io/).
+
+# What's In This Document
+
+* [Get Started in 5 Minutes](#get-started-in-5-minutes)
+* [Directory Structure](#directory-structure)
+* [Editing Content](#editing-content)
+* [Adding Content](#adding-content)
+* [Full Documentation](#full-documentation)
+
+# Get Started in 5 Minutes
+
+1. Make sure all the dependencies for the website are installed:
+
+```sh
+# Install dependencies
+$ yarn
+```
+2. Run your dev server:
+
+```sh
+# Start the site
+$ yarn start
+```
+
+## Directory Structure
+
+Your project file structure should look something like this
+
+```
+my-docusaurus/
+  docs/
+    doc-1.md
+    doc-2.md
+    doc-3.md
+  website/
+    blog/
+      2016-3-11-oldest-post.md
+      2017-10-24-newest-post.md
+    core/
+    node_modules/
+    pages/
+    static/
+      css/
+      img/
+    package.json
+    sidebar.json
+    siteConfig.js
+```
+
+# Editing Content
+
+## Editing an existing docs page
+
+Edit docs by navigating to `docs/` and editing the corresponding document:
+
+`docs/doc-to-be-edited.md`
+
+```markdown
+---
+id: page-needs-edit
+title: This Doc Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Editing an existing blog post
+
+Edit blog posts by navigating to `website/blog` and editing the corresponding post:
+
+`website/blog/post-to-be-edited.md`
+```markdown
+---
+id: post-needs-edit
+title: This Blog Post Needs To Be Edited
+---
+
+Edit me...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+# Adding Content
+
+## Adding a new docs page to an existing sidebar
+
+1. Create the doc as a new markdown file in `/docs`, example `docs/newly-created-doc.md`:
+
+```md
+---
+id: newly-created-doc
+title: This Doc Needs To Be Edited
+---
+
+My new content here..
+```
+
+1. Refer to that doc's ID in an existing sidebar in `website/sidebar.json`:
+
+```javascript
+// Add newly-created-doc to the Getting Started category of docs
+{
+  "docs": {
+    "Getting Started": [
+      "quick-start",
+      "newly-created-doc" // new doc here
+    ],
+    ...
+  },
+  ...
+}
+```
+
+For more information about adding new docs, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding a new blog post
+
+1. Make sure there is a header link to your blog in `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+headerLinks: [
+    ...
+    { blog: true, label: 'Blog' },
+    ...
+]
+```
+
+2. Create the blog post with the format `YYYY-MM-DD-My-Blog-Post-Title.md` in `website/blog`:
+
+`website/blog/2018-05-21-New-Blog-Post.md`
+
+```markdown
+---
+author: Frank Li
+authorURL: https://twitter.com/foobarbaz
+authorFBID: 503283835
+title: New Blog Post
+---
+
+Lorem Ipsum...
+```
+
+For more information about blog posts, click [here](https://docusaurus.io/docs/en/adding-blog)
+
+## Adding items to your site's top navigation bar
+
+1. Add links to docs, custom pages or external links by editing the headerLinks field of `website/siteConfig.js`:
+
+`website/siteConfig.js`
+```javascript
+{
+  headerLinks: [
+    ...
+    /* you can add docs */
+    { doc: 'my-examples', label: 'Examples' },
+    /* you can add custom pages */
+    { page: 'help', label: 'Help' },
+    /* you can add external links */
+    { href: 'https://github.com/facebook/Docusaurus', label: 'GitHub' },
+    ...
+  ],
+  ...
+}
+```
+
+For more information about the navigation bar, click [here](https://docusaurus.io/docs/en/navigation)
+
+## Adding custom pages
+
+1. Docusaurus uses React components to build pages. The components are saved as .js files in `website/pages/en`:
+1. If you want your page to show up in your navigation header, you will need to update `website/siteConfig.js` to add to the `headerLinks` element:
+
+`website/siteConfig.js`
+```javascript
+{
+  headerLinks: [
+    ...
+    { page: 'my-new-custom-page', label: 'My New Custom Page' },
+    ...
+  ],
+  ...
+}
+```
+
+For more information about custom pages, click [here](https://docusaurus.io/docs/en/custom-pages).
+
+# Full Documentation
+
+Full documentation can be found on the [website](https://docusaurus.io/).