mirror of
https://github.com/GraphiteEditor/Graphite.git
synced 2026-09-19 02:48:12 +08:00
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
This commit is contained in:
Keavon Chambers
@@ -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`
|
||||
|
||||
|
||||
@@ -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);
|
||||
<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;
|
||||
}
|
||||
100% {
|
||||
transform: translate(-30px, -30px) rotate(360deg);
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
</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();
|
||||
}
|
||||
|
||||
// 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
frontend/package-lock.json
generated
28
frontend/package-lock.json
generated
@@ -7,7 +7,8 @@
|
||||
"name": "graphite-web-frontend",
|
||||
"license": "Apache-2.0",
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^2.2.0",
|
||||
"@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"
|
||||
@@ -555,6 +556,21 @@
|
||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/inconsolata": {
|
||||
"version": "5.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/inconsolata/-/inconsolata-5.2.5.tgz",
|
||||
"integrity": "sha512-OvzkZY5qYghv/jEV6cfGZzFhdFTvSnU+ExPC7WcZ7w8PdRhtiu/SpcBWOBt+3LXgS0n9qyepgq4zZmxlDTlGGQ==",
|
||||
"license": "OFL-1.1",
|
||||
"funding": {
|
||||
"url": "https://github.com/sponsors/ayuhito"
|
||||
}
|
||||
},
|
||||
"node_modules/@fontsource/source-sans-pro": {
|
||||
"version": "5.2.5",
|
||||
"resolved": "https://registry.npmjs.org/@fontsource/source-sans-pro/-/source-sans-pro-5.2.5.tgz",
|
||||
"integrity": "sha512-ypendqc4pYUc+EgF7qqPY9iVYEz1t/Qr03VojKxG/2g3dnpHa1B6DOlDxWQjQXDj5QrG6inEqGT0g+edjALZyg==",
|
||||
"license": "OFL-1.1"
|
||||
},
|
||||
"node_modules/@humanwhocodes/config-array": {
|
||||
"version": "0.13.0",
|
||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.13.0.tgz",
|
||||
@@ -1050,16 +1066,6 @@
|
||||
"vite": "^5.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@tauri-apps/api": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@tauri-apps/api/-/api-2.2.0.tgz",
|
||||
"integrity": "sha512-R8epOeZl1eJEl603aUMIGb4RXlhPjpgxbGVEaqY+0G5JG9vzV/clNlzTeqc+NLYXVqXcn8mb4c5b9pJIUDEyAg==",
|
||||
"license": "Apache-2.0 OR MIT",
|
||||
"funding": {
|
||||
"type": "opencollective",
|
||||
"url": "https://opencollective.com/tauri"
|
||||
}
|
||||
},
|
||||
"node_modules/@tsconfig/node10": {
|
||||
"version": "1.0.11",
|
||||
"resolved": "https://registry.npmjs.org/@tsconfig/node10/-/node10-1.0.11.tgz",
|
||||
|
||||
@@ -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"
|
||||
|
||||
@@ -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";
|
||||
|
||||
Reference in New Issue
Block a user