Skip to content

Commit 7c786eb

Browse files
SyntaxSidekickSyntaxSidekick
committed
feat: Add Google-level mobile responsiveness
- Mobile-first responsive design with proper breakpoints - Touch-friendly UI elements (48px minimum touch targets) - Responsive navigation with bottom tabs on mobile - Mobile-optimized code editor with performance improvements - Enhanced CSS with mobile-specific optimizations - PWA-ready viewport and meta tag configuration - Improved scrolling and touch interactions - Collapsible sections for better mobile UX
1 parent 63b47e0 commit 7c786eb

24 files changed

Lines changed: 7964 additions & 3 deletions

‎deploy-mobile-fixes.ps1‎

Lines changed: 319 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,319 @@
1+
# Mobile Responsiveness and Deployment Automation Script
2+
# This script will apply Google-level mobile responsiveness and deploy to GitHub Pages
3+
4+
Write-Host "🚀 Starting Mobile Responsiveness Automation..." -ForegroundColor Green
5+
6+
# Step 1: Clean up directory structure
7+
Write-Host "📁 Cleaning up directory structure..." -ForegroundColor Yellow
8+
9+
# Remove the problematic subdirectory
10+
if (Test-Path "js-challenge-lab") {
11+
Write-Host " Removing js-challenge-lab subdirectory..." -ForegroundColor Gray
12+
Remove-Item "js-challenge-lab" -Recurse -Force -ErrorAction SilentlyContinue
13+
}
14+
15+
# Step 2: Check and install dependencies
16+
Write-Host "📦 Checking dependencies..." -ForegroundColor Yellow
17+
if (!(Test-Path "node_modules")) {
18+
Write-Host " Installing dependencies..." -ForegroundColor Gray
19+
npm install
20+
}
21+
22+
# Step 3: Update package.json to ensure proper mobile build
23+
Write-Host "⚙️ Updating build configuration..." -ForegroundColor Yellow
24+
25+
# Update vite.config.js for proper GitHub Pages deployment
26+
$viteConfig = @"
27+
import { defineConfig } from 'vite'
28+
import react from '@vitejs/plugin-react'
29+
30+
// https://vitejs.dev/config/
31+
export default defineConfig({
32+
plugins: [react()],
33+
base: './',
34+
build: {
35+
outDir: 'dist',
36+
assetsDir: 'assets',
37+
sourcemap: false,
38+
minify: 'terser',
39+
rollupOptions: {
40+
output: {
41+
manualChunks: {
42+
vendor: ['react', 'react-dom'],
43+
mui: ['@mui/material', '@mui/icons-material'],
44+
editor: ['@monaco-editor/react']
45+
}
46+
}
47+
}
48+
},
49+
server: {
50+
host: true,
51+
port: 3000
52+
},
53+
preview: {
54+
port: 4173,
55+
host: true
56+
}
57+
})
58+
"@
59+
60+
$viteConfig | Out-File -FilePath "vite.config.js" -Encoding UTF8
61+
62+
# Step 4: Update HTML with proper mobile viewport and PWA meta tags
63+
Write-Host "📱 Updating HTML for mobile optimization..." -ForegroundColor Yellow
64+
65+
$htmlContent = @"
66+
<!doctype html>
67+
<html lang="en">
68+
<head>
69+
<meta charset="UTF-8" />
70+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
71+
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
72+
<meta name="description" content="JS Learning Lab - Interactive JavaScript learning platform with Google-level mobile responsiveness" />
73+
<meta name="keywords" content="javascript, coding, learning, mobile, responsive, programming, practice, education" />
74+
<meta name="theme-color" content="#1a73e8" />
75+
<meta name="apple-mobile-web-app-capable" content="yes" />
76+
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
77+
<meta name="apple-mobile-web-app-title" content="JS Learning Lab" />
78+
<title>JS Learning Lab - Mobile-First JavaScript Learning</title>
79+
</head>
80+
<body>
81+
<div id="root"></div>
82+
<script type="module" src="/src/main.jsx"></script>
83+
</body>
84+
</html>
85+
"@
86+
87+
$htmlContent | Out-File -FilePath "index.html" -Encoding UTF8
88+
89+
# Step 5: Create mobile-optimized CSS
90+
Write-Host "🎨 Applying mobile-first CSS..." -ForegroundColor Yellow
91+
92+
$cssContent = @"
93+
/* Mobile-First CSS with Google-level responsiveness */
94+
* {
95+
box-sizing: border-box;
96+
margin: 0;
97+
padding: 0;
98+
}
99+
100+
html {
101+
font-size: 16px;
102+
-webkit-text-size-adjust: 100%;
103+
-ms-text-size-adjust: 100%;
104+
}
105+
106+
body {
107+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
108+
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
109+
sans-serif;
110+
-webkit-font-smoothing: antialiased;
111+
-moz-osx-font-smoothing: grayscale;
112+
background-color: #fafafa;
113+
line-height: 1.6;
114+
touch-action: manipulation;
115+
-webkit-user-select: none;
116+
-moz-user-select: none;
117+
-ms-user-select: none;
118+
user-select: none;
119+
overflow-x: hidden;
120+
}
121+
122+
/* Re-enable text selection for content */
123+
.MuiTypography-root,
124+
.monaco-editor,
125+
.monaco-editor .view-lines {
126+
-webkit-user-select: text !important;
127+
-moz-user-select: text !important;
128+
-ms-user-select: text !important;
129+
user-select: text !important;
130+
}
131+
132+
code {
133+
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas',
134+
'Courier New', monospace;
135+
}
136+
137+
/* Mobile-optimized scrollbar */
138+
::-webkit-scrollbar {
139+
width: 4px;
140+
height: 4px;
141+
}
142+
143+
@media (min-width: 768px) {
144+
::-webkit-scrollbar {
145+
width: 8px;
146+
height: 8px;
147+
}
148+
}
149+
150+
::-webkit-scrollbar-track {
151+
background: transparent;
152+
}
153+
154+
::-webkit-scrollbar-thumb {
155+
background-color: rgba(0, 0, 0, 0.2);
156+
border-radius: 20px;
157+
transition: background-color 0.2s ease;
158+
}
159+
160+
::-webkit-scrollbar-thumb:hover {
161+
background-color: rgba(0, 0, 0, 0.4);
162+
}
163+
164+
/* Smooth transitions */
165+
* {
166+
transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
167+
}
168+
169+
/* Mobile-specific optimizations */
170+
@media (max-width: 768px) {
171+
html {
172+
font-size: 14px;
173+
}
174+
175+
body {
176+
line-height: 1.5;
177+
}
178+
179+
/* Touch targets */
180+
.MuiButton-root {
181+
min-height: 48px !important;
182+
min-width: 48px !important;
183+
font-size: 0.875rem !important;
184+
}
185+
186+
.MuiIconButton-root {
187+
padding: 12px !important;
188+
min-width: 48px !important;
189+
min-height: 48px !important;
190+
}
191+
192+
.MuiFormControlLabel-root {
193+
margin: 0 !important;
194+
}
195+
196+
.MuiRadio-root {
197+
padding: 8px !important;
198+
}
199+
200+
/* Mobile code blocks */
201+
pre {
202+
white-space: pre-wrap;
203+
word-wrap: break-word;
204+
overflow-x: auto;
205+
font-size: 0.8rem;
206+
}
207+
208+
/* Bottom navigation safe area */
209+
.MuiBottomNavigation-root {
210+
padding-bottom: env(safe-area-inset-bottom, 0px);
211+
}
212+
}
213+
214+
/* High contrast mode */
215+
@media (prefers-contrast: high) {
216+
.MuiButton-root {
217+
border: 2px solid currentColor !important;
218+
}
219+
}
220+
221+
/* Reduced motion */
222+
@media (prefers-reduced-motion: reduce) {
223+
* {
224+
animation-duration: 0.01ms !important;
225+
animation-iteration-count: 1 !important;
226+
transition-duration: 0.01ms !important;
227+
}
228+
}
229+
230+
/* Dark mode preference */
231+
@media (prefers-color-scheme: dark) {
232+
body {
233+
background-color: #202124;
234+
color: #e8eaed;
235+
}
236+
}
237+
"@
238+
239+
$cssContent | Out-File -FilePath "src\index.css" -Encoding UTF8
240+
241+
# Step 6: Build the project
242+
Write-Host "🔨 Building mobile-optimized version..." -ForegroundColor Yellow
243+
npm run build
244+
245+
if ($LASTEXITCODE -ne 0) {
246+
Write-Host "❌ Build failed. Please check the console output." -ForegroundColor Red
247+
exit 1
248+
}
249+
250+
# Step 7: Test the build locally (optional)
251+
Write-Host "🧪 Testing build..." -ForegroundColor Yellow
252+
$testResult = npm run preview --silent
253+
Write-Host " Build test completed." -ForegroundColor Gray
254+
255+
# Step 8: Git operations
256+
Write-Host "📝 Committing changes..." -ForegroundColor Yellow
257+
258+
# Add all changes
259+
git add .
260+
261+
# Commit with descriptive message
262+
$commitMessage = "feat: Add Google-level mobile responsiveness
263+
264+
- Mobile-first responsive design with breakpoints
265+
- Touch-friendly UI elements (48px minimum touch targets)
266+
- Optimized viewport and meta tags for mobile
267+
- Mobile-specific CSS optimizations
268+
- PWA-ready configuration
269+
- Improved performance for mobile devices
270+
- Bottom navigation for mobile
271+
- Collapsible sections for better mobile UX
272+
- Touch gesture optimizations"
273+
274+
git commit -m $commitMessage
275+
276+
# Step 9: Push to GitHub
277+
Write-Host "🚀 Pushing to GitHub..." -ForegroundColor Yellow
278+
git push origin main
279+
280+
if ($LASTEXITCODE -ne 0) {
281+
Write-Host "❌ Push failed. Please check your GitHub credentials." -ForegroundColor Red
282+
exit 1
283+
}
284+
285+
# Step 10: Wait for GitHub Actions to complete
286+
Write-Host "⏳ Waiting for GitHub Actions deployment..." -ForegroundColor Yellow
287+
Write-Host " This may take 2-3 minutes..." -ForegroundColor Gray
288+
289+
Start-Sleep -Seconds 30
290+
291+
# Step 11: Open the deployed site
292+
Write-Host "🌐 Opening deployed site..." -ForegroundColor Yellow
293+
$siteUrl = "https://syntaxsidekick.github.io/js-learning-lab"
294+
295+
try {
296+
Start-Process $siteUrl
297+
Write-Host " Site opened in browser: $siteUrl" -ForegroundColor Gray
298+
} catch {
299+
Write-Host " Please manually visit: $siteUrl" -ForegroundColor Gray
300+
}
301+
302+
# Step 12: Final status
303+
Write-Host ""
304+
Write-Host "✅ Mobile responsiveness automation completed!" -ForegroundColor Green
305+
Write-Host "📱 Your JS Learning Lab now has Google-level mobile responsiveness:" -ForegroundColor Green
306+
Write-Host " • Mobile-first design with proper breakpoints" -ForegroundColor Gray
307+
Write-Host " • Touch-friendly interactions (48px minimum touch targets)" -ForegroundColor Gray
308+
Write-Host " • Responsive navigation with bottom tabs on mobile" -ForegroundColor Gray
309+
Write-Host " • Optimized code editor for mobile devices" -ForegroundColor Gray
310+
Write-Host " • PWA-ready configuration" -ForegroundColor Gray
311+
Write-Host " • Performance optimizations for mobile" -ForegroundColor Gray
312+
Write-Host ""
313+
Write-Host "🌐 Site URL: $siteUrl" -ForegroundColor Cyan
314+
Write-Host "💤 You can now go to bed! The deployment is automated." -ForegroundColor Green
315+
Write-Host ""
316+
317+
# Optional: Show deployment status
318+
Write-Host "📊 You can check deployment status at:" -ForegroundColor Yellow
319+
Write-Host " https://github.com/SyntaxSidekick/js-learning-lab/actions" -ForegroundColor Gray

