|
1 | | -# 🖼️ Images Added to VitePress Documentation |
| 1 | +# 🖼️ Media Asset Reference |
2 | 2 |
|
3 | | -## ✅ Successfully Added Images |
| 3 | +The widgets rely on a consistent set of showcase images stored inside `.src/`. This page documents which image belongs to which guide so you can maintain them easily while migrating to GitBook. |
4 | 4 |
|
5 | | -All widget documentation pages now include beautiful preview images sourced from your existing `.src` folder! |
| 5 | +## Primary Visuals |
6 | 6 |
|
7 | | -### 🏠 Homepage |
8 | | -- **Hero Image**: Main mockup wall showcasing all widgets |
9 | | -- **Logo**: Scriptable app icon in navigation |
| 7 | +- **Library hero**: `.assets/scriptable_mockup_wall.png` |
| 8 | +- **App icon**: `.assets/scriptable_icon.png` |
10 | 9 |
|
11 | | -### 📱 Widget Pages |
| 10 | +## Widget Previews |
12 | 11 |
|
13 | | -| Widget | Image Added | Source | |
14 | | -|--------|-------------|---------| |
15 | | -| 🌤️ **Weather Widget** | ✅ | `.src/weather/weather_showcase_s.png` | |
16 | | -| ⏰ **Countdown Widget** | ✅ | `.src/countdown/countdow_showcase.png` | |
17 | | -| 📊 **GitHub Stats Widget** | ✅ | `.src/githubstats/githubstats_showcase.png` | |
18 | | -| 🎂 **Birthday Widget** | ✅ | `.src/birthday/birthday_showcase.png` | |
19 | | -| 🌬️ **AQI Widget** | ✅ | `.src/weather/weather_showcase.png` | |
20 | | -| 🕉️ **Hindu Calendar Widget** | ✅ | `.src/hinduclrwear/hinduclrwear_showcase.png` | |
21 | | -| 💭 **Quote Widget** | ✅ | `.src/quotes/quote_showcase_1.png` | |
22 | | -| 📚 **Schedule Widget** | ✅ | `.src/schedule/schedule_showcase_1.png` | |
23 | | -| ⏰ **Time Progress Widget** | ✅ | `.src/timeprogress/timeprogress_showcase.png` | |
24 | | -| 🚗 **Toyota Widget** | ✅ | `.src/toyota/toyota_l.png` | |
| 12 | +| Widget | Image | Relative Path | |
| 13 | +| --- | --- | --- | |
| 14 | +| 🌤️ Weather | `weather_showcase_s.png` | `.assets/weather/weather_showcase_s.png` | |
| 15 | +| ⏰ Countdown | `countdow_showcase.png` | `.assets/countdown/countdow_showcase.png` | |
| 16 | +| 📊 GitHub Stats | `githubstats_showcase.png` | `.assets/githubstats/githubstats_showcase.png` | |
| 17 | +| 🎂 Birthday | `birthday_showcase.png` | `.assets/birthday/birthday_showcase.png` | |
| 18 | +| 🌬️ AQI | `openweatheraqi_showcase.png` | `.assets/aqi/openweatheraqi_showcase.png` | |
| 19 | +| 🕉️ Hindu Calendar | `hinduclrwear_showcase.png` | `.assets/hinduclrwear/hinduclrwear_showcase.png` | |
| 20 | +| 💭 Quote | `quote_showcase_1.png` | `.assets/quotes/quote_showcase_1.png` | |
| 21 | +| 📚 Schedule | `schedule_showcase_1.png` | `.assets/schedule/schedule_showcase_1.png` | |
| 22 | +| ⏳ Time Progress | `timeprogress_showcase.png` | `.assets/timeprogress/timeprogress_showcase.png` | |
| 23 | +| 🚗 Toyota | `toyota_l.png` | `.assets/toyota/toyota_l.png` | |
25 | 24 |
|
26 | | -### 📚 Other Pages |
27 | | -- **Installation Guide**: Hero image showing widget collection |
28 | | -- **Widgets Overview**: Main showcase image |
| 25 | +## Referencing Images in GitBook |
29 | 26 |
|
30 | | -## 🌐 Image Source Strategy |
| 27 | +Use GitHub raw links so GitBook always fetches the latest asset: |
31 | 28 |
|
32 | | -**Using GitHub Raw URLs**: All images are referenced directly from your GitHub repository using raw URLs like: |
33 | 29 | ``` |
34 | | -https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.src/[folder]/[image].png |
| 30 | +https://raw.githubusercontent.com/rushhiii/Scriptable-IOSWidgets/main/.assets/<folder>/<file>.png |
35 | 31 | ``` |
36 | 32 |
|
37 | | -### ✅ Benefits: |
38 | | -- **No Build Issues**: Images don't need to be copied locally |
39 | | -- **Always Up-to-Date**: Images automatically update when you update the source |
40 | | -- **Fast Loading**: GitHub CDN delivers images quickly |
41 | | -- **Version Controlled**: Images are part of your repository |
| 33 | +Benefits: |
42 | 34 |
|
43 | | -### 🚀 What This Gives You: |
| 35 | +- ✅ No manual uploads—images stay version controlled with the code. |
| 36 | +- ✅ Fast delivery via GitHub's CDN. |
| 37 | +- ✅ Automatic updates when assets change. |
44 | 38 |
|
45 | | -1. **Beautiful Documentation**: Every widget now has a visual preview |
46 | | -2. **Professional Look**: Your site looks polished and complete |
47 | | -3. **Better User Experience**: Users can see what widgets look like before installing |
48 | | -4. **Consistent Branding**: All images maintain your design aesthetic |
| 39 | +## Maintenance Tips |
49 | 40 |
|
50 | | -## 🎯 Next Steps |
| 41 | +1. **Keep alt text descriptive** so GitBook pages remain accessible. |
| 42 | +2. **Compress PNGs/WebP** before committing to keep pages lightweight. |
| 43 | +3. **Batch new assets** in `.assets/<widget>/` to stay organized. |
| 44 | +4. **Document additions here** whenever you add or rename an image. |
51 | 45 |
|
52 | | -Your documentation now looks amazing with all the widget images! Here's what you can do next: |
53 | | - |
54 | | -1. **📱 Test the Site**: Run `npm run docs:dev` and visit `http://localhost:5173` |
55 | | -2. **🌐 Deploy**: Push to GitHub to trigger automatic deployment |
56 | | -3. **📸 Add More Images**: Consider adding setup screenshots, configuration examples |
57 | | -4. **🎨 Customize**: Adjust image sizes or add captions if desired |
58 | | - |
59 | | -## 📝 Image Optimization Tips |
60 | | - |
61 | | -If you want to optimize the images further: |
62 | | - |
63 | | -- **Compress images** for faster loading |
64 | | -- **Add alt text** for accessibility |
65 | | -- **Consider WebP format** for better compression |
66 | | -- **Add loading="lazy"** for performance |
67 | | - |
68 | | -Your VitePress documentation site is now visually stunning and ready to impress! 🎉 |
| 46 | +With this reference you can cross-check every page before enabling GitHub ↔ GitBook sync and ensure all visuals resolve correctly. |
0 commit comments