${videosHtml}

`;\n }\n \n createVideoCard(video, rank) {\n const publishedDate = new Date(video.publishedAt).toLocaleDateString();\n const viewCount = this.formatViewCount(video.viewCount);\n const duration = this.formatDuration(video.duration);\n \n return `\n

${rank}

${this.escapeHtml(video.title)}

📺 ${this.escapeHtml(video.channelTitle)}

\n 📅 ${publishedDate}\n ${viewCount ? `👁️ ${viewCount} views` : ''}\n ${duration ? `${duration}` : ''}\n

\n $\"${this.escapeHtml(video.title)}\"$ \n \n

\n \n

Description

${this.escapeHtml(video.description || 'No description available.')}

\n \n \n Watch on YouTube\n \n

\n `;\n }\n \n formatViewCount(viewCount) {\n if (!viewCount) return null;\n const count = parseInt(viewCount);\n if (count >= 1000000) return (count / 1000000).toFixed(1) + 'M';\n if (count >= 1000) return (count / 1000).toFixed(1) + 'K';\n return count.toLocaleString();\n }\n \n formatDuration(duration) {\n if (!duration) return null;\n const match = duration.match(/PT(?:(\\d+)H)?(?:(\\d+)M)?(?:(\\d+)S)?/);\n if (!match) return null;\n const hours = parseInt(match[1]) || 0;\n const minutes = parseInt(match[2]) || 0;\n const seconds = parseInt(match[3]) || 0;\n if (hours > 0) {\n return `${hours}:${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;\n } else {\n return `${minutes}:${seconds.toString().padStart(2, '0')}`;\n }\n }\n \n escapeHtml(text) {\n const div = document.createElement('div');\n div.textContent = text;\n return div.innerHTML;\n }\n}\n\ndocument.addEventListener('DOMContentLoaded', () => {\n new VideoDiscoveryApp();\n});",[],[183,190],{"_104":199,"_95":200,"_153":201,"_155":184,"_156":138,"_157":202,"_159":160,"_106":203,"_100":204,"_162":205,"_164":206,"_165":22,"_166":-5,"_167":207,"_98":208},"c7cb100e-9355-11f0-9c69-0224a6c84d84","index.html","cf642d68-933d-11f0-9ce7-0224a6c84d84",31,["D",1758065708184],5,"file","\n\n\n \n \n YouTube Video Discovery\n \n \n \n\n\n

\n \n

\n YouTube Video Discovery\n

\n Discover the top 10 videos in any niche\n

\n\n \n

\n \n

\n\n \n

Searching for videos...

\n\n \n

\n ⚠️\n

Error

\n\n \n

\n \n

\n\n \n

🔧 YouTube API Setup Guide

\n \n \n

🧪 Test Your API Key

\n \n \n

\n \n

Step 1: Create API Key

Go to Google Cloud Console
Create a new project or select an existing one
Go to \"APIs & Services\" → \"Library\"
Search for and enable \"YouTube Data API v3\"
Go to \"APIs & Services\" → \"Credentials\"
Click \"Create Credentials\" → \"API Key\"
Copy your API key

\n\n

Step 2: Configure API Key

In Val Town, go to your environment variables
Add a new variable named: YOUTUBE_API_KEY
Paste your API key as the value
Save the environment variable

\n\n

🔍 Troubleshooting Common Issues

\n API Key Invalid Error:\n

Double-check your API key is copied correctly (no extra spaces)
Ensure YouTube Data API v3 is enabled in Google Cloud Console
Wait a few minutes after creating the key for it to activate
Try removing all API restrictions temporarily

\n Quota Exceeded Error:\n

YouTube API has daily quotas (10,000 units/day for free tier)
Each search uses ~100 units, so you can do ~100 searches per day
Reset happens at midnight Pacific Time

\n\n

\n 💡 Good news: The YouTube Data API is completely free for personal use with generous daily quotas!\n

