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

Lines changed: 1293 additions & 743 deletions

File tree

‎.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

0 commit comments

Comments
 (0)