Skip to content

Commit e3cdc6e

Browse files
rushhiiirushhiii
committed
update
1 parent b1dacb9 commit e3cdc6e

3 files changed

Lines changed: 199 additions & 15 deletions

File tree

‎.vscode/tasks.json‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,22 @@
88
"group": "build",
99
"isBackground": true,
1010
"problemMatcher": []
11+
},
12+
{
13+
"label": "VitePress Dev Server",
14+
"type": "shell",
15+
"command": "npm run docs:dev",
16+
"group": "build",
17+
"isBackground": true,
18+
"problemMatcher": []
19+
},
20+
{
21+
"label": "Build VitePress Site",
22+
"type": "shell",
23+
"command": "npm run docs:build",
24+
"group": "build",
25+
"isBackground": false,
26+
"problemMatcher": []
1127
}
1228
]
1329
}

‎VITEPRESS_SETUP.md‎

Lines changed: 183 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,183 @@
1+
# 📱 Scriptable iOS Widgets - VitePress Documentation
2+
3+
🎉 **Congratulations!** Your VitePress documentation site is now set up and ready to go!
4+
5+
## 🌟 What's New?
6+
7+
Your Scriptable widgets collection now has a beautiful, professional documentation website powered by VitePress! Here's what you get:
8+
9+
### ✨ Features
10+
- **🚀 Fast & Modern**: Built with Vite for lightning-fast development
11+
- **📱 Mobile-First**: Responsive design that looks great on all devices
12+
- **🔍 Search**: Built-in local search functionality
13+
- **🌙 Dark Mode**: Automatic dark/light theme switching
14+
- **📖 Rich Content**: Enhanced Markdown with Vue.js components
15+
- **⚡ Hot Reload**: Instant preview of changes during development
16+
17+
### 📁 Site Structure
18+
19+
```
20+
📱 Scriptable iOS Widgets
21+
├── 🏠 Home - Beautiful landing page with hero section
22+
├── 📱 Widgets - Complete widget collection
23+
│ ├── 🌤️ Weather Widget - Detailed setup guide
24+
│ ├── ⏰ Countdown Widget - Google Sheets integration
25+
│ ├── 📊 GitHub Stats Widget - Developer metrics
26+
│ ├── 🎂 Birthday Widget - Age calculator
27+
│ ├── 🌬️ AQI Widget - Air quality monitoring
28+
│ └── 🔄 More widgets (documentation ready to expand)
29+
├── 📲 Installation Guide - Step-by-step setup
30+
└── 🤝 Contributing - How to contribute
31+
```
32+
33+
## 🚀 Quick Start
34+
35+
### Development Server
36+
```bash
37+
npm run docs:dev
38+
```
39+
Opens at: `http://localhost:5173`
40+
41+
### Build for Production
42+
```bash
43+
npm run docs:build
44+
```
45+
46+
### Preview Production Build
47+
```bash
48+
npm run docs:preview
49+
```
50+
51+
### Deploy to GitHub Pages
52+
```bash
53+
npm run deploy
54+
```
55+
56+
## 🎯 Next Steps
57+
58+
### 1. 📸 Add Widget Screenshots
59+
Create beautiful screenshots of your widgets and add them to:
60+
- `docs/public/images/` folder
61+
- Update widget documentation to include images
62+
- Consider creating animated GIFs for interactive widgets
63+
64+
### 2. 🔧 Complete Widget Documentation
65+
Expand the placeholder documentation for:
66+
- **Hindu Calendar Widget** - Festival dates and cultural information
67+
- **Quote Widget** - Inspirational quotes with themes
68+
- **Schedule Widget** - University/work schedule management
69+
- **Time Progress Widget** - Visual time tracking
70+
- **Toyota Widget** - Vehicle integration details
71+
72+
### 3. 🌐 Deploy to GitHub Pages
73+
74+
#### Automatic Deployment (Recommended)
75+
1. **Push to GitHub**: Commit all changes and push to main branch
76+
2. **Enable GitHub Pages**: Go to repository Settings > Pages
77+
3. **Select Source**: Choose "GitHub Actions"
78+
4. **Done!** Your site will auto-deploy on every push
79+
80+
Your site will be live at: `https://rushhiii.github.io/Scriptable-IOSWidgets/`
81+
82+
#### Manual Deployment
83+
```bash
84+
npm run deploy
85+
```
86+
87+
### 4. 🎨 Customize Design
88+
- **Colors**: Edit `.vitepress/config.js` for custom branding
89+
- **Logo**: Add your logo to `docs/public/` and update config
90+
- **Favicon**: Add `favicon.ico` to `docs/public/`
91+
- **Custom CSS**: Create `.vitepress/theme/style.css` for styling
92+
93+
### 5. 📊 Add Analytics
94+
```javascript
95+
// In .vitepress/config.js
96+
export default {
97+
head: [
98+
['script', {
99+
async: true,
100+
src: 'https://www.googletagmanager.com/gtag/js?id=YOUR_GA_ID'
101+
}],
102+
['script', {}, `
103+
window.dataLayer = window.dataLayer || [];
104+
function gtag(){dataLayer.push(arguments);}
105+
gtag('js', new Date());
106+
gtag('config', 'YOUR_GA_ID');
107+
`]
108+
]
109+
}
110+
```
111+
112+
## 🛠️ Advanced Features
113+
114+
### Custom Domain
115+
1. Add `CNAME` file to `docs/public/` with your domain
116+
2. Update GitHub Pages settings
117+
3. Modify `base` in `.vitepress/config.js` if needed
118+
119+
### SEO Optimization
120+
The site is already optimized with:
121+
- Meta tags for social sharing
122+
- Structured navigation
123+
- Fast loading times
124+
- Mobile-responsive design
125+
126+
### Component Library
127+
Add custom Vue components:
128+
```vue
129+
<!-- .vitepress/components/WidgetPreview.vue -->
130+
<template>
131+
<div class="widget-preview">
132+
<iframe :src="demoUrl" />
133+
</div>
134+
</template>
135+
```
136+
137+
## 📚 Documentation Tips
138+
139+
### Writing Widget Docs
140+
Follow this template for new widgets:
141+
1. **Header** with badges (compatibility, size, API)
142+
2. **Brief description** and features
143+
3. **Quick setup** section
144+
4. **Configuration options**
145+
5. **Customization** examples
146+
6. **Troubleshooting** section
147+
7. **Links** to source code
148+
149+
### Best Practices
150+
- **Screenshots**: Include widget images and setup steps
151+
- **Code Examples**: Show actual configuration code
152+
- **Step-by-step**: Break complex setups into numbered steps
153+
- **Error Handling**: Document common issues and solutions
154+
- **Updates**: Keep documentation current with code changes
155+
156+
## 🎉 You're All Set!
157+
158+
Your documentation site is production-ready with:
159+
160+
✅ **Professional Design** - Clean, modern interface
161+
✅ **Mobile Responsive** - Perfect on all devices
162+
✅ **Fast Performance** - Optimized for speed
163+
✅ **SEO Friendly** - Ready for search engines
164+
✅ **Auto Deployment** - Updates automatically
165+
✅ **Search Enabled** - Find content quickly
166+
✅ **Dark Mode** - Comfortable viewing
167+
168+
## 🚀 What's Next?
169+
170+
1. **🖼️ Add screenshots** of your widgets in action
171+
2. **📝 Complete documentation** for all widgets
172+
3. **🌐 Deploy to GitHub Pages** and share with the world
173+
4. **📢 Announce** your beautiful new documentation site
174+
5. **🤝 Welcome contributions** from the community
175+
176+
---
177+
178+
**Need help?** Check out:
179+
- 📖 [VitePress Documentation](https://vitepress.dev/)
180+
- 💬 [GitHub Discussions](https://github.com/rushhiii/Scriptable-IOSWidgets/discussions)
181+
- 🐛 [Report Issues](https://github.com/rushhiii/Scriptable-IOSWidgets/issues)
182+
183+
**Happy documenting!** 🎊

‎docs/widgets/index.md‎

Lines changed: 0 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -84,18 +84,3 @@ Display your coding activity and GitHub statistics.
8484
- Read the README files for each widget carefully
8585
- Test widgets in the Scriptable app before adding to home screen
8686
- Join our community for support and sharing tips
87-
88-
<style>
89-
.widget-grid {
90-
display: grid;
91-
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
92-
gap: 1rem;
93-
margin: 1rem 0;
94-
}
95-
96-
.widget-grid > div {
97-
padding: 1rem;
98-
border: 1px solid var(--vp-c-border);
99-
border-radius: 8px;
100-
}
101-
</style>

0 commit comments

Comments
 (0)