Skip to content

Commit f983ab4

Browse files
Merge pull request #14 from CadeOLeo/feature/13-modernize-frontend
Feature/13 modernize frontend
2 parents 327d0ec + 068c717 commit f983ab4

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+11924
-2211
lines changed

README.md

Lines changed: 19 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -4,20 +4,18 @@
44

55
## Development
66

7+
78
### Prerequisites
89

910
- Node.js (LTS version recommended)
1011
- npm
11-
- Bower (`npm install -g bower`)
1212

1313
### Installation
1414

1515
```bash
16-
# Install npm dependencies (for development)
1716
npm install
18-
19-
# Install Bower dependencies (for frontend)
2017
bower install
18+
2119
```
2220

2321
### Testing
@@ -37,48 +35,34 @@ The tests validate:
3735

3836
### Running Locally
3937

38+
4039
After installing dependencies, you can:
4140

42-
1. Open `index.html` in your browser
43-
2. Use the date picker to calculate versions
44-
3. Check Leo's version and countdown
41+
1. Execute `npm run dev` to start the local development server (Vite)
42+
2. Access the app at `http://localhost:5173`
43+
3. Use the date picker to calculate versions
44+
4. Check Leo's version and countdown
4545

4646
## Progressive Web App (PWA)
4747

4848
This project is built as a [Progressive Web App](https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/), providing offline functionality and app-like experience.
4949

50-
### Service Worker
5150

52-
The service worker handles caching of assets for offline use:
51+
### Service Worker & PWA
5352

