Revamp the Graphite website (#1265)

Revamp the website with more content
2026-10-05 02:28:12 +08:00 · 2023-08-10 18:37:04 -07:00
parent f2b0abc164
commit f429db6369
76 changed files with 3506 additions and 1670 deletions
@@ -0,0 +1,48 @@
+++
+title = "Getting started"
+template = "book.html"
+page_template = "book.html"
+
+[extra]
+order = 1 # Chapter number
+++
+
+Graphite is built with Rust and web technologies. Install the latest LTS version of [Node.js](https://nodejs.org/) and stable release of [Rust](https://www.rust-lang.org/), as well as [Git](https://git-scm.com/).
+
+## Installing
+
+Clone the project:
+```sh
+git clone https://github.com/GraphiteEditor/Graphite.git
+```
+
+Then install the required Node.js packages:
+```sh
+cd frontend
+npm install
+```
+
+You only need to explicitly install Node.js dependencies. Rust's cargo dependencies will be installed automatically on your first build. One dependency in the build chain, `wasm-pack`, will be installed automatically on your system when the Node.js packages are installing. (If you prefer to install this manually, get it from the [wasm-pack website](https://rustwasm.github.io/wasm-pack/), then install your npm dependencies with `npm install --no-optional` instead.)
+
+One tool in the Rust ecosystem does need to be installed:
+
+```
+cargo install cargo-watch
+```
+
+That's it! Now, to run the project while developing, just execute:
+```
+npm start
+```
+
+This spins up the dev server at <http://localhost:8080> with a file watcher that performs hot reloading of the web page. You should be able to start the server, edit and save web and Rust code, and rarely have to kill the server (by hitting <kbd>Ctrl</kbd><kbd>C</kbd> twice). You sometimes may need to reload the browser's web page if the hot reloading didn't behave perfectly. This method compiles Graphite code in debug mode which includes debug symbols for viewing function names in stack traces. But be aware, it runs slower and takes more memory.
+
+## Production builds
+
+You'll rarely ever need to do this, but to compile a production build with full optimizations:
+```sh
+cargo install cargo-about
+npm run build
+```
+
+It produces the `/frontend/dist` directory containing the static site files that must be served by your own web server.
@@ -0,0 +1,14 @@
+++
+title = "Editor and tooling"
+
+[extra]
+order = 1 # Page number after chapter intro
+++
+
+We provide default configurations for VS Code users. When you open the project, watch for a prompt to install the project's suggested extensions. They will provide helpful web and Rust tooling. If you use a different IDE, you won't get default configurations for the project out of the box, so please remember to format your code and check CI for errors.
+
+## Checking, linting, and formatting
+
+While developing Rust code, `cargo check`, `cargo clippy`, and `cargo fmt` terminal commands may be run from the root directory. For web code, `npm run lint` and `npm run lint-no-fix` can be used from the `/frontend` directory to fix or view formatting issues.
+
+If you don't use VS Code and its format-on-save feature, please remember to format before committing or consider [setting up a `pre-commit` hook](https://githooks.com/) to do that automatically. Disabling VS Code's *Auto Save* files feature is recommended to ensure you actually save (and thus format) file changes.
@@ -0,0 +1,14 @@
+++
+title = "Getting help"
+
+[extra]
+order = 3 # Page number after chapter intro
+++
+
+## Discord developer community
+
+Join the [project's Discord server](https://discord.graphite.rs) then hop on the `#development` channel and ping @Keavon, @TrueDoctor, or @0Hypercube. The team would be delighted to help you get started by providing in-depth explanations of the code and programming assistance as you work. Please do not hesitate to reach out right away!
+
+## Code documentation
+
+Look out for `README.md` files in some folders of the codebase and doc comments at the top of some Rust files. The quantity of those files is limited right now, but documenting code is an excellent contribution if you wish to explain what you've learned for the sake of others, and improve your own understanding in the process.
@@ -0,0 +1,17 @@
+++
+title = "Picking a task"
+
+[extra]
+order = 2 # Page number after chapter intro
+++
+
+The [task board](https://github.com/orgs/GraphiteEditor/projects/1/views/1) provides a list of [available tasks](https://github.com/orgs/GraphiteEditor/projects/1/views/5), as well as a [beginner-friendly](https://github.com/orgs/GraphiteEditor/projects/1/views/6) subset.
+
+If you have Rust and/or web experience, you may also pick based on:
+- [Only Rust](https://github.com/orgs/GraphiteEditor/projects/1/views/5?filterQuery=status%3AShort-Term%2CMedium-Term%2CLonger-Term+label%3ARust+-label%3AWeb) tasks
+- [Only web](https://github.com/orgs/GraphiteEditor/projects/1/views/5?filterQuery=status%3AShort-Term%2CMedium-Term%2CLonger-Term+label%3AWeb+-label%3ARust) tasks (HTML/CSS/TypeScript/Svelte)
+- [Combined Rust and web](https://github.com/orgs/GraphiteEditor/projects/1/views/5?filterQuery=status%3AShort-Term%2CMedium-Term%2CLonger-Term+label%3ARust+label%3AWeb) tasks
+
+Feel free to pick whatever task interests you, then comment on the issue that you would like to start. After commenting, you can dig in right away, then we will assign the issue to your GitHub user to keep the work status of tasks organized.
+
+Writing new documentation by commenting existing code is another valuable way to contribute as you learn.