docs: Example of how to integrate R into docs. #1527

.nvmrc

@@ -1 +1 @@
-v16.13.2
+v16.14.2

website/docs/guide.md

@@ -11,7 +11,7 @@ If you haven't already, it's worthwhile reading the [Getting Started](getting-st
 
 ## Before you start
 
-If you prefer to learn by doing, [start with our tutorials](tutorial-hello.md) - they're short and simple, illustrate the most important concepts in a beginner-friendly way, and are the best way to get hands-on with Wave. Like any unfamiliar technology, Wave has a slight learning curve, but you will get the hang of it with practice and patience. 
+If you prefer to learn by doing, [start with our tutorials](tutorial-hello.mdx) - they're short and simple, illustrate the most important concepts in a beginner-friendly way, and are the best way to get hands-on with Wave. Like any unfamiliar technology, Wave has a slight learning curve, but you will get the hang of it with practice and patience. 
 
 ## Who is this for?
 

website/docs/scripts.md

@@ -9,7 +9,7 @@ A Wave script is the simplest way to publish content with Wave, especially live
 
 A Wave script is one kind of program you can author to interact with Wave. The other kind is a [Wave App](apps.md). The primary difference between an app and a script is that apps are interactive (able to handle user interactions) and scripts are not. If you are not interested in handling user interactions, and only want to publish content, use a Wave script.
 
-Here is the skeleton of a Wave script ([example](tutorial-hello.md)):
+Here is the skeleton of a Wave script ([example](tutorial-hello.mdx)):
 
 ```py
 from h2o_wave import site, ui

website/docs/tutorial-beer.md

@@ -16,17 +16,17 @@ The program we'll be writing is a verse generator for the runaway mid-20th centu
 
 <video autoPlay='autoplay' loop='loop' muted='muted'><source src={require('./assets/tutorial-beer__demo.mp4').default} type='video/mp4'/></video>
 
-Our program will be analogous to [our "Hello, World!" program](tutorial-hello.md), with the addition of a loop. We'll generate a verse every second, and observe the verse change in the browser in realtime. After that, we'll take a stab at making our program a bit more efficient, introducing how [expressions](expressions.md) work.
+Our program will be analogous to [our "Hello, World!" program](tutorial-hello.mdx), with the addition of a loop. We'll generate a verse every second, and observe the verse change in the browser in realtime. After that, we'll take a stab at making our program a bit more efficient, introducing how [expressions](expressions.md) work.
 
 (Incidentally, Donald Knuth proved that this song has a complexity of `O(log N)` in ["The Complexity of Songs"](http://www.cs.bme.hu/~friedl/alg/knuth_song_complexity.pdf), but we won't let that little detail deter us for now.)
 
 ## Prerequisites
 
-This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.md) and complete steps 1 and 2.
+This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.mdx) and complete steps 1 and 2.
 
 ## Step 1: Write your program
 
-Our program looks like this. It's mostly similar to the one in the  [Hello World tutorial](tutorial-hello.md), with one exception: we're setting the markdown card's content inside a `for` loop.
+Our program looks like this. It's mostly similar to the one in the  [Hello World tutorial](tutorial-hello.mdx), with one exception: we're setting the markdown card's content inside a `for` loop.
 
 ```py {13-18} title="$HOME/wave-apps/beer_wall.py"
 import time

website/docs/tutorial-counter.md

@@ -12,7 +12,7 @@ This tutorial outlines the basics of how to handle events, update the UI, manage
 
 ## Prerequisites
 
-This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.md) and complete steps 1 and 2.
+This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.mdx) and complete steps 1 and 2.
 
 ## Step 1: Start listening
 

website/docs/tutorial-hello.md → website/docs/tutorial-hello.mdx

@@ -2,6 +2,8 @@
 title: "Tutorial: Hello World"
 ---
 
+import Tabs from '@theme/Tabs';
+import TabItem from '@theme/TabItem';
 import StartQ from './_start_q.md'
 
 In this section, we'll learn how to author our first Wave program from scratch, and understand the basics of how to display content in a web browser.
@@ -55,12 +57,19 @@ If you are using Conda as your package manager,
 conda install -c h2oai h2o_wave
 ```
 
+:::info
+Conda packaging does not contain Wave server which means, you will still need to run the wave server (waved) yourself. See how to run it [here](/docs/installation-8-20#setup).
+:::
+
 ## Step 3: Write your program
 
 Next, open your preferred text editor, create a Python script called `hello_world.py` in the `$HOME/wave-apps` directory, and copy-paste the following.
 
 For now, don't worry too much about what this program is doing. We'll get to that shortly.
 
+<Tabs>
+<TabItem value="py" label="Python">
+
 ```py title="$HOME/wave-apps/hello_world.py"
 from h2o_wave import site, ui
 
@@ -78,6 +87,27 @@ page['quote'] = ui.markdown_card(
 page.save()
 ```
 
+</TabItem>
+<TabItem value="r" label="R">
+
+```r title="$HOME/wave-apps/hello_world.py"
+library(h2owave)
+
+page <- Site("/demo")
+page$drop()
+
+page$add_card("hello", ui_markdown_card(
+    box="1 1 2 2",
+    title="Hello World!",
+    content='And now for something completely different!'
+))
+
+page$save()
+```
+
+</TabItem>
+</Tabs>
+
 
 ## Step 4: Run your program
 

website/docs/tutorial-monitor.md

@@ -2,7 +2,7 @@
 title: "Tutorial: System Monitor"
 ---
 
-In this tutorial, we'll put our learnings from the [first](tutorial-hello.md) and [second](tutorial-beer.md) tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page.
+In this tutorial, we'll put our learnings from the [first](tutorial-hello.mdx) and [second](tutorial-beer.md) tutorials to some real-world use: a simple system monitoring tool that displays CPU, memory and network stats on a web page.
 
 ![CPU](assets/tutorial-monitor__cpu_mem.png)
 
@@ -12,7 +12,7 @@ We'll also introduce a new concept, called [data buffers](buffers.md), which all
 
 ## Prerequisites
 
-This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.md) and complete steps 1 and 2.
+This tutorial assumes your Wave server is up and running, and you have a working directory for authoring programs. If not, head over to the [Hello World tutorial](tutorial-hello.mdx) and complete steps 1 and 2.
 
 ## Step 1: Install dependencies
 

website/docs/tutorial-todo.md

@@ -453,6 +453,6 @@ Congratulations! You've completed all the tutorials (hopefully). There are three
 - [Widgets](/docs/widgets/overview). Widgets that cover best UX practices and a lot of widgets variations.
 - [Gallery](examples). 150+ examples that cover everything that Wave has to offer.
 - [Guide](guide). An in-depth look at each of Wave's features.
-- [API](api/index). Reference-level documentation for the Python API.
+- [API](/docs/api). Reference-level documentation for the Python API.
 
 Happy hacking!