2
0

📝 Add Contribute docs

This commit is contained in:
Baptiste Arnaud
2024-01-03 16:29:41 +01:00
parent b3957295bd
commit 65f4fb0d7a
66 changed files with 1453 additions and 519 deletions

View File

@@ -0,0 +1,59 @@
---
title: Create a new block
icon: screwdriver-wrench
---
<Frame style={{ maxWidth: '400px' }}>
<img
src="/images/contribute/forging-robot.png"
alt="A blue robot forging a new block"
/>
</Frame>
Creating a new block on Typebot is pretty easy and straightforward using our in-house framework [The Forge](../the-forge/overview).
1. [Install the project locally](./local-installation)
2. Create a new branch:
```sh
git checkout -b MY_BRANCH_NAME
```
3. Create your new block using the [Forge CLI](../the-forge/overview#forge-cli):
```sh
pnpm run create-new-block
```
4. The files should be generated in `packages/forge/blocks/YOUR_BLOCK_NAME`
5. Add the block SVG logo in `packages/forge/blocks/YOUR_BLOCK_NAME/logo.tsx`
6. Right away you should be able to [run the application](./local-installation#running-the-project-locally) and see your newly created logo in the sidebar of the editor.
7. Create a new action in the `packages/forge/blocks/YOUR_BLOCK_NAME/actions` folder. See [Action](../the-forge/action) for more information.
8. List this action in the `actions` array in `packages/forge/blocks/YOUR_BLOCK_NAME/index.tsx`
9. To go further, check out the [Forge documentation](../the-forge/overview).
Make sure to check out other blocks implementations in the [packages/forge/blocks](https://github.com/baptisteArno/typebot.io/tree/main/packages/forge/blocks) folder.
## Live tutorials
<div
style={{
position: 'relative',
paddingBottom: '64.63195691202873%',
height: 0,
}}
>
<iframe
src="https://www.loom.com/embed/c49ced0c2c394751b860458b7eb904a4?sid=58e36bc9-f715-434c-b85c-e5acf6c96454"
allowFullScreen
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
height: '100%',
}}
></iframe>
</div>
Make sure to join our [Discord community](https://typebot.io/discord) to participate to these weekly office hours.