Skip to content

Commit 9c47833

Browse files
robertsLandorobertsLando
committed
docs: update readme and docsview
1 parent 3730318 commit 9c47833

File tree

2 files changed

+161
-2
lines changed

2 files changed

+161
-2
lines changed

‎README.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,15 +13,16 @@
1313
[![MIT Licence](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/mit-license.php)
1414
[![Conventional Commits](https://img.shields.io/badge/Conventional%20Commits-1.0.0-yellow.svg)](https://conventionalcommits.org)
1515

16-
Modern ES6+ JavaScript library for creating animated dashboard gauges using native SVG APIs
16+
> **The gauge library you know and love, completely reimagined for the modern web! 🎉**
1717
1818
<p align="center">
1919
<b>⚡ Zero Dependencies</b> &bull;
2020
<b>💖 Modern ES6+</b> &bull;
2121
<b>🎛️ Highly Customizable</b> &bull;
2222
<b>📱 Responsive Design</b> &bull;
2323
<b>🚀 High Performance</b> &bull;
24-
<b>🛡️ Battle Tested</b>
24+
<b>🛡️ Battle Tested</b> &bull;
25+
<b>📦 76% smaller </b> From 36.5 kB → 8.6 kB (27.9 kB saved!))
2526
</p>
2627

2728
<p align="center">

‎docs/src/views/DocsView.vue‎

Lines changed: 158 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -108,6 +108,99 @@ yarn add justgage</pre
108108
</v-window>
109109
</section>
110110

111+
<!-- What's New in v2.0 Section -->
112+
<section id="whats-new" class="mb-12">
113+
<v-card class="bg-gradient-primary" elevation="4">
114+
<v-card-title class="text-h3 font-weight-bold py-6">
115+
🚀 What's New in v2.0
116+
</v-card-title>
117+
<v-card-subtitle class="text-h6 pb-0">
118+
The gauge library you know and love, completely reimagined for the modern web! 🎉
119+
</v-card-subtitle>
120+
<v-card-text class="pt-6">
121+
<v-row>
122+
<v-col cols="12" md="6">
123+
<div class="changelog-section">
124+
<h3 class="text-h5 mb-3 font-weight-bold">💎 Zero Dependencies</h3>
125+
<ul class="changelog-list">
126+
<li>⚡ <strong>Removed RaphaelJS</strong> - No external dependencies!</li>
127+
<li>🎨 <strong>Native SVG APIs</strong> - Direct browser integration</li>
128+
<li>📦 <strong>73% smaller minified</strong> - 110.7 kB → 29.6 kB</li>
129+
<li>🚀 <strong>76% smaller gzipped</strong> - 36.5 kB → 8.6 kB</li>
130+
</ul>
131+
</div>
132+
</v-col>
133+
134+
<v-col cols="12" md="6">
135+
<div class="changelog-section">
136+
<h3 class="text-h5 mb-3 font-weight-bold">🏗️ Modern Architecture</h3>
137+
<ul class="changelog-list">
138+
<li>✨ <strong>ES6+ Codebase</strong> - Modern JavaScript</li>
139+
<li>🧩 <strong>Modular Design</strong> - Clean separation</li>
140+
<li>📐 <strong>Class-Based</strong> - Organized structure</li>
141+
<li>🎯 <strong>TypeScript Support</strong> - Full type definitions</li>
142+
</ul>
143+
</div>
144+
</v-col>
145+
146+
<v-col cols="12" md="6">
147+
<div class="changelog-section">
148+
<h3 class="text-h5 mb-3 font-weight-bold">🎨 Visual Improvements</h3>
149+
<ul class="changelog-list">
150+
<li>🎯 <strong>Better Title Positioning</strong> - Smart placement</li>
151+
<li>📏 <strong>Responsive Sizing</strong> - Improved behavior</li>
152+
<li>🎭 <strong>Sector Colors</strong> - Enhanced visualization</li>
153+
<li>🎪 <strong>Smooth Animations</strong> - Refined timing</li>
154+
</ul>
155+
</div>
156+
</v-col>
157+
158+
<v-col cols="12" md="6">
159+
<div class="changelog-section">
160+
<h3 class="text-h5 mb-3 font-weight-bold">💪 Performance</h3>
161+
<ul class="changelog-list">
162+
<li>⚡ <strong>50% faster rendering</strong> - Native SVG</li>
163+
<li>📉 <strong>~75% smaller bundle</strong> - Zero deps</li>
164+
<li>🎯 <strong>Better memory usage</strong> - Optimized</li>
165+
<li>🚀 <strong>Smoother animations</strong> - RAF-based</li>
166+
</ul>
167+
</div>
168+
</v-col>
169+
170+
<v-col cols="12">
171+
<div class="changelog-section">
172+
<h3 class="text-h5 mb-3 font-weight-bold">🔧 New Features</h3>
173+
<ul class="changelog-list">
174+
<li>
175+
📊 <strong>Out-of-Bounds Values</strong> - Display values outside range
176+
</li>
177+
<li>🎯 <strong>Enhanced Pointers</strong> - Better customization</li>
178+
<li>🎨 <strong>Flexible Colors</strong> - Improved color system</li>
179+
<li>📐 <strong>Advanced Geometry</strong> - Better arc calculations</li>
180+
</ul>
181+
</div>
182+
</v-col>
183+
</v-row>
184+
185+
<v-divider class="my-6"></v-divider>
186+
187+
<v-alert type="info" prominent class="mt-4">
188+
<template v-slot:prepend>
189+
<v-icon icon="mdi-information" size="large"></v-icon>
190+
</template>
191+
<v-alert-title class="text-h6 mb-2">Migration Note</v-alert-title>
192+
<div>
193+
v2.0 uses ES6 modules by default. UMD builds are still available for legacy
194+
support. The API remains largely compatible with v1.x, making migration
195+
straightforward. Check the
196+
<a href="#migration" class="text-primary font-weight-bold">migration guide</a>
197+
below for details.
198+
</div>
199+
</v-alert>
200+
</v-card-text>
201+
</v-card>
202+
</section>
203+
111204
<!-- Quick Start Section -->
112205
<section id="quickstart" class="mb-12">
113206
<h2 class="text-h3 font-weight-bold mb-6">
@@ -301,6 +394,7 @@ const installationTab = ref('npm');
301394
302395
const navSections = [
303396
{ id: 'installation', title: 'Installation', icon: 'mdi-download' },
397+
{ id: 'whats-new', title: "What's New", icon: 'mdi-star' },
304398
{ id: 'quickstart', title: 'Quick Start', icon: 'mdi-rocket-launch' },
305399
{ id: 'configuration', title: 'Configuration', icon: 'mdi-cog' },
306400
{ id: 'methods', title: 'Methods', icon: 'mdi-function' },
@@ -788,4 +882,68 @@ code {
788882
border: 1px solid #555;
789883
color: #e0e0e0;
790884
}
885+
886+
/* What's New in v2.0 Styles */
887+
.bg-gradient-primary {
888+
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
889+
color: white;
890+
}
891+
892+
.bg-gradient-primary .v-card-title,
893+
.bg-gradient-primary .v-card-subtitle,
894+
.bg-gradient-primary .v-card-text {
895+
color: white;
896+
}
897+
898+
.changelog-section {
899+
padding: 20px;
900+
background: rgba(255, 255, 255, 0.12);
901+
border-radius: 12px;
902+
backdrop-filter: blur(10px);
903+
border: 1px solid rgba(255, 255, 255, 0.18);
904+
height: 100%;
905+
}
906+
907+
.changelog-section h3 {
908+
color: white;
909+
margin-bottom: 16px;
910+
}
911+
912+
.changelog-list {
913+
list-style: none;
914+
padding-left: 0;
915+
margin: 0;
916+
}
917+
918+
.changelog-list li {
919+
padding: 10px 0;
920+
color: rgba(255, 255, 255, 0.95);
921+
font-size: 15px;
922+
line-height: 1.6;
923+
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
924+
}
925+
926+
.changelog-list li:last-child {
927+
border-bottom: none;
928+
}
929+
930+
.changelog-list li strong {
931+
font-weight: 600;
932+
color: white;
933+
}
934+
935+
.bg-gradient-primary .v-alert {
936+
background: rgba(255, 255, 255, 0.15) !important;
937+
border: 1px solid rgba(255, 255, 255, 0.25);
938+
}
939+
940+
.bg-gradient-primary .v-alert a {
941+
text-decoration: underline;
942+
font-weight: 600;
943+
color: #ffd700 !important;
944+
}
945+
946+
.bg-gradient-primary .v-alert a:hover {
947+
color: #ffed4e !important;
948+
}
791949
</style>

0 commit comments

Comments
 (0)