Skip to content

Commit fd23e89

Browse files
yomotsuyomotsu
committed
Add GitHub Pages deployment setup
1 parent 66a0b03 commit fd23e89

17 files changed

+490
-118
lines changed

‎.github/workflows/deploy.yml

Lines changed: 218 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,218 @@
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: false
16+
17+
jobs:
18+
build:
19+
runs-on: ubuntu-latest
20+
steps:
21+
- name: Checkout
22+
uses: actions/checkout@v4
23+
24+
- name: Setup Node.js
25+
uses: actions/setup-node@v4
26+
with:
27+
node-version: '18'
28+
29+
- name: Cache node modules
30+
uses: actions/cache@v3
31+
with:
32+
path: |
33+
1/node_modules
34+
2/node_modules
35+
3/node_modules
36+
4/node_modules
37+
5/node_modules
38+
5a/node_modules
39+
5b/node_modules
40+
6/node_modules
41+
6a/node_modules
42+
7/node_modules
43+
8/node_modules
44+
key: ${{ runner.os }}-node-${{ hashFiles('*/package-lock.json') }}
45+
restore-keys: |
46+
${{ runner.os }}-node-
47+
48+
- name: Install dependencies and build all projects
49+
run: |
50+
set -e # Exit on any error
51+
52+
echo "Installing dependencies for all projects..."
53+
# Install dependencies for all projects sequentially
54+
for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do
55+
echo "Installing dependencies for project $dir..."
56+
cd $dir
57+
npm install
58+
cd ..
59+
done
60+
61+
echo "Building all projects..."
62+
# Build all projects sequentially to capture any build errors
63+
for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do
64+
echo "Building project $dir..."
65+
cd $dir
66+
if npm run build; then
67+
echo "✅ Build completed for project $dir"
68+
ls -la dist/ || echo "❌ Warning: dist directory not found for project $dir"
69+
else
70+
echo "❌ Build failed for project $dir"
71+
exit 1
72+
fi
73+
cd ..
74+
done
75+
76+
- name: Create combined dist
77+
run: |
78+
mkdir -p dist
79+
80+
echo "Copying build artifacts..."
81+
for dir in 1 2 3 4 5 5a 5b 6 6a 7 8; do
82+
if [ -d "$dir/dist" ] && [ "$(ls -A $dir/dist 2>/dev/null)" ]; then
83+
echo "Copying $dir/dist to dist/$dir/"
84+
mkdir -p dist/$dir
85+
cp -r $dir/dist/* dist/$dir/
86+
else
87+
echo "Warning: $dir/dist is empty or does not exist"
88+
exit 1
89+
fi
90+
done
91+
92+
echo "Listing final dist structure:"
93+
find dist -type f | head -20
94+
95+
- name: Create index.html
96+
run: |
97+
cat > dist/index.html << 'EOF'
98+
<!DOCTYPE html>
99+
<html lang="ja">
100+
<head>
101+
<meta charset="UTF-8">
102+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
103+
<title>Floating UI React Demo</title>
104+
<style>
105+
body {
106+
font-family: system-ui, -apple-system, sans-serif;
107+
max-width: 800px;
108+
margin: 0 auto;
109+
padding: 40px 20px;
110+
line-height: 1.6;
111+
background-color: #f8fafc;
112+
}
113+
h1 {
114+
color: #1e293b;
115+
text-align: center;
116+
margin-bottom: 40px;
117+
}
118+
.demo-grid {
119+
display: grid;
120+
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
121+
gap: 20px;
122+
margin: 40px 0;
123+
}
124+
.demo-card {
125+
background: white;
126+
border-radius: 12px;
127+
padding: 24px;
128+
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
129+
transition: transform 0.2s, box-shadow 0.2s;
130+
text-decoration: none;
131+
color: inherit;
132+
}
133+
.demo-card:hover {
134+
transform: translateY(-2px);
135+
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
136+
}
137+
.demo-title {
138+
font-size: 1.25rem;
139+
font-weight: 600;
140+
margin-bottom: 8px;
141+
color: #3b82f6;
142+
}
143+
.demo-desc {
144+
color: #64748b;
145+
font-size: 0.875rem;
146+
}
147+
</style>
148+
</head>
149+
<body>
150+
<h1>Floating UI React Demo</h1>
151+
<div class="demo-grid">
152+
<a href="./1/" class="demo-card">
153+
<div class="demo-title">Demo 1</div>
154+
<div class="demo-desc">基本的なFloating UIの実装</div>
155+
</a>
156+
<a href="./2/" class="demo-card">
157+
<div class="demo-title">Demo 2</div>
158+
<div class="demo-desc">ポジショニングオプション</div>
159+
</a>
160+
<a href="./3/" class="demo-card">
161+
<div class="demo-title">Demo 3</div>
162+
<div class="demo-desc">インタラクション機能</div>
163+
</a>
164+
<a href="./4/" class="demo-card">
165+
<div class="demo-title">Demo 4</div>
166+
<div class="demo-desc">アニメーション効果</div>
167+
</a>
168+
<a href="./5/" class="demo-card">
169+
<div class="demo-title">Demo 5</div>
170+
<div class="demo-desc">高度なカスタマイズ</div>
171+
</a>
172+
<a href="./5a/" class="demo-card">
173+
<div class="demo-title">Demo 5a</div>
174+
<div class="demo-desc">バリエーション A</div>
175+
</a>
176+
<a href="./5b/" class="demo-card">
177+
<div class="demo-title">Demo 5b</div>
178+
<div class="demo-desc">バリエーション B</div>
179+
</a>
180+
<a href="./6/" class="demo-card">
181+
<div class="demo-title">Demo 6</div>
182+
<div class="demo-desc">複雑なレイアウト</div>
183+
</a>
184+
<a href="./6a/" class="demo-card">
185+
<div class="demo-title">Demo 6a</div>
186+
<div class="demo-desc">レイアウト応用</div>
187+
</a>
188+
<a href="./7/" class="demo-card">
189+
<div class="demo-title">Demo 7</div>
190+
<div class="demo-desc">実用的な実装例</div>
191+
</a>
192+
<a href="./8/" class="demo-card">
193+
<div class="demo-title">Demo 8</div>
194+
<div class="demo-desc">完全なコンポーネント</div>
195+
</a>
196+
</div>
197+
</body>
198+
</html>
199+
EOF
200+
201+
- name: Setup Pages
202+
uses: actions/configure-pages@v4
203+
204+
- name: Upload artifact
205+
uses: actions/upload-pages-artifact@v3
206+
with:
207+
path: './dist'
208+
209+
deploy:
210+
environment:
211+
name: github-pages
212+
url: ${{ steps.deployment.outputs.page_url }}
213+
runs-on: ubuntu-latest
214+
needs: build
215+
steps:
216+
- name: Deploy to GitHub Pages
217+
id: deployment
218+
uses: actions/deploy-pages@v4

‎.gitignore

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# Dependencies
2+
node_modules/
3+
4+
# Build outputs (各プロジェクトのdistフォルダは除外)
5+
*/dist/
6+
dist/
7+
8+
# Environment variables
9+
.env
10+
.env.local
11+
.env.development.local
12+
.env.test.local
13+
.env.production.local
14+
15+
# Logs
16+
npm-debug.log*
17+
yarn-debug.log*
18+
yarn-error.log*
19+
lerna-debug.log*
20+
21+
# Runtime data
22+
pids
23+
*.pid
24+
*.seed
25+
*.pid.lock
26+
27+
# Editor directories and files
28+
.vscode/*
29+
!.vscode/extensions.json
30+
.idea
31+
.DS_Store
32+
*.suo
33+
*.ntvs*
34+
*.njsproj
35+
*.sln
36+
*.sw?
37+
38+
# macOS
39+
.DS_Store
40+
41+
# Windows
42+
Thumbs.db
43+
ehthumbs.db

0 commit comments

Comments
 (0)