\n ${videosHtml}\n

\n `;\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

\n \n

\n ${rank}\n

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

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

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

\n \n \n

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

\n \n

\n \n \n

\n Description\n

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

\n \n

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

\n `;\n }\n \n formatViewCount(viewCount) {\n if (!viewCount) return null;\n \n const count = parseInt(viewCount);\n if (count >= 1000000) {\n return (count / 1000000).toFixed(1) + 'M';\n } else if (count >= 1000) {\n return (count / 1000).toFixed(1) + 'K';\n }\n return count.toLocaleString();\n }\n \n formatDuration(duration) {\n if (!duration) return null;\n \n // Parse ISO 8601 duration (PT4M13S)\n const match = duration.match(/PT(?:(\\d+)H)?(?:(\\d+)M)?(?:(\\d+)S)?/);\n if (!match) return null;\n \n const hours = parseInt(match[1]) || 0;\n const minutes = parseInt(match[2]) || 0;\n const seconds = parseInt(match[3]) || 0;\n \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\n// Initialize the app when DOM is loaded\ndocument.addEventListener('DOMContentLoaded', () => {\n new VideoDiscoveryApp();\n});",[],[182,189],{"_103":196,"_95":197,"_152":198,"_154":183,"_155":137,"_156":184,"_158":22,"_105":199,"_99":32,"_161":200,"_163":201,"_164":22,"_165":-5,"_166":202,"_98":203},"cf642c28-933d-11f0-9ce7-0224a6c84d84","index.html","cf642d68-933d-11f0-9ce7-0224a6c84d84",["D",1758055412983],"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

🔧 Setup Required

\n To use this application, you need to set up a YouTube Data API key:\n

Go to the Google Developers Console
Create a new project or select an existing one
Enable the \"YouTube Data API v3\"
Create credentials (API Key)
Add the API key as an environment variable named YOUTUBE_API_KEY

\n 💡 The YouTube Data API is free with generous quotas for personal use.\n

\n\n \n\n",[],[182,197],{"_103":205,"_95":206,"_152":207,"_154":183,"_155":137,"_156":174,"_158":159,"_105":208,"_99":32,"_161":200,"_163":209,"_164":22,"_165":-5,"_166":210,"_98":211},"d6962762-933d-11f0-bc59-0224a6c84d84","style.css","d6962816-933d-11f0-bc59-0224a6c84d84",["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}",[],[182,206],[182],{"_103":214,"_95":215,"_152":216,"_154":-5,"_155":137,"_156":217,"_158":159,"_105":218,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":219,"_98":220},"2f3c4434-933c-11f0-a42b-0224a6c84d84","posts","0199543a-0dbd-72af-9f9b-301cd55743ee",1,["D",1758054714725],[],[215],{"_103":222,"_95":223,"_152":224,"_154":-5,"_155":137,"_156":225,"_158":22,"_105":226,"_99":217,"_161":200,"_163":227,"_164":22,"_165":-5,"_166":228,"_98":229},"fcf7025a-933d-11f0-934f-0224a6c84d84","README.md","0199543a-0dbd-72af-9f9b-38bc90047de9",7,["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",[],[223],{"_103":231,"_95":232,"_152":233,"_154":-5,"_155":137,"_156":234,"_158":159,"_105":235,"_99":217,"_161":236,"_163":237,"_164":22,"_165":-5,"_166":238,"_98":239},"f1f67a66-933d-11f0-ba75-0224a6c84d84","index.tsx","0199543a-0dbd-72af-9f9b-3e3e0d6510c3",6,["D",1758055471009],"http","// Import and use the backend\nimport backend from \"./backend/index.ts\";\n\nexport default backend;",[],[232],"files",[149,168,180,187,195,204,213,221,230],"counts",{"_244":32,"_245":217,"_246":32,"_247":217},"pulls","branches","forks","envVars","contents",[250,253,256,259,262],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":251,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":252},["D",1758055392799],[151],{"_103":181,"_95":182,"_152":183,"_154":-5,"_155":137,"_156":184,"_158":159,"_105":254,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":255},["D",1758055412983],[182],{"_103":214,"_95":215,"_152":216,"_154":-5,"_155":137,"_156":217,"_158":159,"_105":257,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":258},["D",1758054714725],[215],{"_103":222,"_95":223,"_152":224,"_154":-5,"_155":137,"_156":225,"_158":22,"_105":260,"_99":217,"_161":200,"_163":227,"_164":22,"_165":-5,"_98":261},["D",1758055489471],[223],{"_103":231,"_95":232,"_152":233,"_154":-5,"_155":137,"_156":234,"_158":159,"_105":263,"_99":217,"_161":236,"_163":237,"_164":22,"_165":-5,"_98":264},["D",1758055471009],[232],"upstreamProject","upstreamBranch","emptyEnvVars","isNew","flags",[],"routes/_app.x.$handle.$name.branch.$branch.version.$version.code.$",{"_93":94,"_95":96,"_97":43,"_99":100,"_98":72,"_101":273,"_147":278,"_240":306,"_200":-7,"_248":307,"_318":-5,"_319":22,"_320":-5,"_321":-5,"_322":-5,"_323":324},{"_103":104,"_95":96,"_105":274,"_107":-5,"_108":22,"_109":110,"_111":-5,"_112":-5,"_14":113,"_114":-5,"_115":22,"_116":-5,"_117":32,"_16":118,"_119":120,"_121":120,"_122":123,"_124":123,"_125":123,"_126":120,"_127":120,"_23":275,"_131":276,"_134":277,"_146":22},["D",1758054714725],{"_93":94,"_129":130},{"_93":94,"_133":130},{"_99":136,"_95":43,"_103":137,"_138":104,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":96,"_145":94},[279,285,297,300,303],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":160,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":280,"_98":284},[281],{"_103":169,"_95":170,"_152":171,"_154":153,"_155":137,"_156":172,"_158":22,"_105":173,"_99":174,"_161":175,"_163":176,"_164":22,"_165":-5,"_166":282,"_98":283},[],[151,170],[151],{"_103":181,"_95":182,"_152":183,"_154":-5,"_155":137,"_156":184,"_158":159,"_105":185,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":286,"_98":296},[287,290,293],{"_103":188,"_95":189,"_152":190,"_154":183,"_155":137,"_156":100,"_158":22,"_105":191,"_99":184,"_161":175,"_163":192,"_164":22,"_165":-5,"_166":288,"_98":289},[],[182,189],{"_103":196,"_95":197,"_152":198,"_154":183,"_155":137,"_156":184,"_158":22,"_105":199,"_99":32,"_161":200,"_163":201,"_164":22,"_165":-5,"_166":291,"_98":292},[],[182,197],{"_103":205,"_95":206,"_152":207,"_154":183,"_155":137,"_156":174,"_158":159,"_105":208,"_99":32,"_161":200,"_163":209,"_164":22,"_165":-5,"_166":294,"_98":295},[],[182,206],[182],{"_103":214,"_95":215,"_152":216,"_154":-5,"_155":137,"_156":217,"_158":159,"_105":218,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_166":298,"_98":299},[],[215],{"_103":222,"_95":223,"_152":224,"_154":-5,"_155":137,"_156":225,"_158":22,"_105":226,"_99":217,"_161":200,"_163":227,"_164":22,"_165":-5,"_166":301,"_98":302},[],[223],{"_103":231,"_95":232,"_152":233,"_154":-5,"_155":137,"_156":234,"_158":159,"_105":235,"_99":217,"_161":236,"_163":237,"_164":22,"_165":-5,"_166":304,"_98":305},[],[232],[279,281,285,287,290,293,297,300,303],[308,310,312,314,316],{"_103":150,"_95":151,"_152":153,"_154":-5,"_155":137,"_156":157,"_158":159,"_105":251,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":309},[151],{"_103":181,"_95":182,"_152":183,"_154":-5,"_155":137,"_156":184,"_158":159,"_105":254,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":311},[182],{"_103":214,"_95":215,"_152":216,"_154":-5,"_155":137,"_156":217,"_158":159,"_105":257,"_99":32,"_161":162,"_163":-5,"_164":22,"_165":-5,"_98":313},[215],{"_103":222,"_95":223,"_152":224,"_154":-5,"_155":137,"_156":225,"_158":22,"_105":260,"_99":217,"_161":200,"_163":227,"_164":22,"_165":-5,"_98":315},[223],{"_103":231,"_95":232,"_152":233,"_154":-5,"_155":137,"_156":234,"_158":159,"_105":263,"_99":217,"_161":236,"_163":237,"_164":22,"_165":-5,"_98":317},[232],"upstream","showCompareCallout","pull","ahead","behind","templates",[],"actionData","errors"]