feat: self host font-awesome 7.0

.eleventy.js

@@ -14,6 +14,7 @@ module.exports = function(eleventyConfig) {
   eleventyConfig.addPassthroughCopy({ 'src/robots.txt': '/robots.txt' });
   eleventyConfig.addPassthroughCopy({ 'src/sitemap.xml': '/sitemap.xml' });
   eleventyConfig.addPassthroughCopy("src/css/prism-tomorrow.css");
+  eleventyConfig.addPassthroughCopy("src/vendor/fontawesome");
 
 
   eleventyConfig.addPlugin(syntaxHighlight);

package.json

@@ -15,21 +15,21 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "async-mutex": "^0.5.0",
     "cors": "^2.8.5",
     "express": "^4.21.2",
     "express-rate-limit": "^8.0.1",
-    "async-mutex": "^0.5.0",
     "fs-extra": "^11.3.1"
   },
   "devDependencies": {
-    "autoprefixer": "^10.4.19",
     "@11ty/eleventy": "^3.1.2",
     "@11ty/eleventy-plugin-syntaxhighlight": "^5.0.2",
     "@tailwindcss/postcss": "^4.1.12",
+    "autoprefixer": "^10.4.19",
     "http-proxy-middleware": "^3.0.0",
+    "luxon": "^3.7.1",
     "npm-run-all": "^4.1.5",
-    "tailwindcss": "^3.4.17",
     "postcss": "^8.4.38",
-    "luxon": "^3.7.1"
+    "tailwindcss": "^3.4.17"
   }
 }

src/_includes/layout.njk

@@ -44,11 +44,11 @@
             }
         </script>
         {% endif %}
-        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
         <link rel="preconnect" href="https://fonts.googleapis.com">
         <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
         <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,100..700;1,100..700&family=Red+Hat+Mono:ital,wght@0,300..700;1,300..700&display=swap" rel="stylesheet">
         <link rel="stylesheet" href="/css/style.css?v={{ buildTime }}">
+        <link rel="stylesheet" href="/vendor/fontawesome/css/all.min.css">
         <link rel="stylesheet" href="/css/prism-tomorrow.css?v={{ buildTime }}">
         <link rel="canonical" href="{{ site.url }}{{ page.url }}">
     </head>
@@ -68,7 +68,7 @@
                 </div>
                 <div class="md:hidden">
                     <button id="mobile-menu-button" class="text-white focus:outline-none" aria-label="Toggle mobile menu">
-                    <i class="fas fa-bars text-2xl" aria-hidden="true"></i>
+                    <i class="fa-solid fa-bars text-2xl" aria-hidden="true"></i>
                     </button>
                 </div>
             </nav>
@@ -92,8 +92,8 @@
         <footer class="bg-gray-900 text-gray-400 py-6">
             <div class="container mx-auto px-6 text-center">
                 <div class="flex justify-center space-x-6 mb-4">
-                    <a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400" aria-label="LinkedIn profile of {{ site.author.name }}"><i class="fab fa-linkedin fa-2x" aria-hidden="true"></i></a>
+                    <a href="{{ site.author.linkedinUrl }}" target="_blank" class="hover:text-blue-400 icon" aria-label="LinkedIn profile of {{ site.author.name }}"><i class="fa-brands fa-linkedin fa-xl" aria-hidden="true"></i></a>
-                    <a href="mailto:{{ site.author.email }}" class="hover:text-blue-400" aria-label="Email {{ site.author.name }}"><i class="fas fa-envelope fa-2x" aria-hidden="true"></i></a>
+                    <a href="mailto:{{ site.author.email }}" class="hover:text-blue-400 icon" aria-label="Email {{ site.author.name }}"><i class="fa-solid fa-envelope fa-xl" aria-hidden="true"></i></a>
                 </div>
                 <p>&copy; {% year %} {{ site.author.name }}. All Rights Reserved.</p>
             </div>

src/_includes/post.njk

@@ -5,7 +5,7 @@ layout: "layout.njk"
     {% if tags and 'blog' in tags %}
     <div>
         <a href="/blog">
-        <i class="fas fa-arrow-left mr-2" aria-hidden="true"></i>
+        <i class="fa-solid fa-arrow-left mr-2" aria-hidden="true"></i>
         Back to all posts
         </a>
     </div>
@@ -14,27 +14,27 @@ layout: "layout.njk"
     <div class="post-meta flex flex-col items-start md:flex-row md:items-center text-gray-400 text-lg">
         <!--- Date Section -->
         <div class="flex items-center mb-1">
-            <i class="fas fa-fw fa-calendar-alt mr-2" aria-hidden="true"></i>
+            <i class="fa-solid fa-fw fa-calendar mr-2" aria-hidden="true"></i>
             <span>Published on {{ page.date | readableDate }}</span>
         </div>
         <!--- Views Section -->
         <span class="hidden md:inline mx-2 text-gray-600">•</span>
         <div class="flex items-center mb-1">
-            <i class="fas fa-fw fa-eye mr-2" aria-hidden="true"></i>
+            <i class="fa-solid fa-fw fa-eye mr-2" aria-hidden="true"></i>
             <span class="view-count" data-view-count data-slug="{{ page.fileSlug }}">Loading views</span>
         </div>
         <!--- Comments Section -->
         <!---
         <span class="hidden md:inline mx-2 text-gray-600">•</span>
         <div class="flex items-center mb-1">
