From f41b638a879d95e4550823b816dd2587a5603013 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 21:58:10 +0100 Subject: [PATCH 1/8] :art: Brand new Large icon layout --- src/components/LinkItems/Item.vue | 40 +++++++++++++++++++++++++++---- 1 file changed, 36 insertions(+), 4 deletions(-) diff --git a/src/components/LinkItems/Item.vue b/src/components/LinkItems/Item.vue index 6bc9ba40a0..2392992036 100644 --- a/src/components/LinkItems/Item.vue +++ b/src/components/LinkItems/Item.vue @@ -210,6 +210,7 @@ export default { &:hover { box-shadow: var(--item-hover-shadow); background: var(--item-background-hover); + color: var(--item-text-color-hover); position: relative; .tile-title span.text { white-space: pre-wrap; @@ -274,12 +275,14 @@ export default { /* Specify layout for alternate sized icons */ .item { + /* Small Tile Specific Themes */ &.size-small { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: center; height: 2rem; + padding-top: 4px; div img, div svg.missing-image { width: 2rem; } @@ -294,6 +297,7 @@ export default { } } } + /* Medium Tile Specific Themes */ &.size-medium { display: flex; flex-direction: column; @@ -308,14 +312,42 @@ export default { max-width: 160px; } } + /* Large Tile Specific Themes */ &.size-large { - height: 100px; + display: flex; + flex-direction: row-reverse; + justify-content: flex-end; + text-align: left; + overflow: hidden; + align-items: center; + max-height: 6rem; + margin: 0.2rem; + padding: 0.5rem; + img { + padding: 0.1rem 0.25rem; + } + .tile-title { + height: auto; + padding: 0.1rem 0.25rem; + span.text { + position: relative; + font-weight: bold; + font-size: 1.1rem; + width: 100%; + } + p.description { + display: block; + margin: 0; + white-space: pre-wrap; + font-size: .9em; + text-overflow: ellipsis; + } + } } - p.description { - display: none; + display: none; // By default, we don't show the description } - &:before { + &:before { // Certain themes (e.g. material) show css animated fas icon on hover display: none; font-family: FontAwesome; content: var(--open-icon, "\f054") !important; From d71d980c1a6f84e6c88fc1e21d217d176d21a272 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:38:48 +0100 Subject: [PATCH 2/8] :lipstick: 2 new color themes, vapourwave and cyberpunk --- src/styles/color-themes.scss | 62 +++++++++++++++++++++++++++++++++++- src/utils/defaults.js | 2 ++ 2 files changed, 63 insertions(+), 1 deletion(-) diff --git a/src/styles/color-themes.scss b/src/styles/color-themes.scss index 350dca4466..ed60df950c 100644 --- a/src/styles/color-themes.scss +++ b/src/styles/color-themes.scss @@ -97,6 +97,39 @@ html[data-theme='matrix'] { } } +html[data-theme='blue-purple'] { + --primary: #54dbf8; + --background: #e5e8f5; + --background-darker: #5346f3; + --font-headings: 'Sniglet', cursive; + + --dimming-factor: 0.8; + --curve-factor: 6px; + + --settings-text-color: var(--background-darker); + --item-text-color: var(--background-darker); + --item-background: var(--white); + --item-background-hover: var(--primary); + + --item-group-heading-text-color: var(--background-darker); + --item-group-background: var(--background); + --footer-text-color: var(--white); + --context-menu-background: var(--white); + --context-menu-color: var(--background-darker); + --context-menu-secondary-color: var(--primary); + + .item { + box-shadow: none; + border: 1px solid var(--background-darker); + } + section.filter-container form label { + color: var(--primary); + } + footer { + color: var(--white); + } +} + html[data-theme='hacker-girl'] { --background: #000; --background-darker: #000; @@ -658,7 +691,8 @@ html[data-theme='vaporware'] { --curve-factor: 2px; --curve-factor-navbar: 6px; --login-form-color: #09bfe6; - + --config-settings-background: #100e2c; + .home { background: linear-gradient(180deg, rgba(16,14,44,1) 10%, rgba(27,24,79,1) 40%, rgba(16,14,44,1) 100%); } @@ -719,4 +753,30 @@ html[data-theme='vaporware'] { // background-size: cover; // div.home { background: none; } // } +} + +html[data-theme='cyberpunk'] { +--pink: #ff2a6d; +--pale: #d1f7ff; +--aqua: #05d9e8; +--teal: #005678; +--blue: #01012b; +--gold: #ebeb0f; + +--primary: var(--gold); +--background: var(--blue); +--background-darker: var(--pink); +--heading-text-color: var(--blue); +--nav-link-background-color-hover: var(--blue); +--nav-link-text-color-hover: var(--pink); +--nav-link-border-color-hover: var(--blue); +--config-settings-background: var(--blue); +--config-settings-color: var(--pink); +--search-label-color: var(--blue); +--item-group-background: var(--blue); +--item-text-color: var(--pale); +--scroll-bar-color: var(--aqua); +--scroll-bar-background: var(--teal); +--footer-background: var(--aqua); +--font-headings: 'Audiowide', cursive; } \ No newline at end of file diff --git a/src/utils/defaults.js b/src/utils/defaults.js index 370d89711f..7e39e47a01 100644 --- a/src/utils/defaults.js +++ b/src/utils/defaults.js @@ -31,8 +31,10 @@ module.exports = { 'raspberry-jam', 'bee', 'tiger', + 'blue-purple', 'material-original', 'material-dark-original', + 'cyberpunk', 'vaporware', 'high-contrast-dark', 'high-contrast-light', From 75fd1347acc23738000b7304404bb159d41d0fda Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:39:40 +0100 Subject: [PATCH 3/8] :art: Extract variable for Footer and Search label --- src/components/PageStrcture/Footer.vue | 2 +- src/components/Settings/SearchBar.vue | 2 +- src/styles/color-palette.scss | 3 +++ 3 files changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/PageStrcture/Footer.vue b/src/components/PageStrcture/Footer.vue index c235f77fbb..7752969236 100644 --- a/src/components/PageStrcture/Footer.vue +++ b/src/components/PageStrcture/Footer.vue @@ -36,7 +36,7 @@ footer { text-align: center; color: var(--medium-grey); opacity: var(--dimming-factor); - background: var(--background-darker); + background: var(--footer-background); margin-top: 1.5rem; border-top: 1px solid var(--outline-color); @include tablet-down { diff --git a/src/components/Settings/SearchBar.vue b/src/components/Settings/SearchBar.vue index 7b38f9025b..0083c21f22 100644 --- a/src/components/Settings/SearchBar.vue +++ b/src/components/Settings/SearchBar.vue @@ -83,7 +83,7 @@ export default { background: var(--search-container-background); label { display: inline; - color: var(--settings-text-color); + color: var(--search-label-color); margin: 0.5rem; display: inline; } diff --git a/src/styles/color-palette.scss b/src/styles/color-palette.scss index bb90b2d2ef..7b0f049736 100644 --- a/src/styles/color-palette.scss +++ b/src/styles/color-palette.scss @@ -42,6 +42,7 @@ --nav-link-border-color: transparent; --nav-link-border-color-hover: var(--primary); --item-text-color: var(--primary); + --item-text-color-hover: var(--item-text-color); --item-group-outer-background: var(--primary); --item-group-heading-text-color: var(--item-group-background); --item-group-heading-text-color-hover: var(--background); @@ -49,8 +50,10 @@ --settings-text-color: var(--primary); --search-container-background: var(--background-darker); --search-field-background: var(--background); + --search-label-color: var(--settings-text-color); --footer-text-color: var(--medium-grey); --footer-text-color-link: var(--primary); + --footer-background: var(--background-darker); --welcome-popup-background: var(--background-darker); --welcome-popup-text-color: var(--primary); --config-code-background: #fff; From fe9f9f664a5c5bc71a85b842f7e30876e11fbd47 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:40:46 +0100 Subject: [PATCH 4/8] :zap: Improves the process for auto checking if Font-Awesome needed --- src/views/Home.vue | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/views/Home.vue b/src/views/Home.vue index 1ae9d0da68..a55399a1c7 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -160,13 +160,17 @@ export default { }, /* Checks if any of the icons are Font Awesome glyphs */ checkIfFontAwesomeNeeded() { - let isFound = false; + let isNeeded = false; + if (!this.sections) return false; this.sections.forEach((section) => { + if (section.icon && section.icon.includes('fa-')) isNeeded = true; section.items.forEach((item) => { - if (item.icon && item.icon.includes('fa-')) isFound = true; + if (item.icon && item.icon.includes('fa-')) isNeeded = true; }); }); - return isFound; + const currentTheme = localStorage[localStorageKeys.THEME]; // Some themes require FA + if (['material', 'material-dark'].includes(currentTheme)) isNeeded = true; + return isNeeded; }, /* Injects font-awesome's script tag, only if needed */ initiateFontAwesome() { From b065a5483281565dd888dabf868e4ce6b80be19f Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:42:29 +0100 Subject: [PATCH 5/8] :symbols: Adds new optional font-face, for cyberpunk --- src/styles/typography.scss | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/styles/typography.scss b/src/styles/typography.scss index 9f5d4f8380..6d8407d937 100644 --- a/src/styles/typography.scss +++ b/src/styles/typography.scss @@ -57,4 +57,7 @@ html { @import url('https://fonts.googleapis.com/css2?family=Allerta+Stencil&display=swap'); /* Jam */ -@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap'); \ No newline at end of file +@import url('https://fonts.googleapis.com/css2?family=Sniglet&display=swap'); + +/* Cyber Punk */ +@import url('https://fonts.googleapis.com/css2?family=Audiowide&display=swap'); \ No newline at end of file From 0aa17203be8e2026b53d1e0589e0a3af445266ae Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:43:55 +0100 Subject: [PATCH 6/8] :fire: Silences non-critical warnings in production --- vue.config.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/vue.config.js b/vue.config.js index a6d2c576cd..95d791e720 100644 --- a/vue.config.js +++ b/vue.config.js @@ -9,8 +9,8 @@ module.exports = { chainWebpack: config => { config.module.rules.delete('svg'); }, - configureWebpack: { + performance: { hints: false }, module: { rules: [ { test: /.svg$/, loader: 'vue-svg-loader' }, @@ -26,12 +26,12 @@ module.exports = { }), ], }, - pwa: { name: 'Dashy', manifestPath: './manifest.json', themeColor: '#00af87', msTileColor: '#0b1021', + mode: 'production', iconPaths: { manifestCrossorigin: 'use-credentials', favicon64: './web-icons/favicon-64x64.png', From d99f56b913d5eaa01c8be9df87fc88ae913ab1f0 Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:54:52 +0100 Subject: [PATCH 7/8] :memo: Shortens readme, and adds contribute links to showcase --- README.md | 29 +++++++++++++++++------------ docs/showcase.md | 4 ++-- 2 files changed, 19 insertions(+), 14 deletions(-) diff --git a/README.md b/README.md index f7707caf03..3c086dd396 100644 --- a/README.md +++ b/README.md @@ -18,12 +18,11 @@ - Instant search by name, domain and tags - just start typing - Full keyboard shortcuts for navigation, searching and launching - Multiple color themes, with easy method for adding more -- Customizable layout options, and item sizes -- Quickly preview a website, by holding down the Alt key while clicking, to open it in a resizable pop-up modal +- Easy to customize every part of your dashboard, layout, icon sizes and colors etc - Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon - Option to show service status for each of your apps / links, for basic availability and uptime monitoring -- Additional info for each item visible on hover (including opening method icon and description as a tooltip) -- Option for full-screen background image, custom nav-bar links, and custom footer text +- Multiple ways of opening apps, either in your browser, a pop-up modal or workspace view +- Option for full-screen background image, custom nav-bar links, html footer, title, and more - Encrypted cloud backup and restore feature available - Optional authentication, requiring user to log in - Easy single-file YAML-based configuration @@ -77,8 +76,8 @@ docker run -d \ --restart=always \ lissy93/dashy:latest ``` -Healthchecks are pre-configured to monitor the uptime and response times of Dashy, and the status of which can be seen in the container logs, e.g. `docker inspect --format "{{json .State.Health }}" [container-id]`. +You can also build the Docker container from source, by cloning the repo, cd'ing into it and running `docker build .` and `docker compose up`. #### 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 @@ -91,7 +90,7 @@ You will need both [git](https://git-scm.com/downloads) and the latest or LTS ve #### Deploy to the Cloud -Dashy supports 1-Click deployments on several popular cloud platforms (with more on the way!). To get started, just click a link below: +Dashy supports 1-Click deployments on several popular cloud platforms. To get started, just click a link below: - [Deploy to Netlify](https://app.netlify.com/start/deploy?repository=https://github.com/lissy93/dashy) - [Deploy to Heroku](https://heroku.com/deploy?template=https://github.com/Lissy93/dashy) - [Deploy with Vercel](https://vercel.com/new/project?template=https://github.com/lissy93/dashy) @@ -99,8 +98,7 @@ Dashy supports 1-Click deployments on several popular cloud platforms (with more #### Basic Commands -The following commands can be run on Dashy. If you are using Docker, than precede each command with `docker exec -it [container-id]`, where container id can be found by running `docker ps`, e.g. `docker exec -it 92490c12baff yarn build`. -If you prefer [`NPM`](https://docs.npmjs.com), then just replace `yarn` with `npm run` in the following commands. +The following commands can be run on Dashy. - `yarn build` - Builds the project for production, and outputs it into `./dist` - `yarn start` - Starts a web server, and serves up the production site from `./dist` @@ -112,6 +110,11 @@ If you prefer [`NPM`](https://docs.npmjs.com), then just replace `yarn` with `np - `yarn test` - Runs tests, and outputs results - `yarn install` - Install all dependencies +If you are using Docker, than precede each command with `docker exec -it [container-id]`, where container id can be found by running `docker ps`, e.g. `docker exec -it 92490c12baff yarn build`. +If you prefer [`NPM`](https://docs.npmjs.com), then just replace `yarn` with `npm run` in the following commands. + +In Docker, [healthchecks](https://docs.docker.com/engine/reference/builder/#healthcheck) are pre-configured to monitor the uptime and response times of Dashy, and the status of which will show in your Docker monitoring app, or the `docker ps` command, or the container logs, using: `docker inspect --format "{{json .State.Health }}" [container-id]`. + **[⬆️ Back to Top](#dashy)** --- @@ -126,7 +129,7 @@ In the production environment, the app needs to be rebuilt in order for changes You can check that your config matches Dashy's [schema](https://github.com/Lissy93/dashy/blob/master/src/utils/ConfigSchema.json) before deploying, by running `yarn validate-config.` -It is now possible to update Dashy's config directly through the UI, and have changes written to disk. You can disable this feature by setting: `appConfig.allowConfigEdit: false`. If you are using users within Dashy, then you need to be logged in to a user of `type: admin` in order to modify the configuration globally. You can also trigger a rebuild of the app through the UI (Settings --> Rebuild). The current theme, and other visual preferences are only stored locally, unless otherwise specified in the config file. The option to only apply config changes locally is still available, and can be used in conjunction with the cloud backup feature to sync data between instances. +It is now possible also possible to update Dashy's config directly through the UI, and have changes written to disk. You can disable this feature by setting: `appConfig.allowConfigEdit: false`. If you are using users within Dashy, then you need to be logged in to a user of `type: admin` in order to modify the configuration globally. You can also trigger a rebuild of the app through the UI (Settings --> Rebuild). You may find these [example config](https://gist.github.com/Lissy93/000f712a5ce98f212817d20bc16bab10) helpful for getting you started @@ -247,7 +250,7 @@ Here's a quick demo of the workspace view: ## Config Editor ⚙️ -From the Settings Menu in Dashy, you can download, backup, edit and rest your config. An interactive editor makes editing the config file easy, it will tell you if you've got any errors. After making your changes, you can either apply them locally, or export into your main config file. After saving to the config file to the disk, the app will need to be rebuilt. This will happen automatically, but may take a few minutes. You can also manually trigger a rebuild from the Settings Menu. A full list of available config options can be found [here](./docs/configuring.md). It's recommend to make a backup of your configuration, as you can then restore it into a new instance of Dashy, without having to set it up again. +From the Settings Menu in Dashy, you can download, backup, edit and rest your config. An interactive editor makes editing the config file easy, it will tell you if you've got any errors. After making your changes, you can either apply them locally, or export into your main config file. After saving to the config file to the disk, the app will need to be rebuilt. This will happen automatically, but may take a few minutes. You can also manually trigger a rebuild from the Settings Menu. A full list of available config options can be found [here](./docs/configuring.md). It's recommend to make a backup of your configuration, as you can then restore it into a new instance of Dashy, without having to set it up again. [json2yaml](https://www.json2yaml.com/) is very useful for converting between YAML to JSON and visa versa.

Workspace view demo @@ -279,7 +282,7 @@ If you are new to Vue.js or web development and want to learn more, [here are so Pull requests are welcome, and would by much appreciated! -Some ideas for PRs include: bug fixes, improve the docs, add new themes, implement a new widget, add or improve the display options, improve or refactor the code, or implement a new feature. +Some ideas for PRs include: bug fixes, improve the docs, submit a screenshot of your dashboard to the showcase, add new themes, implement a new widget, add or improve the display options, improve or refactor the code, or implement a new feature. Before you submit your pull request, please ensure the following: - Must be backwards compatible @@ -326,16 +329,18 @@ For more general questions about any of the technologies used, [StackOverflow](h ## Documentation 📘 -- [Getting Started](/docs/deployment.md) +- [Deployment](/docs/deployment.md) - [Configuring](/docs/configuring.md) - [Developing](/docs/developing.md) - [Contributing](/docs/contributing.md) - [User Guide](/docs/user-guide.md) - [Troubleshooting](/docs/troubleshooting.md) - [Backup & Restore](/docs/backup-restore.md) +- [Status Indicators](/docs/status-indicators.md) - [Theming](/docs/theming.md) - [Icons](/docs/icons.md) - [Authentication](/docs/authentication.md) +- [Showcase](/docs/showcase.md) **[⬆️ Back to Top](#dashy)** diff --git a/docs/showcase.md b/docs/showcase.md index bcdaceded5..d4c467c4d7 100644 --- a/docs/showcase.md +++ b/docs/showcase.md @@ -35,8 +35,8 @@ ## Submitting your Dashboard #### How to Submit -- Open an Issue -- Open a PR +- [Open an Issue](https://git.io/Jceik) +- [Open a PR](https://github.com/Lissy93/dashy/compare) #### What to Include Please include the following information: From 490c5a6563332a9e446b2923a41ccf066d00026d Mon Sep 17 00:00:00 2001 From: Alicia Sykes Date: Mon, 28 Jun 2021 22:57:36 +0100 Subject: [PATCH 8/8] :octocat: Updates PR template --- .github/pull_request_template.md | 23 ++++++++--------------- 1 file changed, 8 insertions(+), 15 deletions(-) diff --git a/.github/pull_request_template.md b/.github/pull_request_template.md index 3e80d1ec73..6041f6e05d 100644 --- a/.github/pull_request_template.md +++ b/.github/pull_request_template.md @@ -1,27 +1,20 @@ -**Thank you for contributing to Dashy! So that your PR can be handled effectively, please populate the following fields (delete sections that are not applicable)** +*Thank you for contributing to Dashy! So that your PR can be handled effectively, please populate the following fields (delete sections that are not applicable)* -### Category -> Please indicate the type of change your PR introduces +**Category**: +> One of: Bugfix / Feature / Code style update / Refactoring Only / Build related changes / Documentation / Other (please specify) -Bugfix / Feature / Code style update / Refactoring Only / Build related changes / Documentation / Other (please specify) - - -### Overview +**Overview** > Briefly outline your new changes... +**Issue Number** _(if applicable)_ #00 -### Issue Number _(if applicable)_ -#00 - -### New Vars _(if applicable)_ +**New Vars** _(if applicable)_ > If you've added any new build scripts, environmental variables, config file options, dependency or devDependency, please outline here - -### Screenshot _(if applicable)_ +**Screenshot** _(if applicable)_ > If you've introduced any significant UI changes, please include a screenshot - -### Code Quality Checklist _(Please complete)_ +**Code Quality Checklist** _(Please complete)_ - [ ] All changes are backwards compatible - [ ] All lint checks and tests are passing - [ ] There are no (new) build warnings or errors