Idea: Link all vue-specific code in code examples

[rigor789]

Moved from nativescript-vue/nativescript-vue#85

---

We will have a lot of code examples in the docs, it would be really nice if all the vue specific syntax would get converted into a clickable link, which would bring up a modal containing official docs about that specific feature.

Example

<Button @tap="doSomething"/>

The @tap part would become a clickable link, which would bring up https://vuejs.org/v2/guide/events.html

Or

<Label v-if="showHello" text="Hello"

v-if="showHello" would become clickable and open https://vuejs.org/v2/guide/conditional.html#v-if

This needs some tinkering to get it right, but I feel like this would make learning nativescript-vue a whole lot easier for newcomers.

[rigor789]

jlooper:

What about having to open up in the playground?

rigor789:

Sure thing, but we would need a way to populate the playground through the url for it to make sense in the long run, updating manually would be a pita i think!

darind:

Actually the Playground already has an undocumented API built exactly for this purpose. It allows white-listed domains to override the content of the default templates. The API could enable websites to dynamically modify the contents of the template before opening it in the Playground:

<script src="https://play.nativescript.org/dist/assets/nsp/index.js"></script>

<script>
function runInPlayground() {
    var overrides = [{
        key: "app.js",
        content: "some new overriden content of the app.js file"
    }];

    window["_nsp"]("play-vue", overrides, err => {
        if (!err) {
            window.location.href = "https://play.nativescript.org/?template=play-vue";
        }
    });
}
</script>

<button onclick="runInPlayground()">
    Run code snippet in the Playground
</button>

If you think that building {N} documentation which allows code snippets to be tested directly into the Playground we could assist with it.