Shows a predefined inspiration message of the day.
The inspiration-app will require Node.js. See guide
$ curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash -
$ sudo apt-get install -y nodejs
The JavaScript-Frameworks Vue.js and Vue Router will be used. See guide
$ npm init vue@latest
The console.log output should removed in deployment. See guide
$ npm install vite-plugin-remove-console -D
The npm daemon's from the Makefile
are managed by pm2 globaly. See guide - Note: This is optional, otherwise you have to start npm manually (npm run dev
or npm run preview
).
$ sudo npm install pm2 -g
Tests with screenshots are done with percy and python-selenium. See guide - Note: This is optional, otherwise make test
adds no value.
$ sudo apt install python3-pip firefox-geckodriver
$ pip install percy-selenium
inspiration-app$ npm install --save-dev @percy/cli
Quick start development after git clone
$ npm ci
$ cd inspiration-app
$ npm run dev
Start a daemon for compile and hot-reload in development on [http://localhost:3000/]
$ make dev
Start daemon for preview with added branding before production on [http://localhost:4173/]
$ make prod
Run the tests with screenshots
$ export PERCY_TOKEN=[your-projects-token]
$ make test
Now, you just need to put the dist
directory on a web server.
$ make install
Just edit quotes.js
and write in your quotes.
With LibreOffice Calc it is a little bit easier:
- create a list of all days
day | author | message |
---|---|---|
1-jan | demo | Hello Vue.js! |
2-feb | ||
15-aug | ||
31-dec |
- run a macro to export all quotes to json: OpenOffice Export to JSON
For quotes on "happiness", the result might look like:
const quotesjs = {
happiness: [
{
message: 'Hello Vue.js!',
author: 'demo',
day: '1-jan'
}, {
message: '',
author: '',
day: '1-feb'
}, {
message: '',
author: '',
day: '15-aug'
}, {
message: '',
author: '',
day: '31-dec'
}
]
}
export default quotesjs
- Tag für Tag Glück, ISBN 978-3625117957
- Tag für Tag Liebe, ISBN 978-3625117964