Add trending keywords app with opportunity scoring algorithm

public/app.js

@@ -0,0 +1,145 @@
+document.addEventListener('DOMContentLoaded', () => {
+  // DOM Elements
+  const keywordsContainer = document.getElementById('keywords-container');
+  const refreshBtn = document.getElementById('refresh-btn');
+  const loading = document.getElementById('loading');
+  const selectedKeywordText = document.getElementById('selected-keyword-text');
+  const generatePromptBtn = document.getElementById('generate-prompt-btn');
+  const promptResult = document.getElementById('prompt-result');
+  const promptTitle = document.getElementById('prompt-title');
+  const promptBody = document.getElementById('prompt-body');
+  const copyPromptBtn = document.getElementById('copy-prompt-btn');
+  const copySuccess = document.getElementById('copy-success');
+  
+  // State
+  let selectedKeyword = null;
+  let currentPrompt = null;
+  
+  // Fetch trending keywords
+  const fetchTrendingKeywords = async () => {
+    try {
+      loading.classList.remove('hidden');
+      keywordsContainer.innerHTML = '';
+      
+      const response = await fetch('/api/trending-keywords');
+      const data = await response.json();
+      
+      if (data.keywords && data.keywords.length > 0) {
+        renderKeywords(data.keywords);
+      } else {
+        keywordsContainer.innerHTML = '<p>No trending keywords found. Please try again later.</p>';
+      }
+    } catch (error) {
+      console.error('Error fetching trending keywords:', error);
+      keywordsContainer.innerHTML = '<p>Failed to load trending keywords. Please try again.</p>';
+    } finally {
+      loading.classList.add('hidden');
+    }
+  };
+  
+  // Render keywords
+  const renderKeywords = (keywords) => {
+    keywordsContainer.innerHTML = '';
+    
+    keywords.forEach(keyword => {
+      const keywordCard = document.createElement('div');
+      keywordCard.className = 'keyword-card';
+      keywordCard.dataset.keyword = keyword.keyword;
+      
+      keywordCard.innerHTML = `
+        <div class="keyword-name">${keyword.keyword}</div>
+        <div class="keyword-score">Trend score: ${keyword.score}</div>
+      `;
+      
+      keywordCard.addEventListener('click', () => selectKeyword(keyword.keyword, keywordCard));
+      
+      keywordsContainer.appendChild(keywordCard);
+    });
+  };
+  
+  // Select a keyword
+  const selectKeyword = (keyword, card) => {
+    // Remove selected class from all cards
+    document.querySelectorAll('.keyword-card').forEach(k => k.classList.remove('selected'));
+    
+    // Add selected class to clicked card
+    card.classList.add('selected');
+    
+    // Update selected keyword
+    selectedKeyword = keyword;
+    selectedKeywordText.textContent = keyword;
+    
+    // Enable generate prompt button
+    generatePromptBtn.disabled = false;
+    
+    // Hide prompt result if visible
+    promptResult.classList.add('hidden');
+  };
+  
+  // Generate article prompt
+  const generatePrompt = async () => {
+    if (!selectedKeyword) return;
+    
+    try {
+      loading.classList.remove('hidden');
+      generatePromptBtn.disabled = true;
+      
+      const response = await fetch('/api/generate-prompt', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ keyword: selectedKeyword }),
+      });
+      
+      const data = await response.json();
+      
+      if (data.prompt) {
+        currentPrompt = data.prompt;
+        displayPrompt(data.prompt);
+      } else {
+        alert('Failed to generate prompt. Please try again.');
+      }
+    } catch (error) {
+      console.error('Error generating prompt:', error);
+      alert('Failed to generate prompt. Please try again.');
+    } finally {
+      loading.classList.add('hidden');
+      generatePromptBtn.disabled = false;
+    }
+  };
+  
+  // Display the generated prompt
+  const displayPrompt = (prompt) => {
+    promptTitle.textContent = prompt.title;
+    promptBody.textContent = prompt.content;
+    promptResult.classList.remove('hidden');
+  };
+  
+  // Copy prompt to clipboard
+  const copyPrompt = () => {
+    if (!currentPrompt) return;
+    
+    const fullPrompt = `${currentPrompt.title}\n\n${currentPrompt.content}`;
+    
+    navigator.clipboard.writeText(fullPrompt)
+      .then(() => {
+        copySuccess.classList.remove('hidden');
+        setTimeout(() => {
+          copySuccess.classList.add('hidden');
+        }, 2000);
+      })
+      .catch(err => {
+        console.error('Failed to copy prompt:', err);
+        alert('Failed to copy prompt to clipboard');
+      });
+  };
+  
+  // Event listeners
+  refreshBtn.addEventListener('click', fetchTrendingKeywords);
+  generatePromptBtn.addEventListener('click', generatePrompt);
+  copyPromptBtn.addEventListener('click', copyPrompt);
+  
+  // Initial load
+  fetchTrendingKeywords();
+});