Things and Stuff

README.md

@@ -2,6 +2,13 @@
 <h1 align="center">Dashy</h1>
 <p align="center"><i>A static site linking to all running services for networking, management and monitoring</i></p>
 
+[![Codacy Badge](https://app.codacy.com/project/badge/Grade/3be23a4a3a8a4689bd47745b201ecb74)](https://www.codacy.com/gh/Lissy93/dashy/dashboard)
+
+![GitHub issues](https://img.shields.io/github/issues/lissy93/dashy?style=flat-square)
+
+![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/lissy93/dashy?style=flat-square)
+![Lines of code](https://img.shields.io/tokei/lines/github/lissy93/dashy?style=flat-square)
+
 <p align="center">
   <img width="800" src="https://i.ibb.co/L8YbNNc/dashy-demo2.gif" alt="Demo">
 </p>
@@ -56,6 +63,8 @@ Also within `./public` you'll find normal website assets, including `favicon.ico
 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/)).
 All fields are optional, unless otherwise stated.
 
+**Examples**: [Example Config 1](https://listed.to/p/HA5Hq5PHFO) ┆ [Example Config 2](https://listed.to/p/a1gvTPGTEz) ┆ [Example Config 2](https://listed.to/p/a1gvTPGTEz)
+
 **`pageInfo`**
 - `title` - String: The page title and heading
 - `description` - String: Short description visible under the heading
@@ -127,6 +136,12 @@ appConfig:
 ---
 
 ## Notes
+### Roadmap 🛣
+
+- [ ] Allow users to import / export configuration through the UI
+- [ ] Improve deployment process (with a one-liner Docker run command)
+- [ ] Add support for custom widgets
+- [ ] Convert JavaScript to TypeScript
 
 ### Credits 🏆
 
@@ -135,6 +150,8 @@ The app makes use of the following components, kudos to their respective authors
 - [`vue-js-modal`](https://github.com/euvl/vue-js-modal) - Modal component by @euvl
 - [`v-tooltip`](https://github.com/Akryum/v-tooltip) - Tooltip component by @Akryum
 
+And the app itself is built with [Vue.js](https://github.com/vuejs/vue) ![vue-logo](https://i.ibb.co/xqKW6h5/vue-logo.png)
+
 ### License 📜
 
 ```

package.json

@@ -45,7 +45,8 @@
     ],
     "rules": {
       "import/no-unresolved": "off",
-      "arrow-parens": 0
+      "arrow-parens": 0,
+      "no-else-return": 0
     },
     "parserOptions": {
       "parser": "babel-eslint"

public/conf.yml

@@ -1,4 +1,26 @@
 ---
 pageInfo:
-  title: Dashy
-sections:
+  title: Getting Started
+  navLinks:
+  - title: Home
+    path: /
+  - title: About
+    path: /about
+  - title: Source Code
+    path: https://github.com/Lissy93/dashy
+appConfig:
+  theme: material-dark
+  fontAwesomeKey: 0821c65656
+sections:
+- name: Dashy
+  items:
+  - title: Source
+    description: Source code and documentation on GitHub
+    icon: fab fa-github
+    url: https://github.com/Lissy93/dashy
+  - title: Issues
+    description: View currently open issues, or raise a new one
+    icon: fas fa-bug
+    url: https://github.com/Lissy93/dashy/issues
+
+  

src/components/LinkItems/ItemIcon.vue

@@ -1,6 +1,6 @@
 <template>
-  <i v-if="determineImageType(icon) === 'font-awesome'" :class="`${icon} ${size}`" ></i>
-  <img v-else-if="icon" :src="getIconPath(icon, url)" :class="`tile-icon ${size}`" />
+  <i v-if="iconType === 'font-awesome'" :class="`${icon} ${size}`" ></i>
+  <img v-else-if="icon" :src="iconPath" :class="`tile-icon ${size}`" />
 </template>
 
 <script>
@@ -12,6 +12,14 @@ export default {
     url: String, // Used for fetching the favicon
     size: String, // Either small, medium or large
   },
+  computed: {
+    iconType: function iconType() {
+      return this.determineImageType(this.icon);
+    },
+    iconPath: function iconPath() {
+      return this.getIconPath(this.icon, this.url);
+    },
+  },
   methods: {
     /* Check if a string is in a URL format. Used to identify tile icon source */
     isUrl(str) {
@@ -56,9 +64,9 @@ export default {
     determineImageType(img) {
       let imgType = '';
       if (!img) imgType = 'none';
+      else if (img.endsWith('.svg')) imgType = 'svg';
       else if (this.isUrl(img)) imgType = 'url';
       else if (this.isImage(img)) imgType = 'img';
-      else if (img.substr(4) === ('.svg' || '.SVG')) imgType = 'svg';
       else if (img.includes('fa-')) imgType = 'font-awesome';
       else if (img === 'favicon') imgType = 'favicon';
       else imgType = 'none';
@@ -68,7 +76,7 @@ export default {
 };
 </script>
 
-<style scoped lang="scss">
+<style lang="scss">
   .tile-icon {
       width: 60px;
       filter: var(--item-icon-transform);
@@ -84,4 +92,11 @@ export default {
       font-size: 3rem;
     }
   }
+  object.tile-icon {
+    width: 55px;
+    height: 55px;
+    svg, svg g, svg g path {
+      fill: currentColor;
+    }
+  }
 </style>