[WIP] Add interactive button to run get-started/ tutorials as Google Colabs, Katacoda, Kaggle kernels, etc. #670

[iAdramelk]

This is a first draft for the feature then we show links to tutorials in the sidebar.

We can add links to tutorials to the sidebar.json file now like that:

tutorials: {
  katacoda: "https://www.katacoda.com/loodse/courses/docker/docker-02-install"
}

I assume for now that we will only have one tutorial link per site. If it is not correct, we will need to change the structure.

Links will be shown in the right panel on the documentation page under the list of headers. If the tutorial's key is in the list of known sites, an icon will be shown before it (right now, I only added katacoda.com icon).

You can check how it looks right now at the /doc/get-started/connect-code-and-data page.

ToDo:

• Update design.
• Add multiple tutorial site icons. (And somehow decide how we can get icons that we can use according to copyright).
• Replace an example link with the real links to the tutorials.

[iAdramelk]

Direct link to example: https://dvc-org-pr-824.herokuapp.com/doc/get-started/connect-code-and-data

[shcheklein]

Great stuff! 🎉

Can we make it a button - similar to Github and Chat?

Let's also show the Katacoda icon (+tooltip that explains it when you hover) and/or play button after the top title? We need to make it a bit more visible.

[dashohoxha]

In my opinion, this button on the right side makes sense only if it is used on the index page of Get Started and the index page of the tutorials, namely:

• https://dvc.org/doc/get-started
• https://dvc.org/doc/tutorials/versioning
• https://dvc.org/doc/tutorials/pipelines
• https://dvc.org/doc/tutorials/deep

But this is ok, since on the other cases we can use simple links (or styled links), like those that I have proposed here: https://github.com/iterative/dvc.org/pull/786/files

In particular, for command references or UG pages there may be more than one relevant interactive examples, and they may correspond to specific parts of the page (like example sections) not to the whole page, so using inline links might be more suitable than buttons on the right side.

One thing that might be useful for inline links is to style them like a button, if possible. For example we can use a syntax like this:

<button class="interactive">
  [Try interactive example](https://katacoda.com/dvc/courses/examples/fetch)
</button>

But this is not related to this PR.

[shcheklein]

I don't see a good place for explicit links - before content they distract too much, after content they are not visible.

I think PR deprecates the one here #786 . If we'll need multiple buttons, or a button per example we'll use links and/or add a special syntax.

[iAdramelk]

@shcheklein Replaced tutorials to the ones from #786, updated link to look like button, made katacoda icon larger.

What should we write in the tooltip?

[shcheklein]

Let's change screen icon with a play button icon.

Tooltip. Do you mean that "Need a tutorial?" text? I would replace it with "It can be run online".

We need to do something with a mobile version. As I suggested let's show an icon close to the main title.

@dashohoxha @jorgeorpinel what do you think, is the current button visible enough?

[shcheklein]

A few minor comments and suggested improvements. Good stuff @iAdramelk 🎉

[dashohoxha]

what do you think

I don't really have anything to say, other than @iAdramelk has done a nice job.

[iAdramelk]

Added mobile styles for the tutorial buttons and changed icon+text for the right column.

[shcheklein]

@iAdramelk looks great! One issue I see is that button is not clickable on the mobile version, some minor bug probably.

[shcheklein]

Also, please rebase/merge.

[jorgeorpinel]

Should the description say "Fixes #670"?

Direct link to example: https://dvc-org-pr-824.herokuapp.com/doc/get-started/connect-code-and-data

@jorgeorpinel what do you think, is the current button visible enough?

I don't see the button at the moment. Please lmk when to review. 🙂

[shcheklein]

@jorgeorpinel check this link - https://dvc-org-pr-824.herokuapp.com/doc/get-started :)

[iAdramelk]

Fixed bug with unclickable buttons, and rebased branch to master.

[shcheklein]

@iAdramelk looks great!

Out of three checkboxes what are still pending? I'm not sure I understand the Add multiple tutorial site icons.

Update design, I assume, is done, right?

[iAdramelk]

@shcheklein If we are ok with the design, we can check design item out.

Add multiple tutorial site icons – it is about different possible platforms that we can use in the future. Right now I only added Katacoda icon, but I didn't add icons for Kaggle, Google Collabs and other platforms. Not sure if we need them right now through.

Replace an example link with the real links to the tutorials. – I transferred 4 links that I know about from the other PR. But I'm not sure if I found and added all of the existing tutorials on Katacoda.

[dashohoxha]

But I'm not sure if I found and added all of the existing tutorials on Katacoda.

Right now there are also these corresponding Katacoda tutorials that you might add:

• https://dvc.org/doc/tutorials/versioning --> https://katacoda.com/dvc/courses/tutorials/versioning
• https://dvc.org/doc/tutorials/pipelines --> https://katacoda.com/dvc/courses/tutorials/pipelines
• https://dvc.org/doc/tutorials/deep --> https://katacoda.com/dvc/courses/tutorials/pipelines

[dashohoxha]

@iAdramelk you might also need to fix this PR by adding interactive buttons to the corresponding pages: #784
But I am not sure, you may need approval for doing this.
Anyways, it might be better to wait until that PR is merged (if it is merged) and add the interactive buttons later.

[iAdramelk]

@dashohoxha added links to the three pages above (same link for pipelines and deep). Will skip #784 for now.

[shcheklein]

@dashohoxha I would also probably add button to some get started sections to point to specific Get Started interactive tutorials? That was the idea, right?

[shcheklein]

@iAdramelk

Thanks : 🙏

Not sure if we need them right now through.

we don't need them now

Replace an example link with the real links to the tutorials.

No need to do all the links as part of this PR. This is about engine in the first place.