Skip to content

Commit 15122f9

Browse files
genwolffgenwolff
committed
🚀 Add GitHub Pages demo deployment
- Add GitHub Actions workflow for automatic demo deployment - Create demo-specific Vite configuration with GitHub Pages support - Enhance Test.tsx with professional header, footer, and navigation - Add favicon and improved meta tags for better SEO - Update README with live demo link - Add comprehensive demo setup documentation Features: ✅ Automatic deployment on push to master ✅ Professional demo interface with GitHub/npm links ✅ Enhanced UI with header/footer and documentation links ✅ Custom favicon and meta tags ✅ Demo-specific build configuration ✅ Local preview and development scripts
1 parent c4f859a commit 15122f9

File tree

9 files changed

+466
-18
lines changed

9 files changed

+466
-18
lines changed

‎.github/workflows/deploy-demo.yml‎

Lines changed: 53 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
name: Deploy Demo to GitHub Pages
2+
3+
on:
4+
push:
5+
branches: [ master ]
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: '20'
28+
cache: 'yarn'
29+
30+
- name: Install dependencies
31+
run: yarn install --frozen-lockfile
32+
33+
- name: Build demo
34+
run: yarn build:demo
35+
36+
- name: Setup Pages
37+
uses: actions/configure-pages@v4
38+
39+
- name: Upload artifact
40+
uses: actions/upload-pages-artifact@v3
41+
with:
42+
path: './demo-dist'
43+
44+
deploy:
45+
environment:
46+
name: github-pages
47+
url: ${{ steps.deployment.outputs.page_url }}
48+
runs-on: ubuntu-latest
49+
needs: build
50+
steps:
51+
- name: Deploy to GitHub Pages
52+
id: deployment
53+
uses: actions/deploy-pages@v4

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ node_modules
1111
.pnp.*
1212
.yarn/
1313
dist
14+
demo-dist
1415
dist-ssr
1516
*.local
1617

‎DEMO_SETUP.md‎

