fork/Graphite
1
0
Fork 0
mirror of https://github.com/GraphiteEditor/Graphite.git synced 2026-09-15 14:18:04 +08:00
Code Issues Packages Projects Releases Wiki Activity

Reduce website loading times and related code cleanup

Browse Source
This commit is contained in:
Keavon Chambers
2025-01-08 18:29:54 -08:00
parent 93a60daa24
commit 68e6bec9b5
22 changed files with 112 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
website/content/_index.md
View File

@@ -3,8 +3,9 @@ title = "Free online vector editor & procedural design tool"
template = "section.html"
[extra]
css_inline = ["index.css"]
js = ["carousel.js", "youtube-embed.js", "video-autoplay.js"]
css = ["/index.css", "/balance-text.css"]
js = ["/js/carousel.js", "/js/youtube-embed.js", "/js/video-autoplay.js"]
linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.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."
+++
@@ -80,13 +81,15 @@ meta_description = "Open source free software. A vector graphics creativity suit
<section id="screenshots" class="carousel window-size-1" data-carousel data-carousel-jostle-hint>
<div class="carousel-slide" data-carousel-slide>
<!-- Copy of last --><img src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/magazine-page-layout.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-demo-fractal__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<img src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<!-- Copy of first --><img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
<!-- Above is a copy of the last -->
<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" />
<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/magazine-page-layout.avif" />
<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-node-graph-valley-of-spires__2.avif" />
<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-demo-fractal__2.avif" />
<img onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image width="1920" height="1080" loading="lazy" src="https://static.graphite.rs/content/index/gui-mockup-nodes__7.avif" />
<!-- Below is a copy of the first -->
<img src="https://static.graphite.rs/content/index/gui-demo-painted-dreams__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="" style="transform: translateX(-100%)" data-carousel-image />
</div>
<div class="carousel-slide torn left" data-carousel-slide-torn-left></div>
@@ -287,7 +290,7 @@ Graphite is the first and only graphic design package built for procedural editi
<div class="diptych red-dress">
<div class="block video-background">
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play preload="none" poster="https://static.graphite.rs/content/index/procedural-demo-red-dress-poster.avif">
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.webm" type="video/webm" />
<source src="https://static.graphite.rs/content/index/procedural-demo-red-dress.mp4" type="video/mp4" />
</video>
@@ -323,7 +326,7 @@ Blend across color schemes. Morph shapes before they're scattered around the can
</div>
<div class="block video-background">
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play>
<video loop muted playsinline disablepictureinpicture disableremoteplayback data-auto-play preload="none" poster="https://static.graphite.rs/content/index/procedural-demo-leaves-poster.avif">
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.webm" type="video/webm" />
<source src="https://static.graphite.rs/content/index/procedural-demo-leaves.mp4" type="video/mp4" />
</video>
@@ -454,7 +457,7 @@ Get started with Graphite by following along to a hands-on quickstart tutorial.
<div class="block video-container">
<div>
<div class="video-embed aspect-16x9">
<img data-video-embed="7gjUhl_3X10" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
<img data-video-embed="7gjUhl_3X10" loading="lazy" src="https://static.graphite.rs/content/index/tutorial-1-youtube.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Graphite Tutorial 1 - Hands-On Quickstart" />
</div>
</div>
</div>

4
website/content/about.md
View File

@@ -2,8 +2,8 @@
title = "About Graphite"
[extra]
css_inline = ["about.css"]
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
css = ["/about.css"]
linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+++
<section>

2
website/content/blog/2024-01-01-looking-back-on-2023-and-what's-next.md
View File

