feat: add Google AdSense to post detail pages

[AnnatarHe]

Summary

Adds Google AdSense integration to podcast episode detail pages, displaying ads at the end of article content.

Changes

• Created reusable AdSense component with responsive design
• Integrated AdSense script in post page head
• Positioned ad unit at the end of content with proper spacing
• Added TODO comments for client ID and slot ID configuration

Configuration Needed

Update the placeholder AdSense client ID and slot ID in:

• src/pages/posts/[...slug].astro
• src/components/AdSense.astro

Closes #46

---

Generated with Claude Code

[claude]

PR Review: Google AdSense Integration

感谢提交此 PR！我已经审查了代码，以下是详细的反馈：

✅ 优点

1. 良好的组件化设计: AdSense 组件封装得很好，遵循了项目的 Astro 组件模式
2. 响应式设计: 使用 data-full-width-responsive="true" 确保广告在不同设备上正常显示
3. 清晰的 TODO 注释: 明确标注了需要替换的配置项
4. 适当的位置: 将广告放在文章末尾，不会干扰用户阅读体验

⚠️ 需要改进的问题

1. 安全性和配置管理 (Critical)

当前实现将 AdSense 客户端 ID 硬编码在两个位置（[...slug].astro:81 和 AdSense.astro:11）。建议：

// 在 src/config.ts 中定义配置
export const ADSENSE_CLIENT_ID = import.meta.env.PUBLIC_ADSENSE_CLIENT_ID || '';
export const ADSENSE_SLOT_ID = import.meta.env.PUBLIC_ADSENSE_SLOT_ID || '';

然后在组件中导入使用：

---
import { ADSENSE_CLIENT_ID, ADSENSE_SLOT_ID } from '../config';
---

这样可以：

• 通过环境变量配置，避免硬编码
• 集中管理配置，减少重复
• 防止敏感信息意外提交到版本控制

2. 代码重复 (Medium)

AdSense 客户端 ID 在两个文件中出现。如果采用上述配置方案，可以消除这种重复。

3. Script 标签位置 (Low)

AdSense script 标签使用了 slot="seo"（[...slug].astro:84），但这不是 SEO 相关的内容。建议：

• 移除 slot="seo" 属性
• 或者在 Layout 中添加专门的 slot="scripts" 用于第三方脚本

4. 缺少条件渲染 (Medium)

如果没有配置 AdSense ID，广告仍会尝试渲染。建议添加条件检查：

{ADSENSE_CLIENT_ID && ADSENSE_SLOT_ID && <AdSense />}

5. 性能考虑 (Low)

• AdSense script 已经使用 async 属性，这很好
• 考虑添加 defer 或使用 Astro 的 client directive 优化加载时机
• 可以考虑使用 Partytown 将 AdSense 脚本移到 web worker 中执行（如果性能成为问题）

6. 测试和验证 (Medium)

根据 CLAUDE.md，项目没有自动化测试。建议：

• 在真实环境中手动测试广告是否正常显示
• 验证响应式设计在移动端和桌面端的表现
• 确认广告不会破坏页面布局
• 测试在禁用广告拦截器和启用广告拦截器两种情况下的表现

📋 建议的后续任务

1. 创建配置文件并使用环境变量
2. 添加条件渲染逻辑
3. 在开发环境中添加提示信息（当 AdSense ID 未配置时）
4. 更新 README 或文档说明如何配置 AdSense
5. 考虑添加 .env.example 文件

🔒 安全检查

• ✅ 无明显的 XSS 风险
• ✅ 使用 crossorigin="anonymous" 属性
• ⚠️ 需要确保不会意外提交真实的 AdSense ID 到公开仓库

📊 性能影响

• 预期影响：轻微增加页面加载时间（AdSense script ~50KB）
• 已使用 async 属性，不会阻塞页面渲染
• 建议在部署后监控 Core Web Vitals 指标

总结

这是一个功能完整的 PR，但建议在合并前解决配置管理和代码重复的问题。整体实现方式符合 Astro 最佳实践，只需要一些小的改进即可生产就绪。

---

🤖 Generated with Claude Code

[claude]

PR Review: Google AdSense Integration

Summary

