website
website copied to clipboard
Webpage source for https://covid-19.sledilnik.org
COVID-19 Sledilnik website
License
This software is licensed under GNU Affero General Public License.
Structure
folder | content |
---|---|
src/assets |
Static content (images, media files) |
src/components |
Reusable page components |
src/content |
Markdown content for static pages |
src/locales |
Translation resources |
src/pages |
Actual pages of website (each page is one component, StaticPage is reused with different content). Pages are rendered inside App component (in router-view ) |
src/App.vue |
Main app component (renders router-view ) |
src/main.js |
Webpack entrypoint |
.env |
Configurable values (Page name and description) |
Deployment
Overview of current deployments
Deployment is done using GitHub actions in .github/workflows
file | about |
---|---|
prod.yml | Deploy producition when GitHub release is created |
stage.yml | Deploy staging on every commit pushed to master |
pr.yml | Deploy PRs with label deploy-peview |
pr-cleanup.yml | Undeploy PRs when label is removed or PR closed |
Actions consist mostly of 3 jobs, test
, build
and deploy
. Each job depends
on previous job (needs
keyword in action's YAML). When deploy job finishes, it
also sends Slack notification to #devops chanel, and adds comment on PR (if PR
build)
Production
Production environment is deployed every time a new GitHub release is created.
Workflow .github/workflows/prod.yml
is responsible for deployment.
Staging
Staging environment
is deployed on every push to master
(if tests pass and build is successful).
Workflow .github/workflows/stage.yml
is responsible for deployment.
Use NOBUILD
keyworkd in commit message to skip build (and deploy) for this
commit (tests will still be ran). Use NODEPLOY
keyworkd in commit message to
skip deploy for this commit (image will still be build and pushed).
Preview deployment (pull requests)
Create PR from a branch (in this repo, not fork) to master. Label PR with
label deploy-preview
and wait few minutes. Deployment should be available
at https://pr-NUM.preview.sledilnik.org where NUM is number of your PR.
Only open PR with label deploy-preview
are deployed. When PR is closed or
label removed, deployment is stopped.
Development
What you need
- yarn
- node
- .net core https://dotnet.microsoft.com/download
- probably something I forgot
Project setup
yarn install
Compiles and hot-reloads for development
yarn run serve
Compiles and minifies for production
yarn run build
Run your tests
Not really that we have any tests
yarn run test
Lints and fixes files
yarn run lint
FSharpLint
FSharpLint is used to check the F#
code. In order to use it, you need to run build.bat
script, which will
- install FSharpLint locally (if it was not already installed),
- run it on the source code,
- run F# unit tests.
The configuration is stored in the fsharplint-config.json
file. You can find
more information on how to configure or suppress various rules
here.
Using FSharpLint in Rider
If you use JetBrains Rider as your IDE, you can integrate FSharpLint into your workflow inside IDE by following these steps:
- Make sure you have FSharpLint installed (see the above section).
- Click
File
|Settings
menu option. - In the Settings window, find
Tools
/External Tools
tree item. - Press on the plus (
+
) button to add a new external tool. - In the
Edit Tool
window, enter the following values:-
Name
:FSharpLint
-
Program
:dotnet
-
Arguments
:fsharplint --format msbuild lint -l fsharplint-config.json SloCovid19Website.sln
-
Advanced Options
: check all checkboxes -
Output filters
:$FILE_PATH$\($LINE$\,$COLUMN$\,.*
-
- Press
OK
button to confirm.
Now you should have a new menu item under Tools
| External Tools
| FSharpLint
.
Miscellaneous
Updating "highest values" countries lists
- Rebuild the solution.
- Run
Owid.Analyzer highest
in the command line. It should write out the new countries lists for the four categories.
Open slo-covid-19\website\src\visualizations\CountriesChartViz\CountrySets.fs
file in IDE.
- Replace existing countries lists with the ones returned by the tool. Example,
in the following line, replace the value of
CountriesCodes
array with the new values:
let setHighestNewCases = {
Label = "groupHighestNewCases"
CountriesCodes = [| "URY"; "BHR"; "ARG"; "COL"; "MNG"; "PRY"; "CHL"; "KWT"; "NAM"; "CRI" |]
}
- Rebuild, test and commit.
Resources
- vue (framework) https://vuejs.org/v2/guide/
- vue-router (view routing) https://router.vuejs.org/
- vue-bootstrap (styled components) https://bootstrap-vue.js.org/
- webpack (bundler) https://webpack.js.org/concepts/