Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feature: Implements Configuration Validation #13

Merged
merged 7 commits into from
Jun 6, 2021
Merged

Feature: Implements Configuration Validation #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
bd3dd6b
Adds initializing screen
Lissy93 Jun 5, 2021
ea35f3a
Wrote a schema, to help users validate their app config
Lissy93 Jun 5, 2021
f3381a6
Wrote a script to validate user config against schema
Lissy93 Jun 5, 2021
d27fbaa
Wrote a script to validate user config against schema
Lissy93 Jun 5, 2021
7d5a99d
Calls config validator when serve starts, and adds documentation in r…
Lissy93 Jun 5, 2021
89ac1d1
Implemented config validation into the JSON editor
Lissy93 Jun 6, 2021
0f7bdec
Final touches to the schema validator and JSON editor
Lissy93 Jun 6, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 14 additions & 2 deletions README.md
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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
View file
Open in desktop
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