@@ -10,7 +10,7 @@ summary = "Looking back on 2023, we reflect on our significant achievements and
reddit = "https://www.reddit.com/r/graphite/comments/18xmoti/blog_post_looking_back_on_2023_and_whats_next/"
twitter = "https://twitter.com/GraphiteEditor/status/1742576805532577937"
js = ["youtube-embed.js"]
js = ["/js/youtube-embed.js"]
+++
The new year is here, and with so many accomplishments to share from the past twelve months, let's revisit the highlights of 2023 for the Graphite project. Now that winter has entered, let's swing back to the spring, summarize the summer, and follow this fall's noteworthy developments that brought another year of fruitful progress to Graphite's mission of re-envisioning artists' 2D creative workflows with the best free software we can build for the open source community. This past year as a team, we all got closer— to one another from continents apart; to visiting and connecting with our industry peers; and to reaching exciting new development milestones.

5
website/content/donate.md
View File

@@ -2,8 +2,9 @@
title = "Donate"
[extra]
# css_inline = ["donate.css"]
# js = ["fundraising.js"]
# css = ["/donate.css", "/balance-text.css"]
# js = ["/js/fundraising.js"]
# linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
+++
<section>

2
website/content/features.md
View File

@@ -2,7 +2,7 @@
title = "Graphite features"
[extra]
css_inline = ["features.css"]
css = ["/features.css"]
+++
<section>

2
website/content/learn/_index.md
View File

@@ -5,7 +5,7 @@ page_template = "book.html"
[extra]
book = true
js = ["youtube-embed.js"]
js = ["/js/youtube-embed.js"]
+++
Welcome to the Graphite user manual. Keep reading to to learn how the software can help bring your 2D creative ideas to life.

2
website/content/learn/_unpublished/workflows/imaginate.md
View File

@@ -3,7 +3,7 @@ title = "Imaginate"
[extra]
order = 2
js = ["carousel.js"]
js = ["/js/carousel.js"]
+++
Imaginate is a useful tool at every stage in the artistic process. Early on it provides inspiration for styles, color palettes, subjects, and composition. It lets you quickly test ideas and explore artistic directions. It's also a useful way to generate placeholder images and content for kit bashing.

2
website/content/learn/introduction/_index.md
View File

@@ -5,7 +5,7 @@ page_template = "book.html"
[extra]
order = 1
js = ["youtube-embed.js"]
js = ["/js/youtube-embed.js"]
+++
<!-- Before taking the time to read the coming chapters, let's build some context by jumping straight into a small project that you can follow along with. That way you will have a mental framework for the topics explained in the rest of this manual. -->

2
website/content/logo.md
View File

@@ -2,7 +2,7 @@
title = "Graphite logo"
[extra]
css_inline = ["logo.css"]
css = ["/logo.css"]
+++
<section class="reading-material">

4
website/content/volunteer/_index.md
View File

@@ -2,8 +2,8 @@
title = "Volunteer"
[extra]
css_inline = ["volunteer.css"]
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
css = ["/volunteer.css"]
linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+++
<section>

2
website/content/volunteer/guide/_index.md
View File

@@ -6,7 +6,7 @@ aliases = ["/contribute"]
[extra]
book = true
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+++
Welcome, potential contributor! We're excited to have you join the Graphite project and it's our goal to make the process as smooth as possible. This guide will serve as your library of knowledge to help you get started contributing to the project. If you find any information missing or unclear, please let us know through Discord or submit a pull request to help document the process for future contributors.

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

@@ -5,7 +5,7 @@ page_template = "book.html"
[extra]
order = 2 # Chapter number
js = ["youtube-embed.js"]
js = ["/js/youtube-embed.js"]
+++
The best introduction for getting up-to-speed with Graphite contribution comes from watching this webcast recording. Before asking questions in Discord, please watch the full video because it gives a comprehensive overview of most things you will need to know.

2
website/content/volunteer/guide/starting-a-task/submitting-a-contribution.md
View File

@@ -3,7 +3,7 @@ title = "Submitting a contribution"
[extra]
order = 3 # Page number after chapter intro
css_external = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+++
Collaboration is a key part of real-world software engineering. Graphite follows some basic procedures to keep the process smooth and efficient. You will want to familiarize yourself with these guidelines to save yourself and Graphite maintainers time and confusion.