update styles and add ICO

Author: ricky.gummadi

build/build.mjs

@@ -38,15 +38,25 @@ async function minifyHTML() {
 }
 
 async function compressImages() {
-    await imagemin(['src/logo.jpeg'], {
+    const imageFiles = [
+        'src/logo.jpeg',
+        'src/logo.png',
+        'src/logo.ico'
+    ];
+
+    await imagemin(imageFiles, {
         destination: 'dist/',
         plugins: [
             imageminMozjpeg({ quality: 75 }),
             imageminPngquant({ quality: [0.6, 0.8] })
         ]
     });
+
+    // Directly copy ICO files as imagemin doesn't handle ICO files
+    fs.copyFileSync('src/logo.ico', 'dist/logo.ico');
 }
 
+
 function copyCNAME() {
     fs.copyFileSync('src/CNAME', 'dist/CNAME');
 }

build/build.test.js

@@ -156,4 +156,20 @@ describe('Build Process', () => {
       throw error;
     }
   });
+
+  test('HTML includes favicon', () => {
+    const distHtml = fs.readFileSync(distHtmlPath, 'utf8');
+
+    // Check that the favicon is correctly included in the HTML
+    try {
+      expect(distHtml).toContain('<link rel="icon" href="logo.ico" type="image/x-icon">');
+      console.log('Success: HTML includes the favicon.');
+    } catch (error) {
+      console.error('Expected favicon link: <link rel="icon" href="logo.ico" type="image/x-icon">');
+      console.error(`Actual HTML content: ${distHtml}`);
+      error.message = 'Failed: HTML does not include the favicon link.';
+      throw error;
+    }
+});
+
 });

src/index.html

@@ -6,6 +6,9 @@
     <title>IpSimple - A Simple Public IP Address API</title>
     <meta name="description" content="IpSimple API is a straightforward public IP address API, designed for quick integration into any application.">
 
+    <!-- Add this line to include the favicon -->
+    <link rel="icon" href="logo.ico" type="image/x-icon">
+
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap" rel="stylesheet">
     <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
@@ -93,7 +96,7 @@ <h1><a href="#top"><img src="logo.jpeg" alt="IpSimple Logo" style="width: 100px;
                         <h2 class="display-4 fw-bold">Effortless & Free Public IP Discovery</h2>
                         <h3 class="lead text-center align-middle">A fast, free, reliable, and easy-to-use public IP address API</h3>
                         <p></p>
-                        <a href="https://github.com/ipsimple" class="social-icon"><i class="fab fa-github"></i></a>
+                        <a href="https://github.com/ipsimple" class="social-icon large-font"><i class="fab fa-github"></i></a>
                     </div>
                 </div>
             </div>

src/logo.ico

@@ -185,6 +185,10 @@ code {
     font-weight: bold;    
 }
 
+.large-font{
+    font-size: 2.5em !important;
+}
+
 pre {
     white-space: pre-wrap; /* Allows the code to wrap */
     word-break: break-all; /* Prevents long words from making the container overflow */