Comprehensively update user manual and contributor guide, add Adam to core team

Author: Keavon

.github/workflows/website.yml

@@ -40,7 +40,7 @@ jobs:
       - name: 🌐 Build Graphite website with Zola
         run: |
           cd website
-          zola build
+          zola --config config_prod.toml build
 
       - name: 🔍 Check if `website/other` directory changed
         uses: dorny/paths-filter@v3

Cargo.toml

@@ -63,7 +63,7 @@ spirv-std = { git = "https://github.com/Rust-GPU/rust-gpu.git" }
 wgpu-types = "23"
 wgpu = "23"
 once_cell = "1.13" # Remove when `core::cell::LazyCell` (<https://doc.rust-lang.org/core/cell/struct.LazyCell.html>) is stabilized in Rust 1.80 and we bump our MSRV
-wasm-bindgen = "=0.2.99" # NOTICE: ensure this stays in sync with the `wasm-bindgen-cli` version in `website/content/volunteer/guide/getting-started/_index.md`. We pin this version because wasm-bindgen upgrades may break various things.
+wasm-bindgen = "=0.2.99" # NOTICE: ensure this stays in sync with the `wasm-bindgen-cli` version in `website/content/volunteer/guide/project-setup/_index.md`. We pin this version because wasm-bindgen upgrades may break various things.
 wasm-bindgen-futures = "0.4"
 js-sys = "=0.3.76"
 web-sys = "=0.3.76"

frontend/assets/LICENSE.md

@@ -1,4 +1,4 @@
-Copyright (c) 2021-2023 Graphite Labs, LLC.
+Copyright (c) 2021-2025 Graphite Labs, LLC.
 
 The design assets in this directory (including SVG code for icons and logos) are NOT licensed under the Apache 2.0 license terms applied to other Graphite source code files. This directory and its entire contents are excluded from the Apache 2.0 source code license, and full copyright is held by the rightsholder for the creative works contained as files herein.
 

website/config.toml

@@ -1,19 +1,17 @@
-# The URL the site will be built for
-base_url = "https://graphite.rs"
-
-# Whether to automatically compile all Sass files in the sass directory
-compile_sass = true
-
 title = "Graphite"
 description = "2D raster & vector editor that melds traditional layers & tools with a modern node-based procedural workflow."
+base_url = "https://graphite.rs"
 feed_filenames = ["rss.xml"]
 
+compile_sass = true
+minify_html = false
+
 [markdown]
-# Whether to do syntax highlighting
-# Theme can be customized by setting the `highlight_theme` variable to a theme supported by Zola
 highlight_code = true
 highlight_theme = "css"
-highlight_themes_css = [{ theme = "kronuz", filename = "syntax-highlighting.css" }]
+highlight_themes_css = [
+	{ theme = "kronuz", filename = "syntax-highlighting.css" },
+]
 
 [extra]
 # Put all your custom variables here

website/config_prod.toml

@@ -0,0 +1,17 @@
+title = "Graphite"
+description = "2D raster & vector editor that melds traditional layers & tools with a modern node-based procedural workflow."
+base_url = "https://graphite.rs"
+feed_filenames = ["rss.xml"]
+
+compile_sass = true
+minify_html = true
+
+[markdown]
+highlight_code = true
+highlight_theme = "css"
+highlight_themes_css = [
+	{ theme = "kronuz", filename = "syntax-highlighting.css" },
+]
+
+[extra]
+# Put all your custom variables here

website/content/_index.md

@@ -1,10 +1,11 @@
 +++
-title = "Web-based vector graphics editor and design tool"
+title = "Free online vector editor & procedural design tool"
 template = "section.html"
 
 [extra]
-css = ["index.css"]
-js = ["image-interaction.js", "video-embed.js"]
+css_inline = ["index.css"]
+js = ["carousel.js", "youtube-embed.js", "video-autoplay.js"]
+meta_description = "Open source free software. A vector graphics creativity suite with a clean, intuitive interface. Opens instantly (no signup) and runs locally in a browser. Exports SVG, PNG, JPG."
 +++
 
 <!-- ▛ LOGO ▜ -->
