GraphiteEditor · Keavon · Jan 10, 2025
diff --git a/.github/workflows/build-dev-and-ci.yml b/.github/workflows/build-dev-and-ci.yml
@@ -3,13 +3,12 @@ name: "Editor: Dev & CI"
 on:
   push:
     branches:
-      - master
+      - locally-serve-fonts
   pull_request:
     branches:
-      - master
+      - locally-serve-fonts
 env:
   CARGO_TERM_COLOR: always
-  INDEX_HTML_HEAD_REPLACEMENT: <script defer data-domain="dev.graphite.rs" data-api="https://graphite.rs/visit/event" src="https://graphite.rs/visit/script.hash.js"></script>
 
 jobs:
   build:
@@ -50,9 +49,15 @@ jobs:
 
       - name: ✂ Replace template in <head> of index.html
         run: |
-          # Remove the INDEX_HTML_HEAD_REPLACEMENT environment variable for build links (not master deploys)
-          git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_REPLACEMENT=""
-          sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->|$INDEX_HTML_HEAD_REPLACEMENT|" frontend/index.html
+          # Check if we are on the locally-serve-fonts branch
+          if git rev-parse --abbrev-ref HEAD | grep locally-serve-fonts > /dev/null; then
+            export INDEX_HTML_HEAD_SCRIPT=$(curl -s https://graphite.rs/visit/script.hash.js) || exit 1
+            export INDEX_HTML_HEAD_REPLACEMENT="<script data-domain=\"dev.graphite.rs\" data-api=\"https://graphite.rs/visit/event\">$INDEX_HTML_HEAD_SCRIPT</script>"
+          else
+            export INDEX_HTML_HEAD_REPLACEMENT=""
+          fi
+          ESCAPED_REPLACEMENT=$(printf '%s\n' "$INDEX_HTML_HEAD_REPLACEMENT" | sed -e 's/[\/&]/\\&/g')
+          sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->|$ESCAPED_REPLACEMENT|" frontend/index.html
 
       - name: 🌐 Build Graphite web code
         env:

diff --git a/.github/workflows/build-production.yml b/.github/workflows/build-production.yml
@@ -18,7 +18,6 @@ jobs:
       RUSTC_WRAPPER: /usr/bin/sccache
       CARGO_INCREMENTAL: 0
       SCCACHE_DIR: /var/lib/github-actions/.cache
-      INDEX_HTML_HEAD_REPLACEMENT: <script defer data-domain="editor.graphite.rs" data-api="https://graphite.rs/visit/event" src="https://graphite.rs/visit/script.hash.js"></script>
 
     steps:
       - name: 📥 Clone and checkout repository
@@ -47,7 +46,15 @@ jobs:
 
       - name: ✂ Replace template in <head> of index.html
         run: |
+          # Check if we are on the locally-serve-fonts branch
+          if git rev-parse --abbrev-ref HEAD | grep locally-serve-fonts > /dev/null; then
+            export INDEX_HTML_HEAD_SCRIPT=$(curl -s https://graphite.rs/visit/script.hash.js) || exit 1
+            export INDEX_HTML_HEAD_REPLACEMENT="<script data-domain=\"editor.graphite.rs\" data-api=\"https://graphite.rs/visit/event\">$INDEX_HTML_HEAD_SCRIPT</script>"
+          else
+            export INDEX_HTML_HEAD_REPLACEMENT=""
+          fi
           sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->|$INDEX_HTML_HEAD_REPLACEMENT|" frontend/index.html
+          echo "INDEX_HTML_HEAD_REPLACEMENT=$INDEX_HTML_HEAD_REPLACEMENT" >> $GITHUB_ENV
 
       - name: 🌐 Build Graphite web code
         env:

diff --git a/.github/workflows/comment-!build-commands.yml b/.github/workflows/comment-!build-commands.yml
@@ -74,9 +74,8 @@ jobs:
 
       - name: ✂ Replace template in <head> of index.html
         run: |
-          # Remove the INDEX_HTML_HEAD_REPLACEMENT environment variable for build links (not master deploys)
-          export INDEX_HTML_HEAD_REPLACEMENT=""
-          sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->|$INDEX_HTML_HEAD_REPLACEMENT|" frontend/index.html
+          # Remove the INDEX_HTML_HEAD_REPLACEMENT comment for build links (not master deploys)
+          sed -i "s|<!-- INDEX_HTML_HEAD_REPLACEMENT -->||" frontend/index.html
 
       - name: ⌨ Set build command based on comment
         id: build_command

diff --git a/.github/workflows/website.yml b/.github/workflows/website.yml
@@ -3,17 +3,17 @@ name: "Website"
 on:
   push:
     branches:
-      - master
+      - locally-serve-fonts
     paths:
       - website/**
   pull_request:
     branches:
-      - master
+      - locally-serve-fonts
     paths:
       - 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: REPLACE_ME
 
 jobs:
   build:
@@ -34,8 +34,13 @@ jobs:
 
       - name: ✂ Replace template in <head> of index.html
         run: |
-          # Remove the INDEX_HTML_HEAD_INCLUSION environment variable for build links (not master deploys)
-          git rev-parse --abbrev-ref HEAD | grep master > /dev/null || export INDEX_HTML_HEAD_INCLUSION=""
+          # Check if we are on the locally-serve-fonts branch
+          if git rev-parse --abbrev-ref HEAD | grep locally-serve-fonts > /dev/null; then
+            export INDEX_HTML_HEAD_SCRIPT=$(curl -s https://graphite.rs/visit/script.hash.js) || exit 1
+            echo "INDEX_HTML_HEAD_INCLUSION=<script data-domain=\"graphite.rs\" data-api=\"/visit/event\">$INDEX_HTML_HEAD_SCRIPT</script>" >> $GITHUB_ENV
+          else
+            echo "INDEX_HTML_HEAD_INCLUSION=<script>alert();</script>" >> $GITHUB_ENV
+          fi
 
       - name: 🌐 Build Graphite website with Zola
         env:

diff --git a/website/content/_index.md b/website/content/_index.md
@@ -3,9 +3,9 @@ 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."
 +++
 

diff --git a/website/content/donate.md b/website/content/donate.md
@@ -2,9 +2,9 @@
 title = "Donate"
 
 [extra]
-# css = ["/page/donate.css", "/component/feature-box.css", "/layout/balance-text.css"]
+# css = ["/page/donate.css", "/component/feature-box.css"]
 # js = ["/js/fundraising.js"]
-# linked_js = ["https://static.graphite.rs/text-balancer/text-balancer.js"]
+# linked_js = []
 +++
 
 <section>
@@ -33,7 +33,7 @@ Your monthly support (or one-off contribution) helps provide the resources neede
 
 # Support the mission
 
-<p class="balance-text">
+<p>
 You can help realize Graphite's ambitious vision of building the ultimate 2D creative tool.
 Graphite is built by a small, dedicated crew of volunteers in need of resources to grow.
 </p>

diff --git a/website/sass/base.scss b/website/sass/base.scss
@@ -357,6 +357,10 @@ article {
 	min-height: 0;
 }
 
+.balance-text {
+	text-wrap: balance;
+}
+
 // ==================================
 // HEADER AND TEXT ELEMENT TAG STYLES
 // ==================================

diff --git a/website/sass/fonts.scss b/website/sass/fonts.scss
@@ -0,0 +1,55 @@
+// BONA NOVA
+@font-face {
+	font-family: "Bona Nova";
+	font-style: normal;
+	font-weight: 700;
+	font-display: swap;
+	src: url("https://static.graphite.rs/fonts/BonaNova.woff2") format("woff2");
+}
+
+// INTER
+@font-face {
+	font-family: "Inter";
+	font-style: normal;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url("https://static.graphite.rs/fonts/InterVariable-v4.1.woff2") format("woff2");
+}
+@font-face {
+	font-family: "Inter";
+	font-style: italic;
+	font-weight: 100 900;
+	font-display: swap;
+	src: url("https://static.graphite.rs/fonts/InterVariable-Italic-v4.1.woff2") format("woff2");
+}
+@font-feature-values Inter {
+	@character-variant {
+		cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
+		cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
+		alt-1: 1; // Alternate one
+		alt-3: 9; // Flat-top three
+		open-4: 2; // Open four
+		open-6: 3; // Open six
+		open-9: 4; // Open nine
+		lc-l-with-tail: 5; // Lower-case L with tail
+		simplified-u: 6; // Simplified u
+		alt-double-s: 7; // Alternate German double s
+		uc-i-with-serif: 8; // Upper-case i with serif
+		uc-g-with-spur: 10; // Capital G with spur
+		single-story-a: 11; // Single-story a
+		compact-lc-f: 12; // Compact f
+		compact-lc-t: 13; // Compact t
+	}
+
+	@styleset {
+		ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
+		open-digits: 1; // Open digits
+		disambiguation: 2; // Disambiguation (with zero)
+		disambiguation-except-zero: 4; // Disambiguation (no zero)
+		round-quotes-and-commas: 3; // Round quotes &amp; commas
+		square-punctuation: 7; // Square punctuation
+		square-quotes: 8; // Square quotes
+		circled-characters: 5; // Circled characters
+		squared-characters: 6; // Squared characters
+	}
+}
diff --git a/website/sass/layout/balance-text.scss b/website/sass/layout/balance-text.scss
diff --git a/website/templates/base.html b/website/templates/base.html
@@ -27,14 +27,12 @@
 	{% block rss -%}
 	<link rel="alternate" type="application/rss+xml" title="RSS" href="{{ get_url(path = 'blog/rss.xml', trailing_slash = false) | safe }}" />
 	{%- endblock %}
-	<link rel="preconnect" href="https://fonts.googleapis.com" />
-	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
 
 	{#- ON EVERY PAGE OF THE SITE: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
 	{#- ======================================================================== -#}
-	{%- set global_linked_css = ["https://fonts.googleapis.com/css2?family=Bona+Nova:wght@700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"] -%}
+	{%- set global_linked_css = [] -%}
 	{%- set global_linked_js = [] -%}
-	{%- set global_css = ["/base.css"] -%}
+	{%- set global_css = ["/base.css", "/fonts.css"] -%}
 	{%- set global_js = ["/js/text-justification.js", "/js/navbar.js"] -%}
 
 	{#- RETRIEVE FROM TEMPLATES AND PAGES: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
@@ -89,6 +87,7 @@
 	{{ load_data(path = path) | safe }}
 	{{ "</" ~ "script>" | safe }}
 	{%- endfor %}
+
 	{{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") | safe }}
 </head>
 <body>