add first docs (#271)

* add first docs

* update docs

* Add demo links to demos.md

* Apply suggestions from code review

Co-authored-by: Niklas Kors <[email protected]>

* fix markdown import

* change text

Co-authored-by: Niklas Kors <[email protected]>

Author: YousefED

docs/README.md

@@ -1 +1,32 @@
-_placeholder_
+# Welcome to TypeCell Notebooks
+
+Hi there 👋 ! Welcome to the community preview of TypeCell, an experimental _live notebook programming_ environment for the web.
+
+This guide should help you to get started, and learn more about the ins & outs.
+
+## Tutorial
+
+Complete the tutorial to get familiar with TypeCell:
+
+» [Interactive introduction](/docs/interactive-introduction.md)
+
+## Reference manual
+
+We've written about the main functionality of TypeCell in the [manual](/docs/manual):
+
+- [Notebooks and cells](/docs/manual/1.%20Notebooks%20and%20cells.md)
+- [TypeScript and exports](/docs/manual/2.%20TypeScript%20and%20exports.md)
+- [Reactive variables](/docs/manual/3.%20Reactive%20variables.md)
+- [Working with user input](/docs/manual/4.%20Inputs.md)
+- [Imports & NPM](/docs/manual/5.%20Imports%20and%20NPM.md)
+- [Collaboration](/docs/manual/6.%20Collaboration.md)
+
+## Demos
+
+Another good way to learn is to check out some notebooks from our community:
+
+» [View demo notebooks](/docs/demos.md)
+
+# Feedback ❤️
+
+As always, we'd love to hear your thoughts and see your experiments, so [come and say hi on Discord](https://discord.gg/TcJ9TRC3SV) as well.

docs/demos.md

@@ -0,0 +1,14 @@
+# Demos
+
+To showcase some of TypeCell's features, explore these demos from our community:
+
+- [Create an interactive map with Leaflet](/@niklas/maps)
+- [Interactive character counter using Vega Lite](/@yousef/character-counter)
+- [Visualize weather data with two React chart libraries](/@yousef/charts)
+- [Explore TypeCell's reactivity with the help of time](/@niklas/time)
+- [Connect React file uploader with an API](/@niklas/api)
+- [Working with a CSV dataset](/@niklas/csv)
+
+## Built something exciting?
+
+Let us know [on discord](https://discord.gg/TcJ9TRC3SV) if you'd like to feature your own demo on this page!

docs/examples/sub/README.md

@@ -0,0 +1,47 @@
+# Notebooks and Cells
+
+The page you're looking at is called a *notebook*.
+It's basically an interactive document that mixes *code* and *text* (documentation).
+
+## Creating and reordering cells
+
+When you hover over a cell, click the `+` sign to insert a new cell above or below.
+
+To reorder a cell, hover next to it (try it out on the left of this text), and simply drag and drop the cell.
+
+To view the source code of a cell, hover over the cell and click the caret <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 16 16" class="notebookCell-sideIcon" height="1em" width="1em" xmlns="http://www.w3.org/2000/svg"><title>Show / hide code</title><path fill-rule="evenodd" clip-rule="evenodd" d="M10.072 8.024L5.715 3.667l.618-.62L11 7.716v.618L6.333 13l-.618-.619 4.357-4.357z"></path></svg> on the top left.
+You'll notice the text you're reading now is written in Markdown.
+
+## Cell types
+
+TypeCell currently supports a number of languages. You can view / change the language of a cell in the bottom-right of the cell's editor.
+
+### Markdown
+
+Useful for writing text / documentation. Markdown cells are collapsed by default (code cells are expanded by default).
+
+### CSS
+
+Use CSS to easily style the output of other cells (those written in Markdown or TypeScript).
+
+
+```css
+.redText {
+  color: red;
+}
+
+```
+
+<div class="redText">This text is red, styled by the CSS cell above.</div>
+
+### TypeScript / JavaScript
+
+
+```typescript
+export let message = "This is a TypeScript cell";
+
+```
+
+TypeScript cells execute automatically as you type.Try editing the`message` above.
+
+You've learned the basics! Continue to learn more about writing code using TypeScript cells.

docs/examples/sub/test.md

@@ -0,0 +1,78 @@
+# TypeScript and exports
+
+TypeScript cells are the main way to write code in TypeCell Notebooks.
+
+You'll get all the benefits of the [Monaco Editor](https://microsoft.github.io/monaco-editor/) while writing code, the same editor that powers VS Code!
+
+Note that TypeScript code still executes, even if there are type errors.
+This allows you to quickly write and test code, but still get hints about possible bugs.
+
+<small>Note that this means that any <strong>JavaScript</strong> code works in TypeCell as well (i.e.: you don't <em>need</em> to type everything if you don't want to).</small>
+
+In the example below, you'll notice that we get an error because we assign a `number` to a `string` variable, but the code still executes regardless.
+
+
+```typescript
+export let message = "hello";
+message = 4;
+
+```
+
+## Exports
+
+You can export variables from your code, and they'll show up as *output* of the cell. Above, we've exported a single `message` variable.
+
+You can also export multiple variables from a cell, and the _inspector_ will help you to view the output:
+
+
+```typescript
+export let firstVariable = "Hello world";
+export let vehicle = {
+  color: "red",
+  wheels: 4,
+};
+
+```
+
+### DOM Elements
+
+You can create and export DOM Elements to display them directly:
+
+```typescript
+export let element = document.createElement("button");
+element.innerText = "This is a button. Click me!";
+element.onclick = () => window.alert("Hello!");
+
+```
+
+### React / JSX
+
+Think direct DOM manipulation is a little too old school for you? TypeCell supports React & JSX to make your life easier: 
+
+```typescript
+export let reactElement = (
+  <button onClick={() => window.alert("Hello from React!")}>
+    This is a React Button
+  </button>
+);
+
+```
+
+## The `default` export
+
+You use a `default` export to indicate which variable should be displayed in the output.
+
+The following cell exports 2 variables, but only one is displayed in the output:
+
+```typescript
+export let myNum = 42;
+
+export default <div>The number is: {myNum}</div>;
+
+```
+
+Now you might ask; what's the use of exporting `myNum` if you don't see it in the output?
+
+This is because exported variables can be reused across cells and notebooks; one of most powerful features of TypeCell!
+
+Continue to learn more about exported variables and Reactivity.

docs/manual/1. Notebooks and cells.md

@@ -0,0 +1,34 @@
+# Reactive variables
+
+This is where things get interesting! Your code can reference variables exported by other cells.
+
+Cells in TypeCell Notebooks (re)evaluate when:
+
+*   The code of the cell changes (i.e.: you're editing the code)
+*   A variable the cell depends upon updates
+
+## The `$` variable
+
+Exports of cells are available under the `$` variable. Have a look at the example below, and change the `name` variable to your own name. Notice how the greeting in the cell below updates automatically.
+
+
+```typescript
+export let name = "Anonymous coder";
+
+```
+
+```typescript
+export let greeting = (
+  <div>
+    Hello, <strong>{$.name}</strong>!
+  </div>
+);
+
+```
+
+<small>Tip: type `$.` in a TypeScript cell, and the editor (Intellisense) will display a list of all exported variables you can reference.</small>
+
+## Interactive Tutorial
+
+The Reactive model of TypeCell is quite powerful. If you haven't already, follow the [interactive introduction](/docs/interactive-introduction.md) or have a look at the [demos](/docs/demos.md) to get some hands-on experience.
+

docs/manual/2. TypeScript and exports.md

@@ -0,0 +1,153 @@
+# Working with user inputs
+
+In your notebook, you'll often want the viewer to be able to control input variables, without changing code.
+
+Of course, you can create input elements using HTML / React. For example, like this:
+
+
+```typescript
+export let textVariable = "Default text";
+export default (
+  <input
+    type="text"
+    onChange={(e) => ($.textVariable = e.target.value)}
+    defaultValue={textVariable}
+  />
+);
+
+```
+
+```typescript
+export default $.textVariable;
+
+```
+
+
+## Using `typecell.Input`
+
+As the pattern above is quite common, we've created an easy **shorthand** for this that supports different kind of input types:
+
+### Text input
+
+```typescript
+// The second parameter (default) is optional
+export let text1 = typecell.Input(<input type="text" />, "default text");
+
+```
+
+```typescript
+// You can also use a <textarea> element. By setting the default to $views.text1,
+// we bind it to the same $.text1 variable
+export let textarea1 = typecell.Input(<textarea />, $views.text1);
+
+```
+
+```typescript
+export let length = $.text1.length;
+
+```
+
+### Radio buttons and checkboxes
+
+```typescript
+// Test two Radio inputs part of the same group
+
+export let color = typecell.Input(<input type="radio" value="red" />);
+export let color2 = typecell.Input(<input type="radio" value="green" />, color);
+
+export default (
+  <div>
+    <label>{color} Red</label>
+    <label>{color2} Green</label>
+  </div>
+);
+
+```
+
+```typescript
+// Check radio output
+export default (
+  <div style={{ color: $.color, fontWeight: $.bold }}>
+    Change the color of this text by selecting a radio button
+  </div>
+);
+
+```
+
+```typescript
+export let bold = typecell.Input(<input type="checkbox" value="bold" />);
+
+export default (
+  <div>
+    <label>{bold} Bold</label>
+  </div>
+);
+
+```
+
+```typescript
+export default $.bold;
+
+```
+
+### Selects and Dropdowns
+
+```typescript
+// Select with "multiple" attribute
+export let selectMultiple = typecell.Input(
+  <select multiple>
+    <option value="first">First option</option>
+    <option value="second">Second option</option>
+  </select>
+);
+
+```
+
+```typescript
+// Check select output
+export default $.selectMultiple;
+```
+
+```typescript
+// Select without "multiple" attribute
+export let select = typecell.Input(
+  <select>
+    <option value="first">First option</option>
+    <option value="second">Second option</option>
+  </select>,
+  "first"
+);
+
+```
+
+```typescript
+// Check select output
+export default $.select;
+
+```
+
+### Numbers & Ranges
+
+You can user _number_ and _range_ input types to allow the user to enter numbers. Make sure to explicitly pass `<number>` to guide the type system that the edited variable is a number.
+
+
+```typescript
+export let num = typecell.Input<number>(<input type="number" />);
+
+```
+
+```typescript
+export default $.num;
+```
+
+```typescript
+export let range = typecell.Input<number>(
+  <input type="range" min="20" max="100" />
+);
+
+```
+
+```typescript
+// check value of range
+export default $.range;
+```