Build and Deploy Homepage #58
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Build and Deploy Homepage | |
| on: | |
| # Run every day at 02:00 UTC | |
| schedule: | |
| - cron: '0 2 * * *' | |
| # Allow manual trigger | |
| workflow_dispatch: | |
| # Also run on pushes to main branch | |
| push: | |
| branches: [ main ] | |
| paths: | |
| - 'README.md' | |
| - 'README_zh.md' | |
| # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages | |
| permissions: | |
| contents: read | |
| pages: write | |
| id-token: write | |
| # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. | |
| concurrency: | |
| group: "pages" | |
| cancel-in-progress: false | |
| jobs: | |
| build: | |
| runs-on: ubuntu-latest | |
| env: | |
| GITHUB_PAGES: true | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| - name: Setup Pages | |
| uses: actions/configure-pages@v4 | |
| - name: Create homepage directory | |
| run: mkdir -p _site | |
| - name: Generate homepage using iFlow CLI | |
| uses: ./ | |
| with: | |
| precmd: "ls -al" | |
| prompt: | | |
| 读取当前仓库的 README.md 文件，将其转换为基于 Reveal.js 的幻灯片网站并保存为 _site/index.html。 | |
| 要求： | |
| 1. 使用 Reveal.js 构建幻灯片，按逻辑结构拆分内容为多个页面 | |
| 2. 幻灯片结构： | |
| - 首页：项目标题、简介和 GitHub 链接 | |
| - 功能特性：展示主要功能和特点 | |
| - 安装指南：分步骤展示安装过程 | |
| - 使用示例：展示代码示例和配置说明 | |
| - 高级功能：展示进阶用法和最佳实践 | |
| - 结尾：致谢、贡献指南和联系方式 | |
| 3. Reveal.js 配置： | |
| - 启用水平和垂直导航 | |
| - 配置过渡动画效果（slide、fade、zoom） | |
| - 添加进度条和幻灯片计数器 | |
| - 支持键盘导航和触摸手势 | |
| - 添加幻灯片缩略图概览 | |
| 4. 视觉设计： | |
| - 采用超现实主义数字拼贴风格 | |
| - 使用鲜明色彩对比和几何图形元素 | |
| - 创建层次丰富的视觉效果 | |
| - 采用动态背景和动画过渡增强视觉冲击力 | |
| 5. 字体和布局优化： | |
| - 标题：主标题 2.5em，副标题 1.8em，节标题 1.5em | |
| - 正文：1.2em，确保清晰可读 | |
| - 代码：0.9em，避免过大导致布局问题 | |
| - 行高：正文 1.6 倍，标题 1.4 倍 | |
| - 内容区域边距：上下 60px，左右 40px | |
| - 为长代码块实现垂直滚动 | |
| - 使用相对单位（em, rem）适配不同设备 | |
| - 严格控制每行字符数，避免阅读困难 | |
| 6. 代码展示优化： | |
| - 使用 Reveal.js 代码高亮插件 | |
| - 支持语法高亮（YAML、Bash、Markdown 等） | |
| - 添加行号和复制按钮 | |
| - 代码块使用合适的最大高度（60vh）和滚动条 | |
| 7. 交互功能： | |
| - 添加导航菜单和章节跳转 | |
| - 实现全屏模式和演讲者模式 | |
| - 支持 ESC 键显示幻灯片概览 | |
| - 添加分享和导出功能 | |
| 8. 响应式设计： | |
| - 确保桌面、平板和移动设备的良好体验 | |
| - 适配不同屏幕尺寸的字体和布局 | |
| - 优化触摸设备的交互体验 | |
| - 使用媒体查询优化不同分辨率下的显示效果 | |
| 9. 技术实现： | |
| - 从 CDN 引入最新版本的 Reveal.js | |
| - 配置必要插件（highlight.js、notes、zoom 等） | |
| - 添加自定义 CSS 样式增强视觉效果 | |
| - 确保快速加载和流畅的动画性能 | |
| - 使用 CSS 的 word-wrap、word-break 处理长单词和 URL 换行 | |
| 10. SEO 和可访问性： | |
| - 添加完整的 meta 标签和结构化数据 | |
| - 确保键盘导航的可访问性 | |
| - 添加 alt 文本和 aria 标签 | |
| - 优化搜索引擎索引 | |
| 请创建完整的 HTML 文件，使用内联 CSS 和 JavaScript，确保文件自包含且可直接运行。 | |
| 项目地址：https://github.com/iflow-ai/iflow-cli-action | |
| api_key: ${{ secrets.IFLOW_API_KEY }} | |
| # settings_json: ${{ secrets.IFLOW_SETTINGS_JSON }} | |
| model: "kimi-k2-0905" | |
| timeout: "1800" | |
| debug: "true" | |
| - name: Verify reveal.js presentation was generated | |
| run: | | |
| if [ -f "_site/index.html" ]; then | |
| echo "Reveal.js presentation generated successfully!" | |
| echo "Checking for reveal.js content..." | |
| if grep -q "reveal.js" "_site/index.html"; then | |
| echo "✓ Reveal.js framework detected" | |
| else | |
| echo "⚠ Warning: Reveal.js framework not found in generated file" | |
| fi | |
| ls -la _site/ | |
| else | |
| echo "Error: Presentation was not generated by iFlow" | |
| exit 1 | |
| fi | |
| - name: Upload artifact | |
| uses: actions/upload-pages-artifact@v3 | |
| with: | |
| path: ./_site | |
| deploy: | |
| environment: | |
| name: github-pages | |
| url: ${{ steps.deployment.outputs.page_url }} | |
| runs-on: ubuntu-latest | |
| needs: build | |
| steps: | |
| - name: Deploy to GitHub Pages | |
| id: deployment | |
| uses: actions/deploy-pages@v4 |