jess
/
Graphite
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Reduce website static content file size by a lot

This commit is contained in:
Keavon Chambers 2023-08-23 15:36:31 -07:00
parent 2d99d4bee1
commit 89b269cf55
12 changed files with 49 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
website/content/_index.md
View File

@ -4,7 +4,7 @@ template = "section.html"
[extra] [extra]
css = ["/index.css"] css = ["/index.css"]
js = ["/image-interaction.js", "/fundraising.js"] js = ["/image-interaction.js", "/fundraising.js", "/video-embed.js"]
+++ +++
<!-- ▛ LOGO ▜ --> <!-- ▛ LOGO ▜ -->
@ -13,7 +13,7 @@ js = ["/image-interaction.js", "/fundraising.js"]
</section> </section>
<!-- ▙ LOGO ▟ --> <!-- ▙ 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 ▜ --> <!-- ▛ QUICK LINKS ▜ -->
<section id="quick-links"> <section id="quick-links">
@ -66,19 +66,19 @@ js = ["/image-interaction.js", "/fundraising.js"]
<!-- ▛ SCREENSHOTS ▜ --> <!-- ▛ SCREENSHOTS ▜ -->
<section id="screenshots" class="carousel window-size-1" data-carousel> <section id="screenshots" class="carousel window-size-1" data-carousel>
<div class="carousel-slide"> <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-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.png" alt="Graphite UI image #3" 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.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>
<div class="carousel-slide torn left"> <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-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.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.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>
<div class="carousel-slide torn right"> <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-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.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.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>
<div class="screenshot-details"> <div class="screenshot-details">
<div class="carousel-controls"> <div class="carousel-controls">
@ -266,7 +266,7 @@ Style your shapes with strokes, fills, and gradients. Mix your layers with blend
</div> </div>
<div class="demo-artwork"> <div class="demo-artwork">
<a href="https://editor.graphite.rs/#demo/just-a-potted-cactus"> <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> </a>
<p> <p>
<span class="balance-text"> <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="image-comparison" data-image-comparison style="--comparison-percent: 50%">
<div class="crop-container"> <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>
<div class="crop-container"> <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>
<div class="slide-bar"> <div class="slide-bar">
<div class="arrows"> <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="image-comparison" data-image-comparison style="--comparison-percent: 50%">
<div class="crop-container"> <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>
<div class="crop-container"> <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>
<div class="slide-bar"> <div class="slide-bar">
<div class="arrows"> <div class="arrows">
@ -475,9 +475,8 @@ Stop jumping between programs. Planned features will make Graphite a first-class
<section id="demo-video"> <section id="demo-video">
<div class="section"> <div class="section">
<div class="video-embed aspect-16x9"> <div class="video-embed aspect-16x9">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/JgJvAHQLnXA" title="Graphite Vector Editing: &quot;Commander Basstronaut&quot; 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: &quot;Commander Basstronaut&quot; Artwork (25x Timelapse)" />
</div> </div>
<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
</div> </div>
</section> </section>
<!-- ▙ DEMO VIDEO ▟ --> <!-- ▙ DEMO VIDEO ▟ -->

6
website/content/about.md
View File