This PR adds Google AdSense integration to podcast episode detail pages. The implementation is clean and follows Astro best practices overall, but there are several important issues to address before merging.

---

🔴 Critical Issues

1. Hardcoded AdSense Credentials

Location: src/layouts/Layout.astro:33 and src/components/AdSense.astro:5

The AdSense client ID ca-pub-4489403687940405 is hardcoded in two locations:

• The global script tag in Layout.astro
• The data-ad-client attribute in AdSense.astro

Issue: This makes the credential visible in version control and difficult to change without code modifications.

Recommendation: Use Astro environment variables:

import.meta.env.PUBLIC_ADSENSE_CLIENT_ID

Add to .env (and document in README):

PUBLIC_ADSENSE_CLIENT_ID=ca-pub-4489403687940405

2. Placeholder Ad Slot ID

Location: src/components/AdSense.astro:6

The data-ad-slot="XXXXXXXXXX" is a placeholder that will prevent ads from displaying.

Status: ⚠️ Needs to be replaced with actual slot ID before deployment

---

⚠️ Code Quality Issues

3. Global Script Injection Affects All Pages

Location: src/layouts/Layout.astro:30-35

The AdSense script is loaded on ALL pages (homepage, about, etc.), but ads only appear on post detail pages.

Impact: Unnecessary JavaScript load on pages without ads, affecting performance.

Recommendation: Move the script tag to src/pages/posts/[...slug].astro in the <SEOTags> slot, or conditionally load based on page type.

4. Missing Error Handling

Location: src/components/AdSense.astro:12-13

The inline script assumes window.adsbygoogle exists and doesn't handle potential errors.

Recommendation: Add error boundary:

try {
  (adsbygoogle = window.adsbygoogle || []).push({});
} catch (e) {
  console.warn('AdSense failed to load:', e);
}

5. Duplicate Client ID

The client ID appears in both files. Consider using Astro component props to pass it from the layout/page to the component for single source of truth.

---

📝 Minor Issues

6. Missing Newline at End of File

Location: src/components/AdSense.astro:22

Best practice is to end files with a newline.

7. Unnecessary CSS

Location: src/components/AdSense.astro:16-21

The .adsense-container styles are redundant since Tailwind classes my-8 already handle vertical margin, and max-width: 100% is default behavior.

Recommendation: Remove the <style> block entirely unless there's a specific reason for it.

8. Accessibility Consideration

Consider adding an aria-label or visually hidden text to indicate this is an advertisement for screen reader users:

<div class="adsense-container my-8" role="complementary" aria-label="广告">

---

✅ What's Good

1. Clean component structure - Reusable AdSense component is well-designed
2. Responsive design - data-full-width-responsive="true" ensures mobile compatibility
3. Proper positioning - Ad placed at end of content is non-intrusive
4. Astro best practices - Correct use of is:inline directive for ad scripts
5. Documentation - PR description clearly states configuration needed

---

🧪 Testing Recommendations

Since this project has no automated tests (per CLAUDE.md), manual testing is required:

1. Verify ad display: Test with valid slot ID on staging/local
2. Check all pages: Ensure non-post pages aren't affected
3. Mobile testing: Verify responsive behavior on mobile devices
4. Ad blocker testing: Verify graceful degradation when ads are blocked
5. Performance: Check page load impact with browser DevTools

---

🔒 Security Considerations

• AdSense scripts from pagead2.googlesyndication.com are trusted Google domains ✅
• crossorigin="anonymous" attribute is correctly set ✅
• No user data exposure concerns ✅

---

📋 Checklist Before Merging

• Replace XXXXXXXXXX with actual AdSense slot ID
• Move hardcoded client ID to environment variables
• Consider moving script load to post pages only
• Add error handling to ad initialization
• Test on actual deployment with real ads
• Verify no ads appear on non-post pages
• Add newline to end of AdSense.astro

---

Suggested Priority

High Priority (Blockers):

• Replace placeholder slot ID
• Move to environment variables

Medium Priority (Before merge):

• Optimize script loading location
• Add error handling

Low Priority (Nice to have):

• Accessibility improvements
• Remove redundant CSS

---

Great work on implementing this feature! The code structure is solid. Address the critical issues and this will be ready to merge. 🚀