@@ -21,7 +22,7 @@ js = ["image-interaction.js", "video-embed.js"]
 
 <h1 class="balance-text">Your <span>procedural</span> toolbox for 2D content creation</h1>
 
-<p class="balance-text">Graphite is a free, open source vector and raster graphics engine, available now in alpha. Get creative with a nondestructive editing workflow that combines layer-based compositing with node-based generative design.</p>
+<p class="balance-text">Graphite is a free, open source vector and raster graphics editor, available now in alpha. Get creative with a nondestructive editing workflow that combines layer-based compositing with node-based generative design.</p>
 
 </div>
 </section>
@@ -95,7 +96,7 @@ js = ["image-interaction.js", "video-embed.js"]
 
 <div class="carousel-controls">
 
-<button class="direction prev" data-carousel-prev>
+<button class="direction prev" data-carousel-prev aria-label="Move to previous screenshot">
 
 <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
 
@@ -105,12 +106,12 @@ js = ["image-interaction.js", "video-embed.js"]
 </svg>
 
 </button>
-<button class="dot active" data-carousel-dot></button>
-<button class="dot" data-carousel-dot></button>
-<button class="dot" data-carousel-dot></button>
-<button class="dot" data-carousel-dot></button>
-<button class="dot" data-carousel-dot></button>
-<button class="direction next" data-carousel-next>
+<button class="dot active" data-carousel-dot aria-label="Move to screenshot 1"></button>
+<button class="dot" data-carousel-dot aria-label="Move to screenshot 2"></button>
+<button class="dot" data-carousel-dot aria-label="Move to screenshot 3"></button>
+<button class="dot" data-carousel-dot aria-label="Move to screenshot 4"></button>
+<button class="dot" data-carousel-dot aria-label="Move to screenshot 5"></button>
+<button class="direction next" data-carousel-next aria-label="Move to next screenshot">
 
 <svg width="40" height="40" viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
 
@@ -257,7 +258,7 @@ Presently, Graphite is a lightweight offline web app with features primarily ori
 
 Graphite is designed principally as a professional-grade desktop application that is also accessible in-browser for quick, casual usage.
 
-Where's the download? Windows, Mac, and Linux apps should be available around the end of 2024. Until then, you can <a href="https://support.google.com/chrome/answer/9658361" target="_blank">install it as a PWA</a>.
+Where's the download? Windows, Mac, and Linux apps should be available around the start of 2025. Until then, you can <a href="https://support.google.com/chrome/answer/9658361" target="_blank">install it as a PWA</a>.
 
 Developing and maintaining a native app on so many platforms is a big task. A fast, sloppy approach wouldn't cut it, but engineering the right tech takes time. That's why first supporting just web, the one platform that stays up-to-date and reaches all devices, was the initial priority.
 
@@ -294,7 +295,7 @@ Graphite is the first and only graphic design package built for procedural editi
 
 <div class="block description">
 
-<h1 class="feature-box-header balance-text">Explore creative possibilities</h1>
+<h1 class="feature-box-header balance-text">Explore parametric possibilities</h1>
 
 Save hours on tedious alterations and make better creative choices. Graphite lets you iterate rapidly by adjusting node parameters instead of individual elements.
 
@@ -311,11 +312,11 @@ Want a different placement area? Just tweak the path.
 
 <div class="block description">
 
-<h1 class="feature-box-header balance-text">Mix and morph parameters</h1>
+<h1 class="feature-box-header balance-text">Mix and morph anything</h1>
 
-Nondestructive editing means every decision is tied to a parameter you can adjust later on. Use Graphite to interpolate between any states just by dragging sliders.
+Nondestructive editing means every decision is tied to a parameter you can adjust later on. Use Graphite to interpolate between any states just by dragging value sliders.
 
