selfhosted
/
dashy
mirror of https://github.com/lissy93/dashy
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adds additional safeguards for edge cases, and improves theme coverage

This commit is contained in:
Alicia Sykes 2021-05-04 14:49:25 +01:00
parent 473639dd5e
commit 3aba7f23da
12 changed files with 149 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
README.md
View File

@ -21,6 +21,12 @@
- Many options for icons, including full Font-Awesome support and the ability to auto-fetch icon from URLs favicon
- Plus lots more...
## Live Demo
- [Demo 1](https://dashy-demo-1.as93.net)
- [Demo 2](https://dashy-demo-2.as93.net)
- [Demo 3](https://dashy-demo-3.as93.net)
---
## Running the App 🏃‍♂️
@ -140,6 +146,10 @@ appConfig:
- [ ] Add support for custom widgets
- [ ] Convert JavaScript to TypeScript
### Alternatives 🙌
There are a few self-hosted web apps, that serve a similar purpose to Dashy. Including, but not limited to: [HomeDash2](https://lamarios.github.io/Homedash2), [Homer](https://github.com/bastienwirtz/homer), [Organizr](https://organizr.app/) and [Heimdall](https://github.com/linuxserver/Heimdall).
### Credits 🏆
The app makes use of the following components, kudos to their respective authors

50
src/assets/interface-icons/broken-icon.svg Normal file
View File

@ -0,0 +1,50 @@
<?xml version="1.0" encoding="iso-8859-1"?>
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<g>
<rect x="96.397" y="284.966" transform="matrix(-0.9401 0.341 -0.341 -0.9401 320.6888 545.5591)" width="31.998" height="31.998"/>
<polygon points="271.552,301.072 193.696,254.352 152.08,269.504 163.024,299.568 190.304,289.648 272.448,338.928
370.048,273.856 480,315.088 480,480 32,480 32,347.2 72.8,332.352 61.872,302.304 0,324.8 0,512 512,512 512,292.912
365.952,238.144 "/>
<polygon points="0,0 0,278.848 66.576,254.624 55.648,224.56 32,233.152 32,32 480,32 480,200.912 365.952,158.144
271.552,221.072 193.696,174.352 145.856,191.744 156.8,221.808 190.304,209.648 272.448,258.928 370.048,193.856 512,247.088
512,0 "/>
<rect x="90.237" y="207.181" transform="matrix(-0.3419 -0.9397 0.9397 -0.3419 -67.18 399.3166)" width="31.984" height="32"/>
</g>
</g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
<g>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

14
src/components/LinkItems/IframeModal.vue
View File

@ -2,7 +2,8 @@
<modal :name="name" :resizable="true" width="80%" height="80%" @closed="$emit('closed')">
<div slot="top-right" @click="hide()">Close</div>
<a @click="hide()" class="close-button" title="Close">x</a>
<iframe :src="url" @keydown.esc="close" class="frame"/>
<iframe v-if="url" :src="url" @keydown.esc="close" class="frame"/>
<div v-else class="no-url">No URL Specified</div>
</modal>
</template>
@ -35,6 +36,16 @@ export default {
border: none;
}
.no-url {
margin: 4rem auto;
width: fit-content;
font-size: 2rem;
padding: 0.5rem;
border: 1px dashed #ff0000;
border-radius: 3px;
background: #f4f2f2;
}
.close-button {
position: absolute;
right: 0;
@ -46,7 +57,6 @@ export default {
border-left: 1px solid var(--primary);
border-bottom: 1px solid var(--primary);
cursor: pointer;
&:hover {
background: var(--background);
color: var(--primary);

8
src/components/LinkItems/Item.vue
View File

@ -96,7 +96,7 @@ export default {
};
</script>
<style scoped lang="scss">
<style lang="scss">
.item {
flex-grow: 1;
@ -200,7 +200,7 @@ export default {
justify-content: flex-end;
align-items: center;
height: 2rem;
img {
div img, div svg.missing-image {
width: 2rem;
}
.tile-title {
@ -217,8 +217,8 @@ export default {
flex-direction: column;
align-items: center;
height: auto;
img {
width: 2rem;
div img, div svg.missing-image {
width: 2.5rem;
margin-bottom: 0.25rem;
}
.tile-title {

32
src/components/LinkItems/ItemIcon.vue
View File

@ -1,9 +1,16 @@
<template>
<i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
<img v-else-if="icon" :src="iconPath" :class="`tile-icon ${size}`" />
<div>
<i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
<img v-else-if="icon" :src="iconPath" @error="imageNotFound"
:class="`tile-icon ${size} ${broken ? 'broken' : ''}`"
/>
<BrokenImage v-if="broken" class="missing-image" />
</div>
</template>
<script>
import BrokenImage from '@/assets/interface-icons/broken-icon.svg';
import ErrorHandler from '@/utils/ErrorHandler';
export default {
name: 'Icon',
@ -12,6 +19,9 @@ export default {
url: String, // Used for fetching the favicon
size: String, // Either small, medium or large
},
components: {
BrokenImage,
},
computed: {
iconType: function iconType() {
return this.determineImageType(this.icon);
@ -20,6 +30,11 @@ export default {
return this.getIconPath(this.icon, this.url);
},
},
data() {
return {
broken: false,
};
},
methods: {
/* Check if a string is in a URL format. Used to identify tile icon source */
isUrl(str) {
@ -72,6 +87,11 @@ export default {
else imgType = 'none';
return imgType;
},
/* Called when the path to the image cannot be resolved */
imageNotFound() {
this.broken = true;
ErrorHandler(`The path to '${this.icon}' could not be resolved`);
},
},
};
</script>
@ -80,6 +100,7 @@ export default {
.tile-icon {
width: 60px;
filter: var(--item-icon-transform);
&.broken { display: none; }
}
i.fas, i.fab, i.far, i.fal, i.fad {
font-size: 2rem;
@ -99,4 +120,11 @@ export default {
fill: currentColor;
}
}
.missing-image {
width: 3.5rem;
path {
fill: currentColor;
}
}
</style>

16
src/components/Settings/KeyboardShortcutInfo.vue
View File

@ -76,12 +76,12 @@ export default {
padding: 0.1em 0.3em;
z-index: 10;
border-radius: 12px;
border: 1px solid var(--background-darker);
border: 1px solid var(--welcome-popup-background);
-webkit-box-shadow: 2px 1px 5px #130f23;
box-shadow: 2px 1px 5px #130f23;
border: 1px solid var(--primary);
color: var(--primary);
background: var(--background-darker);
border: 1px solid var(--welcome-popup-text-color);
color: var(--welcome-popup-text-color);
background: var(--welcome-popup-background);
cursor: default;
opacity: 0.94;
@include phone {
@ -91,9 +91,9 @@ export default {
position: absolute;
top: -35px;
left: 20px;
border: 1px solid var(--primary);
color: var(--primary);
background: var(--background-darker);
border: 1px solid var(--welcome-popup-text-color);
color: var(--welcome-popup-text-color);
background: var(--welcome-popup-background);
padding: 4px;
border-radius: var(--curve-factor);
}
@ -108,7 +108,7 @@ export default {
border: 1px solid transparent;
cursor: pointer;
&:hover {
border: 1px solid var(--primary);
border: 1px solid var(--welcome-popup-text-color);
opacity: var(--dimming-factor);
}
}

1
src/components/Settings/SettingsContainer.vue
View File

@ -75,6 +75,7 @@ export default {
align-items: center;
align-items: stretch;
background: linear-gradient(0deg, var(--background) 0%, var(--background-darker) 100%);
box-shadow: var(--settings-container-shadow);
}
.options-container {
display: flex;

3
src/styles/color-palette.scss
View File

@ -29,6 +29,7 @@
--item-icon-transform: drop-shadow(2px 4px 6px var(--transparent-50)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(4px 8px 3px var(--transparent-50)) saturate(2);
--item-group-shadow: var(--item-shadow);
--settings-container-shadow: none;
/* Specific components, using variables allows them to be overridden individually */
--heading-text-color: var(--primary);
@ -48,4 +49,6 @@
--search-field-background: var(--background);
--footer-text-color: var(--medium-grey);
--footer-text-color-link: var(--primary);
--welcome-popup-background: var(--background-darker);
--welcome-popup-text-color: var(--primary);
}

5
src/styles/color-themes.scss
View File

@ -144,6 +144,9 @@ html[data-theme='material'] {
--item-hover-shadow: 0 1px 4px #00000029, 0 2px 4px #0000002a;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
--settings-container-shadow: 0 1px 3px #0000005e, 0 1px 2px #00000085;
--welcome-popup-background: #01579b;
--welcome-popup-text-color: #ffffff;
}
html[data-theme='material-dark'] {
@ -171,6 +174,8 @@ html[data-theme='material-dark'] {
--item-hover-shadow: 4px 4px 3px #00000082, 0 1px 10px #00000040;
--item-icon-transform: drop-shadow(1px 2px 1px var(--transparent-30)) saturate(0.65);
--item-icon-transform-hover: drop-shadow(1px 3px 2px var(--transparent-30)) saturate(2);
--welcome-popup-background: #131a1f;
--welcome-popup-text-color: var(--primary);
}
html[data-theme='colorful'] {

5
src/styles/media-queries.scss
View File

@ -53,3 +53,8 @@ $extra-large: 2800px;
@content;
}
}
@mixin big-screen-up {
@media (min-width: #{$extra-large}) {
@content;
}
}

11
src/utils/ErrorHandler.js Normal file
View File

@ -0,0 +1,11 @@
/* eslint no-console: ["error", { allow: ["warn", "error"] }] */
/**
* Function called when an error happens
* If you wish to use an error logging service, put code for it here
*/
const ErrorHandler = function handler(msg) {
console.warn(msg);
};
export default ErrorHandler;

10
src/views/Home.vue
View File

@ -23,6 +23,7 @@
:items="filterTiles(section.items)"
@itemClicked="finishedSearching()"
:itemSize="itemSizeBound"
:class="(filterTiles(section.items).length === 0 && searchValue) ? 'no-results' : ''"
/>
</div>
<div v-else class="no-data">No Data Found Yet</div>
@ -81,12 +82,14 @@ export default {
},
/* Extracts the site name from domain, used for the searching functionality */
getDomainFromUrl(url) {
if (!url) return '';
const urlPattern = /^(?:https?:\/\/)?(?:w{3}\.)?([a-z\d.-]+)\.(?:[a-z.]{2,10})(?:[/\w.-]*)*/;
const domainPattern = url.match(urlPattern);
return domainPattern ? domainPattern[1] : '';
},
/* Returns only the tiles that match the users search query */
filterTiles(allTiles) {
if (!allTiles) return [];
return allTiles.filter((tile) => {
const {
title, description, provider, url,
@ -181,6 +184,7 @@ export default {
flex-direction: column;
}
&.orientation-vertical {
max-width: 100%;
@include tablet-up {
display: flex;
flex-direction: row;
@ -203,6 +207,12 @@ export default {
@include big-screen {
grid-template-columns: repeat(4, 1fr);
}
@include big-screen-up {
grid-template-columns: repeat(5, 1fr);
}
/* Hide when search term returns nothing */
.no-results { display: none; }
}
.no-data {