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
2025-05-19 02:38:29 -07:00
committed by GitHub
parent ea59f10b50
commit e57637aab1
28 changed files with 1305 additions and 755 deletions

View File

@@ -43,7 +43,7 @@
</div>
</section>
{%- if not page.summary -%}
{{ throw(message = "ARTICLE HAS NO SUMMARY! After the first paragraph (or two short ones), a `<!-- more -->` comment must be inserted in the markdown. Otherwise the blog page would be missing its preview text." | safe) }}
{{ throw(message = "------------------------------------------------------------> ARTICLE HAS NO SUMMARY! After the first paragraph (or two short ones), a `<!-- more -->` comment must be inserted in the markdown. Otherwise the blog page would be missing its preview text." | safe) }}
{%- endif -%}
{%- endblock content -%}

View File

@@ -27,15 +27,19 @@
{% 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_js = [] -%}
{%- set global_css = ["/base.css"] -%}
{%- set global_linked_css = [] -%}
{%- set global_js = ["/js/text-justification.js", "/js/navbar.js"] -%}
{%- set global_css = ["/base.css", "/fonts/common.css"] -%}
{%- set fonts_loaded = load_data(path="static/fonts/common.css", format="plain", required=false) -%}
{%- if not fonts_loaded -%}
{{ throw(message="------------------------------------------------------------> FONTS ARE NOT INSTALLED! Before running Zola, execute `npm run install-fonts` from the `/website` directory.") }}
{%- endif -%}
{#- RETRIEVE FROM TEMPLATES AND PAGES: CSS AND JS TO LOAD EITHER AS A LINK OR INLINE -#}
{#- ================================================================================ -#}
@@ -89,6 +93,7 @@
{{ load_data(path = path) | safe }}
{{ "</" ~ "script>" | safe }}
{%- endfor %}
{{- get_env(name = "INDEX_HTML_HEAD_INCLUSION", default = "") | safe }}
</head>
<body>
@@ -119,8 +124,10 @@
</header>
<main>
{%- filter replace(from = "<!-- replacements::blog_posts(count = 2) -->", to = replacements::blog_posts(count = 2)) -%}
{%- filter replace(from = "<!-- replacements::text_balancer() -->", to = replacements::text_balancer()) -%}
{%- block content -%}{%- endblock -%}
{%- endfilter -%}
{%- endfilter -%}
</main>
<footer>
<hr />

View File

@@ -12,3 +12,29 @@
</div>
{% endfor %}
{% endmacro blog_posts %}
{% macro text_balancer() %}
<style>
.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;
}
}
</style>
<script>
{{ load_data(path="static/text-balancer.js", format="plain") | safe }}
</script>
{% endmacro text_balancer %}