From 2e0c65a90d1891738b0eeb15fb268f13d7a7397d Mon Sep 17 00:00:00 2001
From: Limon Monte <6059356+limonte@users.noreply.github.com>
Date: Wed, 5 Aug 2026 14:37:47 +0300
Subject: [PATCH] perf: bundle animate.css instead of loading it from a CDN

animate.css was pulled from jsdelivr as a render-blocking stylesheet.
Bundling it removes that request for 5 KB gzipped.

- add animate.css as a devDependency and @use it from styles.scss, the
  same way @docsearch/css and highlight.js styles are already imported
- drop the CDN <link> from the head partial

Imports the real published package rather than hand-copying the 9
keyframes the site uses, so there is no risk of the definitions drifting
from upstream, and Renovate can keep it current.

CSS bundle goes from 14967 to 20833 bytes gzipped. That is a good trade
for removing a blocking third-party request, and it is why the whole
file is imported rather than an extracted subset.

font-awesome still loads from jsdelivr, so the origin stays on the
critical path and its preconnect is still earned. Removing that one
needs its 7 icons replaced with inline SVG.

Part of #259

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
---
 bun.lock           | 3 +++
 package.json       | 1 +
 partials/head.html | 3 ---
 styles/styles.scss | 3 +++
 4 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/bun.lock b/bun.lock
index 881f2712..32b08e46 100644
--- a/bun.lock
+++ b/bun.lock
@@ -31,6 +31,7 @@
         "@types/react": "^19.2.14",
         "@types/react-dom": "^19.2.3",
         "@vitejs/plugin-react": "^6.0.0",
+        "animate.css": "^4.1.1",
         "oxfmt": "^0.59.0",
         "oxlint": "^1.51.0",
         "sass": "^1.97.3",
@@ -338,6 +339,8 @@
 
     "ajv": ["ajv@8.20.0", "", { "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", "json-schema-traverse": "^1.0.0", "require-from-string": "^2.0.2" } }, "sha512-Thbli+OlOj+iMPYFBVBfJ3OmCAnaSyNn4M1vz9T6Gka5Jt9ba/HIR56joy65tY6kx/FCF5VXNB819Y7/GUrBGA=="],
 
+    "animate.css": ["animate.css@4.1.1", "", {}, "sha512-+mRmCTv6SbCmtYJCN4faJMNFVNN5EuCTTprDTAo7YzIGji2KADmakjVA3+8mVDkZ2Bf09vayB35lSQIex2+QaQ=="],
+
     "anser": ["anser@2.3.5", "", {}, "sha512-vcZjxvvVoxTeR5XBNJB38oTu/7eDCZlwdz32N1eNgpyPF7j/Z7Idf+CUwQOkKKpJ7RJyjxgLHCM7vdIK0iCNMQ=="],
 
     "ansi-regex": ["ansi-regex@6.2.2", "", {}, "sha512-Bq3SmSpyFHaWjPk8If9yc6svM8c56dB5BAtW4Qbw5jHTwwXXcTLoRMkpDJp6VL0XzlWaCHTXrkFURMYmD0sLqg=="],
diff --git a/package.json b/package.json
index 0f043443..a9eb65e4 100644
--- a/package.json
+++ b/package.json
@@ -41,6 +41,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^6.0.0",
+    "animate.css": "^4.1.1",
     "oxfmt": "^0.59.0",
     "oxlint": "^1.51.0",
     "sass": "^1.97.3",
diff --git a/partials/head.html b/partials/head.html
index 046bc710..13e00deb 100644
--- a/partials/head.html
+++ b/partials/head.html
@@ -54,9 +54,6 @@
   <!-- Font Awesome icons -->
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4/css/font-awesome.min.css" />
 
-  <!-- Animate.css -->
-  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/animate.css@4/animate.min.css" />
-
   <script
     defer
     src="https://analytics.limonte.dev/script.js"
diff --git a/styles/styles.scss b/styles/styles.scss
index 0713dd09..ccc63186 100644
--- a/styles/styles.scss
+++ b/styles/styles.scss
@@ -2,6 +2,9 @@
 @use 'sass:color';
 @use '/node_modules/@docsearch/css/dist/style.css';
 @use '/node_modules/highlight.js/styles/atom-one-dark.css';
+// Bundled instead of loaded from a CDN: 5 KB gzipped, and it removes a
+// render-blocking third-party stylesheet from the critical path.
+@use '/node_modules/animate.css/animate.min.css';
 @use '../public/bootstrap4-buttons.css';
 
 @import '@fontsource/montserrat/latin-400.css';