Skip to content

Commit

Permalink
Merge pull request #13 from Lissy93/feature-config-validator
Browse files Browse the repository at this point in the history
Feature: Implements Configuration Validation.

- Writes a JSON schema
- Uses Ajv to validate users config against schema
- Implements validation into the build process
- Implements validation into the JSON editor in the UI
- Updates the readme
  • Loading branch information
Lissy93 authored Jun 6, 2021
2 parents 10cc57a + 0f7bdec commit dbafa2f
Show file tree
Hide file tree
Showing 9 changed files with 10,071 additions and 9,513 deletions.
16 changes: 14 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@

### Deploying from Docker Hub 🐳

You will need [Docker](https://docs.docker.com/get-docker/) installed on your system

```docker
docker run -d \
-p 8080:80 \
Expand All @@ -50,16 +52,20 @@ docker run -d \
--restart=always \
lissy93/dashy:latest
```
After making changes to your configuration file, you will need to run: `docker exec -it [container-id] yarn build` to rebuild. Container ID can be found by running `docker ps`
After making changes to your configuration file, you will need to run: `docker exec -it [container-id] yarn build` to rebuild. You can also run other commands, such as `yarn validate-config` this way too. Container ID can be found by running `docker ps`.

### Deploying from Source 🚀

You will need both [git](https://git-scm.com/downloads) and the latest or LTS version of [Node.js](https://nodejs.org/) installed on your system

- Get Code: `git clone git@github.com:Lissy93/dashy.git` and `cd dashy`
- Configuration: Fill in you're settings in `./public/conf.yml`
- Install dependencies: `yarn`
- Build: `yarn build`
- Run: `yarn start`

After making changes to your configuration file, you will need to run: `yarn build` to rebuild
After making changes to your configuration file, you will need to run: `yarn build` to rebuild.
You can check that your config is valid, and matches the schema by running `yarn validate-config`

### Developing 🧱
- Get Code: `git clone git@github.com:Lissy93/dashy.git` and `cd dashy`
Expand All @@ -80,8 +86,12 @@ Configuration files are located in [`./public/`](https://github.com/Lissy93/dash

Also within `./public` you'll find normal website assets, including `favicon.ico`, `manifest.json`, `robots.txt` and `web-icons/*`. There's no need to modify these, but you can do so if you wish.

If you are using Docker, than these directories are located in `/app/public/*`. You can mount a file or directory from your host system into the container using the `--volume` flag. For example, to pass a single YAML config file in, use: `-v /root/my-local-conf.yml:/app/public/conf.yml`

Note that the conf.yml file is where all config is read from. If you make any modifications through the web interface, you will need to export them into this file in order for your changes to persist. Since the app is compiled for faster loading, you will need to rebuild it with `yarn build` (or `docker exec -it [container-id] yarn build` of you're using Docker)

You can validate your configuration by running `yarn validate-config`. This will ensure that it is valid YAML, and that the data inside it matches Dashy's schema. You can view the JSON schema [here](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.js). Dashy may still run with an invalid config, but it could result in unexpected behavior.

### The Conf File 📄

All app config is specified in [`/public/conf.yml`](https://github.com/Lissy93/dashy/blob/master/public/conf.yml) (in [YAML Format](https://yaml.org/)).
Expand Down Expand Up @@ -140,6 +150,7 @@ Note about `rows` and `cols`: These are defined as a proportion of the screen (r
- To automatically fetch an icon from items URL, just set icon field to `favicon`
- To use a Font-Awesome icon, specify the category (`fas`, `fab`, `far`, `fal` or`fad`), followed by a space then `fa-` and the icon name. For example: `fas fa-rocket`, `fab fa-monero`, `fal fa-duck` or `fad fa-glass-whiskey-rocks`. Note that light (`fal`) and duotone (`fad`) icons are only available with Font Awesome Pro, to use this, you need to set you're kit ID under `appConfig.fontAwesomeKey`.

You can run `yarn validate-config` to check that your config file is valid and matches the schema.

### Theming 🎨

Expand Down Expand Up @@ -196,6 +207,7 @@ This wouldn't have been quite so possible without the following components, kudo
Utils:
- [`crypto-js`](https://github.com/brix/crypto-js) - Encryption implementations by @evanvosberg and community `MIT`
- [`axios`](https://github.com/axios/axios) - Promise based HTTP client by @mzabriskie and community `MIT`
- [`ajv`](https://github.com/ajv-validator/ajv) - JSON schema Validator by @epoberezkin and community `MIT`

And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)

Expand Down
7 changes: 5 additions & 2 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,12 @@
"build": "vue-cli-service build",
"lint": "vue-cli-service lint --fix",
"build-watch": "vue-cli-service build --watch",
"build-and-start": "npm-run-all --parallel build start"
"build-and-start": "npm-run-all --parallel build start",
"validate-config": "node src/utils/ConfigValidator"
},
"dependencies": {
"ajv": "^8.5.0",
"ajv7": "npm:ajv@^7.2.2",
"axios": "^0.21.1",
"connect": "^3.7.0",
"crypto-js": "^4.0.0",
Expand Down Expand Up @@ -74,4 +77,4 @@
"> 1%",
"last 2 versions"
]
}
}
128 changes: 128 additions & 0 deletions public/default.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,128 @@
<!doctype html>
<html>

<head>
<title>Dashy</title>
<meta name="description" content="Welcome to Dashy">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap" rel="stylesheet">
</head>

<body>
<svg viewbox="0 0 100 20">
<defs>
<linearGradient id="gradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="5%" stop-color="#00CCB4" />
<stop offset="95%" stop-color="#1186cf" />
</linearGradient>
<pattern id="wave" x="0" y="0" width="120" height="20" patternUnits="userSpaceOnUse">
<path id="wavePath" d="M-40 9 Q-30 7 -20 9 T0 9 T20 9 T40 9 T60 9 T80 9 T100 9 T120 9 V20 H-40z"
mask="url(#mask)" fill="url(#gradient)">
<animateTransform attributeName="transform" begin="0s" dur="3s" type="translate" from="0,0" to="40,0"
repeatCount="indefinite" />
</path>
</pattern>
</defs>
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#wave)" fill-opacity="0.8">Dashy</text>
<text text-anchor="middle" x="50" y="15" font-size="17" fill="url(#gradient)" fill-opacity="0.5">Dashy</text>
</svg>
<div>
<h2>Initializing</h2>
<span class="dots-cont">
<span class="dot dot-1"></span>
<span class="dot dot-2"></span>
<span class="dot dot-3"></span>
<span class="dot dot-4"></span>
</span>
</div>

<style lang="css">
body,
html {
margin: 0;
padding: 0;
height: 100%;
}

body {
background: #141b33;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

svg {
font-family: 'Fredoka One', 'Cabin Condensed', 'Courier New', Courier, monospace;
font-weight: bold;
max-width: 80%;
height: auto;
}

h2 {
color: #fff;
font-family: 'Courier New', Courier, monospace;
display: inline;
}

.dots-cont {
display: inline;
}

.dot {
width: 4px;
height: 4px;
background: #fff;
display: inline-block;
border-radius: 35%;
right: 0px;
bottom: 0px;
margin: 0px 2.5px;
position: relative;
animation: jump 1s infinite;
}

.dots-cont .dot-1 {
-webkit-animation-delay: 100ms;
animation-delay: 100ms;
}

.dots-cont .dot-2 {
-webkit-animation-delay: 200ms;
animation-delay: 200ms;
}

.dots-cont .dot-3 {
-webkit-animation-delay: 300ms;
animation-delay: 300ms;
}

.dots-cont .dot-4 {
-webkit-animation-delay: 400ms;
animation-delay: 400ms;
}

@keyframes jump {
0% {
bottom: 0px;
}

20% {
bottom: 5px;
}

40% {
bottom: 0px;
}
}
</style>

<script>
setTimeout(() => { location.reload(); }, 10000);
</script>
</body>

</html>
9 changes: 9 additions & 0 deletions server.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,8 @@ const util = require('util');
const dns = require('dns');
const os = require('os');

require('./src/utils/ConfigValidator');

const port = process.env.PORT || 80;

/* eslint no-console: 0 */
Expand Down Expand Up @@ -56,9 +58,16 @@ const overComplicatedMessage = (ip, port) => {
return msg;
}

function send404(req, res) {
// send your 404 here
res.statusCode = 404
res.end('nothing here!')
}

try {
connect()
.use(serveStatic(`${__dirname}/dist`))
.use(serveStatic(`${__dirname}/public`, { index: 'default.html' }))
.listen(port, () => {
try { printWelcomeMessage(port); }
catch (e) { console.log('Dashy is Starting...'); }
Expand Down
2 changes: 1 addition & 1 deletion src/components/Configuration/ConfigContainer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@
</div>
</TabItem>
<TabItem name="Edit Sections">
<JsonEditor :sections="sections" />
<JsonEditor :config="config" />
</TabItem>
<TabItem name="Edit Site Meta">
<EditSiteMeta :config="config" />
Expand Down
Loading

0 comments on commit dbafa2f

Please sign in to comment.