Skip to content

Commit 21091b3

Browse files
brunoborgesCopilot
brunoborges
and
Copilot
committed
Add GitHub Pages docs site for workshop material
Adds docs/index.html (landing page), docs/step.html (markdown step viewer), and .github/workflows/deploy.yml for GitHub Pages deployment. Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
1 parent 238528f commit 21091b3

3 files changed

Lines changed: 528 additions & 0 deletions

File tree

‎.github/workflows/deploy.yml‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
name: Deploy to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [main]
6+
workflow_dispatch:
7+
8+
permissions:
9+
contents: read
10+
pages: write
11+
id-token: write
12+
13+
concurrency:
14+
group: 'pages'
15+
cancel-in-progress: true
16+
17+
jobs:
18+
build-and-deploy:
19+
runs-on: ubuntu-latest
20+
environment:
21+
name: github-pages
22+
url: ${{ steps.deployment.outputs.page_url }}
23+
steps:
24+
- uses: actions/checkout@v4
25+
26+
- name: Prepare deployment
27+
run: |
28+
mkdir -p ./_site
29+
cp -r docs/* ./_site/
30+
touch ./_site/.nojekyll
31+
32+
- uses: actions/configure-pages@v4
33+
34+
- uses: actions/upload-pages-artifact@v3
35+
with:
36+
path: _site
37+
38+
- name: Deploy to GitHub Pages
39+
id: deployment
40+
uses: actions/deploy-pages@v4

‎docs/index.html‎

Lines changed: 172 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,172 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<title>App Modernization with GitHub Copilot</title>
7+
<link rel="preconnect" href="https://fonts.googleapis.com">
8+
<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap" rel="stylesheet">
9+
<style>
10+
:root { --bg-dark: #0a0a0f; --bg-card: #12121a; --neon-cyan: #00f5ff; --neon-magenta: #ff00ff; --neon-purple: #b366ff; --text-primary: #ffffff; --text-secondary: #a0a0b0; --border-color: #2a2a3a; }
11+
* { margin: 0; padding: 0; box-sizing: border-box; }
12+
body { font-family: 'Space Grotesk', sans-serif; background: var(--bg-dark); color: var(--text-primary); line-height: 1.6; min-height: 100vh; }
13+
body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, rgba(0,245,255,0.03) 1px, transparent 1px), linear-gradient(rgba(0,245,255,0.03) 1px, transparent 1px); background-size: 50px 50px; pointer-events: none; z-index: -1; }
14+
.container { max-width: 1200px; margin: 0 auto; padding: 0 2rem; }
15+
.hero { padding: 6rem 0 4rem; text-align: center; position: relative; }
16+
.hero-badge { display: inline-block; padding: 0.5rem 1rem; background: rgba(0,245,255,0.1); border: 1px solid var(--neon-cyan); border-radius: 50px; font-size: 0.875rem; color: var(--neon-cyan); margin-bottom: 2rem; font-family: 'JetBrains Mono', monospace; }
17+
.hero h1 { font-size: clamp(2.5rem, 6vw, 4rem); font-weight: 700; margin-bottom: 1rem; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
18+
.hero-subtitle { font-size: 1.25rem; color: var(--text-secondary); max-width: 600px; margin: 0 auto 2rem; }
19+
.hero-cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
20+
.btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; font-size: 1rem; }
21+
.btn-primary { background: linear-gradient(135deg, var(--neon-cyan), var(--neon-purple)); color: var(--bg-dark); }
22+
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 40px rgba(0,245,255,0.3); }
23+
.btn-secondary { background: transparent; border: 2px solid var(--border-color); color: var(--text-primary); }
24+
.btn-secondary:hover { border-color: var(--neon-cyan); color: var(--neon-cyan); }
25+
.stats { display: flex; justify-content: center; gap: 3rem; margin-top: 4rem; flex-wrap: wrap; }
26+
.stat { text-align: center; }
27+
.stat-value { font-size: 2rem; font-weight: 700; color: var(--neon-cyan); font-family: 'JetBrains Mono', monospace; }
28+
.stat-label { font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.25rem; }
29+
.features { padding: 4rem 0; }
30+
.section-title { font-size: 2rem; text-align: center; margin-bottom: 3rem; }
31+
.features-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; }
32+
.feature-card { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 2rem; transition: all 0.3s ease; }
33+
.feature-card:hover { border-color: var(--neon-cyan); transform: translateY(-4px); }
34+
.feature-icon { font-size: 2.5rem; margin-bottom: 1rem; }
35+
.feature-card h3 { font-size: 1.25rem; margin-bottom: 0.5rem; }
36+
.feature-card p { color: var(--text-secondary); font-size: 0.95rem; }
37+
.workshop { padding: 4rem 0; }
38+
.parts-list { display: flex; flex-direction: column; gap: 1rem; max-width: 800px; margin: 0 auto; }
39+
.part-card { display: flex; align-items: center; gap: 1.5rem; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; padding: 1.5rem; text-decoration: none; color: inherit; transition: all 0.3s ease; }
40+
.part-card:hover { border-color: var(--neon-magenta); background: rgba(255,0,255,0.05); }
41+
.part-number { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--neon-cyan), var(--neon-magenta)); border-radius: 12px; font-weight: 700; font-size: 1.25rem; color: var(--bg-dark); flex-shrink: 0; }
42+
.part-content { flex: 1; }
43+
.part-content h3 { font-size: 1.1rem; margin-bottom: 0.25rem; }
44+
.part-content p { color: var(--text-secondary); font-size: 0.9rem; }
45+
.part-time { font-family: 'JetBrains Mono', monospace; font-size: 0.875rem; color: var(--neon-cyan); padding: 0.25rem 0.75rem; background: rgba(0,245,255,0.1); border-radius: 50px; }
46+
.prereqs { padding: 4rem 0; background: var(--bg-card); }
47+
.prereqs-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; max-width: 800px; margin: 0 auto; }
48+
.prereq-item { display: flex; align-items: center; gap: 0.75rem; padding: 1rem; background: var(--bg-dark); border-radius: 8px; }
49+
.prereq-check { color: var(--neon-cyan); font-size: 1.25rem; }
50+
footer { padding: 3rem 0; text-align: center; border-top: 1px solid var(--border-color); }
51+
.footer-links { display: flex; justify-content: center; gap: 2rem; margin-bottom: 1rem; flex-wrap: wrap; }
52+
.footer-links a { color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease; }
53+
.footer-links a:hover { color: var(--neon-cyan); }
54+
.footer-credit { color: var(--text-secondary); font-size: 0.875rem; }
55+
@media (max-width: 768px) { .hero { padding: 4rem 0 3rem; } .stats { gap: 2rem; } .part-card { flex-direction: column; text-align: center; } .part-time { margin-top: 0.5rem; } }
56+
</style>
57+
</head>
58+
<body>
59+
<section class="hero">
60+
<div class="container">
61+
<div class="hero-badge">☕ Java + Spring Boot Modernization</div>
62+
<h1>App Modernization with GitHub Copilot</h1>
63+
<p class="hero-subtitle">Modernize a legacy Java application using GitHub Copilot. Assess, upgrade frameworks, add health endpoints, and containerize — all with AI-powered assistance.</p>
64+
<div class="hero-cta">
65+
<a href="step.html?step=readme" class="btn btn-primary">🚀 Start Workshop</a>
66+
<a href="https://github.com/copilot-dev-days/appmod-workshop-java" class="btn btn-secondary" target="_blank">⭐ GitHub Repo</a>
67+
</div>
68+
<div class="stats">
69+
<div class="stat">
70+
<div class="stat-value">~1hr</div>
71+
<div class="stat-label">Duration</div>
72+
</div>
73+
<div class="stat">
74+
<div class="stat-value">2</div>
75+
<div class="stat-label">Guides</div>
76+
</div>
77+
<div class="stat">
78+
<div class="stat-value">1</div>
79+
<div class="stat-label">Workshop</div>
80+
</div>
81+
</div>
82+
</div>
83+
</section>
84+
85+
<section class="features">
86+
<div class="container">
87+
<h2 class="section-title">What You'll Learn</h2>
88+
<div class="features-grid">
89+
<div class="feature-card">
90+
<div class="feature-icon">📋</div>
91+
<h3>Assessment</h3>
92+
<p>Evaluate your legacy codebase to identify modernization opportunities and create an upgrade plan.</p>
93+
</div>
94+
<div class="feature-card">
95+
<div class="feature-icon">⬆️</div>
96+
<h3>Framework Upgrade</h3>
97+
<p>Upgrade from Java 8 to 21 and Spring Boot 2.x to 3.x with Copilot's guidance.</p>
98+
</div>
99+
<div class="feature-card">
100+
<div class="feature-icon">🏥</div>
101+
<h3>Health Endpoints</h3>
102+
<p>Add production-ready health check endpoints for cloud deployment readiness.</p>
103+
</div>
104+
<div class="feature-card">
105+
<div class="feature-icon">🐳</div>
106+
<h3>Containerization</h3>
107+
<p>Package your modernized app in containers ready for cloud-native deployment.</p>
108+
</div>
109+
</div>
110+
</div>
111+
</section>
112+
113+
<section class="workshop">
114+
<div class="container">
115+
<h2 class="section-title">Workshop Parts</h2>
116+
<div class="parts-list">
117+
<a href="step.html?step=readme" class="part-card">
118+
<div class="part-number">📚</div>
119+
<div class="part-content">
120+
<h3>Workshop Overview</h3>
121+
<p>Introduction to the Asset Manager modernization project</p>
122+
</div>
123+
<span class="part-time">15 min</span>
124+
</a>
125+
<a href="step.html?step=prompts" class="part-card">
126+
<div class="part-number">01</div>
127+
<div class="part-content">
128+
<h3>Copilot Prompts Guide</h3>
129+
<p>Step-by-step prompts for the modernization workflow</p>
130+
</div>
131+
<span class="part-time">45 min</span>
132+
</a>
133+
</div>
134+
</div>
135+
</section>
136+
137+
<section class="prereqs">
138+
<div class="container">
139+
<h2 class="section-title">Prerequisites</h2>
140+
<div class="prereqs-grid">
141+
<div class="prereq-item">
142+
<span class="prereq-check">✓</span>
143+
<span>VS Code or IDE</span>
144+
</div>
145+
<div class="prereq-item">
146+
<span class="prereq-check">✓</span>
147+
<span>GitHub Copilot</span>
148+
</div>
149+
<div class="prereq-item">
150+
<span class="prereq-check">✓</span>
151+
<span>Java 8+ & Maven</span>
152+
</div>
153+
<div class="prereq-item">
154+
<span class="prereq-check">✓</span>
155+
<span>Docker installed</span>
156+
</div>
157+
</div>
158+
</div>
159+
</section>
160+
161+
<footer>
162+
<div class="container">
163+
<div class="footer-links">
164+
<a href="https://github.com/copilot-dev-days/appmod-workshop-java" target="_blank">GitHub Repository</a>
165+
<a href="https://docs.github.com/en/copilot" target="_blank">Copilot Docs</a>
166+
<a href="https://github.com/iCSJ/awesome-copilot" target="_blank">Awesome Copilot</a>
167+
</div>
168+
<p class="footer-credit">Built with 💜 by the GitHub Copilot Team</p>
169+
</div>
170+
</footer>
171+
</body>
172+
</html>

0 commit comments

Comments
 (0)