Refactor
This commit is contained in:
phntxx
parent
9fef36eae3
commit
8e3dd6e77d
19 changed files with 327 additions and 335 deletions
339
README.md
339
README.md
|
|
@ -1,33 +1,61 @@
|
|||
# Dashboard
|
||||
|
||||
## IMPORTANT: UPDATE
|
||||
|
||||
Yesterday, an update has been released that changed a couple of things:
|
||||
|
||||
- The serving port has been changed from `3000` to `8080`.
|
||||
- The structure of `imprint.json` has been changed. Make sure that the format of your `imprint.json`-file matches the format of the ones within this repository.
|
||||
|
||||
|
||||
|
||||
Dashboard is just that - a dashboard. It's inspired by [SUI](https://github.com/jeroenpardon/sui) and has all the same features as SUI, such as simple customization through JSON-files and a handy search bar to search the internet more efficiently.
|
||||
|
||||
## Features
|
||||
|
||||
So what makes this thing better than SUI?
|
||||
So what makes this project different from (or even better than) SUI?
|
||||
|
||||
- "Display URL" functionality, in case the URL you want to show is different than the URL you want to be redirected to
|
||||
- Theming through JSON
|
||||
- Search providers customizable through JSON (SUI has them both in a JSON and hardcoded)
|
||||
- "Display URL" functionality (The URL displayed for apps can differ from the actual URL)
|
||||
- Categorization for apps
|
||||
- Themes and search providers can be changed using JSON
|
||||
- Imprint functionality
|
||||
|
||||
## Installation
|
||||
|
||||
Getting Dashboard to run is fairly simple and can be accomplished with two techniques:
|
||||
The recommended way of installation is using [Docker](https://docker.com). You could also build your own version from source, but do proceed at your own risk.
|
||||
|
||||
1. Locally
|
||||
### Docker
|
||||
|
||||
Prerequisites: yarn, npm, node
|
||||
The Docker image is built on top of [this image](https://github.com/ratisbona-coding/nginx-cloudflare-cache), as it's based on Nginx and also provides functionality to purge the Cloudflare cache every time the container restarts (though this functionality is entirely optional).
|
||||
|
||||
1. Using the Docker CLI:
|
||||
|
||||
```sh
|
||||
$ docker run -d \
|
||||
-e CLOUDFLARE_ZONE_ID=[OPTIONAL CLOUDFLARE V4 ZONE ID] \
|
||||
-e CLOUDFLARE_PURGE_TOKEN=[OPTIONAL CLOUDFLARE PURGE TOKEN] \
|
||||
-v $(pwd)/data:/app/data
|
||||
-p 8080:8080 \
|
||||
--name dashboard \
|
||||
phntxx/dashboard
|
||||
```
|
||||
|
||||
2. Using Docker-Compose:
|
||||
|
||||
```yml
|
||||
version: "3"
|
||||
|
||||
services:
|
||||
dashboard:
|
||||
image: phntxx/dashboard:latest
|
||||
restart: unless-stopped
|
||||
environment:
|
||||
- CLOUDFLARE_ZONE_ID=[OPTIONAL CLOUDFLARE V4 ZONE ID]
|
||||
- CLOUDFLARE_PURGE_TOKEN=[OPTIONAL CLOUDFLARE PURGE TOKEN]
|
||||
volumes:
|
||||
- [path to data directory]:/app/data
|
||||
ports:
|
||||
- 8080:8080
|
||||
```
|
||||
|
||||
### Compile from source
|
||||
|
||||
I really don't anticipate people to use this, so go forth at your own risk.
|
||||
|
||||
```bash
|
||||
$ git clone https://github.com/phntxx/dashboard.git
|
||||
$ cd dashboard/
|
||||
$ yarn
|
||||
|
|
@ -35,196 +63,137 @@ $ yarn build
|
|||
$ yarn serve:production
|
||||
```
|
||||
|
||||
2. Using Docker
|
||||
## Configuration
|
||||
|
||||
```
|
||||
$ docker run -d \
|
||||
-v $(pwd)/data:/app/data
|
||||
-p 8080:8080 \
|
||||
--name dashboard \
|
||||
phntxx/dashboard
|
||||
```
|
||||
There's a couple of things you can / need to configure to get Dashboard to look and behave just as you want it to.
|
||||
|
||||
Sample Docker Compose configuration:
|
||||
If you don't require a specific component, just remove the file from your `data`-directory. Dashboard won't render the components whose files are not present. With no files present, only the greeter will be shown.
|
||||
|
||||
```
|
||||
version: "3"
|
||||
### Apps
|
||||
|
||||
services:
|
||||
dashboard:
|
||||
image: phntxx/dashboard:latest
|
||||
restart: unless-stopped
|
||||
volumes:
|
||||
- [path to data directory]:/app/data
|
||||
ports:
|
||||
- 8080:8080
|
||||
```
|
||||
To show the apps you want to show, change `apps.json` to resemble the following:
|
||||
|
||||
**Note: You might still need to clone the repository in order to get the JSON-files which are required for the
|
||||
app to run**
|
||||
|
||||
## Customization
|
||||
|
||||
Dashboard is designed to be customizable. Everything is handled using four .json-files, which can be found at /src/components/data
|
||||
|
||||
### Applications
|
||||
|
||||
To add an application, append the following to apps.json or simply edit one of the examples given.
|
||||
|
||||
```
|
||||
```json
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
"categories": [
|
||||
{
|
||||
"name": "[Name of the category]",
|
||||
"items": [
|
||||
{
|
||||
"name": "[Name of the app]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
...
|
||||
]
|
||||
},
|
||||
...
|
||||
],
|
||||
"apps": [
|
||||
{
|
||||
"name": "[Name of the app]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
...
|
||||
```
|
||||
|
||||
Wherein either `apps` or `categories` can be omitted as needed.
|
||||
|
||||
To find icons, simply go to the [Material Design Icon Library](https://material.io/icons/) and copy one of the codes for an icon there.
|
||||
|
||||
**NEW FEATURE: CATEGORIES**
|
||||
|
||||
To add a category to your dashboard, change apps.json to resemble the following:
|
||||
|
||||
```
|
||||
{
|
||||
"categories": [
|
||||
...
|
||||
],
|
||||
"apps": [
|
||||
...
|
||||
]
|
||||
}
|
||||
|
||||
```
|
||||
|
||||
Then, a category can be added by entering the following within the "categories" field:
|
||||
|
||||
```
|
||||
{
|
||||
"name": "[Name of the category]",
|
||||
"items": [
|
||||
[Application goes here]
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
In the end, your apps.json file should look something like this:
|
||||
|
||||
1. Without categories
|
||||
|
||||
```
|
||||
{
|
||||
"apps": [
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
2. With apps and categories
|
||||
|
||||
```
|
||||
{
|
||||
"categories": [
|
||||
{
|
||||
"name": "[Name of the category]",
|
||||
"items": [
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
...
|
||||
]
|
||||
},
|
||||
...
|
||||
],
|
||||
"apps": [
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
{
|
||||
"name": "[Name of the Application]",
|
||||
"displayURL": "[URL you want to show]",
|
||||
"URL": "[URL to redirect to]",
|
||||
"icon": "[Icon code]"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Bookmarks
|
||||
|
||||
To add a bookmark, append the following to bookmarks.json or simply edit one of the examples given.
|
||||
To show bookmarks, `bookmarks.json` needs to resemble the following:
|
||||
|
||||
```
|
||||
```json
|
||||
{
|
||||
"name": "[Category name]",
|
||||
"items": [
|
||||
{
|
||||
"name": "[Bookmark name]",
|
||||
"url": "[URL to redirect to]"
|
||||
},
|
||||
{
|
||||
"name": "[Bookmark name]",
|
||||
"url": "[URL to redirect to]"
|
||||
},
|
||||
{
|
||||
"name": "[Bookmark name]",
|
||||
"url": "[URL to redirect to]"
|
||||
}
|
||||
...
|
||||
]
|
||||
},
|
||||
...
|
||||
```
|
||||
|
||||
### Theming:
|
||||
|
||||
Dashboard also supports themes with the help of a simple JSON-file: themes.json. To add a theme, append the following to themes.json:
|
||||
|
||||
```
|
||||
{
|
||||
"label": "[Theme Name]",
|
||||
"value": [Number of the theme],
|
||||
"mainColor": "[Main Color as 6-character hex code]",
|
||||
"accentColor": "[Accent Color as 6-character hex code]",
|
||||
"backgroundColor": "[Background Color as 6-character hex code]"
|
||||
"groups": [
|
||||
{
|
||||
"name": "[Group Name]",
|
||||
"items": [
|
||||
{
|
||||
"name": "[Bookmark Name]",
|
||||
"url": "[Bookmark URL]"
|
||||
},
|
||||
...
|
||||
]
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Search Providers:
|
||||
### Themes
|
||||
|
||||
The searchbar on the top supports shortcuts like "/so", just as SUI does. To add one of your own, simply append the following to search.json
|
||||
In order to customize theming, `themes.json` needs to resemble this:
|
||||
|
||||
```
|
||||
```json
|
||||
{
|
||||
"name":"[Name of the website]",
|
||||
"url":"[Link that processes searches on that website]",
|
||||
"prefix":"[a custom prefix]"
|
||||
},
|
||||
"themes": [
|
||||
{
|
||||
"label": "[Theme Name]",
|
||||
"value": "[Number of the theme]",
|
||||
"mainColor": "[Main Color as 6-character hex code]",
|
||||
"accentColor": "[Accent Color as 6-character hex code]",
|
||||
"backgroundColor": "[Background Color as 6-character hex code]"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Search Providers
|
||||
|
||||
For search providers to work, make sure your `search.json` resembles the following:
|
||||
|
||||
```json
|
||||
{
|
||||
"providers": [
|
||||
{
|
||||
"name": "[Name of the website]",
|
||||
"url": "[Link that processes searches on that website]",
|
||||
"prefix": "[A custom prefix (e.g. '/test')]"
|
||||
},
|
||||
...
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
### Imprint
|
||||
|
||||
In order for the imprint-modal to show up, make sure your `imprint.json` resembles the following:
|
||||
|
||||
```json
|
||||
{
|
||||
"imprint": {
|
||||
"name": {
|
||||
"text": "[Name]",
|
||||
"link": "[Link to the name (to e.g. a portfolio)]"
|
||||
},
|
||||
"address": {
|
||||
"text": "[Address]",
|
||||
"link": "[Link for the address (to e.g. Google Maps)]"
|
||||
},
|
||||
"phone": {
|
||||
"text": "[Phone number]",
|
||||
"link": "[Link for the phone number]"
|
||||
},
|
||||
"email": {
|
||||
"text": "[Email address]",
|
||||
"link": "[Link for the email address (e.g. for 'mailto')]"
|
||||
},
|
||||
"url": {
|
||||
"text": "[URL]",
|
||||
"link": "[Link for the URL]"
|
||||
},
|
||||
"text": "[Text for the imprint]"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
> :exclamation: I haven't quite tested this. I'm not a lawyer and I'm not responsible if you're sued for using this incorrectly.
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue