Skip to content

Commit eff5673

Browse files
yeshan333yeshan333
committed
chore: deploy homepage with iFlowCli
1 parent 8ac217b commit eff5673

1 file changed

Lines changed: 151 additions & 0 deletions

File tree

‎.github/workflows/deploy-homepage.yaml‎

Lines changed: 151 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,151 @@
1+
name: Build and Deploy Homepage
2+
3+
on:
4+
# Allow manual trigger
5+
workflow_dispatch:
6+
# Also run on pushes to main branch
7+
push:
8+
branches: [ main ]
9+
10+
# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
11+
permissions:
12+
contents: read
13+
pages: write
14+
id-token: write
15+
16+
# Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
17+
concurrency:
18+
group: "pages"
19+
cancel-in-progress: false
20+
21+
jobs:
22+
build:
23+
runs-on: ubuntu-latest
24+
env:
25+
GITHUB_PAGES: true
26+
steps:
27+
- name: Checkout repository
28+
uses: actions/checkout@v4
29+
30+
- name: Setup Pages
31+
uses: actions/configure-pages@v4
32+
33+
- name: Create homepage directory
34+
run: mkdir -p _site
35+
36+
- name: Generate homepage using iFlow CLI
37+
uses: vibe-ideas/iflow-cli-action@main
38+
with:
39+
prompt: |
40+
Please read only the README.md file content from the current repository (do not read any other files), and convert it into a futuristic tech-style documentation website based on Reveal.js and save it as _site/index.html.
41+
42+
Requirements:
43+
44+
1. Use the Reveal.js framework to build a slideshow presentation, splitting the README content into multiple slide pages according to logical structure;
45+
46+
2. Slideshow structure design:
47+
- Homepage slide: Project title, subtitle, GitHub link, and project introduction
48+
- Feature highlights slide: Showcase main features and characteristics
49+
- Installation guide slide: Step-by-step installation process
50+
- Usage examples slide: Display code examples and configuration instructions
51+
- Advanced features slide: Show advanced usage and best practices
52+
- Closing slide: Acknowledgments, contribution guidelines, and contact information;
53+
54+
3. Use modern Reveal.js themes and configurations:
55+
- Enable horizontal and vertical navigation
56+
- Configure slide transition animation effects (such as slide, fade, zoom)
57+
- Add progress bar and slide counter
58+
- Support keyboard navigation and touch gestures
59+
- Enable autoplay functionality (pausable)
60+
- Add slide thumbnail overview;
61+
62+
4. Visual design using futuristic cyberpunk/neon tech style:
63+
- Use neon color palette with electric blue, vibrant purple, and bright pink accents
64+
- Create layered visual effects combining text and futuristic graphic elements
65+
- Use sleek geometric shapes, transparency, and overlapping effects to create depth
66+
- Employ dynamic gradient backgrounds and animated transitions for visual impact
67+
- Use circuit board patterns, holographic elements, and digital grid lines as decorative elements
68+
- Add subtle particle effects and glowing borders for a high-tech feel
69+
- Ensure overall design has a futuristic, cyberpunk aesthetic with high visual appeal;
70+
71+
5. Font size and layout optimization (important):
72+
- Title font sizes: Main title 2.8em with neon glow effect, subtitle 2.0em, section title 1.7em
73+
- Body text font size: Use 1.3em with futuristic font family (Orbitron, Exo 2, or similar), ensure clear readability on all devices
74+
- Code font size: Use 1.0em with monospace futuristic font, avoid code blocks being too large causing layout issues
75+
- Line height settings: Body text 1.7x line height, titles 1.5x line height
76+
- Content area margins: Set appropriate padding for each slide (70px top/bottom, 50px left/right)
77+
- Ensure sufficient spacing between text and background with glowing effects
78+
- Limit content amount per slide to avoid information overload
79+
- Implement vertical scrolling for long code blocks instead of shrinking font;
80+
81+
6. Code display optimization:
82+
- Use Reveal.js code highlighting plugin with cyberpunk color scheme
83+
- Support syntax highlighting (YAML, Bash, Markdown, etc.) using neon colors
84+
- Add line numbers and copy buttons with futuristic styling
85+
- Use appropriate maximum height (60vh) and scrollbars for code blocks
86+
- Implement animated display effects for code snippets with typing animations;
87+
88+
7. Interactive features:
89+
- Add navigation menu with holographic styling and chapter jumping
90+
- Implement fullscreen mode and speaker mode with futuristic UI
91+
- Support ESC key to display slide overview with cyberpunk theme
92+
- Add sharing and export functionality with modern interface;
93+
94+
8. Responsive design:
95+
- Ensure good experience on desktop, tablet, and mobile devices
96+
- Appropriately reduce font size on mobile devices while maintaining readability
97+
- Adapt fonts and layout to different screen sizes with responsive cyberpunk elements
98+
- Optimize interaction experience for touch devices with larger touch targets;
99+
100+
9. Technical implementation:
101+
- Import latest version of Reveal.js from CDN
102+
- Configure necessary plugins (highlight.js, notes, zoom, etc.)
103+
- Add custom CSS styles to enhance futuristic visual effects
104+
- Ensure fast loading and smooth animation performance with optimized assets;
105+
106+
10. SEO and accessibility:
107+
- Add complete meta tags and structured data
108+
- Ensure keyboard navigation accessibility
109+
- Add alt text and aria labels
110+
- Optimize search engine indexing.
111+
112+
Please directly create a complete HTML file using inline CSS and JavaScript, ensuring the file is self-contained and can run directly in browsers. The design should feel like a futuristic tech interface from a sci-fi movie with a cyberpunk aesthetic.
113+
114+
Project URL: https://github.com/version-fox/vfox-elixir
115+
api_key: ${{ secrets.IFLOW_API_KEY }}
116+
# settings_json: ${{ secrets.IFLOW_SETTINGS_JSON }}
117+
model: "Qwen3-Coder"
118+
timeout: "1800"
119+
extra_args: "--debug"
120+
121+
- name: Verify reveal.js presentation was generated
122+
run: |
123+
if [ -f "_site/index.html" ]; then
124+
echo "Reveal.js presentation generated successfully!"
125+
echo "Checking for reveal.js content..."
126+
if grep -q "reveal.js" "_site/index.html"; then
127+
echo "✓ Reveal.js framework detected"
128+
else
129+
echo "⚠ Warning: Reveal.js framework not found in generated file"
130+
fi
131+
ls -la _site/
132+
else
133+
echo "Error: Presentation was not generated by iFlow"
134+
exit 1
135+
fi
136+
137+
- name: Upload artifact
138+
uses: actions/upload-pages-artifact@v3
139+
with:
140+
path: ./_site
141+
142+
deploy:
143+
environment:
144+
name: github-pages
145+
url: ${{ steps.deployment.outputs.page_url }}
146+
runs-on: ubuntu-latest
147+
needs: build
148+
steps:
149+
- name: Deploy to GitHub Pages
150+
id: deployment
151+
uses: actions/deploy-pages@v4

0 commit comments

Comments
 (0)