Merge pull request #2 from kxvinthxngxvel/dev

Dev

Author: itskavin

.gitignore

@@ -1,3 +1,4 @@
 .env
 node_modules/
 dist/
+.vercel

api/handlerq.js

@@ -1,48 +1,47 @@
 export default async function handler(req, res) {
-    // Add CORS headers to allow requests from any origin
-    res.setHeader("Access-Control-Allow-Origin", "*"); // Allow all origins
-    res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS"); // Allow GET and OPTIONS methods
-    res.setHeader("Access-Control-Allow-Headers", "Content-Type"); // Allow Content-Type header
-  
-    // Handle preflight request (OPTIONS)
-    if (req.method === "OPTIONS") {
-      return res.status(200).end(); // Return 200 for preflight requests
-    }
-  
-    // Define the Quotable API URL
-    const QUOTABLE_API_URL = "https://api.quotable.io/random?tags=motivational";
-  
-    try {
-      console.log("Fetching a quote from Quotable API...");
-      const response = await fetch(QUOTABLE_API_URL);
-  
-      console.log("Quotable API Response Status:", response.status);
-      if (!response.ok) {
-        const errorData = await response.json();
-        console.error("Error Response from Quotable API:", errorData);
-        return res.status(response.status).json({
-          error: errorData?.message || "Failed to fetch quote from Quotable API",
-        });
-      }
-  
-      const quoteData = await response.json();
-      console.log("Received data from Quotable API:", quoteData);
-  
-      // Check if the response contains valid quote data
-      if (!quoteData || !quoteData.content || !quoteData.author) {
-        console.error("Invalid quote data from Quotable API:", quoteData);
-        return res.status(404).json({ error: "No valid quote found from Quotable API" });
-      }
-  
-      // Return the quote and author to the client
-      res.status(200).json({
-        quote: quoteData.content,
-        author: quoteData.author,
+  // Add CORS headers to allow requests from any origin
+  res.setHeader("Access-Control-Allow-Origin", "*"); // Allow all origins
+  res.setHeader("Access-Control-Allow-Methods", "GET, OPTIONS"); // Allow GET and OPTIONS methods
+  res.setHeader("Access-Control-Allow-Headers", "Content-Type"); // Allow Content-Type header
+
+  // Handle preflight request (OPTIONS)
+  if (req.method === "OPTIONS") {
+    return res.status(200).end(); // Return 200 for preflight requests
+  }
+
+  // Define the ZenQuotes API URL
+  const ZENQUOTES_API_URL = "https://zenquotes.io/api/random";
+
+  try {
+    console.log("Fetching a quote from ZenQuotes API...");
+    const response = await fetch(ZENQUOTES_API_URL);
+
+    console.log("ZenQuotes API Response Status:", response.status);
+    if (!response.ok) {
+      const errorData = await response.json();
+      console.error("Error Response from ZenQuotes API:", errorData);
+      return res.status(response.status).json({
+        error: errorData?.message || "Failed to fetch quote from ZenQuotes API",
       });
-    } catch (error) {
-      console.error("Error fetching quote from Quotable API:", error);
-      // Return a detailed error message
-      res.status(500).json({ error: `Failed to fetch quote from Quotable API: ${error.message}` });
     }
+
+    const quoteData = await response.json();
+    console.log("Received data from ZenQuotes API:", quoteData);
+
+    // Check if the response contains valid quote data
+    if (!quoteData || !quoteData[0]?.q || !quoteData[0]?.a) {
+      console.error("Invalid quote data from ZenQuotes API:", quoteData);
+      return res.status(404).json({ error: "No valid quote found from ZenQuotes API" });
+    }
+
+    // Return the quote and author to the client
+    res.status(200).json({
+      quote: quoteData[0].q,  // The quote text
+      author: quoteData[0].a, // The author name
+    });
+  } catch (error) {
+    console.error("Error fetching quote from ZenQuotes API:", error);
+    // Return a detailed error message
+    res.status(500).json({ error: `Failed to fetch quote from ZenQuotes API: ${error.message}` });
   }
-  
+}

src/background.js

@@ -5,19 +5,24 @@ chrome.runtime.onInstalled.addListener(() => {
 async function fetchImageAndQuote() {
   // Updated API URLs
   const UNSPLASH_API_URL = "https://motivision.vercel.app/api/handler.js";  // Vercel-hosted API for image
-  const QUOTE_API_URL = "https://motivision.vercel.app/api/handlerq.js";  // Existing quote API
+  const QUOTE_API_URL = "https://motivision.vercel.app/api/handlerq.js";  // Your ZenQuotes API URL
 
   try {
     // Fetch image and quote in parallel
     const [imageData, quoteData] = await Promise.all([
       fetch(UNSPLASH_API_URL).then(res => res.json()),  // Fetch image from Vercel API
-      fetch(QUOTE_API_URL).then(res => res.json())     // Fetch quote from quotable.io API
+      fetch(QUOTE_API_URL).then(res => res.json())     // Fetch quote from ZenQuotes API
     ]);
 
-    // Assuming the Vercel API responds with an imageUrl field
-    const fullImageUrl = imageData.imageUrl;  
-    const quote = quoteData.content;
-    const author = quoteData.author;
+    console.log("Fetched image data:", imageData);
+    console.log("Fetched quote data:", quoteData);
+
+    // Check if imageData is valid
+    const fullImageUrl = imageData?.imageUrl || 'https://via.placeholder.com/1920x1080';  // Fallback image
+
+    // Access quote and author from the new response structure
+    const quote = quoteData?.quote || "No quote available";  // Fallback quote
+    const author = quoteData?.author || "Unknown";  // Fallback author
 
     // Store the fetched image and quote in Chrome storage
     chrome.storage.local.set({

src/content.js

@@ -39,7 +39,7 @@ document.addEventListener("DOMContentLoaded", function () {
 
   // Fetch and store a new image
   async function fetchImage() {
-    const UNSPLASH_API_URL = "https://motivision.vercel.app/api/handler.js";  // Updated URL to your Vercel-hosted API
+    const UNSPLASH_API_URL = "https://motivision.vercel.app/api/handler.js";  // Vercel-hosted API for image
 
     console.log("Fetching new image...");
     try {
@@ -53,15 +53,17 @@ document.addEventListener("DOMContentLoaded", function () {
     }
   }
 
-  // Fetch and store a new quote
+  // Fetch and store a new quote from ZenQuotes
   async function fetchQuote() {
-    const QUOTE_API_URL = "https://motivision.vercel.app/api/handlerq.js";
+    const QUOTE_API_URL = "https://motivision.vercel.app/api/handlerq.js";  // Your ZenQuotes API URL
 
     console.log("Fetching new quote...");
     try {
       const quoteData = await fetch(QUOTE_API_URL).then(res => res.json());
-      const newQuote = quoteData.content;
-      const newAuthor = quoteData.author;
+      
+      // Directly access quote and author from the response
+      const newQuote = quoteData.quote; // Quote text
+      const newAuthor = quoteData.author; // Author
 
       chrome.storage.local.set({
         quote: newQuote,

src/index.html

@@ -15,7 +15,7 @@
   </div>
 
   <div id="credits">
-    <p id="unsplash-credit">Background Image from <a href="https://unsplash.com" target="_blank">Unsplash</a> and Quotes by <a href="https://github.com/lukePeavey/quotable" target="_blank">Quotable</a></p>
+    <p id="unsplash-credit">Background Image from <a href="https://unsplash.com" target="_blank">Unsplash</a> and Quotes by <a href="https://zenquotes.io/" target="_blank">ZenQuotes</a></p>
   </div>
 
   <p id="made-by">Made with ❤️ by <span style="font-weight: bold;">Kxvin</span></p>

vercel.json

@@ -8,6 +8,10 @@
       {
         "src": "api/handler.js",
         "use": "@vercel/node"
+      },
+      {
+        "src": "api/handlerq.js",
+        "use": "@vercel/node"
       }
     ],
   "outputDirectory": "dist"