{“content”:”---\nname: impressjs-news-slides-pipeline\ndescription: Generate beautiful mobile-friendly HTML slide presentations (Impress.js style) from daily news content and upload to Google Drive for sharing via Telegram. Use when user asks for a news summary presentation, slide deck, or “精美PPT”.\ntrigger: user asks for news PPT, slide presentation, or wants to share news in presentation format\n---\n\n# Impress.js News Slides Pipeline\n\nGenerate beautiful HTML slide presentations from daily news, optimized for mobile viewing, and upload to Google Drive for easy sharing.\n\n## Workflow\n\n### Step 1: Generate HTML Slides\n\nCreate a mobile-friendly single-file HTML presentation. Key design decisions:\n\n- Viewport meta: width=device-width, initial-scale=1.0, user-scalable=no\n- Touch zones: Left 35% = prev, right 35% = next (above bottom bar)\n- Bottom navigation bar: ◀ ▶ buttons + dot indicators (fixed at bottom, 80px height)\n- Slide transitions: CSS opacity fade (not impress.js transitions — those break in iframes)\n- Font stack: Playfair Display (headings) + Noto Sans TC (body) via Google Fonts\n- Backgrounds: Each category uses a distinct gradient:\n - AI Tech: #0a1628 → #0f3460 → #1a1a2e\n - Malaysia: #081c15 → #1b4332 → #0d2616\n - International: #1a0a1e → #4a1942 → #1a1a2e\n - Design: #1a2424 → #2d3a3a → #1a1a2e\n\n### Step 2: Upload to Google Drive\n\npython\nimport json\nfrom google.oauth2.credentials import Credentials\nfrom googleapiclient.discovery import build\nfrom googleapiclient.http import MediaFileUpload\n\nTOKEN_PATH = \"/data/data/com.termux/files/home/.hermes/google_token.json\"\ncreds = Credentials.from_authorized_user_info(json.load(open(TOKEN_PATH)))\ndrive = build('drive', 'v3', credentials=creds)\n\n# Find or create target folder\nFOLDER_NAME = \"Jakephone\"\nPARENT_ID = None # or a specific folder ID\n\nr = drive.files().list(\n q=f\"name='{FOLDER_NAME}' and mimeType='application/vnd.google-apps.folder'\",\n fields=\"files(id, name)\"\n).execute()\nfolders = r.get('files', [])\nif folders:\n folder_id = folders[0]['id']\nelse:\n folder = drive.files().create(\n body={'name': FOLDER_NAME, 'mimeType': 'application/vnd.google-apps.folder'},\n fields='id'\n ).execute()\n folder_id = folder['id']\n\n# Upload file\nfile_metadata = {'name': 'filename.html', 'parents': [folder_id]}\nmedia = MediaFileUpload(file_path, mimetype='text/html')\nuploaded = drive.files().create(body=file_metadata, media_body=media, fields='id, webViewLink').execute()\nlink = uploaded['webViewLink']\n\n\n### Step 3: Share Link\n\nSend the file link via Telegram:\n\n📁 {name}\n\n👉 {webViewLink}?usp=drivesdk\n\n用瀏覽器打開，◀ ▶ 按鈕或滑動翻頁。手機/電腦都支援。\n\n\n## Key Learnings\n\n1. Google Drive preview blocks JS: The Google Drive file preview pane does NOT execute JavaScript keyboard events. Users MUST open in a new browser tab.\n2. Download link format: https://drive.google.com/uc?export=download&id={file_id} for direct download\n3. File path with spaces on Windows SSH: Use scp -i key file 'user@host:\"D:/path with spaces/file\"' (forward slashes, double quotes around path on remote side)\n4. Touch swipe detection: Use touchstart/touchend with X delta > 50px threshold, ignore if vertical dominates\n5. Bottom bar must be excluded from swipe zones: Height is 80px, swipe zones use height: calc(100% - 80px)\n\n## File Structure\n\nSave output to: ~/.hermes/cron/output/news-slides-[date].html (mobile version: news-slides-mobile.html)\n\n## Categories Used\n\n- AI 科技 (AI Tech News)\n- 馬來西亞 (Malaysia Business)\n- 國際局勢 (International Affairs)\n- 室內設計 (Interior/Design Trends)\n”}