Skip to content

Commit

Permalink
chore: update github repository and readmes (#138)
Browse files Browse the repository at this point in the history
* chore: update github repository and readmes

* small fixes to docs
  • Loading branch information
YousefED authored Mar 16, 2023
1 parent f52b8c7 commit eb19d3f
Show file tree
Hide file tree
Showing 12 changed files with 92 additions and 46 deletions.
2 changes: 1 addition & 1 deletion .github/workflows/cla.yml.disabled
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ jobs:
PERSONAL_ACCESS_TOKEN: ${{ secrets.PERSONAL_ACCESS_TOKEN }}
with:
path-to-signatures: ".signatures/v1/cla.json"
path-to-document: "https://github.com/YousefED/blocknote/blob/main/CLA.md" # e.g. a CLA or a DCO document
path-to-document: "https://github.com/TypeCellOS/BlockNote/blob/main/CLA.md" # e.g. a CLA or a DCO document
# branch should not be protected
branch: "main"
# allowlist: user1,bot*
Expand Down
31 changes: 31 additions & 0 deletions CONTRIBUTING.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
# Contributing

Directory structure:

```
blocknote
├── packages/core - The core of the editor
├── packages/react - The main library for use in React apps
├── examples/editor - Example React app that embeds the editor
├── examples/vanilla - An advanced example if you don't want to use React or want to build your own UI components
└── tests - Playwright end to end tests
```

An introduction into the BlockNote Prosemirror schema can be found in [packages/core/ARCHITECTURE.md](https://github.com/TypeCellOS/BlockNote/blob/main/packages/core/ARCHITECTURE.md).

## 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 example project
npm start

## 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
76 changes: 42 additions & 34 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,10 +1,27 @@
# BlockNote

<p align="center">
<a href="https://www.blocknotejs.org">
<img alt="TypeCell" src="https://github.com/TypeCellOS/BlockNote/raw/main/packages/website/docs/public/img/logos/banner.svg?raw=true" width="300" />
</a>
</p>

<p align="center">
Welcome to BlockNote! The open source Block-Based
rich text editor. Easily add a modern text editing experience to your app.
</p>

<p align="center">
<a href="https://discord.gg/Qc2QTTH5dF"><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>

[![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)

**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/).**
</p>

<p align="center">
<a href="https://www.blocknotejs.org">
Homepage
</a> - <a href="https://www.blocknotejs.org/docs/introduction">
Introduction
</a> - <a href="https://www.blocknotejs.org/docs/quickstart">
Documentation
</a>
</p>

# Live demo

Expand All @@ -14,13 +31,15 @@ Play with the editor @ [https://blocknote-main.vercel.app/](https://blocknote-ma

# Example code (React)

[![npm version](https://badge.fury.io/js/%40blocknote%2Freact.svg)](https://badge.fury.io/js/%40blocknote%2Freact)

```typescript
import { BlockNoteView, useBlockNote } from "@blocknote/react";
import "@blocknote/core/style.css";

function App() {
const editor = useBlockNote({
onUpdate: ({ editor }) => {
onEditorContentChange: (editor) => {
// Log the document to console on every update
console.log(editor.getJSON());
},
Expand All @@ -32,41 +51,47 @@ function App() {

`@blocknote/react` comes with a fully styled UI that makes it an instant, polished editor ready to use in your app.

If you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, see `examples/vanilla` for a demo).
If you prefer to create your own UI components (menus), or don't want to use React, you can use `@blocknote/core` (_advanced_, [see docs](https://www.blocknotejs.org/docs/vanilla-js)).

# 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" />
<img src="https://github.com/TypeCellOS/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" />
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/placeholders.gif?raw=true" width="400" />

### Drag and drop blocks:

<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/dragdrop.gif?raw=true" width="400" />

### Nesting / indentation with tab and shift+tab:

<img src="https://github.com/YousefED/BlockNote/blob/readme/.resources/nesting.gif?raw=true" width="400" />
<img src="https://github.com/TypeCellOS/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" />
<img src="https://github.com/TypeCellOS/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" />
<img src="https://github.com/TypeCellOS/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" />
<img src="https://github.com/TypeCellOS/BlockNote/blob/readme/.resources/collaboration.gif?raw=true" width="400" />

# Feedback 🙋‍♂️🙋‍♀️

We'd love to hear your thoughts and see your experiments, so [come and say hi on Discord](https://discord.gg/Qc2QTTH5dF) or [Matrix](https://matrix.to/#/#typecell-space:matrix.org).

# Contributing
# Contributing 🙌

See [CONTRIBUTING.md](CONTRIBUTING.md) for more info and guidance on how to run the project (TLDR: just use `npm start`).

Directory structure:

Expand All @@ -79,24 +104,7 @@ blocknote
└── tests - Playwright end to end tests
```

An introduction into the BlockNote Prosemirror schema can be found in [packages/core/ARCHITECTURE.md](https://github.com/YousefED/BlockNote/blob/main/packages/core/ARCHITECTURE.md).

## 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 example project
npm start

## 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
The codebase is automatically tested using Vitest and Playwright.

# Credits ❤️

Expand Down
2 changes: 1 addition & 1 deletion packages/core/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@blocknote/core",
"homepage": "https://github.com/yousefed/blocknote",
"homepage": "https://github.com/TypeCellOS/BlockNote",
"private": false,
"license": "MPL-2.0",
"version": "0.4.6-alpha.3",
Expand Down
2 changes: 1 addition & 1 deletion packages/react/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@blocknote/react",
"homepage": "https://github.com/yousefed/blocknote",
"homepage": "https://github.com/TypeCellOS/BlockNote",
"private": false,
"license": "MPL-2.0",
"version": "0.4.6-alpha.3",
Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export default defineConfig({
// },
algolia: getAlgoliaConfig(process.env),
socialLinks: [
{ icon: "github", link: "https://github.com/yousefed/blocknote" },
{ icon: "github", link: "https://github.com/TypeCellOS/BlockNote" },
// { icon: "twitter", link: "https://twitter.com/TypeCellOS" },
{
icon: "discord",
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/.vitepress/theme/components/Home.vue
Original file line number Diff line number Diff line change
Expand Up @@ -49,10 +49,10 @@ defineProps<{
</p>
<div class="star">
<GithubButton
href="https://github.com/yousefed/blocknote"
href="https://github.com/TypeCellOS/BlockNote"
data-size="large"
data-show-count="true"
aria-label="Star yousefed/blocknote on GitHub"
aria-label="Star TypeCellOS/BlockNote on GitHub"
>Star</GithubButton
>
</div>
Expand Down
4 changes: 2 additions & 2 deletions packages/website/docs/docs/introduction.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Introduction to BlockNote

<div><a href="https://www.npmjs.com/package/@blocknote/core"><img style="display: inline" alt="NPM" src="https://img.shields.io/npm/v/@blocknote/react"></a> <a href="https://github.com/yousefed/blocknote"><img style="display: inline" alt="GitHub Repo stars" src="https://img.shields.io/github/stars/yousefed/blocknote?style=social"></a></div>
<div><a href="https://www.npmjs.com/package/@blocknote/core"><img style="display: inline" alt="NPM" src="https://img.shields.io/npm/v/@blocknote/react"></a> <a href="https://github.com/TypeCellOS/BlockNote"><img style="display: inline" alt="GitHub Repo stars" src="https://img.shields.io/github/stars/TypeCellOS/BlockNote?style=social"></a></div>

BlockNote is a block-based rich-text editor for [React](https://reactjs.org/), focused on providing a great out-of-the-box experience with minimal setup.

Expand All @@ -24,7 +24,7 @@ On top of that, it comes with a modern block-based design. This gives documents

## Community

BlockNote is currently in early beta. We'd love your feedback! If you have questions, need help, or want to contribute reach out to the community on [Discord](https://discord.gg/Qc2QTTH5dF) and [GitHub](https://github.com/yousefed/blocknote).
BlockNote is currently in early beta. We'd love your feedback! If you have questions, need help, or want to contribute reach out to the community on [Discord](https://discord.gg/Qc2QTTH5dF) and [GitHub](https://github.com/TypeCellOS/BlockNote).

## Next: Set up BlockNote

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/docs/quickstart.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Quickstart

<div><a href="https://www.npmjs.com/package/@blocknote/core"><img style="display: inline" alt="NPM" src="https://img.shields.io/npm/v/@blocknote/react"></a> <a href="https://github.com/yousefed/blocknote"><img style="display: inline" alt="GitHub Repo stars" src="https://img.shields.io/github/stars/yousefed/blocknote?style=social"></a></div>
<div><a href="https://www.npmjs.com/package/@blocknote/core"><img style="display: inline" alt="NPM" src="https://img.shields.io/npm/v/@blocknote/react"></a> <a href="https://github.com/TypeCellOS/BlockNote"><img style="display: inline" alt="GitHub Repo stars" src="https://img.shields.io/github/stars/TypeCellOS/BlockNote?style=social"></a></div>

Getting started with BlockNote is quick and easy. All you need to do is install the package and add the React component to your app!

Expand Down
2 changes: 1 addition & 1 deletion packages/website/docs/docs/vanilla-js.md
Original file line number Diff line number Diff line change
Expand Up @@ -53,4 +53,4 @@ const editor = new BlockNoteEditor({

## Example

For an example of a how to set up your custom UI factories, see the [Vanilla JS example](https://github.com/YousefED/BlockNote/blob/main/examples/vanilla/) in the repository.
For an example of a how to set up your custom UI factories, see the [Vanilla JS example](https://github.com/TypeCellOS/BlockNote/blob/main/examples/vanilla/) in the repository.
2 changes: 1 addition & 1 deletion packages/website/docs/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ hero:
# link: /docs
# - theme: alt
# text: View on GitHub
# link: https://github.com/yousefed/blocknote
# link: https://github.com/TypeCellOS/BlockNote
---

<script setup lang="ts">
Expand Down
9 changes: 8 additions & 1 deletion packages/website/vercel.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,10 @@
{
"cleanUrls": true
"cleanUrls": true,
"redirects": [
{
"source": "/docs",
"destination": "https://www.blocknotejs.org/docs/introduction",
"permanent": true
}
]
}

0 comments on commit eb19d3f

Please sign in to comment.