Update contributing (#101)

* Update contributing

* Add links in README

Author: pearmini

CONTRIBUTING.md

@@ -1,3 +1,68 @@
-# Contributing to Recho
+# Recho - Contributing
+
+Recho is open source and released under the [ISC license](/LICENCE). You are welcome to contribute in different ways: open a [pull request](https://github.com/recho-dev/recho/pulls), participate in [issues](https://github.com/recho-dev/recho/issues) and [discussions](https://github.com/recho-dev/recho/discussions) or star this project!
 
 ## Sharing Examples
+
+All the examples are located in `app/examples`. The quickest way to add an example is through GitHub's web editor:
+
+- Go to [new file](https://github.com/recho-dev/recho/new/main/app/examples).
+- Enter the filename in the format of `[SKETCH-NAME].recho.js`.
+- Add the metadata as doc strings at the top of the file.
+- Add the code below the metadata.
+- Click the "Commit changes" button.
+
+The following metadata are required:
+
+- **title** - the title of the sketch
+- **author** - the author of the sketch
+- **created** - the date of the creation of the sketch
+- **github** - the GitHub username of the author, for displaying the avatar
+- **pull_request** - the pull request number of adding this sketch, for commenting on the pull request
+
+The following metadata are optional:
+
+- **thumbnail_start** - the line number of the start of the thumbnail code
+
+Here is an example:
+
+```js
+/**
+ * @title Hello World
+ * @author Bairui SU
+ * @github pearmini
+ * @created 2025-09-15
+ * @pull_request 123
+ * @thumbnail_start 26
+ */
+
+echo("Hello World");
+```
+
+This is a [pull request](https://github.com/recho-dev/recho/pull/82) you can refer to.
+
+## Editor & Runtime Development
+
+If you want to contribute to the editor or runtime, make sure to add test files in `test/js/` and register them in `test/js/index.js`.
+
+For example, if you add a new test file called `hello-world.js` with the following content:
+
+```js
+export const helloWorld = `echo("Hello World");`;
+```
+
+Then you need to register it in _test/js/index.js_ with the following content:
+
+```js
+export {helloWorld} from "./hello-world.js";
+```
+
+Then run `npm run dev` to open the development server.
+
+![test-env](/img/test-env.png)
+
+After finishing development, run `npm run test` to make sure everything works as expected.
+
+## Website Development
+
+If you want to contribute to the [website](https://recho.dev/), run `npm run app:dev` to open the development server. After finishing development, run `npm run test` to make sure everything works as expected.

README.md

@@ -8,11 +8,11 @@
 - [Documentation](https://recho.dev/docs/introduction) 📚 - Learn how to use Recho with our comprehensive guides.
 - [Examples](https://recho.dev/examples) 🖼️ - See what you can create and draw some inspiration!
 - [Sharing](/CONTRIBUTING.md#contributing-to-recho) 🎨 - Follow the instructions to open a [pull request](https://github.com/recho-dev/recho/new/main/app/examples) to share your sketches!
-- [Contributing](https://github.com/recho-dev/recho/issues) 🙏 - We have a bunch of things that we would like you to help us build together!
+- [Contributing](/CONTRIBUTING.md) 🙏 - We have [a bunch of things](https://github.com/recho-dev/recho/issues) that we would like you to help us build together!
 
 ## Why Recho 💡
 
-We want to make code more accessible and hopefully, more playful. Inspired by [P5.js Editor](https://editor.p5js.org/) and [Observable Notebook](https://observablehq.com/), we realize that _well-designed libraries don't necessarily make code accessible—the code environment does_! So here is Recho: **a lighter way to code, creatively**. We offer you a lighter beginning:
+We want to make code more accessible and hopefully, more playful. Inspired by [P5.js Editor](https://editor.p5js.org/) and [Observable Notebook](https://observablehq.com/), we realize that _well-designed libraries don't necessarily make code accessible—the code environment does_! So here is Recho: **a lighter way to code**. We offer you a lighter beginning:
 
 - **Lighter Input** - We use vanilla JavaScript, and you don't have to learn extra libraries or browser specific APIs to get started with. It can help you focus more on general coding concepts and algorithms themselves.
 - **Lighter Output** - We embrace text-based output—a universal and timeless interface. It's concise, intuitive, and efficient, which keeps your attention on the essence of code rather than the overhead of visuals.