From f8c2b3cac5d733c03e3970250c4a1ec1a177dd67 Mon Sep 17 00:00:00 2001 From: Keavon Chambers Date: Fri, 10 Jan 2025 15:46:40 -0800 Subject: [PATCH] WIP --- .github/workflows/build-dev-and-ci.yml | 14 ++++--- .github/workflows/build-production.yml | 9 ++++- .github/workflows/website.yml | 15 ++++--- website/content/_index.md | 4 +- website/content/donate.md | 6 +-- website/sass/base.scss | 4 ++ website/sass/fonts.scss | 55 ++++++++++++++++++++++++++ website/sass/layout/balance-text.scss | 22 ----------- website/templates/base.html | 7 ++-- 9 files changed, 94 insertions(+), 42 deletions(-) create mode 100644 website/sass/fonts.scss delete mode 100644 website/sass/layout/balance-text.scss diff --git a/.github/workflows/build-dev-and-ci.yml b/.github/workflows/build-dev-and-ci.yml index f147745a15..64d37c0329 100644 --- 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: jobs: build: @@ -50,8 +49,13 @@ jobs: - name: ✂ Replace template in 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="" + # 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="" + else + export INDEX_HTML_HEAD_REPLACEMENT="" + fi sed -i "s||$INDEX_HTML_HEAD_REPLACEMENT|" frontend/index.html - name: 🌐 Build Graphite web code diff --git a/.github/workflows/build-production.yml b/.github/workflows/build-production.yml index fa58e1865b..13cef6fcc9 100644 --- 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: steps: - name: 📥 Clone and checkout repository @@ -47,7 +46,15 @@ jobs: - name: ✂ Replace template in 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="" + else + export INDEX_HTML_HEAD_REPLACEMENT="" + fi sed -i "s||$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/website.yml b/.github/workflows/website.yml index 03eda92e4a..6090efe7d3 100644 --- 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: + INDEX_HTML_HEAD_INCLUSION: REPLACE_ME jobs: build: @@ -34,8 +34,13 @@ jobs: - name: ✂ Replace template in 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=" >> $GITHUB_ENV + else + echo "INDEX_HTML_HEAD_INCLUSION=" >> $GITHUB_ENV + fi - name: 🌐 Build Graphite website with Zola env: diff --git a/website/content/_index.md b/website/content/_index.md index 3ca4e6b540..24226863e0 100644 --- 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 index 6885ae339f..631658cb95 100644 --- 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 = [] +++
@@ -33,7 +33,7 @@ Your monthly support (or one-off contribution) helps provide the resources neede # Support the mission -

+

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.

diff --git a/website/sass/base.scss b/website/sass/base.scss index 564c487307..fddcc4e632 100644 --- 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 new file mode 100644 index 0000000000..41d444e83e --- /dev/null +++ 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 & 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 deleted file mode 100644 index 263f04dc8b..0000000000 --- a/website/sass/layout/balance-text.scss +++ /dev/null @@ -1,22 +0,0 @@ -// CSS component of the JS text balancer script. -// This must be loaded as an inline stylesheet in the head of the -// document to avoid the possibility of a visible layout shift. - -.balance-text { - visibility: hidden; -} - -@media (scripting: none) { - .balance-text { - visibility: visible !important; - } -} - -@supports (text-wrap: balance) { - .balance-text, - .balanced-text { - text-align: left; - text-wrap: balance; - visibility: visible; - } -} diff --git a/website/templates/base.html b/website/templates/base.html index aa93845218..e1b650c009 100644 --- a/website/templates/base.html +++ b/website/templates/base.html @@ -27,14 +27,12 @@ {% block rss -%} {%- endblock %} - - {#- 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 }} {{ "" | safe }} {%- endfor %} + {{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") | safe }}