debugging

Author: jairomelo

.github/scripts/fetch-cats.js

@@ -2,6 +2,8 @@ const https = require('https');
 const fs = require('fs');
 
 const API_KEY = process.env.CAT_API_KEY;
+console.log('API Key exists:', !!API_KEY);
+
 const OUTPUT_FILE = '_data/cats.json';
 
 const options = {
@@ -12,6 +14,8 @@ const options = {
   }
 };
 
+console.log('Making request to:', `https://${options.hostname}${options.path}`);
+
 https.get(options, (resp) => {
   let data = '';
 
@@ -20,18 +24,22 @@ https.get(options, (resp) => {
   });
 
   resp.on('end', () => {
+    console.log('Response received:', data.substring(0, 100) + '...');
+    
     // Create directory if it doesn't exist
     const dir = '_data';
     if (!fs.existsSync(dir)){
         fs.mkdirSync(dir);
+        console.log('Created _data directory');
     }
 
     // Save the cat data
     fs.writeFileSync(OUTPUT_FILE, data);
-    console.log('Cat data saved successfully!');
+    console.log('Cat data saved to:', OUTPUT_FILE);
+    console.log('File contents:', fs.readFileSync(OUTPUT_FILE, 'utf8').substring(0, 100) + '...');
   });
 
 }).on("error", (err) => {
-  console.error("Error: " + err.message);
+  console.error("Error making request:", err.message);
   process.exit(1);
 });

.github/workflows/publish.yml

@@ -32,11 +32,20 @@ jobs:
         run: |
           mkdir -p _data
           node .github/scripts/fetch-cats.js
+          echo "Checking if cats.json exists:"
+          ls -l _data/
+          echo "Contents of cats.json:"
+          cat _data/cats.json
         env:
           CAT_API_KEY: ${{ secrets.CAT_API_KEY }}
 
       - name: Render Quarto Project
-        run: quarto render
+        run: |
+          echo "Contents of _data before render:"
+          ls -l _data/
+          quarto render
+          echo "Contents of _site after render:"
+          ls -l _site/
 
       - name: Deploy to GitHub Pages
         uses: peaceiris/actions-gh-pages@v3

chapters/endpoints.qmd

@@ -78,33 +78,37 @@ With this result:
 
 <script>
 document.addEventListener('DOMContentLoaded', async () => {
-  // prefetch the cat data
-  const cats = await cats;
-  
-  const wrapper = document.querySelector('.carousel-wrapper');
-  cats.forEach(cat => {
-    const img = document.createElement('img');
-    img.src = cat.url;
-    img.alt = 'Cat image';
-    wrapper.appendChild(img);
-  });
-
-  let currentIndex = 0;
-  const totalImages = cats.length;
-  
-  function updateCarousel() {
-    wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
+  try {
+    // Wait for OJS runtime to be ready and access the cats variable
+    const cats = await window.ojs.runtime.interpret('cats');
+    
+    const wrapper = document.querySelector('.carousel-wrapper');
+    cats.forEach(cat => {
+      const img = document.createElement('img');
+      img.src = cat.url;
+      img.alt = 'Cat image';
+      wrapper.appendChild(img);
+    });
+
+    let currentIndex = 0;
+    const totalImages = cats.length;
+    
+    function updateCarousel() {
+      wrapper.style.transform = `translateX(-${currentIndex * 100}%)`;
+    }
+
+    document.querySelector('.next').addEventListener('click', () => {
+      currentIndex = (currentIndex + 1) % totalImages;
+      updateCarousel();
+    });
+
+    document.querySelector('.prev').addEventListener('click', () => {
+      currentIndex = (currentIndex - 1 + totalImages) % totalImages;
+      updateCarousel();
+    });
+  } catch (error) {
+    console.error('Error loading cat data:', error);
   }
-
-  document.querySelector('.next').addEventListener('click', () => {
-    currentIndex = (currentIndex + 1) % totalImages;
-    updateCarousel();
-  });
-
-  document.querySelector('.prev').addEventListener('click', () => {
-    currentIndex = (currentIndex - 1 + totalImages) % totalImages;
-    updateCarousel();
-  });
 });
 </script>