-Blend across color schemes. Morph shapes before they're scattered around the canvas. The possibilities are endless.
+Blend across color schemes. Morph shapes before they're scattered around the canvas. The options are endless.
 
 <a href="https://editor.graphite.rs/#demo/changing-seasons">Open this artwork</a> and give it a try yourself.
 
@@ -338,15 +339,15 @@ Graphite's representation of artwork as a node graph lets you customize, compose
 <div class="feature-icons four-wide">
 	<div class="feature-icon">
 		<img class="atlas" style="--atlas-index: 9" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
-		<span class="balance-text">Pixelation-free infinite zooming and panning of boundless content</span>
+		<span class="balance-text">Infinitely pan and zoom, export any resolution with no pixelation</span>
 	</div>
 	<div class="feature-icon">
 		<img class="atlas" style="--atlas-index: 2" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
-		<span class="balance-text">Modular node-based pipelines for generative AI <em>(soon)</em></span>
+		<span class="balance-text">Modular node-based pipelines for generative AI <em>(future)</em></span>
 	</div>
 	<div class="feature-icon">
 		<img class="atlas" style="--atlas-index: 11" src="https://static.graphite.rs/icons/icon-atlas-features__2.png" alt="" />
-		<span class="balance-text">Asset pipelines for studio production environments <em>(soon)</em></span>
+		<span class="balance-text">Asset pipelines for studio production environments <em>(future)</em></span>
 	</div>
 </div>
 
@@ -415,23 +416,23 @@ You'll receive your first newsletter email with the next major Graphite news.
 <div class="block social-media-links">
 
 <a href="https://discord.graphite.rs" target="_blank">
-	<img src="https://static.graphite.rs/icons/discord__2.svg" alt="Discord" />
+	<img src="https://static.graphite.rs/icons/discord__2.svg" alt="" />
 	<span class="link not-uppercase arrow">Discord</span>
 </a>
 <a href="https://www.reddit.com/r/graphite/" target="_blank">
-	<img src="https://static.graphite.rs/icons/reddit__3.svg" alt="Reddit" />
+	<img src="https://static.graphite.rs/icons/reddit__3.svg" alt="" />
 	<span class="link not-uppercase arrow">Reddit</span>
 </a>
 <a href="https://bsky.app/profile/graphiteeditor.bsky.social" target="_blank">
-	<img src="https://static.graphite.rs/icons/bluesky.svg" alt="Bluesky" />
+	<img src="https://static.graphite.rs/icons/bluesky.svg" alt="" />
 	<span class="link not-uppercase arrow">Bluesky</span>
 </a>
 <a href="https://twitter.com/graphiteeditor" target="_blank">
-	<img src="https://static.graphite.rs/icons/twitter.svg" alt="Twitter" />
+	<img src="https://static.graphite.rs/icons/twitter.svg" alt="" />
 	<span class="link not-uppercase arrow">Twitter</span>
 </a>
 <a href="https://www.youtube.com/@GraphiteEditor" target="_blank">
-	<img src="https://static.graphite.rs/icons/youtube.svg" alt="YouTube" />
+	<img src="https://static.graphite.rs/icons/youtube.svg" alt="" />
 	<span class="link not-uppercase arrow">YouTube</span>
 </a>
 
