Pull in the text balancer from our static host

Author: Keavon

website/.gitignore

@@ -2,3 +2,4 @@ node_modules/
 public/
 static/fonts/
 static/syntax-highlighting.css
+static/text-balancer.js

website/content/_index.md

@@ -3,12 +3,14 @@ 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."
 +++
 
+<!-- replacements::text_balancer() -->
+
 <!-- ▛ LOGO ▜ -->
 <section id="logo">
 <div class="block">

website/install-fonts.js

@@ -1,4 +1,5 @@
 const fs = require("fs");
+const https = require("https");
 const path = require("path");
 
 // Define basePath
@@ -155,3 +156,39 @@ if (unusedFiles.length > 0) {
 }
 
 console.log("\nFont installation complete!");
+
+// Fetch and save text-balancer.js, which we don't commit to the repo so we're not version controlling dependency code
+const textBalancerUrl = "https://static.graphite.rs/text-balancer/text-balancer.js";
+const textBalancerDest = path.join(basePath, "static", "text-balancer.js");
+console.log("\nDownloading text-balancer.js...");
+https
+	.get(textBalancerUrl, (res) => {
+		if (res.statusCode !== 200) {
+			console.error(`Failed to download text-balancer.js. Status code: ${res.statusCode}`);
+			res.resume();
+			return;
+		}
+
+		let data = "";
+		res.on("data", (chunk) => {
+			data += chunk;
+		});
+
+		res.on("end", () => {
+			try {
+				// Ensure destination directory exists
+				const destDir = path.dirname(textBalancerDest);
+				if (!fs.existsSync(destDir)) {
+					fs.mkdirSync(destDir, { recursive: true });
+					console.log(`Created directory: ${destDir}`);
+				}
+				fs.writeFileSync(textBalancerDest, data, "utf8");
+				console.log(`Downloaded and saved: ${textBalancerDest}`);
+			} catch (error) {
+				console.error(`Error saving text-balancer.js:`, error);
+			}
+		});
+	})
+	.on("error", (err) => {
+		console.error(`Error downloading text-balancer.js:`, err);
+	});

website/sass/layout/balance-text.scss

@@ -124,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 />

website/templates/base.html

@@ -12,3 +12,29 @@ <h2 class="headline"><a href="{{ article.permalink | safe }}">{{ article.title }
 </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 %}