ui: add interactive tutorial links to the appropriate pages

[kurianbenoy]

This is to create an easier run time environment for our tutorials like how pytorch docs tutorial has:

https://pytorch.org/tutorials/beginner/blitz/tensor_tutorial.html

[shcheklein]

We can reuse Katacoda's scenarios @dashohoxha is building for this.

[dashohoxha]

Yes, I am working on an interactive version of Get-Started: https://github.com/iterative/dvc.org/issues/664 I don't know whether it will be linked with a button or with a simple link, but this does not seem crucial to me.

[dashohoxha]

I am working on an interactive version of Get-Started

Here it is: https://katacoda.com/dvc/courses/get-started

Actually I did it as a single tutorial first: https://katacoda.com/dvc/courses/tutorials/get-started But it seemed to be too long, taking more than 60min to finish, so I split it in smaller lessons.

I am not sure yet how to best link it from the website.

@kurianbenoy Please feel free to give a try to a Colab version of the get-started, some people may prefer it better (refering to this: https://discordapp.com/channels/485586884165107732/565759186693128202/628298295063740436)

[shcheklein]

@dashohoxha this is great! I'll take a look and review the scenarios, also we should start integrating it with the engine (add a button). Any suggestions on how can it look like? I would prefer it to stand out as much as possible, a full text message something like "Run an interactive version". Would be great to emphasize it somehow when you hover code blocks?

@algomaster99 @jorgeorpinel any suggestions on this ^^

[jorgeorpinel]

Super cool to have all those Katacoda scenarios! I'd love to help reviewing them too. Are they created in a way that we can easily give feedback on @dashohoxha? For example in a Git repo perhaps? (Not familiar with Katacoda.) Otherwise how can we leave comments on specific commands in certain scenarios? Thanks

Google Colabs, Katacoda, Kaggle kernels

So we're discarding Kaggle kernels for now right?

feel free to give a try to a Colab version of the get-started

Er... Not sure we want so many versions of the same material, already it may be a challenge to maintaining both our dvc.org docs and Katacoda updated and synchronized. Perhaps we should also discard that option for now?

[jorgeorpinel]

...we should start integrating it with the engine (add a button). Any suggestions on how can it look like?

Agree! That seems like the main purpose of this ticket 😋. As for how it can look, maybe pretty similar to the PyTorch tutorial link provided,

[dashohoxha]

Are they created in a way that we can easily give feedback on @dashohoxha? For example in a Git repo perhaps?

You may start any discussions here: https://github.com/iterative/katacoda-scenarios/issues However I would suggest that we keep all the discussions here: https://github.com/iterative/dvc.org/issues

So we're discarding Kaggle kernels for now right?

I don't even know what they are, but for me it is ok, as long as somebody is willing to work on them.

[algomaster99]

@shcheklein We have already hyperlinked it. https://dvc.org/doc/tutorials/interactive. Where are we planning to put the interactive buttons?

[kurianbenoy]

So we're discarding Kaggle kernels for now right?

I don't even know what they are, but for me it is ok, as long as somebody is willing to work on them.

I feel there will be some maintenance challenges to support jupyter-notebook based interactive tutorials in Kaggle with DVC like @jorgeorpinel said for Documentation team. And to be honest a CLI tool like DVC is not best to be run in a notebook.

I have already added the get started tutorial as a jupyter notebook sometime back.

https://www.kaggle.com/kurianbenoy/introduction-to-data-version-control-dvc

[jorgeorpinel]

Agree, I think we should stick with Katacoda, and also ignoring Colab for now unless a contributor wants to develop and maintain that.

We have already hyperlinked it. https://dvc.org/doc/tutorials/interactive. Where are we planning to put the interactive buttons?

By "interactive button" we mean a pretty link right? Yeah it's just a matter of design. Refer to https://github.com/iterative/dvc.org/issues/670#issuecomment-540079227 and https://github.com/iterative/dvc.org/issues/670#issuecomment-540146127. I think whoever takes on this task should just come up with a suggestion as of where in the docs layout to place this.

Perhaps a first step is to implement automatic recognition of md links to katacoda.com/dvc/..., turning them into buttons, and let the doc writer decide where to put them in each doc. Or <button> tags with value="katacoda.com/dvc/...". Idk, just brainstorming here.

[iesahin]

What's the current status about this ticket? GS pages seem to have links to scenarios. Is there anything that should be modified in the docs about this?

[shcheklein]

GS is outdated, not all pages have Katakoda unfortunately, also consider the most recent update @dberenbaum is doing in https://github.com/iterative/dvc.org/pull/2195

[jorgeorpinel]

I think ultimately #1400 is about the content itself, and this one is about the design. We have this now:

Wide screens

Narrow screens/mobile

I think if we are OK with that interface we could indeed close this. But I think the narrow/mobile view should spell out "Katacoda" at least.

[shcheklein]

I think if we are OK with that interface we could indeed close this. But I think the narrow/mobile view should spell out "Katacoda" at least.

I think this not in the scope of this ticket, @jorgeorpinel

[shcheklein]

I guess we need to close this one and create the new one ticket that is specifically focused on content, not ui/ux

[shcheklein]

Since I see we go back and forth with labels, it's clear that we interpret in different ways

[jorgeorpinel]

There's #1400 for the content so yes, I wanted to think this was about something else. Thanks!