Docs: add vuepress documentation

[mysticatea]

This is working in progress.

I'm trying to make the documentation with VuePress.

You can review it with:

1. Checkout this branch.
2. npm install
3. npm run docs:watch
4. Open http://localhost:8080/eslint-plugin-vue/

It will be similar to https://mysticatea.github.io/eslint-plugin-es/

---

Pros:

• We get more structured pages. (E.g., the rule list in the sidebar)
• We get interactive sample code blocks. (Likely https://mysticatea.github.io/eslint-plugin-es/rules/no-async-iteration.html)
  • These code blocks are made with vue-eslint-editor and eslint4b.

Cons:

• It's hard to keep old version's content.

[armano2]

@michalsnik your package tree is broken, remove node_modules, package-lock and npm i again

its bug with npm

Sounds like you have encountered this npm's bug eslint/eslint#11018.
Please try to remove package-lock.json and node_modules then re-install all.

[michalsnik]

Weird @armano2. First thing I did was to remove node_modules and clean cache, but it didn't help. Now I updated this branch on my other computer and it works 🤔

[michalsnik]

I think that's it! And since it's all about documentation there's no better person to mention here, but @chrisvfritz would you give it a look? :) I think It's the final part before releasing v5

[armano2]

@michalsnik looks like fileInfo data is not updated when # title is present

[chrisvfritz]

Really nice work on this! A few, mostly nitpicky comments:

• The negative top margin on blockquotes is looking a little strange directly underneath h1s.

• In the interactive code examples, I'm seeing:

  [ESLint] Parsing error: acorn.Parser.extend is not a function (FATAL)

• The bottom padding of the interactive code examples seems a little excessive and I think might also be increasing a little with each line in the initial code.

• This is definitely a nitpick and something we can skip for now, but is there any chance we could get the interactive code examples styled more similarly to the other code examples?

[armano2]

@chrisvfritz

• arcon.Parser error: Docs: add vuepress documentation #534 (comment)
• coloring is possible and we should do it, currently we are using html schema and we should define one for vue files (it's not defined in editor)

---

if you are going to have issues with arcon.Parse you can preview it here: https://armano2.github.io/eslint-plugin-vue/

[chrisvfritz]

@armano2 Thanks! Apologies for missing that comment in the above thread. 😅 I just checked out the demo you linked to and the interactive editor looks fantastic. 😻

[michalsnik]

I made the negative margin on purpose @chrisvfritz. Do you think we should remove it?

[armano2]

What do you think about using something like this instead:

https://github.com/eldarlabs/ghpages-deploy-script/blob/master/scripts/deploy-ghpages.sh

[michalsnik]

What are the benefits of using it instead? I copied deploy script from the official Vuepress documentation :)

[armano2]

instead of making one commit and force pushing it over and over again, its adding changes only

[michalsnik]

Alright, now or never. Time to ship it. It already grew soo much.