From 89b269cf55c928838054c385f986a87e9c16332e Mon Sep 17 00:00:00 2001
From: Keavon Chambers <keavon@keavon.com>
Date: Wed, 23 Aug 2023 15:36:31 -0700
Subject: [PATCH] Reduce website static content file size by a lot

---
 website/content/_index.md                     | 35 +++++++++----------
 website/content/about.md                      |  6 ++--
 .../2022-02-12-announcing-graphite-alpha.md   |  2 +-
 ...n-for-the-future-of-2d-content-creation.md |  2 +-
 ...buted-computing-in-the-graphene-runtime.md |  4 +--
 .../guide/codebase-overview/_index.md         |  3 +-
 .../contributing-guidelines.md                |  2 +-
 website/sass/about.scss                       | 11 +++---
 website/sass/base.scss                        |  9 +++--
 website/static/js/video-embed.js              |  8 +++++
 website/templates/article.html                |  2 +-
 website/templates/blog.html                   |  2 +-
 12 files changed, 49 insertions(+), 37 deletions(-)
 create mode 100644 website/static/js/video-embed.js

diff --git a/website/content/_index.md b/website/content/_index.md
index 42fa9609..effae587 100644
--- a/website/content/_index.md
+++ b/website/content/_index.md
@@ -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: &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>
-		<!-- <a href="/blog/mission-statement" class="link arrow">Mission Statement</a> -->
 	</div>
 </section>
 <!-- ▙ DEMO VIDEO ▟ -->
diff --git a/website/content/about.md b/website/content/about.md
index 9c4cfd93..a36e0206 100644
--- a/website/content/about.md
+++ b/website/content/about.md
@@ -118,7 +118,7 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific
 
 <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>
 
@@ -133,7 +133,7 @@ Keavon is a creative generalist with a love for the fusion of arts and technolog
 </div>
 <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>
 
@@ -148,7 +148,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin
 </div>
 <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>
 
diff --git a/website/content/blog/2022-02-12-announcing-graphite-alpha.md b/website/content/blog/2022-02-12-announcing-graphite-alpha.md
index 2fa19315..1277d732 100644
--- a/website/content/blog/2022-02-12-announcing-graphite-alpha.md
+++ b/website/content/blog/2022-02-12-announcing-graphite-alpha.md
@@ -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"
diff --git a/website/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.md b/website/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.md
index 891cae32..4314dea6 100644
--- a/website/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.md
+++ b/website/content/blog/2022-03-12-graphite-a-vision-for-the-future-of-2d-content-creation.md
@@ -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"
diff --git a/website/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime.md b/website/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime.md
index c1523a00..0651ba2b 100644
--- a/website/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime.md
+++ b/website/content/blog/2022-05-12-distributed-computing-in-the-graphene-runtime.md
@@ -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.
 
-![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
 
diff --git a/website/content/volunteer/guide/codebase-overview/_index.md b/website/content/volunteer/guide/codebase-overview/_index.md
index 31c3a72c..0d80a6b9 100644
--- a/website/content/volunteer/guide/codebase-overview/_index.md
+++ b/website/content/volunteer/guide/codebase-overview/_index.md
@@ -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.
diff --git a/website/content/volunteer/guide/codebase-overview/contributing-guidelines.md b/website/content/volunteer/guide/codebase-overview/contributing-guidelines.md
index 7100800c..c80fad5d 100644
--- a/website/content/volunteer/guide/codebase-overview/contributing-guidelines.md
+++ b/website/content/volunteer/guide/codebase-overview/contributing-guidelines.md
@@ -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:
 
-![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" />
diff --git a/website/sass/about.scss b/website/sass/about.scss
index b3a58b00..e723a9a3 100644
--- a/website/sass/about.scss
+++ b/website/sass/about.scss
@@ -40,12 +40,11 @@
 		cursor: default;
 	}
 
-	p:first-child {
-		width: 100%;
-		text-align: center;
+	.section {
+		align-items: center;
+	}
 
-		img {
-			max-width: Min(100%, 480px);
-		}
+	img {
+		max-width: Min(100%, 480px);
 	}
 }
diff --git a/website/sass/base.scss b/website/sass/base.scss
index bdae0775..c61d8d46 100644
--- a/website/sass/base.scss
+++ b/website/sass/base.scss
@@ -392,6 +392,7 @@ summary {
 		padding-top: calc(100% / (16 / 9));
 	}
 
+	img,
 	iframe {
 		position: absolute;
 		width: 100%;
@@ -399,6 +400,10 @@ summary {
 		top: 0;
 		left: 0;
 	}
+
+	img {
+		cursor: pointer;
+	}
 }
 
 .video-background {
@@ -585,7 +590,7 @@ summary {
 		&.left {
 			padding-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");
 			-webkit-mask-position: top left;
 			mask-position: top left;
@@ -594,7 +599,7 @@ summary {
 		&.right {
 			padding-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");
 			-webkit-mask-position: top right;
 			mask-position: top right;
diff --git a/website/static/js/video-embed.js b/website/static/js/video-embed.js
new file mode 100644
index 00000000..9ce9ea9e
--- /dev/null
+++ b/website/static/js/video-embed.js
@@ -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>`;
+		});
+	});
+});
diff --git a/website/templates/article.html b/website/templates/article.html
index aa0ecd57..384f0a70 100644
--- a/website/templates/article.html
+++ b/website/templates/article.html
@@ -19,7 +19,7 @@
 		<div class="details">
 			<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>
-			<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>
 		<hr />
 		<article>
diff --git a/website/templates/blog.html b/website/templates/blog.html
index f473786c..3d3e56d2 100644
--- a/website/templates/blog.html
+++ b/website/templates/blog.html
@@ -13,7 +13,7 @@
 	{% for page in section.pages %}
 	<section>
 		<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 class="details">
 			<div class="headline">