Why not use Vue/Vue Router/Vue Server Renderer for vuejs.org documentation!

I’m not sure who is the correct people in charge of vuejs.org website (not content but development) and same for others documentation (Vuex, Vue Router, etc.) so I will address this message to @kazupon, @yyx990803, @chrisvfritz or @posva.

Current website

The current website is generated with Hexo that allows us to serve static page generation on GitHub Pages.

Vue, Vue Router and Vue Server Renderer allow us to serve behind each page the full content by HTTP response in the first place (with data-server-rendered="true") and let Vue hydrate that on client-side.

But this is actually not the case in official documentation, and I do not see any Vue + Vue Router script or data-server-rendered="true" in official documentation and that not allows users to navigate in a great reactive website SEO compliant without reloading between each page!

Future website?

1. That’s should be a great thing if the current static website serves pages with dynamic navigation (without reloading page) and with SSR source generated. And it should be great if all of that continues to be on GitHub Pages.

2. That’s should be a great thing if that should be built with actual Vue, Vue Router scripts and using data-server-rendered="true" in pages already generated.

A project like that is under construction? If not, let me do a proposition.

My proposition

1. Create a static website with statics pages generated using Vue Server Renderer as the engine to serve the full content by HTTP response in the first place when a page is requested from GitHub Pages. All pages will contain a data-server-rendered="true" part and the Vue + Vue Router scripts that allow them to be hydrated. When a user will navigate through the website, the navigation will be done by Vue Router. If users reload pages on a navigatied page, it’s the HTTP response that serves the page, and after that, it’s hydratation and Vue Router that serves futures pages… and so on.

2. Conserve the same HTML structure and the same CSS design as the current one. But navigation will not reload pages and later, great animation should be done.

3. Conserve same .md files to continue to write documentation in the same way.

4. Set all text in JSON file ready for localization to not « trap » content text into HTML files.

5. The gh-pages files will be generated by using only one command, exactly same has currently with hexo generate.

To do all that’s things, I propose to use NodeAtlas that is a framework I created and I maintained. It can do all of what I already suggested. That will allow me to enhance the framework with your feedbacks for vuejs.org. Like Hexo, NodeAtlas is capable to generate static content for GitHub Pages and run a development server to test website. It is built with Express and can use Vue Server Renderer to generate static assets from .md files or run a website.

I already try to use dynamic page load from GitHub Pages with HTML History API and SEO content generated from .md files (without Vue, Vue Router and Vue Server Renderer currently) with NodeAtlas here : — NodeAtlas (in fact, the NodeAtlas documentation run with NodeAtlas on GitHub Pages).

I already used NodeAtlas too with Vue, Vue Router and Vue Server Renderer to create SEO Node.js website with real-time exchange thanks to Socket.IO — https://staging.orchard-id.fr/ (under development) — https://staging.orchard-id.com/ (under development)

The next step is just to use node-atlas --generate feature to allow my current Vue website generate statics content for GitHub Pages (I know it’s already possible but this project can be a good real case test for me).

By the way, NodeAtlas can create a documentation language per repository or all languages in same repository (like for Vue Router, Vuex, Vue Server Renderer, etc.). It’s could be possible to use a more consistent website structure across all documentation in future.

Why do you think about a POC on a dedicated repository with some current part of documentation as a model and why not test that on the French website to kept user feedback?

My Resume

I really enjoy Vue community and it’s why I drive the Vue French Community and translate resources in French. I also love JavaScript and it’s why we decided to Orchard ID (my society) to promote Vue.js and NodeAtlas using it for our web app or web site development.

I’m currently a member of Vue Ecosystem:

What I have already done for Vue: — Translate https://github.com/vuejs-fr/vuejs.org with team — Translate https://github.com/vuejs-fr/vue-ssr-docs with team — Review already translated https://github.com/vuejs-fr/vuex with team — Translate https://github.com/vuejs-fr/vue-router with team — Set up https://gitter.im/vuejs-fr/vue (old chat) — Set up https://forum.vuejs.org/c/french

What I have currently done for Vue: — Maintain up-to-date all documentation — Review already translated https://github.com/nuxt/docs with team — Translate https://github.com/vuejs-fr/vue-loader with team — Answers question on old and new Chat — Help to redirect user from old chat to Discord new one — Answers question on French Forum

And why note maintained Vue new website documentation with your help soon!

Resume LinkedIn : https://www.linkedin.com/in/brunolesieur/?locale=en_US Help Stackoverflow : https://stackoverflow.com/users/2412797/bruno-lesieur Project GitHub : https://github.com/Haeresis/

It’s will be an honor to help Vue community with a great reactive website for documentation.

Win-win

That can allow to Vue: — to show with is own website what it can do. — to have structure website and content text fully separate. — to use a documentation generator for GitHub Pages using a tool maintained by a member of Vue ecosystem. — to prepare a more consistent structure across all documentation thanks to the flexibility of NodeAtlas

That can allow to me: — use your feedback and need for documentation to enhance NodeAtlas (and get some help to propose a correct english documentation…). — use NodeAtlas for real used project to help him to be used. — study Vue Server Renderer in depth to allow me to propose a better Vue integration in NodeAtlas. — Participate in an important project for Vue in order to possibly become a core team member a day ❤️.

It’s your turn!

What’s your thoughs about all of this?

[chrisvfritz]

Turning the Vue docs into more of an app is definitely something we’ve considered in the past. It would allow us to do some much more interesting things, but when I’ve scoped it out, it simply hasn’t been worth the time to develop compared to improving the quality of existing content and creating new resources.

That may change a few months from now though and in the meantime, I’d be open to a smaller-scale prototype for a specific part of the docs (e.g. the API, style guide, or cookbook), as an exercise to help us evaluate the feasibility of a rewrite.

Some others that might have thoughts/opinions on this: @pi0 @sdras @phanan @LinusBorg @Jinjiang

[kazupon]

sorry, my mistake at mobile env 🙇