More website loading speed and code improvements

2026-10-06 01:58:11 +08:00 · 2025-01-08 20:49:42 -08:00
parent 68e6bec9b5
commit ae2637e08e
44 changed files with 833 additions and 898 deletions
@@ -2,8 +2,7 @@
 title = "Volunteer"

 [extra]
-css = ["/volunteer.css"]
-linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+css = ["/page/volunteer.css", "/component/feature-box.css"]
 +++

 <section>
@@ -62,7 +61,7 @@ The Graphite editor is built much like a game engine, split across user interfac
 <img src="https://static.graphite.rs/content/volunteer/creative-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lemon)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a fountain pen, ink pots, and a book" />
 </a>

-Assign yourself the *"<span class="emoji">🙌</span> Interested in helping with art or marketing"* role in the *#welcome* Discord channel. Then mention your experience and how you'd like to help in the *#introductions* channel.
+Assign yourself the *"🙌 Interested in helping with art or marketing"* role in the *#welcome* Discord channel. Then mention your experience and how you'd like to help in the *#introductions* channel.

 <a href="https://discord.graphite.rs" class="button arrow">Volunteer on Discord</a>

@@ -97,7 +96,7 @@ Help write, edit, and design content for this website, social media, newsletters

 <img src="https://static.graphite.rs/content/volunteer/user-contributions.avif" class="feature-box-full-image" style="aspect-ratio: 3/1 auto; background: var(--color-lilac)" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a magnifying glass on the search for a software bug" />

-Assign yourself the *"<span class="emoji">🐒</span> Volunteer to get pinged regularly for QA testing"* or *"<span class="emoji">🤖</span> Interested in contributing code"* roles in the *#welcome* Discord channel. In the latter case, drop by the *#development* channel to get advice writing your first node.
+Assign yourself the *"🐒 Volunteer to get pinged regularly for QA testing"* or *"🤖 Interested in contributing code"* roles in the *#welcome* Discord channel. In the latter case, drop by the *#development* channel to get advice writing your first node.

 <a href="https://discord.graphite.rs" class="button arrow">Volunteer on Discord</a>

@@ -6,12 +6,11 @@ aliases = ["/contribute"]

 [extra]
 book = true
-linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++

 Welcome, potential contributor! We're excited to have you join the Graphite project and it's our goal to make the process as smooth as possible. This guide will serve as your library of knowledge to help you get started contributing to the project. If you find any information missing or unclear, please let us know through Discord or submit a pull request to help document the process for future contributors.

-The next page will cover how to compile the Graphite source code. But first, make sure you've joined our [Discord server](https://discord.graphite.rs) and assigned yourself the *"<span class="emoji">🤖</span> Interested in contributing code"* role from the `#🙂welcome` channel. Done that? Alright, proceed!
+The next page will cover how to compile the Graphite source code. But first, make sure you've joined our [Discord server](https://discord.graphite.rs) and assigned yourself the *"🤖 Interested in contributing code"* role from the `#🙂welcome` channel. Done that? Alright, proceed!

 <p>
 <img src="https://static.graphite.rs/content/volunteer/code-contributions.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.jpg')" alt="Flavor graphic depicting a library of knowledge in a digital realm" />
@@ -6,12 +6,13 @@ page_template = "book.html"
 [extra]
 order = 2 # Chapter number
 js = ["/js/youtube-embed.js"]
+css = ["/component/youtube-embed.css"]
 +++

 The best introduction for getting up-to-speed with Graphite contribution comes from watching this webcast recording. Before asking questions in Discord, please watch the full video because it gives a comprehensive overview of most things you will need to know.

-<div class="video-embed aspect-16x9">
-	<img data-video-embed="vUzIeg8frh4" src="https://static.graphite.rs/content/volunteer/guide/workshop-intro-to-coding-for-graphite-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Workshop: Intro to Coding for Graphite" />
+<div class="youtube-embed aspect-16x9">
+	<img data-youtube-embed="vUzIeg8frh4" src="https://static.graphite.rs/content/volunteer/guide/workshop-intro-to-coding-for-graphite-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Workshop: Intro to Coding for Graphite" />
 </div>

 <!-- ## Tech stack -->
@@ -7,7 +7,7 @@ page_template = "book.html"
 order = 3 # Chapter number
 +++

-There are two places to look for beginner-friendly development tasks. Usually, the best option is to select one of the many bite-sized task descriptions marked with a <span class="emoji">‼️</span> reaction in the `#✅code-todo-list` channel of the [Discord server](https://discord.graphite.rs). You may also browse the [task board](https://github.com/orgs/GraphiteEditor/projects/1/views/1), which lists [beginner issues](https://github.com/orgs/GraphiteEditor/projects/1/views/6) to pick from. The Discord option usually has the more approachable tasks compared to the GitHub issues, which tend to have more variability in complexity.
+There are two places to look for beginner-friendly development tasks. Usually, the best option is to select one of the many bite-sized task descriptions marked with a ‼️ reaction in the `#✅code-todo-list` channel of the [Discord server](https://discord.graphite.rs). You may also browse the [task board](https://github.com/orgs/GraphiteEditor/projects/1/views/1), which lists [beginner issues](https://github.com/orgs/GraphiteEditor/projects/1/views/6) to pick from. The Discord option usually has the more approachable tasks compared to the GitHub issues, which tend to have more variability in complexity.

 If you're unsure about which task to pick, feel free to ask in the `#📄development` channel.

@@ -3,7 +3,6 @@ title = "Submitting a contribution"

 [extra]
 order = 3 # Page number after chapter intro
-linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++

 Collaboration is a key part of real-world software engineering. Graphite follows some basic procedures to keep the process smooth and efficient. You will want to familiarize yourself with these guidelines to save yourself and Graphite maintainers time and confusion.
@@ -72,7 +71,7 @@ Upon pushing a commit to your PR's branch, CI will need to build and test your c

 You also have to pass `cargo fmt` and `cargo clippy` locally before your PR can be merged.

-Your goal is for the check called "Editor: Dev & CI / build (pull_request)" to pass with a <span class="emoji">✅</span>. If it fails with a <span class="emoji">❌</span>, you will need to investigate. If you need access to the build logs, ask a maintainer to provide them. Occasionally, other checks may fail, but you likely won't be responsible for fixing those and they can be ignored.
+Your goal is for the check called "Editor: Dev & CI / build (pull_request)" to pass with a ✅. If it fails with a ❌, you will need to investigate. If you need access to the build logs, ask a maintainer to provide them. Occasionally, other checks may fail, but you likely won't be responsible for fixing those and they can be ignored.

 ## Keeping your work up-to-date