feat: attempt to add Unsplash stats

Author: willtheorangeguy

.github/workflows/astro.yml

@@ -58,6 +58,8 @@ jobs:
           node-version: "18"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
           cache-dependency-path: ${{ env.BUILD_PATH }}/package-lock.json
+      - name: Create .env file
+        run: echo "UNSPLASH_ACCESS_KEY=${{ secrets.UNSPLASH_ACCESS_KEY }}" > .env
       - name: Setup Pages
         id: pages
         uses: actions/configure-pages@v5

src/layouts/LabsLayout.astro

@@ -55,9 +55,17 @@ const { frontmatter } = Astro.props;
         </div>
       </a>
     </section>
-    <section class="prose max-w-6xl prose-img:border-0">
-      <br>
+    <section id="cards" class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6 mt-10">
+        <div class="card-content card border-skin-line">
+          <div id="unsplash-stats">
+            <h2 class="text-lg text-skin-accent font-medium">My Unsplash Stats</h2>
+            <p id="downloads">Downloads: </p>
+            <p id="views">Views: </p>
+            <p id="likes">Likes: </p>
+          </div>
+        </div>
     </section>
+    <br>
     <section >
       <div style="display: flex; justify-content: center; max-width: 100%;">
         <iframe width="100%" height="337" seamless frameborder="0" src="https://docs.google.com/spreadsheets/d/e/2PACX-1vTu8BIkLoeldqgLyVgPxmw-9fmOMu76TNv04y2OsG708ABJIJ7HLaZc234kmHDLz_g3zhjMNY3TKVqa/pubchart?oid=2021333611&amp;format=interactive"></iframe>
@@ -109,4 +117,32 @@ const { frontmatter } = Astro.props;
   --tw-text-opacity: 1;
   color: rgba(var(--color-accent), var(--tw-text-opacity));
   }
-</style>
+</style>
+
+<script>
+  const username = 'william_vdg';
+  require('dotenv').config();
+  const accessKey = process.env.UNSPLASH_ACCESS_KEY;
+
+  fetch(`https://api.unsplash.com/users/${username}/statistics`, {
+    headers: {
+      'Authorization': `Client-ID ${accessKey}`
+    }
+  })
+  .then(response => response.json())
+  .then(data => {
+    const downloads = data.downloads?.total || 0;
+    const views = data.views?.total || 0;
+    const likes = data.likes?.total || 0;
+
+    document.getElementById('downloads').textContent = `Downloads: ${downloads}`;
+    document.getElementById('views').textContent = `Views: ${views}`;
+    document.getElementById('likes').textContent = `Likes: ${likes}`;
+  })
+  .catch(error => console.error('Error fetching user stats:', error));
+
+</script>
+<script>
+  
+
+</script>