Lines changed: 164 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,164 @@
1+
# Demo Setup Guide
2+
3+
This document explains how the GitHub Pages demo is set up for the React Object View project.
4+
5+
## 🌐 Live Demo
6+
7+
The demo is automatically deployed to: **https://vothanhdat.github.io/react-obj-view/**
8+
9+
## 🏗️ Build Setup
10+
11+
### Scripts
12+
13+
- `yarn build:demo` - Build demo for production
14+
- `yarn preview:demo` - Preview demo locally after build
15+
- `yarn dev` - Development server with hot reload
16+
17+
### Configuration
18+
19+
The demo uses a separate Vite configuration (`vite.config.demo.ts`) with:
20+
21+
- **Base URL**: `/react-obj-view/` (GitHub Pages repository name)
22+
- **Output Directory**: `demo-dist/`
23+
- **Target**: ES2020 for modern browsers
24+
- **Production optimizations**: Minification, tree shaking
25+
26+
### File Structure
27+
28+
```
29+
├── index.html # Demo page template
30+
├── src/
31+
│ ├── dev.tsx # Demo entry point
32+
│ ├── Test.tsx # Main demo component
33+
│ ├── Test.css # Demo-specific styles
34+
│ └── ...
35+
├── public/
36+
│ └── favicon.svg # Demo favicon
37+
├── vite.config.demo.ts # Demo build configuration
38+
└── .github/workflows/
39+
└── deploy-demo.yml # Auto-deployment workflow
40+
```
41+
42+
## 🚀 Deployment
43+
44+
### Automatic Deployment
45+
46+
The demo is automatically deployed via GitHub Actions when:
47+
48+
- Code is pushed to the `master` branch
49+
- Manual workflow dispatch is triggered
50+
51+
### Manual Deployment
52+
53+
1. **Build the demo**:
54+
```bash
55+
yarn build:demo
56+
```
57+
58+
2. **Test locally** (optional):
59+
```bash
60+
yarn preview:demo
61+
```
62+
63+
3. **Commit and push**:
64+
```bash
65+
git add .
66+
git commit -m "Update demo"
67+
git push origin master
68+
```
69+
70+
4. **GitHub Actions** will automatically build and deploy to GitHub Pages
71+
72+
## 🔧 GitHub Pages Configuration
73+
74+
### Repository Settings
75+
76+
1. Go to **Settings** → **Pages**
77+
2. Set **Source** to "GitHub Actions"
78+
3. The workflow will handle the deployment
79+
80+
### Custom Domain (Optional)
81+
82+
To use a custom domain:
83+
84+
1. Add `CNAME` file to the repository root
85+
2. Configure DNS settings
86+
3. Update the `base` URL in `vite.config.demo.ts`
87+
88+
## 📝 Demo Features
89+
90+
The demo showcases:
91+
92+
- ✅ **Interactive Controls**: Toggle features and adjust settings
93+
- ✅ **Custom Renderers**: User and API endpoint examples
94+
- ✅ **Keyword Styling**: Enhanced boolean and null value display
95+
- ✅ **Performance Options**: Grouping and highlighting controls
96+
- ✅ **Real-time Updates**: See changes instantly
97+
- ✅ **Multiple Data Types**: Comprehensive examples
98+
- ✅ **Professional UI**: Header, footer, and documentation links
99+
100+
## 🎨 Customization
101+
102+
### Styling
103+
104+
- Modify `src/Test.css` for demo-specific styles
105+
- Update `src/style.css` for component styles
106+
- Customize colors and layout in `src/Test.tsx`
107+
108+
### Data Examples
109+
110+
- Add new examples in `src/exampleData/`
111+
- Create custom renderer examples in `src/Test.tsx`
112+
- Update dropdown options in the `testDataOptions` array
113+
114+
### Branding
115+
116+
- Update favicon in `public/favicon.svg`
117+
- Modify meta tags in `index.html`
118+
- Customize header and footer in `src/Test.tsx`
119+
120+
## 🔍 Monitoring
121+
122+
### Analytics (Optional)
123+
124+
Add analytics to track demo usage:
125+
126+
```html
127+
<!-- Add to index.html head -->
128+
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
129+
```
130+
131+
### Performance
132+
133+
Monitor build performance and bundle size:
134+
135+
- Vite includes bundle analyzer
136+
- Check build logs for optimization opportunities
137+
- Monitor demo loading speed
138+
139+
## 🐛 Troubleshooting
140+
141+
### Build Failures
142+
143+
1. **Check dependencies**: Ensure all packages are installed
144+
2. **TypeScript errors**: Fix any type issues
145+
3. **Import paths**: Verify all imports are correct
146+
4. **Base URL**: Ensure GitHub Pages base URL is correct
147+
148+
### Deployment Issues
149+
150+
1. **GitHub Actions**: Check workflow logs
151+
2. **Permissions**: Verify repository has Pages enabled
152+
3. **Branch protection**: Ensure workflow can push to Pages
153+
154+
### Local Development
155+
156+
1. **Port conflicts**: Demo dev server uses different ports
157+
2. **Cache issues**: Clear browser cache and node_modules
158+
3. **TypeScript**: Restart TS server if needed
159+
160+
## 📚 Resources
161+
162+
- [Vite Deployment Guide](https://vitejs.dev/guide/static-deploy.html#github-pages)
163+
- [GitHub Pages Documentation](https://docs.github.com/en/pages)
164+
- [GitHub Actions Workflow Syntax](https://docs.github.com/en/actions/using-workflows/workflow-syntax-for-github-actions)

‎README.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,12 @@
22

33
A powerful and flexible React component for visualizing JavaScript objects and data structures with an interactive, expandable tree view. Perfect for debugging, data inspection, and creating developer tools.
44

5+
## 🌟 Live Demo
6+
7+
**[Try the Interactive Demo →](https://vothanhdat.github.io/react-obj-view/)**
8+
9+
Experience all features hands-on including custom renderers, keyword styling, and configurable highlighting!
10+
511
## ✨ Features
612

713
- 🌳 **Interactive Tree View**: Expand and collapse object properties with intuitive click interactions

‎index.html‎

Lines changed: 52 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,62 @@
44
<head>
55
<meta charset="UTF-8">
66
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>React Object View - Interactive Demo</title>
8+
<meta name="description" content="Interactive demo of React Object View - A powerful component for visualizing JavaScript objects and data structures">
9+
<meta name="keywords" content="react, object viewer, json viewer, data visualization, tree view, debug tool">
10+
<meta name="author" content="Dat Vo">
11+
12+
<!-- Open Graph / Facebook -->
13+
<meta property="og:type" content="website">
14+
<meta property="og:url" content="https://vothanhdat.github.io/react-obj-view/">
15+
<meta property="og:title" content="React Object View - Interactive Demo">
16+
<meta property="og:description" content="A powerful React component for visualizing JavaScript objects and data structures with an interactive, expandable tree view">
17+
18+
<!-- Twitter -->
19+
<meta property="twitter:card" content="summary_large_image">
20+
<meta property="twitter:url" content="https://vothanhdat.github.io/react-obj-view/">
21+
<meta property="twitter:title" content="React Object View - Interactive Demo">
22+
<meta property="twitter:description" content="A powerful React component for visualizing JavaScript objects and data structures with an interactive, expandable tree view">
23+
24+
<!-- Favicon (you can add this later) -->
25+
<link rel="icon" type="image/svg+xml" href="/favicon.svg">
26+
27+
<style>
28+
body {
29+
margin: 0;
30+
padding: 0;
31+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
32+
background-color: #f8f9fa;
33+
}
34+
35+
.loading {
36+
display: flex;
37+
align-items: center;
38+
justify-content: center;
39+
height: 100vh;
40+
font-size: 18px;
41+
color: #666;
42+
}
43+
44+
.loading::after {
45+
content: "...";
46+
animation: dots 1.5s steps(4, end) infinite;
47+
}
48+
49+
@keyframes dots {
50+
0%, 20% { color: rgba(0,0,0,0); text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
51+
40% { color: #666; text-shadow: .25em 0 0 rgba(0,0,0,0), .5em 0 0 rgba(0,0,0,0); }
52+
60% { text-shadow: .25em 0 0 #666, .5em 0 0 rgba(0,0,0,0); }
53+
80%, 100% { text-shadow: .25em 0 0 #666, .5em 0 0 #666; }
54+
}
55+
</style>
756
</head>
857

958
<body>
59+
<div id="root">
60+
<div class="loading">Loading React Object View Demo</div>
61+
</div>
1062
<script type="module" src="/src/dev.tsx"></script>
11-
<div id="root"></div>
1263
</body>
1364

1465
</html>

‎package.json‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,9 @@
1515
},
1616
"scripts": {
1717
"build": "vite build",
18+
"build:demo": "vite build --config vite.config.demo.ts",
1819
"dev": "vite --config vite.config.dev.ts",
20+
"preview:demo": "vite preview --config vite.config.demo.ts",
1921
"test": "echo \"No tests specified\" && exit 0"
2022
},
2123
"keywords": [

‎public/favicon.svg‎

Lines changed: 4 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)