refactor: Remove Font Awesome dependency and use inline SVGs (#69)

- Replaced Font Awesome with custom inline SVGs for social and external link icons.
- Removed `@fortawesome/fontawesome-free` package and related SCSS imports.
- Updated CSP rules to support additional Google Analytics domains.
- Adjusted social link icon styles using filters for consistency.
- Simplified Webpack configuration for SVG handling.

Author: warnyul

package-lock.json

@@ -54,7 +54,6 @@
     "webpack-dev-server": "^5.0.0"
   },
   "dependencies": {
-    "@fortawesome/fontawesome-free": "^6.7.1",
     "firebase": "^11.0.0"
   }
 }

package.json

@@ -1,5 +1,4 @@
 @use "poppins";
-@use "fontawesome";
 @use "variables" as *;
 
 // Reset
@@ -97,22 +96,18 @@ h1 {
 .clazz-social-link-container {
     a {
         display: inline-block;
-        color: $primary-color;
+        filter: brightness(0) saturate(100%) invert(34%) sepia(3%) saturate(2463%) hue-rotate(176deg) brightness(90%) contrast(90%);
         padding: calc($gap /2 ) $gap;
         transition: color 0.3s ease;
         &:visited {
-            color: $primary-color;
+            filter: brightness(0) saturate(100%) invert(34%) sepia(3%) saturate(2463%) hue-rotate(176deg) brightness(90%) contrast(90%);
         }
         &:hover {
-            color: $hover-color;
+            filter: brightness(0) saturate(100%) invert(60%) sepia(53%) saturate(460%) hue-rotate(94deg) brightness(88%) contrast(94%);
         }
     }
 }
 
-.fa-2xl {
-    line-height: 1;
-}
-
 // Footer
 footer {
     display: flex;

src/assets/images/fa6-brands-bluesky.svg

@@ -17,8 +17,6 @@
     <meta property="og:image:height" content="1269" />
     <link rel="preload" href="../assets/fonts/Poppins-Bold-latin.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="preload" href="../assets/fonts/Poppins-Regular-latin.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin />
-    <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="canonical" href="<%- baseUrl %>" />
     <script type="application/ld+json">
         {
@@ -56,13 +54,13 @@
                 <% socialLinks.forEach(function(link) { %>
                     <div class="clazz-social-link-container">
                         <a href="<%- link.url %>" aria-label="Visit <%= link.name %>" target="_blank" rel="noopener noreferrer ugc">
-                            <i class="fa-brands fa-<%- link.icon %> fa-2xl"></i>
+                            <%- include(`../assets/images/fa6-brands-${link.icon}.svg`) %>
                         </a>
                     </div>
                 <% }); %>
                 <div class="clazz-social-link-container">
                     <a class="clazz-copy-link" href="#" aria-label="Copy link" rel="noopener">
-                        <i class="fa-solid fa-arrow-up-right-from-square fa-2xl"></i>
+                        <%- include(`../assets/images/fa6-solid-arrow-up-right-from-square.svg`) %>
                     </a>
                 </div>
             </div>

src/assets/images/fa6-brands-github.svg

@@ -45,7 +45,7 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(png|jpg|jpeg|gif|svg|webp)$/i,
+        test: /\.(png|jpg|jpeg|gif|webp)$/i,
         type: 'asset/resource',
       },
       {
@@ -189,7 +189,7 @@ module.exports = {
        'style-src': ["'self'"],
        'img-src': ["'self'"],
        'font-src': ["'self'"],
-       'connect-src': ["'self'", "https://google-analytics.com", "https://firebase.googleapis.com", "https://firebaseinstallations.googleapis.com"],
+       'connect-src': ["'self'", "https://*.google-analytics.com", "https://firebase.googleapis.com", "https://firebaseinstallations.googleapis.com"],
      },
      {
        hashingMethod: 'sha256',