Skip to content

Make builds of the editor and the website serve their own local fonts #2186

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 8 commits into from
May 19, 2025
Merged

Make builds of the editor and the website serve their own local fonts #2186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
d9d5c41
WIP
Keavon Jan 10, 2025
f27c565
Done?
Keavon May 19, 2025
bb7a181
Install fonts in CI
Keavon May 19, 2025
9678781
Use absolute path so minified inlined CSS works
Keavon May 19, 2025
604db38
Fix Bezier-rs demo fonts?
Keavon May 19, 2025
8cec6c4
Use opsz
Keavon May 19, 2025
bb902d9
Revert removal of text balancer
Keavon May 19, 2025
459b0ef
Pull in the text balancer from our static host
Keavon May 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 4 additions & 3 deletions .github/workflows/website.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ on:
- website/**
env:
CARGO_TERM_COLOR: always
INDEX_HTML_HEAD_INCLUSION: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.js"></script>
INDEX_HTML_HEAD_INCLUSION: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.hash.js"></script>

jobs:
build:
Expand All @@ -30,7 +30,7 @@ jobs:
- name: 🕸 Install Zola
uses: taiki-e/install-action@v2
with:
tool: zola@0.19.1
tool: zola@0.20.0

- name: ✂ Replace template in <head> of index.html
run: |
Expand All @@ -42,7 +42,8 @@ jobs:
MODE: prod
run: |
cd website
zola --config config_prod.toml build
npm run install-fonts
zola --config config.toml build --minify

- name: 🔍 Check if `website/other` directory changed
uses: dorny/paths-filter@v3
Expand Down
6 changes: 3 additions & 3 deletions Cargo.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion editor/src/messages/portfolio/document/overlays/utility_types.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -734,7 +734,7 @@ impl OverlayContext {
);
}

self.render_context.set_font("12px Source Sans Pro, Arial, sans-serif");
self.render_context.set_font(r#"12px "Source Sans Pro", Arial, sans-serif"#);
self.render_context.set_fill_style_str(font_color);
self.render_context.fill_text(text, 0., 0.).expect("Failed to draw the text at the calculated position");
self.render_context.reset_transform().expect("Failed to reset the render context transform");
Expand Down
2 changes: 1 addition & 1 deletion frontend/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ Wraps the editor backend codebase (`/editor`) and provides a JS-centric API for

## ESLint configurations: `.eslintrc.js`

[ESLint](https://eslint.org/) is the tool which enforces style rules on the JS, TS, and Svelte files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when (in VS Code) the file is saved or `npm run lint` is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Svelte support, [Airbnb](https://github.com/airbnb/javascript)'s popular catalog of sane defaults, and [Prettier](https://prettier.io/)'s role as a code formatter.
[ESLint](https://eslint.org/) is the tool which enforces style rules on the JS, TS, and Svelte files in our frontend codebase. As it is set up in this config file, ESLint will complain about bad practices and often help reformat code automatically when (in VS Code) the file is saved or `npm run lint` is executed. (If you don't use VS Code, remember to run this command before committing!) This config file for ESLint sets our style preferences and configures our usage of extensions/plugins for Svelte support and [Prettier](https://prettier.io/)'s role as a code formatter.

## npm ecosystem packages: `package.json`

Expand Down
123 changes: 49 additions & 74 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,79 +1,54 @@
<!DOCTYPE html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Graphite</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?display=block&family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&family=Inconsolata:wght@400;700">
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
<link rel="manifest" href="site.webmanifest">
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#473a3a">
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
<meta name="apple-mobile-web-app-title" content="Graphite">
<meta name="application-name" content="Graphite">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="theme-color" content="#ffffff">
<meta name="color-scheme" content="dark only">
<meta name="darkreader-lock">
<!-- INDEX_HTML_HEAD_REPLACEMENT -->
</head>
<body>
<noscript>JavaScript is required</noscript>
<style>
body {
background: #222;
height: 100%;
margin: 0;
}

body::after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid #eee;
border-color: #eee transparent #eee transparent;
animation: spinning-loading-indicator 1s linear infinite;
}

@keyframes spinning-loading-indicator {
0% {
transform: translate(-30px, -30px) rotate(0deg);
}
100% {
transform: translate(-30px, -30px) rotate(360deg);
<head>
<meta charset="utf-8" />
<title>Graphite</title>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#473a3a" />
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />
<meta name="apple-mobile-web-app-title" content="Graphite" />
<meta name="application-name" content="Graphite" />
<meta name="msapplication-TileColor" content="#ffffff" />
<meta name="theme-color" content="#ffffff" />
<meta name="color-scheme" content="dark only" />
<meta name="darkreader-lock" />
<!-- INDEX_HTML_HEAD_REPLACEMENT -->
</head>
<body>
<noscript>JavaScript is required</noscript>
<style>
body {
background: #222;
height: 100%;
margin: 0;
}
}
</style>
<script>
// Confirm the browser is compatible before initializing the application

// Display an error if the browser is incompatible with a required API
// This is run outside the JS code bundle in case unsupported features cause a syntax error when parsing the bundle, preventing the any bundle code from running
let incompatibility;
if (!("BigUint64Array" in window)) {
incompatibility = `
<style>
body::after { content: none; }
h2, p, a { text-align: center; color: #eee; font-family: "Source Sans Pro", Arial, sans-serif; }
</style>
<h2>This browser is too old to run Graphite</h2>
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
<p>(The <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt64Array#browser_compatibility" target="_blank"><code>BigInt64Array</code></a>
JavaScript API must be supported by the browser for Graphite to function.)</p>
`.trim();
}
body::after {
content: "";
display: block;
position: absolute;
left: 50%;
top: 50%;
width: 60px;
height: 60px;
border-radius: 50%;
border: 4px solid #eee;
border-color: #eee transparent #eee transparent;
animation: spinning-loading-indicator 1s linear infinite;
}

// Load the editor application or display the incompatibility message
if (incompatibility) {
document.body.innerHTML += incompatibility;
}
</script>
<script type="module" src="src/main.ts"></script>
</body>
@keyframes spinning-loading-indicator {
0% {
transform: translate(-30px, -30px) rotate(0deg);
}
100% {
transform: translate(-30px, -30px) rotate(360deg);
}
}
</style>
<script type="module" src="src/main.ts"></script>
</body>
</html>
28 changes: 17 additions & 11 deletions frontend/package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,8 @@
"wasm:watch-production": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --release --target=web -- --color=always\""
},
"dependencies": {
"@fontsource/inconsolata": "^5.2.5",
"@fontsource/source-sans-pro": "^5.2.5",
"class-transformer": "^0.5.1",
"idb-keyval": "^6.2.1",
"reflect-metadata": "^0.2.2"
Expand Down
9 changes: 8 additions & 1 deletion frontend/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,13 @@
// This file is the browser's entry point for the JS bundle

// reflect-metadata allows for runtime reflection of types in JavaScript.
// Fonts
import "@fontsource/inconsolata";
import "@fontsource/source-sans-pro/400-italic.css";
import "@fontsource/source-sans-pro/400.css";
import "@fontsource/source-sans-pro/700-italic.css";
import "@fontsource/source-sans-pro/700.css";

// `reflect-metadata` allows for runtime reflection of types in JavaScript.
// It is needed for class-transformer to work and is imported as a side effect.
// The library replaces the Reflect API on the window to support more features.
import "reflect-metadata";
Expand Down
9 changes: 5 additions & 4 deletions website/.eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,13 @@ module.exports = {
ecmaVersion: 2020,
},
extends: [
// JS defaults
"airbnb-base",
// General Prettier defaults
"eslint:recommended",
"plugin:import/recommended",
"plugin:@typescript-eslint/recommended",
"plugin:import/typescript",
"prettier",
],
plugins: ["import", "@typescript-eslint", "prettier"],
settings: {
// https://github.com/import-js/eslint-plugin-import#resolvers
"import/resolver": {
Expand All @@ -30,7 +32,6 @@ module.exports = {
"!.*.js",
"!.*.ts",
],
plugins: ["prettier"],
rules: {
// Standard ESLint config
indent: "off",
Expand Down
2 changes: 2 additions & 0 deletions website/.gitignore
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
node_modules/
public/
static/fonts/
static/syntax-highlighting.css
static/text-balancer.js
17 changes: 0 additions & 17 deletions website/config_prod.toml
View file
Open in desktop

This file was deleted.

6 changes: 4 additions & 2 deletions website/content/_index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ title = "Free online vector editor & procedural design tool"
template = "section.html"

[extra]
css = ["/page/index.css", "/component/carousel.css", "/component/feature-icons.css", "/component/feature-box.css", "/component/youtube-embed.css", "/layout/balance-text.css"]
css = ["/page/index.css", "/component/carousel.css", "/component/feature-icons.css", "/component/feature-box.css", "/component/youtube-embed.css"]
js = ["/js/carousel.js", "/js/youtube-embed.js", "/js/video-autoplay.js"]
linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
linked_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."
+++

<!-- replacements::text_balancer() -->

<!-- ▛ LOGO ▜ -->
<section id="logo">
<div class="block">
Expand Down
9 changes: 4 additions & 5 deletions website/content/about.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ title = "About Graphite"

[extra]
css = ["/page/about.css", "/component/feature-box.css"]
linked_css = ["https://fonts.googleapis.com/css2?family=Noto+Color+Emoji&display=swap"]
+++

<section>
Expand Down Expand Up @@ -117,7 +116,7 @@ It's easy to learn and teach, yet Graphite's accessible design does not sacrific

<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="handle">(@Keavon)</span> <span class="flag" title="American">🇺🇸</span>
## Keavon Chambers <span class="handle">(@Keavon)</span> <img src="https://static.graphite.rs/icons/flags/us.png" class="flag" title="American" />

***Founder, UI & product design, frontend, editor systems***

Expand All @@ -128,7 +127,7 @@ Keavon is a creative generalist with a love for the fusion of arts and technolog

<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="handle">(@TrueDoctor)</span> <span class="flag" title="German">🇩🇪</span>
## Dennis Kobert <span class="handle">(@TrueDoctor)</span> <img src="https://static.graphite.rs/icons/flags/de.png" class="flag" title="German" />

***Graphene node engine, research, architecture***

Expand All @@ -143,7 +142,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin

<img src="https://static.graphite.rs/content/about/core-team-photo-hypercube__2.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Hypercube" />

## "Hypercube" <span class="handle">(@0Hypercube)</span> <span class="flag" title="British">🇬🇧</span>
## "Hypercube" <span class="handle">(@0Hypercube)</span> <img src="https://static.graphite.rs/icons/flags/gb.png" class="flag" title="British" />

***Editor systems, nodes, tools, architecture***

Expand All @@ -155,7 +154,7 @@ Dennis is a mix between a mathematician and a mad scientist. While still enjoyin

<img src="https://static.graphite.rs/content/about/core-team-photo-adam-gerhant.avif" onerror="this.onerror = null; this.src = this.src.replace('.avif', '.png')" alt="Photo of Adam Gerhant" />

## Adam Gerhant <span class="handle">(@pendapia)</span> <span class="flag" title="American">🇺🇸</span>
## Adam Gerhant <span class="handle">(@pendapia)</span> <img src="https://static.graphite.rs/icons/flags/us.png" class="flag" title="American" />

***Editor graph tooling, node data formats***

Expand Down
Loading
Loading