TypeCellOS · YousefED · Aug 20, 2023 · Aug 16, 2023 · Aug 17, 2023 · Aug 17, 2023
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
@@ -11,7 +11,7 @@ blocknote
 │   ├── editor          - The main React application
 │   ├── engine          - The live-code execution engine
 │   ├── packager        - Tool to bundle TypeCell notebook apps (WIP)
-│   └── parsers         - Helpers to convert to / from TypeCell notebooks
+│   └── parsers         - Helpers to convert to / from TypeCell
 ├── patches             - patch-package patches
 └── test-util           - Server and data for unit tests
 ```

diff --git a/README.md b/README.md
@@ -72,7 +72,7 @@ typecell
 │   ├── editor          - The main React application
 │   ├── engine          - The live-code execution engine
 │   ├── packager        - Tool to bundle TypeCell notebook apps (WIP)
-│   └── parsers         - Helpers to convert to / from TypeCell notebooks
+│   └── parsers         - Helpers to convert to / from TypeCell documents
 ├── patches             - patch-package patches
 └── test-util           - Server and data for unit tests
 ```

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -35,7 +35,6 @@
     "lint": "npm run lint --workspaces",
     "watch": "npm run build && npm run --parallel watch",
     "start": "npm run start-react",
-    "start-filebridge": "npx filebridge packages/editor/public/_docs",
     "start-react": "npm run start --workspace=packages/editor",
     "start:preview": "npm run preview --workspace=packages/editor",
     "start:server": "npm run dev --workspace=packages/server",

diff --git a/packages/editor/copy-docs.mjs b/packages/editor/copy-docs.mjs
@@ -2,4 +2,13 @@ import glob from "glob";
 import * as path from "path";
 const files = glob.sync("**/*.md", { cwd: path.join("public", "_docs") });
 
-console.log(JSON.stringify(files));
+console.log(
+  JSON.stringify(
+    {
+      title: "Docs",
+      items: files,
+    },
+    undefined,
+    2
+  )
+);
diff --git a/packages/editor/index.html b/packages/editor/index.html
@@ -16,7 +16,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="/manifest.json" />
-    <title>TypeCell Notebooks</title>
+    <title>TypeCell</title>
   </head>
   <body>
     <div id="root"></div>

diff --git a/packages/editor/package.json b/packages/editor/package.json
@@ -10,6 +10,7 @@
     "@atlaskit/button": "^16.8.2",
     "@atlaskit/css-reset": "^6.5.3",
     "@atlaskit/dropdown-menu": "^11.10.5",
+    "@atlaskit/empty-state": "^7.6.3",
     "@atlaskit/flag": "^15.2.15",
     "@atlaskit/form": "^8.11.8",
     "@atlaskit/inline-message": "^11.5.3",
@@ -24,19 +25,20 @@
     "@atlaskit/textfield": "^5.6.3",
     "@atlaskit/tree": "^8.8.5",
     "@atlaskit/user-picker": "^10.4.0",
+    "@tiptap/core": "^2.0.4",
+    "@blocknote/core": "^0.9.2",
     "@emotion/react": "^11.4.0",
     "@supabase/auth-ui-react": "^0.4.2",
     "@supabase/auth-ui-shared": "^0.1.6",
     "@supabase/supabase-js": "^2.26.0",
     "@syncedstore/yjs-reactive-bindings": "^0.5.1",
-    "@tippyjs/react": "^4.2.6",
     "@typecell-org/util": "^0.0.3",
     "@typecell-org/shared": "^0.0.3",
     "@typecell-org/engine": "^0.0.3",
     "@typecell-org/parsers": "^0.0.3",
     "@typecell-org/frame": "^0.0.3",
+    "speakingurl": "^14.0.1",
     "classnames": "^2.3.1",
-    "filebridge-client": "^0.1.5",
     "fractional-indexing": "^2.0.0",
     "lodash": "^4.17.21",
     "mobx": "^6.2.0",

diff --git a/packages/editor/public/_docs/README.md b/packages/editor/public/_docs/README.md
@@ -0,0 +1,32 @@
+# Welcome to TypeCell
+
+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) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org) as well.
diff --git a/packages/editor/public/_docs/index.json b/packages/editor/public/_docs/index.json
@@ -1 +1,14 @@
-["demos.md","interactive-introduction.md","manual/1. Notebooks and cells.md","manual/2. TypeScript and exports.md","manual/3. Reactive variables.md","manual/4. Inputs.md","manual/5. Imports and NPM.md","manual/6. Collaboration.md","README.md"]
+{
+  "title": "Docs",
+  "items": [
+    "demos.md",
+    "interactive-introduction.md",
+    "manual/1. Notebooks and cells.md",
+    "manual/2. TypeScript and exports.md",
+    "manual/3. Reactive variables.md",
+    "manual/4. Inputs.md",
+    "manual/5. Imports and NPM.md",
+    "manual/6. Collaboration.md",
+    "README.md"
+  ]
+}
diff --git a/packages/editor/public/_docs/interactive-introduction.md b/packages/editor/public/_docs/interactive-introduction.md
@@ -1,17 +1,16 @@
-# Introduction to TypeCell Notebooks
+# Introduction to TypeCell
 
-Welcome to TypeCell Notebooks. A notebook is a live, interactive programming environment for Javascript / Typescript
+Welcome to TypeCell. A TypeCell document is a live, interactive programming environment for Javascript / Typescript
 running in your browser.
 
-In this introduction, we will go through the basics of using TypeCell Notebooks.
+In this introduction, we will go through the basics of using TypeCell.
 
 ## Cats
 
 Let's say you're like my grandma, and you have a lot of cats. Our story will be about them.
 
 ### Step 1: give your cat a name!
 
-
 ```typescript
 export let cat = {
   name: "",
@@ -51,7 +50,6 @@ export default message;
 
 ### Step 2: Friends
 
-
 ```typescript
 export default (
   <div>I feel like our cat needs a friend. Let's call him {$.friend.name}.</div>
@@ -63,7 +61,6 @@ Uh oh, what's this? I forgot to add a cell defining our friend. Can you do it fo
 A cell is a container for code & output. To add one, click on the + above or below another cell.
 You can do it wherever you like.
 
-
 ```typescript
 // @default-collapsed
 
@@ -86,14 +83,13 @@ to access across cells! Exported variables are also displayed below the cell.
 
 Code cells automatically run when:
 
-*   You change the code of a cell
-*   Any of the reactive variables the cell references (from `$`) are changed
+- You change the code of a cell
+- Any of the reactive variables the cell references (from `$`) are changed
 
 ## Feeding neighbors
 
 Our cats have some neighbors. Let's involve them in the story too!
 
-
 ```typescript
 export let neighbors = [
   $.cat,
@@ -114,7 +110,6 @@ export let neighbors = [
 Now, if you're like my grandma, you're feeding the entire neighborhood by yourself, but you don't
 yet know if our friend prefers dry/wet food or how many cans they eat per week.
 
-
 ```typescript
 // @default-collapsed
 
@@ -136,7 +131,6 @@ export default (
 
 Alright, once you've completed steps 1 - 3, let's see how much food you need to prepare. We do this in the cell below:
 
-
 ```typescript
 // Repeats a character a number of times and returns the string.
 export function repeat(char: string, times: number) {
@@ -191,7 +185,6 @@ JSX is part of React, and makes it easy to create type-safe HTML elements. In Ty
 Next, we'll create some user input fields to indicate how much food we have prepared.
 The built-in TypeCell Input library makes this easy:
 
-
 ```typescript
 export let dryFoodPrepared = typecell.Input<number>(
   <input type="range" min="0" max="20" />,
@@ -221,7 +214,6 @@ export default (
 
 Now, let's also create some cells to calculate whether we have prepared enough food:
 
-
 ```typescript
 // @default-collapsed
 
@@ -310,7 +302,7 @@ export default (
 These are just 2 of the many input types that TypeCell supports. To see the
 other choices, make sure to try the TypeCell inputs tutorial.
 
-*<strong>Tip:</strong> expand the 3 cells above to see how they work.*
+_<strong>Tip:</strong> expand the 3 cells above to see how they work._
 
 ## Final notes
 
@@ -321,6 +313,6 @@ There are a lot more features to discover, for example,
 did you know you can import any NPM package you like, or even compose different notebooks?
 Try creating your own notebook to give it a try, or have a look at the other examples.
 
-**Have fun using TypeCell Notebooks!**
+**Have fun using TypeCell!**
 
 <small>This tutorial is inspired by [pluto.jl](https://github.com/fonsp/Pluto.jl), thanks Fons & Nicholas!</small>
diff --git a/packages/editor/public/_docs/manual/1. Notebooks and cells.md b/packages/editor/public/_docs/manual/1. Notebooks and cells.md
@@ -1,7 +1,7 @@
 # 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).
+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
 
@@ -24,24 +24,24 @@ Useful for writing text / documentation. Markdown cells are collapsed by default
 
 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
+export default (
+  <div className="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.
+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.
diff --git a/packages/editor/public/_docs/manual/2. TypeScript and exports.md b/packages/editor/public/_docs/manual/2. TypeScript and exports.md
@@ -1,6 +1,6 @@
 # TypeScript and exports
 
-TypeScript cells are the main way to write code in TypeCell Notebooks.
+TypeScript cells are the main way to write code in TypeCell.
 
 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!
 
@@ -11,27 +11,23 @@ This allows you to quickly write and test code, but still get hints about possib
 
 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 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
@@ -42,20 +38,18 @@ You can create and export DOM Elements to display them directly:
 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: 
+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
@@ -68,11 +62,10 @@ The following cell exports 2 variables, but only one is displayed in the output:
 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.
+Continue to learn more about exported variables and Reactivity.
diff --git a/packages/editor/public/_docs/manual/3. Reactive variables.md b/packages/editor/public/_docs/manual/3. Reactive variables.md
@@ -0,0 +1,30 @@
+# Reactive variables
+
+This is where things get interesting! Your code can reference variables exported by other cells.
+
+Code cells in TypeCell (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.