@@ -511,7 +512,7 @@ Watch this timelapse showing the process of mixing traditional vector art (traci
 <h1><span class="alternating-text"><span>Co-create</span><span>Ideate</span><span>Illustrate</span><span>Generate</span><span>Iterate</span></span> with Imaginate</h1>
 
 **Imaginate** is a node powered by <a href="https://en.wikipedia.org/wiki/Stable_Diffusion" target="_blank">Stable Diffusion</a> that makes AI-assisted art creation an easy, nondestructive process.
-<!-- [Learn how](/learn/node-graph/imaginate) it works. --////////////////////>
+[Learn how](/learn/node-graph/imaginate) it works.
 
 </div>
 <div class="diptych">

website/content/about.md

@@ -2,7 +2,7 @@
 title = "About Graphite"
 
 [extra]
-css = ["about.css"]
+css_inline = ["about.css"]
 css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
 +++
 
@@ -111,17 +111,15 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific
 
 ---
 
-<div class="triptych">
+<div class="diptych">
 
 <div class="block" id="keavon">
 
 <img src="https://static.graphite.rs/content/about/core-team-photo-keavon-chambers.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Keavon Chambers" />
 
-## Keavon Chambers
+## Keavon Chambers <span class="handle">(@Keavon)</span> <span class="emoji" title="American">🇺🇸</span>
 
-*@Keavon* <span class="emoji" title="American">🇺🇸</span>
-
-*Founder, UI & product design, frontend engineering*
+***Founder, UI & product design, frontend, editor systems***
 
 Keavon is a creative generalist with a love for the fusion of arts and technology. UX and graphic designer, photographer, game developer, technical artist, and everything in between— he is equal parts designer and engineer. His multidisciplinary background in the digital arts is aptly suited for concocting the unique vision needed to bring Graphite to fruition.
 
@@ -130,26 +128,38 @@ Keavon is a creative generalist with a love for the fusion of arts and technolog
 
 <img src="https://static.graphite.rs/content/about/core-team-photo-dennis-kobert.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Dennis Kobert" />
 
-## Dennis Kobert
-
-*@TrueDoctor* <span class="emoji" title="German">🇩🇪</span>
+## Dennis Kobert <span class="handle">(@TrueDoctor)</span> <span class="emoji" title="German">🇩🇪</span>
 
-*Graphene node engine, research, architecture*
+***Graphene node engine, research, architecture***
 
 Dennis is a mix between a mathematician and a mad scientist. While still enjoying the art of photography and image editing (which drew him to the project early on), he thrives when challenged with designing complex systems and pushing boundaries. His method of building generalized solutions wrapped in elegant layers of abstraction led to his creation of the Graphene engine.
 
 </div>
+
+</div>
+<div class="diptych">
+
 <div class="block" id="hypercube">
 
-<img src="https://static.graphite.rs/content/about/core-team-photo-hypercube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Hypercube" />
+<img src="https://static.graphite.rs/content/about/core-team-photo-hypercube__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Hypercube" />
 
-## "Hypercube"
+## "Hypercube" <span class="handle">(@0Hypercube)</span> <span class="emoji" title="British">🇬🇧</span>
 
-*@0Hypercube* <span class="emoji" title="British">🇬🇧</span>
+***Editor systems, nodes, tools, architecture***
 
-*Editor systems, nodes, tools, architecture*
+"Hypercube" is a light speed code monkey who excels at developing, refactoring, and maintaining the editor codebase. With an unmatched ability to comprehend intricate code, he delivers lasting and efficient solutions at an impressive pace. He takes ownership of many central editor systems including tools, typography, transforms, layers, and node graph integration.
 
-"Hypercube" is a light speed code monkey who excels at developing, refactoring, and maintaining the editor code base. With an unmatched ability to comprehend intricate code, he delivers lasting and efficient solutions at an impressive pace. He takes ownership of many central editor systems including tools, typography, transforms, layers, and node graph integration.
+</div>
+
+<div class="block" id="adam">
+
+<img src="https://static.graphite.rs/content/about/core-team-photo-adam-gerhant.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Adam Gerhant" />
+
+## Adam Gerhant <span class="handle">(@pendapia)</span> <span class="emoji" title="American">🇺🇸</span>
+
+***Editor graph tooling, node data formats***
+
+Adam is a pragmatic problem solver with a talent for simplifying complexity. He is responsible for various architectural decisions which provide future proof integrations between the Graphene engine and editor. His work has greatly improved the performance, stability and code quality of the project, while also setting the stage for additional features.
 
 </div>
 
@@ -158,7 +168,6 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
 </div>
 </section>
 
-
 <section>
 <div class="triptych">