add github stats

package-lock.json

@@ -8,7 +8,8 @@
       "name": "@example/basics",
       "version": "0.0.1",
       "dependencies": {
-        "astro": "^1.2.6"
+        "astro": "^1.2.6",
+        "astro-github-stats": "^0.1.0"
       }
     },
     "node_modules/@ampproject/remapping": {
@@ -970,6 +971,14 @@
         "npm": ">=6.14.0"
       }
     },
+    "node_modules/astro-github-stats": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.0.tgz",
+      "integrity": "sha512-efL18Mt2ITbYWFVy28XGFNemju2TPBMZ+BGw6N3zCf2OO0whtO7Kz6bsoploARqO5PzeyAxPMk52U9SNdQ1QWw==",
+      "peerDependencies": {
+        "astro": "^1.0.0"
+      }
+    },
     "node_modules/bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
@@ -6534,6 +6543,12 @@
         "zod": "^3.17.3"
       }
     },
+    "astro-github-stats": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/astro-github-stats/-/astro-github-stats-0.1.0.tgz",
+      "integrity": "sha512-efL18Mt2ITbYWFVy28XGFNemju2TPBMZ+BGw6N3zCf2OO0whtO7Kz6bsoploARqO5PzeyAxPMk52U9SNdQ1QWw==",
+      "requires": {}
+    },
     "bail": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",

package.json

@@ -11,6 +11,7 @@
     "astro": "astro"
   },
   "dependencies": {
-    "astro": "^1.2.6"
+    "astro": "^1.2.6",
+    "astro-github-stats": "^0.1.0"
   }
 }

src/pages/index.astro

@@ -2,6 +2,7 @@
 import Layout from "../layouts/Layout.astro";
 import Card from "../components/Card.astro";
 import Footer from "../components/Footer.astro";
+import GithubStats from "astro-github-stats";
 ---
 
 <Layout title="Ayo Ayco | Software Engineer + Web Developer">
@@ -18,7 +19,7 @@ import Footer from "../components/Footer.astro";
         </ul>
         <a href="/now" class="now-wrapper">
           <span class="now-label">Now</span>
-                    <span class="status">Settling in The Netherlands &rarr;</a>
+          <span class="status">Settling in The Netherlands &rarr;</span>
         </a>
       </div>
     </section>
@@ -45,6 +46,7 @@ import Footer from "../components/Footer.astro";
           body="Read my articles on technology, productivity, and life in general."
         />
       </ul>
+      <GithubStats username="ayoayco" />
       <Footer />
     </section>
   </main>
@@ -72,7 +74,7 @@ import Footer from "../components/Footer.astro";
   }
 
   .now-wrapper {
-        border: 1px solid rgba(255,255,255,0.2);
+    border: 1px solid rgba(255, 255, 255, 0.2);
     border-radius: 40px;
     padding: 8px 4px;
     font-weight: normal;
@@ -83,7 +85,7 @@ import Footer from "../components/Footer.astro";
 
   .now-label {
     border-radius: 40px;
-        background-color: rgba(0,0,0,0.3);
+    background-color: rgba(0, 0, 0, 0.3);
     padding: 4px 8px;
     text-transform: uppercase;
     font-weight: bold;
@@ -106,7 +108,6 @@ import Footer from "../components/Footer.astro";
     padding: 0;
   }
 
-
   .highlighted-section code {
     font-size: 0.875em;
     border: 0.1em solid var(--color-border);
@@ -127,18 +128,14 @@ import Footer from "../components/Footer.astro";
     padding: 0;
   }
 
-    @media only screen 
+  @media only screen and (min-device-width: 280px) and (max-device-width: 653px) {
-    and (min-device-width: 280px) 
-    and (max-device-width: 653px) {
     .highlighted-section__content ul li {
       font-size: 14px;
       font-weight: bold;
     }
   }
 
-    @media only screen 
+  @media only screen and (min-device-width: 360px) and (max-device-width: 812px) {
-    and (min-device-width: 360px) 
-    and (max-device-width: 812px) {
     .highlighted-section__content ul li {
       font-size: 20px;
       font-weight: bold;