Skip to content

Commit e57637a

Browse files
KeavonKeavon
authored
Make builds of the editor and the website serve their own local fonts (#2186)
* WIP * Done? * Install fonts in CI * Use absolute path so minified inlined CSS works * Fix Bezier-rs demo fonts? * Use opsz * Revert removal of text balancer * Pull in the text balancer from our static host
1 parent ea59f10 commit e57637a

28 files changed

+1293
-743
lines changed

‎.github/workflows/website.yml

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ on:
1313
- website/**
1414
env:
1515
CARGO_TERM_COLOR: always
16-
INDEX_HTML_HEAD_INCLUSION: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.js"></script>
16+
INDEX_HTML_HEAD_INCLUSION: <script defer data-domain="graphite.rs" data-api="/visit/event" src="/visit/script.hash.js"></script>
1717

1818
jobs:
1919
build:
@@ -30,7 +30,7 @@ jobs:
3030
- name: 🕸 Install Zola
3131
uses: taiki-e/install-action@v2
3232
with:
33-
tool: zola@0.19.1
33+
tool: zola@0.20.0
3434

3535
- name: ✂ Replace template in <head> of index.html
3636
run: |
@@ -42,7 +42,8 @@ jobs:
4242
MODE: prod
4343
run: |
4444
cd website
45-
zola --config config_prod.toml build
45+
npm run install-fonts
46+
zola --config config.toml build --minify
4647
4748
- name: 🔍 Check if `website/other` directory changed
4849
uses: dorny/paths-filter@v3

‎Cargo.lock

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎editor/src/messages/portfolio/document/overlays/utility_types.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -734,7 +734,7 @@ impl OverlayContext {
734734
);
735735
}
736736

737-
self.render_context.set_font("12px Source Sans Pro, Arial, sans-serif");
737+
self.render_context.set_font(r#"12px "Source Sans Pro", Arial, sans-serif"#);
738738
self.render_context.set_fill_style_str(font_color);
739739
self.render_context.fill_text(text, 0., 0.).expect("Failed to draw the text at the calculated position");
740740
self.render_context.reset_transform().expect("Failed to reset the render context transform");

‎frontend/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ Wraps the editor backend codebase (`/editor`) and provides a JS-centric API for
2222

2323
## ESLint configurations: `.eslintrc.js`
2424

25-
[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.
25+
[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.
2626

2727
## npm ecosystem packages: `package.json`
2828

‎frontend/index.html

Lines changed: 49 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,54 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html>
3-
<head>
4-
<meta charset="utf-8">
5-
<title>Graphite</title>
6-
<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">
7-
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png">
8-
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png">
9-
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png">
10-
<link rel="manifest" href="site.webmanifest">
11-
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#473a3a">
12-
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5">
13-
<meta name="apple-mobile-web-app-title" content="Graphite">
14-
<meta name="application-name" content="Graphite">
15-
<meta name="msapplication-TileColor" content="#ffffff">
16-
<meta name="theme-color" content="#ffffff">
17-
<meta name="color-scheme" content="dark only">
18-
<meta name="darkreader-lock">
19-
<!-- INDEX_HTML_HEAD_REPLACEMENT -->
20-
</head>
21-
<body>
22-
<noscript>JavaScript is required</noscript>
23-
<style>
24-
body {
25-
background: #222;
26-
height: 100%;
27-
margin: 0;
28-
}
29-
30-
body::after {
31-
content: "";
32-
display: block;
33-
position: absolute;
34-
left: 50%;
35-
top: 50%;
36-
width: 60px;
37-
height: 60px;
38-
border-radius: 50%;
39-
border: 4px solid #eee;
40-
border-color: #eee transparent #eee transparent;
41-
animation: spinning-loading-indicator 1s linear infinite;
42-
}
43-
44-
@keyframes spinning-loading-indicator {
45-
0% {
46-
transform: translate(-30px, -30px) rotate(0deg);
47-
}
48-
100% {
49-
transform: translate(-30px, -30px) rotate(360deg);
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Graphite</title>
6+
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
7+
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
8+
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
9+
<link rel="manifest" href="site.webmanifest" />
10+
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#473a3a" />
11+
<meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5" />
12+
<meta name="apple-mobile-web-app-title" content="Graphite" />
13+
<meta name="application-name" content="Graphite" />
14+
<meta name="msapplication-TileColor" content="#ffffff" />
15+
<meta name="theme-color" content="#ffffff" />
16+
<meta name="color-scheme" content="dark only" />
17+
<meta name="darkreader-lock" />
18+
<!-- INDEX_HTML_HEAD_REPLACEMENT -->
19+
</head>
20+
<body>
21+
<noscript>JavaScript is required</noscript>
22+
<style>
23+
body {
24+
background: #222;
25+
height: 100%;
26+
margin: 0;
5027
}
51-
}
52-
</style>
53-
<script>
54-
// Confirm the browser is compatible before initializing the application
5528

56-
// Display an error if the browser is incompatible with a required API
57-
// 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
58-
let incompatibility;
59-
if (!("BigUint64Array" in window)) {
60-
incompatibility = `
61-
<style>
62-
body::after { content: none; }
63-
h2, p, a { text-align: center; color: #eee; font-family: "Source Sans Pro", Arial, sans-serif; }
64-
</style>
65-
<h2>This browser is too old to run Graphite</h2>
66-
<p>Please upgrade to a modern web browser such as the latest Firefox, Chrome, Edge, or Safari version 15 or newer.</p>
67-
<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>
68-
JavaScript API must be supported by the browser for Graphite to function.)</p>
69-
`.trim();
70-
}
29+
body::after {
30+
content: "";
31+
display: block;
32+
position: absolute;
33+
left: 50%;
34+
top: 50%;
35+
width: 60px;
36+
height: 60px;
37+
border-radius: 50%;
38+
border: 4px solid #eee;
39+
border-color: #eee transparent #eee transparent;
40+
animation: spinning-loading-indicator 1s linear infinite;
41+
}
7142

72-
// Load the editor application or display the incompatibility message
73-
if (incompatibility) {
74-
document.body.innerHTML += incompatibility;
75-
}
76-
</script>
77-
<script type="module" src="src/main.ts"></script>
78-
</body>
43+
@keyframes spinning-loading-indicator {
44+
0% {
45+
transform: translate(-30px, -30px) rotate(0deg);
46+
}
47+
100% {
48+
transform: translate(-30px, -30px) rotate(360deg);
49+
}
50+
}
51+
</style>
52+
<script type="module" src="src/main.ts"></script>
53+
</body>
7954
</html>

‎frontend/package-lock.json

Lines changed: 17 additions & 11 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎frontend/package.json

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,8 @@
2929
"wasm:watch-production": "cargo watch --postpone --watch-when-idle --workdir=wasm --shell \"wasm-pack build . --release --target=web -- --color=always\""
3030
},
3131
"dependencies": {
32+
"@fontsource/inconsolata": "^5.2.5",
33+
"@fontsource/source-sans-pro": "^5.2.5",
3234
"class-transformer": "^0.5.1",
3335
"idb-keyval": "^6.2.1",
3436
"reflect-metadata": "^0.2.2"

‎frontend/src/main.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,13 @@
11
// This file is the browser's entry point for the JS bundle
22

3-
// reflect-metadata allows for runtime reflection of types in JavaScript.
3+
// Fonts
4+
import "@fontsource/inconsolata";
5+
import "@fontsource/source-sans-pro/400-italic.css";
6+
import "@fontsource/source-sans-pro/400.css";
7+
import "@fontsource/source-sans-pro/700-italic.css";
8+
import "@fontsource/source-sans-pro/700.css";
9+
10+
// `reflect-metadata` allows for runtime reflection of types in JavaScript.
411
// It is needed for class-transformer to work and is imported as a side effect.
512
// The library replaces the Reflect API on the window to support more features.
613
import "reflect-metadata";

‎website/.eslintrc.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,11 +9,13 @@ module.exports = {
99
ecmaVersion: 2020,
1010
},
1111
extends: [
12-
// JS defaults
13-
"airbnb-base",
14-
// General Prettier defaults
12+
"eslint:recommended",
13+
"plugin:import/recommended",
14+
"plugin:@typescript-eslint/recommended",
15+
"plugin:import/typescript",
1516
"prettier",
1617
],
18+
plugins: ["import", "@typescript-eslint", "prettier"],
1719
settings: {
1820
// https://github.com/import-js/eslint-plugin-import#resolvers
1921
"import/resolver": {
@@ -30,7 +32,6 @@ module.exports = {
3032
"!.*.js",
3133
"!.*.ts",
3234
],
33-
plugins: ["prettier"],
3435
rules: {
3536
// Standard ESLint config
3637
indent: "off",

‎website/.gitignore

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
11
node_modules/
22
public/
3+
static/fonts/
34
static/syntax-highlighting.css
5+
static/text-balancer.js

‎website/config_prod.toml

Lines changed: 0 additions & 17 deletions
This file was deleted.

‎website/content/_index.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,12 +3,14 @@ title = "Free online vector editor & procedural design tool"
33
template = "section.html"
44

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

12+
<!-- replacements::text_balancer() -->
13+
1214
<!-- ▛ LOGO ▜ -->
1315
<section id="logo">
1416
<div class="block">

‎website/content/about.md

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ title = "About Graphite"
33

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

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

118117
<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" />
119118

120-
## Keavon Chambers <span class="handle">(@Keavon)</span> <span class="flag" title="American">🇺🇸</span>
119+
## Keavon Chambers <span class="handle">(@Keavon)</span> <img src="https://static.graphite.rs/icons/flags/us.png" class="flag" title="American" />
121120

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

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

129128
<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" />
130129

131-
## Dennis Kobert <span class="handle">(@TrueDoctor)</span> <span class="flag" title="German">🇩🇪</span>
130+
## Dennis Kobert <span class="handle">(@TrueDoctor)</span> <img src="https://static.graphite.rs/icons/flags/de.png" class="flag" title="German" />
132131

133132
***Graphene node engine, research, architecture***
134133

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

144143
<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" />
145144

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

148147
***Editor systems, nodes, tools, architecture***
149148

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

156155
<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" />
157156

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

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

0 commit comments

Comments
 (0)