Skip to content

Commit b76737a

Browse files
twentyTwotwentyTwo
authored
Add initial documentation and JavaScript for Simple Coding Time Tracker website (#72)
- Created index.html with structured layout including navigation, hero section, features, screenshots, installation instructions, use cases, and footer. - Added main.js for interactive features such as mobile menu toggle, smooth scrolling, fade-in animations, and stats counter animation. - Implemented Intersection Observer for lazy loading and animations on scroll. - Included styles for mobile responsiveness and visual enhancements.
1 parent aea6c6f commit b76737a

6 files changed

Lines changed: 2241 additions & 0 deletions

File tree

‎GITHUB_PAGES_SETUP.md‎

Lines changed: 137 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,137 @@
1+
# 🚀 GitHub Pages Setup Guide
2+
3+
## Quick Setup Steps
4+
5+
Follow these steps to enable your GitHub Pages site:
6+
7+
### 1. Push the docs folder to GitHub
8+
9+
```bash
10+
git add docs/
11+
git commit -m "Add GitHub Pages site for extension demonstration"
12+
git push origin feature/extension-site
13+
```
14+
15+
### 2. Merge to main branch (if needed)
16+
17+
If you want the site live on main:
18+
```bash
19+
git checkout main
20+
git merge feature/extension-site
21+
git push origin main
22+
```
23+
24+
### 3. Enable GitHub Pages
25+
26+
1. Go to your repository: https://github.com/twentyTwo/vsc-ext-coding-time-tracker
27+
2. Click on **Settings** tab
28+
3. Scroll down to **Pages** in the left sidebar
29+
4. Under **Source**:
30+
- Select **Deploy from a branch**
31+
- Choose **main** branch
32+
- Select **/docs** folder
33+
- Click **Save**
34+
35+
### 4. Wait for Deployment
36+
37+
- GitHub will build and deploy your site (usually takes 1-2 minutes)
38+
- You'll see a message: "Your site is live at https://twentytwo.github.io/vsc-ext-coding-time-tracker/"
39+
- Click the link to view your live site!
40+
41+
## 🎯 What You'll Get
42+
43+
### Landing Page Features:
44+
✅ Beautiful hero section with gradient background
45+
✅ Feature showcase with 9 key features
46+
✅ Screenshot gallery (light/dark themes)
47+
✅ Installation instructions
48+
✅ Use cases section
49+
✅ Responsive design (mobile, tablet, desktop)
50+
✅ Smooth animations and transitions
51+
✅ Links to VS Code Marketplace and Open VSX
52+
53+
### Documentation Page Features:
54+
✅ Complete user guide
55+
✅ Configuration reference table
56+
✅ Feature explanations
57+
✅ Health notifications guide
58+
✅ All available commands
59+
✅ Troubleshooting section
60+
✅ FAQ section
61+
✅ Table of contents with smooth scrolling
62+
63+
## 🔗 Adding to Your Extension
64+
65+
Once live, add the site URL to:
66+
67+
1. **README.md** - Add a link to the live demo site
68+
2. **package.json** - Add to repository URL or homepage field
69+
3. **VS Code Marketplace** - Update extension description with site link
70+
71+
## 📱 Testing Locally
72+
73+
Before pushing, test locally:
74+
75+
```bash
76+
cd docs
77+
python -m http.server 8000
78+
# Or use: npx http-server
79+
```
80+
81+
Open: http://localhost:8000
82+
83+
## 🎨 Customization Options
84+
85+
### Colors (in css/style.css)
86+
```css
87+
:root {
88+
--primary-color: #007acc; /* VS Code blue */
89+
--secondary-color: #68217a; /* Purple accent */
90+
--accent-color: #f9826c; /* Coral accent */
91+
}
92+
```
93+
94+
### Screenshots
95+
- Replace URLs in index.html with your own screenshot URLs
96+
- Current screenshots are pulled from your GitHub static hosting
97+
98+
### Content
99+
- Edit text in index.html and documentation.html
100+
- Update links to match your repository
101+
102+
## ⚡ Performance
103+
104+
The site is optimized for:
105+
- Fast loading (no external dependencies)
106+
- Mobile-first responsive design
107+
- SEO-friendly semantic HTML
108+
- Accessible (ARIA labels, keyboard navigation)
109+
110+
## 🐛 Troubleshooting
111+
112+
**Site not showing up?**
113+
- Wait 2-5 minutes after enabling
114+
- Check Settings → Pages for build status
115+
- Ensure /docs folder exists on the branch
116+
- Hard refresh browser (Ctrl+Shift+R)
117+
118+
**Images not loading?**
119+
- Verify image URLs are correct
120+
- Check if images are accessible publicly
121+
- Use relative paths for local images
122+
123+
**Mobile menu not working?**
124+
- Clear browser cache
125+
- Check browser console for errors
126+
- Verify main.js is loading
127+
128+
## 📞 Support
129+
130+
Need help? Open an issue on GitHub!
131+
132+
---
133+
134+
**Your site will be live at:**
135+
🌐 https://twentytwo.github.io/vsc-ext-coding-time-tracker/
136+
137+
Enjoy your new extension showcase website! 🎉

‎docs/README.md‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
# Simple Coding Time Tracker - GitHub Pages Site
2+
3+
This directory contains the GitHub Pages website for the Simple Coding Time Tracker VS Code extension.
4+
5+
## 🌐 Live Site
6+
7+
The site is hosted at: `https://twentytwo.github.io/vsc-ext-coding-time-tracker/`
8+
9+
## 📁 Structure
10+
11+
```
12+
docs/
13+
├── index.html # Main landing page
14+
├── documentation.html # Complete documentation
15+
├── css/
16+
│ └── style.css # Styles for all pages
17+
├── js/
18+
│ └── main.js # Interactive features
19+
└── assets/ # Additional assets (if needed)
20+
```
21+
22+
## 🚀 Features
23+
24+
### Landing Page (`index.html`)
25+
- Hero section with call-to-action buttons
26+
- Feature showcase with interactive cards
27+
- Screenshot gallery with light/dark theme examples
28+
- Installation guide
29+
- Use cases section
30+
- Responsive design for all devices
31+
32+
### Documentation Page (`documentation.html`)
33+
- Complete user guide
34+
- Configuration reference
35+
- Feature details
36+
- Health notifications guide
37+
- Command reference
38+
- Troubleshooting section
39+
- FAQ
40+
41+
## 🎨 Design
42+
43+
- **Responsive:** Works on desktop, tablet, and mobile
44+
- **Modern:** Clean, professional design with smooth animations
45+
- **Accessible:** Semantic HTML and proper ARIA labels
46+
- **Fast:** Optimized CSS and JavaScript
47+
- **Theme-aware:** Matches VS Code aesthetic
48+
49+
## 🔧 Local Development
50+
51+
To test the site locally:
52+
53+
1. Open `index.html` in your browser, or
54+
2. Use a local server:
55+
```bash
56+
# Python 3
57+
python -m http.server 8000
58+
59+
# Node.js (with http-server)
60+
npx http-server
61+
```
62+
3. Navigate to `http://localhost:8000`
63+
64+
## 📝 Updating Content
65+
66+
### Adding Screenshots
67+
Place images in the root directory or `assets/` folder and update the `<img>` tags in `index.html`.
68+
69+
### Modifying Styles
70+
Edit `css/style.css` to customize colors, fonts, layouts, etc.
71+
72+
### Adding Interactivity
73+
Update `js/main.js` for new interactive features.
74+
75+
## 🌍 GitHub Pages Setup
76+
77+
To enable GitHub Pages:
78+
79+
1. Go to your repository settings
80+
2. Navigate to "Pages" section
81+
3. Under "Source", select "Deploy from a branch"
82+
4. Choose the `main` branch and `/docs` folder
83+
5. Click "Save"
84+
6. Your site will be available at: `https://twentytwo.github.io/vsc-ext-coding-time-tracker/`
85+
86+
## 📦 Technologies Used
87+
88+
- Pure HTML5, CSS3, JavaScript (no frameworks)
89+
- Responsive Grid and Flexbox layouts
90+
- CSS animations and transitions
91+
- Intersection Observer API for scroll animations
92+
- Mobile-first responsive design
93+
94+
## 🤝 Contributing
95+
96+
To improve the website:
97+
98+
1. Edit files in the `docs/` directory
99+
2. Test locally
100+
3. Commit and push changes
101+
4. Changes will be live within minutes
102+
103+
## 📄 License
104+
105+
This website and the extension are licensed under the MIT License.

0 commit comments

Comments
 (0)