copy all guest docs on signup (#357)

* copy all guest docs on signup

* fix console errors

* fix

* fix

* fix

* remove markdown export

* change ci order

* fix test

* fix test?

* fix test

* docs fixes

* fix tests

* fix test?

* startscreen changes

Author: YousefED

.github/workflows/build.yaml

@@ -116,12 +116,6 @@ jobs:
         env:
           CI: true
 
-      - name: Install Playwright
-        run: npx playwright install --with-deps
-        # if: steps.playwright-cache.outputs.cache-hit != 'true'
-        # env:
-        # PLAYWRIGHT_BROWSERS_PATH: 0 # https://github.com/microsoft/playwright/blob/main/docs/src/ci.md#caching-browsers
-
       - name: Start HocusPocus server
         run: RUNNER_TRACKING_ID="" && npm run start:server &
         env:
@@ -132,7 +126,13 @@ jobs:
         env:
           CI: true
 
-      # Actually build and run react code and run tests against that
+      - name: Install Playwright
+        run: npx playwright install --with-deps
+        # if: steps.playwright-cache.outputs.cache-hit != 'true'
+        # env:
+        # PLAYWRIGHT_BROWSERS_PATH: 0 # https://github.com/microsoft/playwright/blob/main/docs/src/ci.md#caching-browsers
+
+      # Actually build and run react code and run playwright tests against that
       - name: Build and run preview
         # Wait on config file needed for vite dev server: https://github.com/jeffbski/wait-on/issues/78
         run: npm run start:preview & npx wait-on http://localhost:4173 -c ./packages/editor/wait-on.conf.json

README.md

@@ -53,7 +53,7 @@ We've written about the main functionality of TypeCell in the [manual](https://w
 
 Another good way to learn is to check out some notebooks from our community:
 
-» [View demo notebooks](/docs/demos.md)
+» [View demo notebooks](/docs/Demos.md)
 
 # Feedback 🙋‍♂️🙋‍♀️
 

packages/editor/public/_docs/interactive-introduction.md renamed to packages/editor/public/_docs/Live coding tutorial.md

@@ -1,9 +1,11 @@
-# Introduction to TypeCell
+# TypeCell Live Coding tutorial
 
-Welcome to TypeCell. A TypeCell document is a live, interactive programming environment for Javascript / Typescript
+TypeCell documents contain a live, interactive programming environment for Javascript / Typescript
 running in your browser.
 
-In this introduction, we will go through the basics of using TypeCell.
+In this introduction, we will go through the basics of coding in TypeCell.
+
+__This document is completely editable. Follow the steps below!__
 
 ## Cats
 
@@ -56,10 +58,12 @@ export default (
 );
 ```
 
-Uh oh, what's this? I forgot to add a cell defining our friend. Can you do it for me?
+Uh oh, what's this? I forgot to add a code block defining a friend for our cat. Can you do it for me?
+
+Add a code block by clicking on the + next to a block when hovering it (or type "/"), and select "code block".
 
-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.
+_**Hint:** Our friend only needs a name for now. Use the same structure as you already
+used for your cat (first code block), but only include the "name" field and export it as the variable named "friend"._
 
 ```typescript
 // @default-collapsed
@@ -74,17 +78,16 @@ export default (
 );
 ```
 
-<small><strong>Hint:</strong> Our friend only needs a name for now. Use the same structure as you already
-used for your cat, but only include the `name` field.</small>
 
-Notice how we use `$.friend.name` in the cell above. Whenever you `export` a variable, you can access it across
-the document by using the `$` symbol. In other words, `$` is a store for all variables that you want
+
+Notice how we use _$.friend.name_ in the cell above. Whenever you _export_ a variable, you can access it across
+the document by using the _$_ symbol. In other words, _$_ is a store for all variables that you want
 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
+- Any of the reactive variables the cell references (from _$_) are changed
 
 ## Feeding neighbors
 
@@ -172,16 +175,17 @@ export default (
 );
 ```
 
-We have now stored the number of dry & wet food required (we exported variables `dryFoodToPrepare` and `wetFoodToPrepare`).
+We have now stored the number of dry & wet food required (we exported variables "dryFoodToPrepare" and "wetFoodToPrepare").
 We also visualize them nicely with a friendly message and emojis using React & JSX.
-See the default `export` at the end of the cell above.
+See the default "export" at the end of the cell above.
 
-<small>React? JSX? What's this now? React is a Javascript framework that's used
+_React? JSX? What's this now? React is a Javascript framework that's used
 to create user interfaces. We won't go too in depth on it here, but you can
-check out the documentation at https://reactjs.org/docs/getting-started.html.
+check out the documentation at https://reactjs.org/docs/getting-started.html._
 
-JSX is part of React, and makes it easy to create type-safe HTML elements. In TypeCell, just `export` JSX elements to create user interfaces or visualize data in your notebook.</small>
+_JSX is part of React, and makes it easy to create type-safe HTML elements. In TypeCell, just "export" JSX elements to create user interfaces or visualize data in your notebook._
 
+### Input fields 
 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:
 
@@ -293,22 +297,25 @@ export default (
 );
 ```
 
-<strong>Go ahead, play with the inputs above to adjust how much food to prepare!</strong>
+**Go ahead, play with the inputs above to adjust how much food to prepare!**
 
 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._
+_**Tip:** expand the 3 cells above to see how they work._
 
 ## Final notes
 
-We hope this introduction has given you a sense of how TypeCell and reactive notebooks work.
+We hope this introduction has given you a sense of how TypeCell interactive documents work.
 
 The live feedback and Reactive programming model should be pretty powerful.
-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.
+
+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 documents?
+
+Try signup up and create your own documents to give it a try, or have a look at the other examples.
 
 **Have fun using TypeCell!**
 
-<small>This tutorial is inspired by [pluto.jl](https://github.com/fonsp/Pluto.jl), thanks Fons & Nicholas!</small>
+
+_This tutorial is inspired by [pluto.jl](https://github.com/fonsp/Pluto.jl), thanks Fons & Nicholas!_

packages/editor/public/_docs/README.md

@@ -1,14 +1,26 @@
 # Welcome to TypeCell
 
-Hi there 👋 ! Welcome to the community preview of TypeCell, an experimental _live notebook programming_ environment for the web.
+Hi there 👋 ! Welcome to the community preview of TypeCell, an open source platform for _live_, _interactive_ documents.
+
+A TypeCell document (like the one you're looking at!) is similar to a document in _Notion_ or _Google Docs_. Go ahead and try editing this page.
+
+However, TypeCell comes with a _Live Programming Environment_, that makes it possible to create your own blocks and build rich, interactive documents:
+
+```typescript
+export default (
+  <div>
+    <em>Hello from React!</em>
+  </div>
+);
+```
 
 This guide should help you to get started, and learn more about the ins & outs.
 
 ## Tutorial
 
-Complete the tutorial to get familiar with TypeCell:
+Complete the tutorial to get familiar with programming in TypeCell:
 
-» [Interactive introduction](/docs/interactive-introduction.md)
+- [TypeCell live coding tutorial](/docs/Live%20coding%20tutorial.md)
 
 ## Reference manual
 
@@ -25,7 +37,7 @@ We've written about the main functionality of TypeCell in the [manual](/docs/man
 
 Another good way to learn is to check out some notebooks from our community:
 
-» [View demo notebooks](/docs/demos.md)
+- [View demo notebooks](/docs/Demos.md)
 
 # Feedback ❤️
 

packages/editor/public/_docs/demos.md

@@ -11,4 +11,4 @@ To showcase some of TypeCell's features, explore these demos from our community:
 
 ## Built something exciting?
 
-Let us know [on discord](https://discord.gg/TcJ9TRC3SV) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org) if you'd like to feature your own demo on this page!
+Let us know [on discord](https://discord.gg/TcJ9TRC3SV) if you'd like to feature your own demo on this page!

packages/editor/public/_docs/index.json

@@ -1,14 +1,13 @@
 {
   "title": "Docs",
   "items": [
-    "demos.md",
-    "interactive-introduction.md",
+    "Demos.md",
+    "Live coding tutorial.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"
   ]
 }

packages/editor/public/_docs/manual/1. Notebooks and cells.md

@@ -1,28 +1,20 @@
-# Notebooks and Cells
+# Blocks and code blocks
 
-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 an interactive document that mixes _code_ and _text_. A document consists of different blocks, highlighted when you hover over them. TypeCell supports all kind of blocks, like _headings_, _paragraphs_, _lists_, or more advanced _code blocks_.
 
-## Creating and reordering cells
+## Creating and reordering Blocks
 
-When you hover over a cell, click the `+` sign to insert a new cell above or below.
+When you hover over a block, click the `+` sign to insert a new block. You can also type "/" anywhere to open the slash-menu that allows you to add a new block.
 
-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 reorder a block, hover next to it (try it out on the left of this text), and simply drag and drop the block via the drag handle (⋮⋮).
 
-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.
+## Code blocks
 
-## 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).
+TypeCell Code Blocks currently supports Typescript and CSS. You can view / change the language of a code block in the bottom-right of the code block editor.
 
 ### CSS
 
-Use CSS to easily style the output of other cells (those written in Markdown or TypeScript).
+Use CSS to easily style the output of other code blocks (those written in Markdown or TypeScript).
 
 ```css
 .redText {
@@ -32,16 +24,18 @@ Use CSS to easily style the output of other cells (those written in Markdown or
 
 ```typescript
 export default (
-  <div className="redText">This text is red, styled by the CSS cell above.</div>
+  <div className="redText">
+    This text is red, styled by the CSS code block above.
+  </div>
 );
-````
+```
 
 ### TypeScript / JavaScript
 
 ```typescript
-export let message = "This is a TypeScript cell";
+export let message = "This is a TypeScript code block";
 ```
 
-TypeScript cells execute automatically as you type. Try editing the `message` above.
+TypeScript code blocks 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.
+You've learned the basics! Continue to learn more about writing code using TypeScript code blocks.

packages/editor/public/_docs/manual/2. TypeScript and exports.md

@@ -1,15 +1,17 @@
 # TypeScript and exports
 
-TypeScript cells are the main way to write code in TypeCell.
+TypeScript code blocks 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!
 
-Note that TypeScript code still executes, even if there are type errors.
+## Plain JavaScript
+
+Note that TypeScript code always 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>
+_This means that any **plain JavaScript** code works in TypeCell as well (you're not forced add types for everything)._
 
-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.
+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";
@@ -18,7 +20,7 @@ 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:
 
@@ -54,7 +56,7 @@ export let reactElement = (
 
 ## The `default` export
 
-You use a `default` export to indicate which variable should be displayed in the output.
+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:
 
@@ -64,8 +66,8 @@ 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?
+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!
+This is because exported variables can be reused across blocks and documents; one of most powerful features of TypeCell!
 
 Continue to learn more about exported variables and Reactivity.

packages/editor/public/_docs/manual/3. Reactive variables.md

@@ -1,15 +1,15 @@
 # Reactive variables
 
-This is where things get interesting! Your code can reference variables exported by other cells.
+This is where things get interesting! Your code can reference variables exported by other blocks.
 
-Code cells in TypeCell (re)evaluate when:
+Code blocks 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
+- A variable the block 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.
+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";
@@ -23,8 +23,8 @@ export let greeting = (
 );
 ```
 
-<small>Tip: type `$.` in a TypeScript cell, and the editor (Intellisense) will display a list of all exported variables you can reference.</small>
+_Tip: type "$." in a TypeScript cell, and the editor (Intellisense) will display a list of all exported variables you can reference._
 
 ## 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.
+The Reactive model of TypeCell is quite powerful. If you haven't already, follow the [live coding tutorial](/docs/Live%20coding%20tutorial.md) or have a look at the [demos](/docs/Demos.md) to get some hands-on experience.

packages/editor/public/_docs/manual/4. Inputs.md

@@ -1,6 +1,6 @@
 # Working with user inputs
 
-In your notebook, you'll often want the viewer to be able to control input variables, without changing code.
+In your interactive document, 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:
 
@@ -130,7 +130,7 @@ 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.
+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