\n\n \n\n",[],[183,200],{"_104":210,"_95":211,"_153":212,"_155":184,"_156":138,"_157":213,"_159":160,"_106":214,"_100":32,"_162":205,"_164":215,"_165":22,"_166":-5,"_167":216,"_98":217},"d6962762-933d-11f0-bc59-0224a6c84d84","style.css","d6962816-933d-11f0-bc59-0224a6c84d84",4,["D",1758055425085],"/* Custom styles for YouTube Video Discovery */\n\n.video-card {\n transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\n}\n\n.video-card:hover {\n transform: translateY(-2px);\n box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);\n}\n\n.video-thumbnail {\n aspect-ratio: 16/9;\n object-fit: cover;\n border-radius: 8px;\n}\n\n.video-title {\n display: -webkit-box;\n -webkit-line-clamp: 2;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 1.4;\n}\n\n.video-description {\n display: -webkit-box;\n -webkit-line-clamp: 4;\n -webkit-box-orient: vertical;\n overflow: hidden;\n line-height: 1.5;\n}\n\n.video-meta {\n font-size: 0.875rem;\n color: #6b7280;\n}\n\n.duration-badge {\n background: rgba(0, 0, 0, 0.8);\n color: white;\n padding: 2px 6px;\n border-radius: 4px;\n font-size: 0.75rem;\n font-weight: 500;\n}\n\n.view-count {\n color: #6b7280;\n font-size: 0.875rem;\n}\n\n/* Responsive grid for video cards */\n@media (min-width: 768px) {\n .video-grid {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 1.5rem;\n align-items: start;\n }\n}\n\n@media (min-width: 1024px) {\n .video-grid {\n gap: 2rem;\n }\n}\n\n/* Loading animation */\n@keyframes pulse {\n 0%, 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.5;\n }\n}\n\n.loading-skeleton {\n animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;\n background-color: #e5e7eb;\n border-radius: 0.375rem;\n}\n\n/* Custom scrollbar for descriptions */\n.video-description::-webkit-scrollbar {\n width: 4px;\n}\n\n.video-description::-webkit-scrollbar-track {\n background: #f1f5f9;\n border-radius: 2px;\n}\n\n.video-description::-webkit-scrollbar-thumb {\n background: #cbd5e1;\n border-radius: 2px;\n}\n\n.video-description::-webkit-scrollbar-thumb:hover {\n background: #94a3b8;\n}",[],[183,211],[183],{"_104":220,"_95":221,"_153":222,"_155":-5,"_156":138,"_157":223,"_159":160,"_106":224,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":225,"_98":226},"2f3c4434-933c-11f0-a42b-0224a6c84d84","posts","0199543a-0dbd-72af-9f9b-301cd55743ee",1,["D",1758054714725],[],[221],{"_104":228,"_95":229,"_153":230,"_155":-5,"_156":138,"_157":175,"_159":22,"_106":231,"_100":223,"_162":205,"_164":232,"_165":22,"_166":-5,"_167":233,"_98":234},"fcf7025a-933d-11f0-934f-0224a6c84d84","README.md","0199543a-0dbd-72af-9f9b-38bc90047de9",["D",1758055489471],"# 🎥 YouTube Video Discovery\n\nA web application that displays the top 10 YouTube videos for any specified niche or sub-niche.\n\n## 🚀 Features\n\n- **Custom Page Headers**: Set your own page title for different niches\n- **Two-Column Layout**: Video information on the left, descriptions on the right\n- **Rich Video Data**: Thumbnails, view counts, duration, publish dates\n- **Responsive Design**: Works great on desktop and mobile\n- **Direct YouTube Links**: Click to watch videos directly on YouTube\n\n## 🛠️ Setup\n\n### Prerequisites\n\n1. **YouTube Data API Key**: \n - Go to [Google Developers Console](https://console.developers.google.com/)\n - Create a new project or select existing one\n - Enable \"YouTube Data API v3\"\n - Create credentials (API Key)\n - Add as environment variable: `YOUTUBE_API_KEY`\n\n### Environment Variables\n\n```\nYOUTUBE_API_KEY=your_youtube_api_key_here\n```\n\n## 📂 Project Structure\n\n```\n├── backend/\n│ └── index.ts # Main Hono server with YouTube API integration\n├── frontend/\n│ ├── index.html # Main HTML template\n│ ├── app.js # Frontend JavaScript logic\n│ └── style.css # Custom CSS styles\n├── index.tsx # Entry point (HTTP trigger)\n└── README.md # This file\n```\n\n## 🎯 Usage\n\n1. **Enter a Niche**: Type any topic (e.g., \"cooking tutorials\", \"javascript programming\")\n2. **Custom Header** (Optional): Set a custom page title\n3. **Search**: Click \"Find Top Videos\" to discover content\n4. **Browse Results**: View video details and click to watch on YouTube\n\n## 🔧 Technical Details\n\n- **Backend**: Hono framework with YouTube Data API v3 integration\n- **Frontend**: Vanilla JavaScript with TailwindCSS\n- **API**: RESTful endpoint at `/api/videos`\n- **Responsive**: Mobile-first design with CSS Grid\n\n## 📊 API Endpoints\n\n- `GET /` - Main application page\n- `GET /api/videos?niche={search_term}` - Fetch top 10 videos for niche\n- `GET /frontend/*` - Static asset serving\n\n## 🎨 Features\n\n- **Video Rankings**: Shows top 10 videos with numbered rankings\n- **Rich Metadata**: View counts, duration, publish dates, channel info\n- **Hover Effects**: Interactive video cards with smooth animations\n- **Error Handling**: Graceful error messages and loading states\n- **Accessibility**: Proper ARIA labels and keyboard navigation",[],[229],{"_104":236,"_95":200,"_153":237,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":238,"_100":239,"_162":240,"_164":241,"_165":22,"_166":-5,"_167":242,"_98":243},"d885613c-9356-11f0-bdb4-0224a6c84d84","2919be5a-9356-11f0-bf2a-0224a6c84d84",["D",1758066165746],10,"http","\n\n\n \n \n Niche Selector\n \n \n\n\n

\n 🎯 Niche Selector\n

\n \n

\n \n Select Main Niche *\n \n \n

\n\n \n

\n \n Select Sub-Niche (Optional)\n \n \n

\n\n \n

\n \n Or enter custom sub-niche\n \n \n

\n\n \n

\n \n Custom Header URL (Optional)\n \n \n

\n 💡 Provide a URL to load custom header content. Leave blank to use the default header.\n

\n\n \n

\n 📢 Advertisement Settings (Optional)\n

\n \n

\n \n Advertisement Image URL\n \n \n

Banner image for your advertisement

\n\n \n

\n \n Advertisement Click URL\n \n \n

Where users go when they click the ad

\n\n \n

\n \n Advertisement Title (Optional)\n \n \n

Optional title text to display with your ad

\n\n \n

Advertisement Preview:

\n\n \n

\n \n

\n\n \n

Selected Niche:

\n\n \n

\n \n

\n Your custom header will appear here...\n

\n\n \n

\n \n

\n 🎥 Top Videos\n

\n \n

📹

Videos will appear here after analysis

\n\n \n

\n 📝 Video Details\n

👆

Click on a video to see its description

\n\n \n

\n 📢 Sponsored Content\n

\n \n

\n\n \n\n",[],[200],{"_104":245,"_95":99,"_153":246,"_155":-5,"_156":138,"_157":247,"_159":160,"_106":248,"_100":223,"_162":240,"_164":249,"_165":22,"_166":-5,"_167":250,"_98":251},"f1f67a66-933d-11f0-ba75-0224a6c84d84","0199543a-0dbd-72af-9f9b-3e3e0d6510c3",6,["D",1758055471009],"// Import and use the backend\nimport backend from \"./backend/index.ts\";\n\nexport default backend;",[],[99],"files",[150,169,181,188,198,209,219,227,235,244],"counts",{"_256":32,"_257":223,"_258":32,"_259":223},"pulls","branches","forks","envVars","contents",[],{"_104":245,"_95":99,"_153":246,"_155":-5,"_156":138,"_157":247,"_159":160,"_106":263,"_100":223,"_162":240,"_164":249,"_165":22,"_166":-5,"_98":264},["D",1758055471009],[99],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_100":101,"_98":99,"_102":273,"_148":278,"_252":309,"_205":310,"_260":312,"_313":-5,"_314":22,"_315":-5,"_316":-5,"_317":-5,"_318":319},{"_104":105,"_95":96,"_106":274,"_108":-5,"_109":22,"_110":111,"_112":-5,"_113":-5,"_14":114,"_115":-5,"_116":22,"_117":-5,"_118":32,"_16":119,"_120":121,"_122":121,"_123":124,"_125":124,"_126":124,"_127":121,"_128":121,"_23":275,"_132":276,"_135":277,"_147":22},["D",1758054714725],{"_93":94,"_130":131},{"_93":94,"_134":131},{"_100":137,"_95":43,"_104":138,"_139":105,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":96,"_146":94},[279,285,297,300,303,306],{"_104":151,"_95":152,"_153":154,"_155":-5,"_156":138,"_157":158,"_159":160,"_106":161,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":280,"_98":284},[281],{"_104":170,"_95":171,"_153":172,"_155":154,"_156":138,"_157":173,"_159":160,"_106":174,"_100":175,"_162":176,"_164":177,"_165":22,"_166":-5,"_167":282,"_98":283},[],[152,171],[152],{"_104":182,"_95":183,"_153":184,"_155":-5,"_156":138,"_157":185,"_159":160,"_106":186,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":286,"_98":296},[287,290,293],{"_104":189,"_95":190,"_153":191,"_155":184,"_156":138,"_157":192,"_159":160,"_106":193,"_100":194,"_162":176,"_164":195,"_165":22,"_166":-5,"_167":288,"_98":289},[],[183,190],{"_104":199,"_95":200,"_153":201,"_155":184,"_156":138,"_157":202,"_159":160,"_106":203,"_100":204,"_162":205,"_164":206,"_165":22,"_166":-5,"_167":291,"_98":292},[],[183,200],{"_104":210,"_95":211,"_153":212,"_155":184,"_156":138,"_157":213,"_159":160,"_106":214,"_100":32,"_162":205,"_164":215,"_165":22,"_166":-5,"_167":294,"_98":295},[],[183,211],[183],{"_104":220,"_95":221,"_153":222,"_155":-5,"_156":138,"_157":223,"_159":160,"_106":224,"_100":32,"_162":163,"_164":-5,"_165":22,"_166":-5,"_167":298,"_98":299},[],[221],{"_104":228,"_95":229,"_153":230,"_155":-5,"_156":138,"_157":175,"_159":22,"_106":231,"_100":223,"_162":205,"_164":232,"_165":22,"_166":-5,"_167":301,"_98":302},[],[229],{"_104":236,"_95":200,"_153":237,"_155":-5,"_156":138,"_157":101,"_159":22,"_106":238,"_100":239,"_162":240,"_164":241,"_165":22,"_166":-5,"_167":304,"_98":305},[],[200],{"_104":245,"_95":99,"_153":246,"_155":-5,"_156":138,"_157":247,"_159":160,"_106":248,"_100":223,"_162":240,"_164":249,"_165":22,"_166":-5,"_167":307,"_98":308},[],[99],[279,281,285,287,290,293,297,300,303,306],{"_104":245,"_95":99,"_153":246,"_155":-5,"_156":138,"_157":247,"_159":160,"_106":263,"_100":223,"_162":240,"_164":249,"_165":22,"_166":-5,"_98":311},[99],[],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]