54-
- JavaScript files (including modules)
55-
- CSS and images
56-
- HTML templates
57-
- Third-party dependencies (moment.js, bootstrap, etc.)
53+
The service worker and PWA features are managed automatically via [Vite](https://vitejs.dev/) and [vite-plugin-pwa](https://vite-plugin-pwa.netlify.app/):
5854

59-
To update the service worker cache:
55+
- Offline support and asset caching
56+
- Automatic manifest and service worker generation
57+
- No manual sw-precache or Bower required
6058

61-
```bash
62-
# Install sw-precache globally (if not already installed)
63-
npm install -g sw-precache
64-
65-
# Generate/update service worker
66-
sw-precache --config=sw-precache-config.js --verbose
67-
```
68-
69-
The cache configuration is in `sw-precache-config.js`. When adding new static assets:
70-
71-
1. Add the file path to `staticFileGlobs` in `sw-precache-config.js`
72-
2. Regenerate the service worker
73-
3. Commit both `sw-precache-config.js` and `service-worker.js`
7459

7560
### Web Manifest & Assets
7661

7762
For PWA installation support:
7863

79-
- Web Manifest: `manifest.json` defines app metadata
64+
- Web Manifest: Generated automatically in `dist/assets/manifest-*.webmanifest`
8065
- Icons: Generated using [Real Favicon Generator](https://realfavicongenerator.net/)
81-
- Additional features: Added via [PWA Builder](https://www.pwabuilder.com/)
8266

8367
### Offline Support
8468

@@ -89,13 +73,15 @@ The app works offline after the first visit:
8973
3. Previously loaded versions are available
9074
4. New visits require connectivity
9175

76+
9277
## Building & Deployment
9378

94-
The project is hosted on GitHub Pages and requires:
79+
The project is hosted on GitHub Pages:
80+
81+
1. Execute `npm run build` to generate the production files in `dist/`
82+
2. Push the contents of `dist/` to the `gh-pages` branch or configure GitHub Pages to serve from `/docs` or `/dist`
83+
3. All static assets, manifest, and service worker are generated and ready for deployment
9584

96-
1. All static assets committed to the repository
97-
2. Service worker updated when assets change
98-
3. Web manifest kept in sync with app version
9985

10086
## Contributing
10187

assets/javascripts/cadeoleo-test.html

Lines changed: 0 additions & 22 deletions
This file was deleted.

assets/javascripts/cadeoleo-test.js

Lines changed: 0 additions & 21 deletions
This file was deleted.

assets/javascripts/cadeoleo.js

Lines changed: 0 additions & 23 deletions
This file was deleted.

assets/javascripts/lib/days.js

Lines changed: 0 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +0,0 @@
1-
(function (root, factory) {
2-
if (typeof module === 'object' && module.exports) {
3-
// Node / CommonJS
4-
module.exports = factory(require('moment'));
5-
} else {
6-
// Browser global
7-
root.CadeOLeoDays = factory(root.moment);
8-
}
9-
}(this, function (moment) {
10-
11-
function daysUntilNextBirthday(birthday) {
12-
return daysUntilNextBirthdayGivenNow(birthday, moment.utc());
13-
}
14-
15-
function daysUntilNextBirthdayGivenNow(birthday, nowMoment) {
16-
var b = moment.utc(birthday).startOf('day');
17-
18-
var now = moment.utc(nowMoment).startOf('day');
19-
20-
var thisYear = now.year();
21-
22-
var birthdayThisYear = moment.utc(thisYear + '-' + b.format('MM') + '-' + b.format('DD'), 'YYYY-MM-DD').startOf('day');
23-
var birthdayNextYear = moment.utc(birthdayThisYear).add(1, 'year').startOf('day');
24-
25-
var hadBirthdayThisYear = birthdayThisYear.isBefore(now);
26-
27-
var daysUntilNextBirthday = 0;
28-
29-
if (hadBirthdayThisYear) {
30-
daysUntilNextBirthday = birthdayNextYear.diff(now, 'days');
31-
} else {
32-
daysUntilNextBirthday = birthdayThisYear.diff(now, 'days');
33-
}
34-
35-
return daysUntilNextBirthday;
36-
}
37-
38-
return {
39-
daysUntilNextBirthday: daysUntilNextBirthday,
40-
daysUntilNextBirthdayGivenNow: daysUntilNextBirthdayGivenNow
41-
};
42-
43-
}));

assets/javascripts/main.js

Lines changed: 0 additions & 182 deletions
Original file line numberDiff line numberDiff line change
@@ -1,182 +0,0 @@
1-
(function(){
2-
var leoBirthday = new Date(document.getElementById('leo-birthday').getAttribute('data-leo-birthday'));
3-
4-
// Use shared days helper (CadeOLeoDays). Support require() in environments that have it.
5-
var DaysHelper = (typeof require === 'function') ? require('./lib/days') : (window.CadeOLeoDays || {});
6-
7-
var leoDaysUntilNextBirthday = 0;
8-
if (DaysHelper && typeof DaysHelper.daysUntilNextBirthday === 'function') {
9-
leoDaysUntilNextBirthday = DaysHelper.daysUntilNextBirthday(leoBirthday);
10-
} else if (window.CadeOLeoDays && typeof window.CadeOLeoDays.daysUntilNextBirthday === 'function') {
11-
leoDaysUntilNextBirthday = window.CadeOLeoDays.daysUntilNextBirthday(leoBirthday);
12-
}
13-
14-
var today = new Date();
15-
16-
var v = CadeOLeo.Ver.v(leoBirthday, today);
17-
18-
// console.log({leoBirthday});
19-
// console.log({leoDaysUntilNextBirthday});
20-
// console.log({today});
21-
// console.log({v});
22-
23-
document.getElementById('leo-version').innerText = v;
24-
25-
var languageDatepicker = "en";
26-
if (window.location.pathname !== '/index_en.html') {
27-
languageDatepicker = "pt-BR";
28-
}
29-
30-
$('.input-group > .date').datepicker({
31-
language: languageDatepicker,
32-
todayHighlight: true,
33-
autoclose: true,
34-
disableTouchKeyboard: true,
35-
immediateUpdates: true,
36-
todayBtn: 'linked'
37-
});
38-
39-
$("#dateEnd").datepicker("setDate", today);
40-
41-
var messageDaysUntil = {
42-
"pt-BR": {
43-
"title": "Quanto falta?",
44-
"content": [
45-
"Faltam",
46-
"dias",
47-
"pro niver do Léo!"
48-
]
49-
},
50-
"en": {
51-
"title": "How many days?",
52-
"content": [
53-
"There are",
54-
"days",
55-
"until Léo's birthday!"
56-
]
57-
}
58-
}
59-
60-
$(function () {
61-
62-
var content = '<div class="container">' +
63-
'<div class="row text-center">' +
64-
'<p style="font-size: 1em;">' + messageDaysUntil[languageDatepicker].content[0] + '</p>' +
65-
'<p style="font-size: 1.5em;">⏳🎊&nbsp;<span id="leo-days-until" style="font-size: 2em;">'+ leoDaysUntilNextBirthday +'</span>&nbsp;⏳🎊</p>' +
66-
'<p style="font-size: 1.5em;">' + messageDaysUntil[languageDatepicker].content[1] + '</p>' +
67-
'<p style="font-size: 1em;">' + messageDaysUntil[languageDatepicker].content[2] + '</p>' +
68-
' </div>' +
69-
' </div>';
70-
71-
72-
$('[data-toggle="popover"]').popover({
73-
trigger: 'focus',
74-
html: true,
75-
title: '<p class="text-center" style="padding: 0; margin: 0;">🎂🎈🎉' + messageDaysUntil[languageDatepicker].title + '🎂🎈🎉</p>',
76-
content: content,
77-
placement: 'bottom',
78-
delay: {
79-
show: 200,
80-
hide: 0
81-
},
82-
toggle: 'popover'
83-
});
84-
85-
});
86-
87-
function trigger() {
88-
c = CadeOLeo.Ver.v(
89-
$('#dateStart').datepicker('getUTCDate'),
90-
$('#dateEnd').datepicker('getUTCDate')
91-
);
92-
93-
if (c ==='vNaN.NaN.NaN') {
94-
c = 'v0.0.0';
95-
}
96-
97-
$('#result-version').text(c);
98-
JqueryFlash.flash($('#result-version'));
99-
100-
var dateStartString = $('#dateStart').datepicker('getDate').toISOString().substring(0, 10);
101-
var dateEndString = $('#dateEnd').datepicker('getDate').toISOString().substring(0, 10);
102-
103-
var url = getUrl() + '?d1=' + dateStartString
104-
+ '&d2=' + dateEndString;
105-
106-
var description = languageDatepicker != 'en' ?
107-
'Minha versão é ' + c + ' #CadeOLeo' :
108-
'My version is ' + c + ' #CadeOLeo';
109-
var buttonText = languageDatepicker != 'en' ?
110-
'Compartilhar' :
111-
'Share';
112-
113-
var share = new ShareButton({
114-
url: url,
115-
title: 'CadeOLeo',
116-
description: description,
117-
ui: {
118-
buttonText: buttonText
119-
},
120-
networks: {
121-
pinterest: {
122-
enabled: false
123-
},
124-
reddit: {
125-
enabled: false
126-
},
127-
linkedin: {
128-
enabled: false
129-
},
130-
email: {
131-
enabled: false
132-
}
133-
}
134-
});
135-
136-
share.open();
137-
138-
$('.this-share-button').show();
139-
}
140-
141-
$('.input-group > .date').on("changeDate", trigger);
142-
143-
function getUrlVars() {
144-
var vars = [], hash;
145-
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
146-
for (var i = 0; i < hashes.length; i++) {
147-
hash = hashes[i].split('=');
148-
vars.push(hash[0]);
149-
vars[hash[0]] = hash[1];
150-
}
151-
return vars;
152-
}
153-
154-
var queryObj = getUrlVars();
155-
156-
if (queryObj.d1 !== undefined) {
157-
if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(queryObj.d1)) {
158-
var d = queryObj.d1;
159-
var date = new Date(parseInt(d.substring(0,4)), parseInt(d.substring(5,7)) - 1, parseInt(d.substring(8,10)));
160-
161-
$("#dateStart").datepicker("setDate", date);
162-
trigger();
163-
}
164-
}
165-
166-
if (queryObj.d2 !== undefined) {
167-
if (/^[0-9]{4}-[0-9]{2}-[0-9]{2}$/.test(queryObj.d2)) {
168-
var d = queryObj.d2;
169-
var date = new Date(parseInt(d.substring(0,4)), parseInt(d.substring(5,7)) - 1, parseInt(d.substring(8,10)));
170-
171-
$("#dateEnd").datepicker("setDate", date);
172-
trigger();
173-
}
174-
}
175-
176-
function getUrl() {
177-
var url = window.location.href;
178-
179-
return url.indexOf('?') === -1 ? url : url.substring(0, url.indexOf('?'));
180-
}
181-
182-
})();

0 commit comments

Comments
 (0)