@ -118,7 +118,7 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific
<div class="section"> <div class="section">
![Photo of Keavon Chambers](https://static.graphite.rs/content/about/core-team-photo-keavon-chambers.png) <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> ## 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>
<div class="section"> <div class="section">
![Photo of Dennis Kobert](https://static.graphite.rs/content/about/core-team-photo-dennis-kobert.png) <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> ## 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>
<div class="section"> <div class="section">
![Photo of Hypercube](https://static.graphite.rs/content/about/core-team-photo-hypercube.png) <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> ## "Hypercube" <span class="flag" title="British">🇬🇧</span>

2
website/content/blog/2022-02-12-announcing-graphite-alpha.md
View File

@ -3,7 +3,7 @@ title = "Announcing Graphite alpha"
date = 2022-02-12 date = 2022-02-12
[extra] [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" author = "Keavon Chambers"
reddit = "https://www.reddit.com/r/graphite/comments/unw3hi/blog_post_announcing_graphite_alpha/" reddit = "https://www.reddit.com/r/graphite/comments/unw3hi/blog_post_announcing_graphite_alpha/"
twitter = "https://twitter.com/GraphiteEditor/status/1524663930697568256" twitter = "https://twitter.com/GraphiteEditor/status/1524663930697568256"

2
website/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.md
View File

@ -3,7 +3,7 @@ title = "Graphite: a vision for the future of 2D content creation"
date = 2022-03-12 date = 2022-03-12
[extra] [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" author = "Keavon Chambers"
reddit = "https://www.reddit.com/r/graphite/comments/unw3va/blog_post_graphite_a_vision_for_the_future_of_2d/" 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" twitter = "https://twitter.com/GraphiteEditor/status/1524664010091556864"

4
website/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime.md
View File

@ -3,7 +3,7 @@ title = "Distributed computing in the Graphene runtime"
date = 2022-05-12 date = 2022-05-12
[extra] [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" author = "Keavon Chambers"
reddit = "https://www.reddit.com/r/graphite/comments/unw45k/blog_post_distributed_computing_in_the_graphene/" reddit = "https://www.reddit.com/r/graphite/comments/unw45k/blog_post_distributed_computing_in_the_graphene/"
twitter = "https://twitter.com/GraphiteEditor/status/1524664083554791424" 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. 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.
![Graphene in a local and cloud environment](https://static.graphite.rs/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime/local-and-cloud.png) <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 ## Scheduler

3
website/content/volunteer/guide/codebase-overview/_index.md
View File

@ -5,10 +5,11 @@ page_template = "book.html"
[extra] [extra]
order = 2 # Chapter number order = 2 # Chapter number
js = ["/video-embed.js"]
+++ +++
<div class="video-embed aspect-16x9"> <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> </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. 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.

2
website/content/volunteer/guide/codebase-overview/contributing-guidelines.md
View File

@ -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: Open a new PR as a draft / convert an existing PR to a draft:
![Screenhots showing GitHub's "Create pull request (arrow) > Create draft pull request" and "Still in progress? Convert to draft" buttons](https://static.graphite.rs/content/volunteer/guide/draft-pr.png) <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 &quot;Create pull request (arrow) > Create draft pull request&quot; and &quot;Still in progress? Convert to draft&quot; buttons" />

11
website/sass/about.scss
View File

@ -40,12 +40,11 @@
cursor: default; cursor: default;
} }
p:first-child { .section {
width: 100%; align-items: center;
text-align: center; }
img { img {
max-width: Min(100%, 480px); max-width: Min(100%, 480px);
}
} }
} }

9
website/sass/base.scss
View File

@ -392,6 +392,7 @@ summary {
padding-top: calc(100% / (16 / 9)); padding-top: calc(100% / (16 / 9));
} }
img,
iframe { iframe {
position: absolute; position: absolute;
width: 100%; width: 100%;
@ -399,6 +400,10 @@ summary {
top: 0; top: 0;
left: 0; left: 0;
} }
img {
cursor: pointer;
}
} }
.video-background { .video-background {
@ -585,7 +590,7 @@ summary {
&.left { &.left {
padding-left: 80px; padding-left: 80px;
margin-left: -80px; margin-left: -80px;
-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png"); -webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png"); // TODO: Switch PNG to AVIF when Edge support has rolled out
mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png"); mask-image: url("https://static.graphite.rs/textures/torn-edge-left.png");
-webkit-mask-position: top left; -webkit-mask-position: top left;
mask-position: top left; mask-position: top left;
@ -594,7 +599,7 @@ summary {
&.right { &.right {
padding-right: 120px; padding-right: 120px;
margin-right: -120px; margin-right: -120px;
-webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png"); -webkit-mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png"); // TODO: Switch PNG to AVIF when Edge support has rolled out
mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png"); mask-image: url("https://static.graphite.rs/textures/torn-edge-right.png");
-webkit-mask-position: top right; -webkit-mask-position: top right;
mask-position: top right; mask-position: top right;

8
website/static/js/video-embed.js Normal file
View File

@ -0,0 +1,8 @@
window.addEventListener("DOMContentLoaded", () => {
document.querySelectorAll("[data-video-embed]").forEach((placeholder) => {
placeholder.addEventListener("click", () => {
const videoId = placeholder.attributes["data-video-embed"].value;
placeholder.outerHTML = `<iframe width="1280" height="720" src="https://www.youtube.com/embed/${videoId}?autoplay=1" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>`;
});
});
});

2
website/templates/article.html
View File

@ -19,7 +19,7 @@
<div class="details"> <div class="details">
<h1 class="headline">{{ this.title }}</h2> <h1 class="headline">{{ this.title }}</h2>
<span class="publication">By {{ this.extra.author }}. {{ this.date | date(format = "%B %d, %Y", timezone="America/Los_Angeles") }}.</span> <span class="publication">By {{ this.extra.author }}. {{ this.date | date(format = "%B %d, %Y", timezone="America/Los_Angeles") }}.</span>
<img class="banner" src="{{ this.extra.banner | safe }}" /> <img class="banner" src="{{ this.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" />
</div> </div>
<hr /> <hr />
<article> <article>

2
website/templates/blog.html
View File

@ -13,7 +13,7 @@
{% for page in section.pages %} {% for page in section.pages %}
<section> <section>
<div class="banner"> <div class="banner">
<a href="{{ page.path }}"><img src="{{ page.extra.banner | safe }}" /></a> <a href="{{ page.path }}"><img src="{{ page.extra.banner | safe }}" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" /></a>
</div> </div>
<div class="details"> <div class="details">
<div class="headline"> <div class="headline">