reorganize / readme (#327)

* reorganize / readme

* no guest sign in when not necessary

* clean logs, switch to esm.sh

Author: YousefED

.github/workflows/build.yaml

@@ -46,10 +46,10 @@ jobs:
             ${{ runner.os }}-
 
       - name: Set correct access for docker containers (server/test/data)
-        run: chmod -R a+rw test-server/data
+        run: chmod -R a+rw test-util/server/data
 
       - name: Build the docker-compose stack
-        run: docker-compose -f test-server/docker-compose.yml up -d
+        run: docker-compose -f test-util/server/docker-compose.yml up -d
 
       - name: Check running containers
         run: docker ps -a
@@ -60,8 +60,8 @@ jobs:
       - name: NPM CI
         run: npm ci
 
-      - name: Bootstrap packages
-        run: npm run bootstrap
+      # - name: Bootstrap packages
+      #   run: npm run bootstrap
 
       - name: Wait for Matrix
         run: npx wait-on http://localhost:8888/_matrix/static/

.vscode/settings.json

@@ -7,7 +7,9 @@
     "editor.defaultFormatter": "esbenp.prettier-vscode"
   },
   "search.exclude": {
-    "packages/editor/public/types": true
+    "packages/editor/public/types": true,
+    "**/coverage": true,
+    "**/dist": true
   },
   "vitest.exclude": [
     "**/node_modules/**",

CONTRIBUTING.md

@@ -0,0 +1,24 @@
+# Development
+
+We use [Lerna](https://lerna.js.org/) to manage the monorepo with separate packages. In VS Code, it's best to open `typecell.code-workspace` to open the project as a workspace.
+
+## Running
+
+Node.js is required to run this project. To download Node.js, visit [nodejs.org](https://nodejs.org/en/).
+
+To run the project, open the command line in the project's root directory and enter the following commands:
+
+    # Install all required npm modules for lerna, and bootstrap lerna packages
+    npm install
+
+    # Initial build of all packages required by the main editor project
+    npm run build
+
+    # Start the main editor project
+    npm start
+
+## Watch changes
+
+    npm run watch
+
+The above `npm start` executes the `vite dev` command of `packages/editor` and watches for changes to this main package. However, you might also be making changes to other packages in the `packages` directory. To continuously watch and compile for changes, open a new terminal and run `npm run watch`.

README.md

@@ -1,40 +1,40 @@
-![TypeCell Logo](./packages/editor/src/assets/logo_with_text.svg?raw=true)
+<p align="center">
+  <a href="https://www.typecell.org">
+    <img alt="TypeCell" src="./packages/editor/src/assets/logo_with_text.svg?raw=true" width="300" />
+  </a>
+</p>
 
-Welcome to TypeCell! Let's reimagine how we can make it easier to understand, build and share knowledge.
+<p align="center">
+Welcome to TypeCell! An open source live programming environment. Together, we want to make it a lot easier to build software, and ultimately to understand, build and share knowledge.
+</p>
 
-# Development
+<p align="center">
+<a href="https://discord.gg/aDQxXezfNj"><img alt="Discord" src="https://img.shields.io/badge/Chat on discord%20-%237289DA.svg?&style=for-the-badge&logo=discord&logoColor=white"/></a> <a href="https://matrix.to/#/#typecell-space:matrix.org"><img alt="Matrix" src="https://img.shields.io/badge/Chat on matrix%20-%23000.svg?&style=for-the-badge&logo=matrix&logoColor=white"/></a>
+</p>
 
-We use [Lerna](https://lerna.js.org/) to manage the monorepo with separate packages. In VS Code, it's best to open `typecell.code-workspace` to open the project as a workspace.
+## Contributing 🙌
 
-## Running
+See [CONTRIBUTING.md](CONTRIBUTING.md).
 
-Node.js is required to run this project. To download Node.js, visit [nodejs.org](https://nodejs.org/en/).
+TypeCell is organised as a monorepo containing several packages. Directory structure:
 
-To run the project, open the command line in the project's root directory and enter the following commands:
+```
+blocknote
+├── docs                - Docs / samples (see https://www.typecell.org/docs/)
+├── packages
+│   ├── common          - Utility functions shared across the codebase
+│   ├── 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
+├── patches             - patch-package patches
+└── test-util           - Server and data for unit tests
+```
 
-    # Install all required npm modules for lerna, and bootstrap lerna packages
-    npm run install-lerna
-    npm run bootstrap --force
+The codebase is automatically tested using Vitest and Playwright.
 
-    # Initial build of all packages required by the main editor project
-    npm run build
+# Credits ❤️
 
-    # Start the editor project
-    npm start
+TypeCell is proudly sponsored by the renowned [NLNet foundation](https://nlnet.nl/foundation/) who are on a mission to support an open internet, and protect the privacy and security of internet users. Check them out!
 
-
-## Watch changes
-
-    npm run watch
-
-The above `npm start` executes the `react-scripts start` command of `packages/editor` and watches for changes to this main package. However, you might also be making changes to other packages in the `packages` directory. To continuously watch and compile for changes, open a new terminal and run `npm run watch`.
-
-## Updating packages
-
-If you've pulled changes from git that add new or update existing dependencies, use `npm run bootstrap` instead of `npm install` to install updated dependencies!
-
-## Adding packages
-
-- Add the dependency to the relevant `package.json` file (packages/xxx/packages.json)
-- run `npm run install-new-packages`
-- Double check `package-lock.json` to make sure only the relevant packages have been affected
+<a href="https://nlnet.nl"><img src="https://nlnet.nl/image/logos/NGIAssure_tag.svg" alt="NLNet" width="100"></a>

package.json

@@ -1,6 +1,7 @@
 {
   "name": "root",
   "private": true,
+  "license": "AGPL",
   "devDependencies": {
     "lerna": "^5.0.0",
     "playwright": "^1.18.1",
@@ -12,11 +13,8 @@
     "packages/*"
   ],
   "scripts": {
-    "--postinstall": "npm run bootstrap",
     "patch-package": "patch-package",
     "postinstall": "patch-package",
-    "bootstrap": "lerna bootstrap --ci -- --force",
-    "install-new-packages": "lerna bootstrap -- --force",
     "playwright:dev": "lerna run playwright:dev --stream",
     "playwright:preview": "lerna run playwright:preview --stream",
     "install-playwright": "npx playwright install --with-deps",

packages/editor/.vscode/settings.json

@@ -15,8 +15,8 @@ export const App = observer((props: { config: ValidatedServerConfig }) => {
   const { sessionStore } = getStoreService();
   if (sessionStore.user === "loading") {
     return <div>Loading</div>;
-  } else if (sessionStore.user === "offlineNoUser") {
-    return <div>Offline</div>;
+    // } else if (sessionStore.user === "offlineNoUser") {
+    // return <div>Offline</div>;
   } else {
     return (
       <BrowserRouter>

packages/editor/src/app/App.tsx

@@ -72,16 +72,6 @@ export const NotebookOverview = observer(function (
 
   const sessionStore = getStoreService().sessionStore;
 
-  if (
-    sessionStore.user === "loading" ||
-    sessionStore.user === "offlineNoUser"
-  ) {
-    return <div>Not logged in</div>;
-  }
-
-  // const user = sessionStore.user;
-  const matrixClient = sessionStore.user.matrixClient;
-
   useEffect(() => {
     // async function resolveRoom(roomId: string): Promise<Room | undefined> {
     //     const result = await matrixClient.http.authedRequest(
@@ -99,6 +89,10 @@ export const NotebookOverview = observer(function (
       try {
         setLoading(true);
 
+        if (typeof sessionStore.user === "string") {
+          sessionStore.enableGuest();
+          return;
+        }
         // A user's own rooms
         // const result = await matrixClient.getJoinedRooms();
 
@@ -108,6 +102,8 @@ export const NotebookOverview = observer(function (
         // const resolvedRooms = await (await Promise.all<Room | undefined>(promises)).filter(r => r).map(r => r as Room);
 
         // Currently we limit search to Public rooms by this user
+        const matrixClient = sessionStore.user.matrixClient;
+
         const result = await matrixClient.http.authedRequest<any>(
           undefined as any,
           Method.Post,
@@ -138,7 +134,7 @@ export const NotebookOverview = observer(function (
     }
 
     fetchNotebooks();
-  }, [matrixClient, props.owner]);
+  }, [sessionStore, sessionStore.user, props.owner]);
 
   const notebookList = rooms ? (
     <>
@@ -152,6 +148,13 @@ export const NotebookOverview = observer(function (
     []
   );
 
+  if (
+    sessionStore.user === "loading" ||
+    sessionStore.user === "offlineNoUser"
+  ) {
+    return <div>Loading...</div>;
+  }
+
   return (
     <div>
       {/* <div className="header">{props.owner}'s notebooks</div> */}

packages/editor/src/app/main/components/NotebookOverview.tsx

@@ -64,7 +64,7 @@ export class MatrixAuthStore extends lifecycle.Disposable {
     this._onLoggedInChanged.event;
 
   // based on https://github.com/matrix-org/matrix-react-sdk/blob/96e16940bb9d30fbbbb1133fae796c1021e871f3/src/components/structures/MatrixChat.tsx#L350
-  public async initialize() {
+  public async initialize(enableGuest: boolean) {
     const params = decodeParams(window.location.search.substring(1));
     const loggedIn = await this.attemptTokenLogin(
       params as any,
@@ -89,7 +89,7 @@ export class MatrixAuthStore extends lifecycle.Disposable {
       return true;
     } else {
       return await this.loadSession({
-        enableGuest: true,
+        enableGuest,
         defaultDeviceDisplayName: MATRIX_CONFIG.defaultDeviceDisplayName,
         guestHsUrl: MATRIX_CONFIG.hsUrl,
         guestIsUrl: MATRIX_CONFIG.isUrl,

packages/editor/src/app/matrix-auth/MatrixAuthStore.ts

@@ -35,7 +35,7 @@ export const OutputShadow = observer(
         x -= parentBB.x;
         runInAction(() => {
           if (props.positions.x !== x || props.positions.y !== y) {
-            console.log("update pos", y, props.positions.y);
+            // console.log("update pos", y, props.positions.y);
             props.positions.x = x;
             props.positions.y = y;
           }