mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-30 07:48:12 +08:00
Reduce website static content file size by a lot
This commit is contained in:
Keavon Chambers
+17
-18
@@ -4,7 +4,7 @@ template = "section.html"
|
||||
|
||||
[extra]
|
||||
css = ["/index.css"]
|
||||
js = ["/image-interaction.js", "/fundraising.js"]
|
||||
js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
|
||||
+++
|
||||
|
||||
<!-- ▛ LOGO ▜ -->
|
||||
@@ -13,7 +13,7 @@ js = ["/image-interaction.js", "/fundraising.js"]
|
||||
</section>
|
||||
<!-- ▙ LOGO ▟ -->
|
||||
|
||||
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.png" alt="" />
|
||||
<img class="pencil-texture" src="https://static.graphite.rs/textures/pencil-texture.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" />
|
||||
|
||||
<!-- ▛ QUICK LINKS ▜ -->
|
||||
<section id="quick-links">
|
||||
@@ -66,19 +66,19 @@ js = ["/image-interaction.js", "/fundraising.js"]
|
||||
<!-- ▛ SCREENSHOTS ▜ -->
|
||||
<section id="screenshots" class="carousel window-size-1" data-carousel>
|
||||
<div class="carousel-slide">
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" alt="Graphite UI image #1" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.png" alt="Graphite UI image #3" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" alt="Graphite UI image #2" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #1" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #2" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite UI image #3" data-carousel-image />
|
||||
</div>
|
||||
<div class="carousel-slide torn left">
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.png" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
|
||||
</div>
|
||||
<div class="carousel-slide torn right">
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires.png" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.png" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.png" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-demo-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
|
||||
<img src="https://static.graphite.rs/content/index/gui-mockup-viewport__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" data-carousel-image />
|
||||
</div>
|
||||
<div class="screenshot-details">
|
||||
<div class="carousel-controls">
|
||||
@@ -266,7 +266,7 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
|
||||
</div>
|
||||
<div class="demo-artwork">
|
||||
<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus">
|
||||
<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.png" alt="Vector art of Just of Potted Cactus" />
|
||||
<img src="https://static.graphite.rs/content/index/just-a-potted-cactus-thumbnail.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector art of Just of Potted Cactus" />
|
||||
</a>
|
||||
<p>
|
||||
<span class="balance-text">
|
||||
@@ -304,10 +304,10 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
|
||||
|
||||
<div class="image-comparison" data-image-comparison style="--comparison-percent: 50%">
|
||||
<div class="crop-container">
|
||||
<img src="https://static.graphite.rs/content/index/light-bulb-before.png" alt="Vector illustration of a light bulb" />
|
||||
<img src="https://static.graphite.rs/content/index/light-bulb-before.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Vector illustration of a light bulb" />
|
||||
</div>
|
||||
<div class="crop-container">
|
||||
<img src="https://static.graphite.rs/content/index/light-bulb-after.png" alt="Watercolor painting of a light bulb" />
|
||||
<img src="https://static.graphite.rs/content/index/light-bulb-after.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Watercolor painting of a light bulb" />
|
||||
</div>
|
||||
<div class="slide-bar">
|
||||
<div class="arrows">
|
||||
@@ -333,10 +333,10 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
|
||||
|
||||
<div class="image-comparison" data-image-comparison style="--comparison-percent: 50%">
|
||||
<div class="crop-container">
|
||||
<img src="https://static.graphite.rs/content/index/california-poppies-before.png" alt="Sloppy poppy: vector doodle of California poppy flowers wrapped around a circle" />
|
||||
<img src="https://static.graphite.rs/content/index/california-poppies-before.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Sloppy poppy: vector doodle of California poppy flowers wrapped around a circle" />
|
||||
</div>
|
||||
<div class="crop-container">
|
||||
<img src="https://static.graphite.rs/content/index/california-poppies-after.png" alt="Polished poppy: artistic, high-quality illustration of California poppy flowers wrapped around a circle" />
|
||||
<img src="https://static.graphite.rs/content/index/california-poppies-after.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Polished poppy: artistic, high-quality illustration of California poppy flowers wrapped around a circle" />
|
||||
</div>
|
||||
<div class="slide-bar">
|
||||
<div class="arrows">
|
||||
@@ -475,9 +475,8 @@ Stop jumping between programs. Planned features will make Graphite a first-class
|
||||
<section id="demo-video">
|
||||
<div class="section">
|
||||
<div class="video-embed aspect-16x9">
|
||||
<iframe width="1280" height="720" src="https://www.youtube.com/embed/JgJvAHQLnXA" title="Graphite Vector Editing: "Commander Basstronaut" Artwork (25x Timelapse)" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<img data-video-embed="JgJvAHQLnXA" src="https://static.graphite.rs/content/index/commander-basstronaut-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite - Vector Editing: "Commander Basstronaut" Artwork (25x Timelapse)" />
|
||||
</div>
|
||||
<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
|
||||
</div>
|
||||
</section>
|
||||
<!-- ▙ DEMO VIDEO ▟ -->
|
||||
|
||||
@@ -118,7 +118,7 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific
|
||||
|
||||
<div class="section">
|
||||
|
||||
|
||||
<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 <span class="flag" title="American">🇺🇸</span>
|
||||
|
||||
@@ -133,7 +133,7 @@ Keavon is a creative generalist with a love for the fusion of arts and technolog
|
||||
</div>
|
||||
<div class="section">
|
||||
|
||||
|
||||
<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 <span class="flag" title="German">🇩🇪</span>
|
||||
|
||||
@@ -148,7 +148,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
|
||||
</div>
|
||||
<div class="section">
|
||||
|
||||
|
||||
<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" />
|
||||
|
||||
## "Hypercube" <span class="flag" title="British">🇬🇧</span>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@ title = "Announcing Graphite alpha"
|
||||
date = 2022-02-12
|
||||
|
||||
[extra]
|
||||
banner = "https://static.graphite.rs/content/blog/2022-02-12-announcing-graphite-alpha.png"
|
||||
banner = "https://static.graphite.rs/content/blog/2022-02-12-announcing-graphite-alpha.avif"
|
||||
author = "Keavon Chambers"
|
||||
reddit = "https://www.reddit.com/r/graphite/comments/unw3hi/blog_post_announcing_graphite_alpha/"
|
||||
twitter = "https://twitter.com/GraphiteEditor/status/1524663930697568256"
|
||||
|
||||
+1
-1
@@ -3,7 +3,7 @@ title = "Graphite: a vision for the future of 2D content creation"
|
||||
date = 2022-03-12
|
||||
|
||||
[extra]
|
||||
banner = "https://static.graphite.rs/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.png"
|
||||
banner = "https://static.graphite.rs/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.avif"
|
||||
author = "Keavon Chambers"
|
||||
reddit = "https://www.reddit.com/r/graphite/comments/unw3va/blog_post_graphite_a_vision_for_the_future_of_2d/"
|
||||
twitter = "https://twitter.com/GraphiteEditor/status/1524664010091556864"
|
||||
|
||||
@@ -3,7 +3,7 @@ title = "Distributed computing in the Graphene runtime"
|
||||
date = 2022-05-12
|
||||
|
||||
[extra]
|
||||
banner = "https://static.graphite.rs/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime__2.png"
|
||||
banner = "https://static.graphite.rs/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime__2.avif"
|
||||
author = "Keavon Chambers"
|
||||
reddit = "https://www.reddit.com/r/graphite/comments/unw45k/blog_post_distributed_computing_in_the_graphene/"
|
||||
twitter = "https://twitter.com/GraphiteEditor/status/1524664083554791424"
|
||||
@@ -43,7 +43,7 @@ For security and portability, user-authored nodes are compiled into WebAssembly
|
||||
|
||||
In the product architecture, Graphene is a distributed runtime environment for quickly processing data in the node graph by utilizing a pool of CPU and GPU compute resources available on local and networked machines. Jobs are run where latency, speed, and bandwidth availability will be most likely to provide a responsive user experience.
|
||||
|
||||
|
||||
<img src="https://static.graphite.rs/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime/local-and-cloud.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphene in a local and cloud environment" />
|
||||
|
||||
## Scheduler
|
||||
|
||||
|
||||
@@ -5,10 +5,11 @@ page_template = "book.html"
|
||||
|
||||
[extra]
|
||||
order = 2 # Chapter number
|
||||
js = ["/video-embed.js"]
|
||||
+++
|
||||
|
||||
<div class="video-embed aspect-16x9">
|
||||
<iframe width="1280" height="720" src="https://www.youtube.com/embed/vUzIeg8frh4" title="Workshop: Intro to Coding for Graphite" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
|
||||
<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>
|
||||
|
||||
The Graphite editor is built as a web app powered by Svelte in the frontend and Rust in the backend which is compiled to WebAssembly (wasm) and run in the browser.
|
||||
|
||||
@@ -44,4 +44,4 @@ Once you begin writing code, please open a pull request immediately and mark it
|
||||
|
||||
Open a new PR as a draft / convert an existing PR to a draft:
|
||||
|
||||
|
||||
<img src="https://static.graphite.rs/content/volunteer/guide/draft-pr.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Screenhots showing GitHub's "Create pull request (arrow) > Create draft pull request" and "Still in progress? Convert to draft" buttons" />
|
||||
|
||||
Reference in New Issue
Block a user