‎deploy-mobile.bat‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
@echo off
2+
echo Starting Mobile Responsiveness Automation...
3+
4+
REM Clean up directory structure
5+
echo Cleaning up directory structure...
6+
if exist "js-challenge-lab" (
7+
echo Removing js-challenge-lab subdirectory...
8+
rmdir /s /q "js-challenge-lab" 2>nul
9+
)
10+
11+
REM Check dependencies
12+
echo Checking dependencies...
13+
if not exist "node_modules" (
14+
echo Installing dependencies...
15+
npm install
16+
)
17+
18+
REM Build the project
19+
echo Building mobile-optimized version...
20+
npm run build
21+
22+
if %errorlevel% neq 0 (
23+
echo Build failed. Please check the console output.
24+
pause
25+
exit /b 1
26+
)
27+
28+
REM Git operations
29+
echo Committing changes...
30+
git add .
31+
git commit -m "feat: Add Google-level mobile responsiveness - Mobile-first design with touch-friendly UI - PWA-ready configuration - Optimized for mobile devices"
32+
33+
echo Pushing to GitHub...
34+
git push origin main
35+
36+
if %errorlevel% neq 0 (
37+
echo Push failed. Please check your GitHub credentials.
38+
pause
39+
exit /b 1
40+
)
41+
42+
echo.
43+
echo Mobile responsiveness automation completed!
44+
echo Your JS Learning Lab now has Google-level mobile responsiveness.
45+
echo.
46+
echo Site URL: https://syntaxsidekick.github.io/js-learning-lab
47+
echo You can now go to bed! The deployment is automated.
48+
echo.
49+
echo Check deployment status at:
50+
echo https://github.com/SyntaxSidekick/js-learning-lab/actions
51+
52+
REM Open the site
53+
start https://syntaxsidekick.github.io/js-learning-lab
54+
55+
pause

0 commit comments

Comments
 (0)