Reduce website static content file size by a lot
This commit is contained in:
Keavon Chambers
parent
2d99d4bee1
commit
89b269cf55
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
|
|||
|
|
@ -40,12 +40,11 @@
|
|||
cursor: default;
|
||||
}
|
||||
|
||||
p:first-child {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
.section {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: Min(100%, 480px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>`;
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
Loading…
Reference in New Issue