Readme (#37)

* exclude history, make blockgroup lowercase

* update readme

* update title

* update commands / readme

* add badges

* add collab gif

* update snaps

* update comment

Author: YousefED

.github/workflows/build.yml

@@ -43,8 +43,8 @@ jobs:
       - name: Install Dependencies
         run: npm install
 
-      - name: Bootstrap packages
-        run: npm run bootstrap
+      # - name: Bootstrap packages
+      # run: npm run bootstrap
 
       - name: Lint packages
         run: npm run lint

.resources/animations.gif

@@ -1,6 +1,72 @@
 # BlockNote
 
-Welcome to the BlockNote editor. Let's build a block based WYSIWYG editor with killer UX!
+<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>
+
+[![npm version](https://badge.fury.io/js/%blocknote%2Fcore.svg)](https://badge.fury.io/js/%blocknote%2Fcore)
+
+**Welcome to BlockNote editor: a "Notion-style" block-based extensible text editor built on top of [Prosemirror](https://prosemirror.net/) and [Tiptap](https://tiptap.dev/).**
+
+# Live demo
+
+Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-main.vercel.app/).
+
+(Source in [examples/editor](/examples/editor))
+
+# Example code (React)
+
+```typescript
+import { EditorContent, useEditor } from "@blocknote/core";
+import "@blocknote/core/style.css";
+
+function App() {
+  const editor = useEditor({
+    onUpdate: ({ editor }) => {
+      // Log the document to console on every update
+      console.log(editor.getJSON());
+    },
+  });
+
+  return <EditorContent editor={editor} />;
+}
+```
+
+# Features
+
+BlockNote comes with a number of features and components to make it easy to embed a high-quality block-based editor in your app:
+
+### Animations:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/animations.gif?raw=true" width="400" />
+
+### Helpful placeholders:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/placeholders.gif?raw=true" width="400" />
+![placeholders](.resources/placeholders.gif)
+
+### Drag and drop blocks:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
+![dragdrop](.resources/dragdrop.gif)
+
+### Nesting / indentation with tab and shift+tab:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/nesting.gif?raw=true" width="400" />
+
+### Slash (/) menu:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/slashmenu.gif?raw=true" width="400" />
+
+### Format menu:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/selectmenu.gif?raw=true" width="400" />
+
+### Real-time collaboration:
+
+<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/collaboration.gif?raw=true" width="400" />
+
+# Contributing
+
+Directory structure:
 
 ```
 blocknote
@@ -9,27 +75,26 @@ blocknote
 └── tests               - Playwright end to end tests
 ```
 
-# Development
-
-We use [Lerna](https://lerna.js.org/) to manage the monorepo with separate packages.
-
 ## Running
 
 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
-    npm run bootstrap
 
-    # Start the editor project
+    # Start the example project
     npm start
 
-## 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/package.json)
 - run `npm run install-new-packages`
 - Double check `package-lock.json` to make sure only the relevant packages have been affected
+
+# Credits ❤️
+
+BlockNote builds directly on two awesome projects; [Prosemirror](https://prosemirror.net/) by Marijn Haverbeke and [Tiptap](https://tiptap.dev/). Consider sponsoring those libraries when using BlockNote: [Prosemirror](https://marijnhaverbeke.nl/fund/), [Tiptap](https://github.com/sponsors/ueberdosis).
+
+BlockNote is built as part of [TypeCell](https://www.typecell.org). 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!
+
+<a href="https://nlnet.nl"><img src="https://nlnet.nl/image/logos/NGIAssure_tag.svg" alt="NLNet" width="100"></a>

.resources/collaboration.gif

@@ -4,7 +4,7 @@
     <meta charset="UTF-8" />
     <!-- <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" /> -->
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>BlockNote demo</title>
   </head>
   <body>
     <div id="root"></div>