-            <i class="fas fa-fw fa-comments mr-2" aria-hidden="true"></i>
+            <i class="fa-solid fa-fw fa-comments mr-2" aria-hidden="true"></i>
             <a href="#disqus_thread">Comments</a>
         </div>
          -->
         <!--- Likes Section -->
         <span class="hidden md:inline mx-2 text-gray-600">•</span>
         <div class="flex items-center mb-1 like-icon" data-like-button data-slug="{{ page.fileSlug }}">
-            <i class="fas fa-fw fa-heart mr-2" aria-hidden="true"></i>
+            <i class="fa-solid fa-fw fa-heart mr-2" aria-hidden="true"></i>
             <span class="like-count" data-like-count data-slug="{{ page.fileSlug }}">No likes</span>
         </div>
     </div>

src/blog.njk

@@ -15,10 +15,10 @@ eleventyExcludeFromCollections: true
         <a href="{{ post.url }}" class="text-blue-400 hover:text-blue-500">{{ post.data.title }}</a>
       </h2>
       <div class="flex items-center text-gray-400 mb-4">
-        <i class="fas fa-calendar-alt mr-2" aria-hidden="true"></i>
+        <i class="fa-solid fa-calendar mr-2" aria-hidden="true"></i>
         <p>{{ post.date | readableDate }}</p>
         <span class="mx-2 text-gray-600">|</span>
-        <i class="fas fa-eye mr-2" aria-hidden="true"></i>
+        <i class="fa-solid fa-eye mr-2" aria-hidden="true"></i>
         <span class="view-count" data-view-count data-slug="{{ post.fileSlug }}">...</span>
       </div>
       {% if post.data.excerpt %}

src/index.md

@@ -38,7 +38,7 @@ image: "/assets/images/jesus.webp"
         {%- for service in services -%}
         <div class="card">
             <div class="flex md:flex-row items-center mb-2">
-                <i class="fas {{ service.icon }} icon"></i>
+                <i class="fa-solid {{ service.icon }} icon"></i>
                 <h3 class="text-xl font-bold text-white">{{ service.name }}</h3>
             </div>
             <p class="text-gray-400">{{ service.description }}</p>
@@ -68,7 +68,7 @@ image: "/assets/images/jesus.webp"
             <div class="card space-y-4">
                 {%- for certification in certifications -%}
                 <div class="flex items-center">
-                    <i class="fas fa-certificate icon text-yellow-400" aria-hidden="true"></i>
+                    <i class="fa-solid fa-certificate icon mr-5 text-yellow-400" aria-hidden="true"></i>
                     <div>
                         <h4 class="font-bold text-white">{{ certification.name }}</h4>
                         <p class="text-gray-400">Expires: {{ certification.expires }}</p>
@@ -87,8 +87,8 @@ image: "/assets/images/jesus.webp"
         {%- for role in roles -%}
         {%- if role.featured -%}
         <div class="mb-10 mx-4">
-            <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-gray-900">
+            <span class="absolute flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full -left-4 ring-8 ring-gray-900">
-            <i class="fas fa-briefcase text-white text-xs" aria-hidden="true"></i>
+            <i class="fa-solid fa-briefcase text-white" aria-hidden="true"></i>
             </span>
             <div class="card">
                 <div class="flex flex-col sm:flex-row sm:items-baseline sm:gap-x-2 mb-2">
@@ -110,8 +110,8 @@ image: "/assets/images/jesus.webp"
         {%- endif -%}
         {%- endfor -%}
         <div class="mx-4">
-            <span class="absolute flex items-center justify-center w-6 h-6 bg-blue-500 rounded-full -left-3 ring-8 ring-gray-900">
+            <span class="absolute flex items-center justify-center w-8 h-8 bg-blue-500 rounded-full -left-4 ring-8 ring-gray-900">
-            <i class="fas fa-briefcase text-white text-xs" aria-hidden="true"></i>
+            <i class="fa-solid fa-briefcase text-white" aria-hidden="true"></i>
             </span>
             <div class="card">
                 <h3 class="text-lg font-semibold text-white mb-2">Previous Roles</h3>
@@ -149,7 +149,7 @@ image: "/assets/images/jesus.webp"
                     <h3 class="text-xl font-bold text-white mb-2 transition-colors group-hover:text-blue-400">{{ post.data.title }}</h3>
                     <p class="text-gray-400 text-sm mb-4">{{ post.data.excerpt or post.data.description }}</p>
                     <span class="text-blue-400 group-hover:text-blue-500 font-medium flex items-center mt-auto transition-colors">
-                        Read More <i class="fas fa-arrow-right ml-2"></i>
+                        Read More <i class="fa-solid fa-arrow-right ml-2"></i>
                     </span>
                 </a>
             {%- endif -%}

src/vendor/fontawesome/solid.min.css

@@ -0,0 +1,6 @@
+/*!
+ * Font Awesome Free 7.0.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2025 Fonticons, Inc.
+ */
+:host,:root{--fa-family-classic:"Font Awesome 7 Free";--fa-font-solid:normal 900 1em/1 var(--fa-family-classic);--fa-style-family-classic:var(--fa-family-classic)}@font-face{font-family:"Font Awesome 7 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2)}.fas{--fa-style:900}.fa-classic,.fas{--fa-family:var(--fa-family-classic)}.fa-solid{--fa-style:900}