Added Feature to Hide the Header

.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,18 @@
+## Description
+
+Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.
+
+Fixes # (issue)
+
+## Type of change
+
+- [ ] Bug fix (non-breaking change which fixes an issue)
+- [ ] New feature (non-breaking change which adds functionality)
+- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
+
+## Checklist:
+
+- [ ] I read & comply with the [contributing guidelines](https://github.com/bastienwirtz/homer/blob/master/CONTRIBUTING.md)
+- [ ] I have tested my code for new features & regressions on both mobile & desktop devices, using the latest version of major browsers. 
+- [ ] I have made corresponding changes the documentation (README.md).
+- [ ] I've check my modifications for any breaking change, especially in the `config.yml` file

CODE_OF_CONDUCT.md

@@ -0,0 +1,84 @@
+
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our
+community a harassment-free experience for everyone, regardless of age, body
+size, visible or invisible disability, ethnicity, sex characteristics, gender
+identity and expression, level of experience, education, socio-economic status,
+nationality, personal appearance, race, religion, or sexual identity
+and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming,
+diverse, inclusive, and healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our
+community include:
+
+* Demonstrating empathy and kindness toward other people
+* Being respectful of differing opinions, viewpoints, and experiences
+* Giving and gracefully accepting constructive feedback
+* Accepting responsibility and apologizing to those affected by our mistakes,
+  and learning from the experience
+* Focusing on what is best not just for us as individuals, but for the
+  overall community
+
+Examples of unacceptable behavior include:
+
+* The use of sexualized language or imagery, and sexual attention or
+  advances of any kind
+* Trolling, insulting or derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or email
+  address, without their explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+  professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of
+acceptable behavior and will take appropriate and fair corrective action in
+response to any behavior that they deem inappropriate, threatening, offensive,
+or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject
+comments, commits, code, wiki edits, issues, and other contributions that are
+not aligned to this Code of Conduct, and will communicate reasons for moderation
+decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when
+an individual is officially representing the community in public spaces.
+Examples of representing our community include using an official e-mail address,
+posting via an official social media account, or acting as an appointed
+representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported to the community leaders responsible for enforcement at
+bastien.wirtz@gmail.com.
+All complaints will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the
+reporter of any incident.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage],
+version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by [Mozilla's code of conduct
+enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.
+

CONTRIBUTING.md

@@ -0,0 +1,47 @@
+# Introduction
+
+### Welcome!
+
+First off, thank you for considering contributing to Homer!
+
+### Project philosophy
+
+Homer is meant to be a light and very simple dashboard that keeps all your usefull utilities at hands. The few features implemented in Homer focus on
+UX and usability. If you are looking for a full featured dashboard, there is tons of great stuff out there like https://heimdall.site/, https://github.com/rmountjoy92/DashMachine or https://organizr.app/.
+
+- Configuration is stored in a simple config file, avoiding the need for a backend/database while making possible to use versionning or [config template](https://docs.ansible.com/ansible/latest/user_guide/playbooks_templating.html).
+- Only modern browsers are supported, feel free to use any JS features without any polyfill as soon as the latest version of the major browsers supports them.
+
+### Roadmap
+
+If you want to know more about the project direction or looking for something to work on, checkout the [roadmap](https://github.com/bastienwirtz/homer#Roadmap)!
+Feel free to open an issue if you have any question.
+
+# Ground Rules
+
+### Code of conduct and guidelines
+
+First of all, we expect everyone (contributors and maintainers alike) to respect the [Code of conduct](https://github.com/bastienwirtz/homer/blob/master/CODE_OF_CONDUCT.md). It is not a recomandation, it is mandatory.
+
+For all contributions, please respect the following guidelines:
+
+* Each pull request should implement ONE feature or bugfix. If you want to add or fix more than one thing, submit more than one pull request.
+* Do not commit changes to files that are irrelevant to your feature or bugfix (eg: `.gitignore`).
+* Do not add unnecessary dependencies.
+* Be aware that the pull request review process is not immediate, and is generally proportional to the size of the pull request.
+
+# Getting started
+
+### Discuss about ideas
+
+If you want to add a feature, it's often best to talk about it before starting working on it and submitting a pull request. It's not mandatory at all, but
+feel free to open an issue to present your idea.
+
+### How to submit a contribution
+
+The general process to submit a contribution is as follow:
+1. Create your own fork of the code
+2. Do the changes in your fork
+3. Make sure to fill the [pull request description](https://github.com/bastienwirtz/homer/blob/master/.github/PULL_REQUEST_TEMPLATE.md) properly.
+
+### Happy coding :metal:

README.md

@@ -5,9 +5,15 @@ A dead simple static **HOM**epage for your serv**ER** to keep your services on h
 
 If you need authentication support, you're on your own (it can be secured using a web server auth module or exposing it only through a VPN network / SSH tunnel, ...)
 
-![screenshot](https://github.com/bastienwirtz/homer/blob/master/screenshot.png)
+![screenshot](https://raw.github.com/bastienwirtz/homer/master/screenshot.png)
 
-## installation
+## Roadmap
+
+- [ ] Colors / theme customization
+- [ ] Enable PWA support (making possible to "install" - add to homescreen - it)
+- [ ] Improve maintenability (external library import & service workers cached file list.)
+
+## Installation
 
 ### Using docker
 
@@ -17,10 +23,10 @@ sudo docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/
 
 ### Manually
 
-**How to build / install it?** There is no build system (😱), use it like that! It'meant to be stupid simple & zero maintenance required. just copy the static files somewhere, and visit the `index.html`.
+**How to build / install it?** There is no build system (😱), use it like that! It's meant to be stupid simple & zero maintenance required. Just copy the static files somewhere, and visit the `index.html`.
 
 
-## configuration
+## Configuration
 
 Title, icons, links, colors, and services can be configured in the `config.yml` file, using [yaml](http://yaml.org/) format.
 
@@ -35,7 +41,8 @@ subtitle: "Homer"
 logo: "assets/homer.png"
 # Alternatively a fa icon can be provided:
 # icon: "fas fa-skull-crossbones"  
-footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>'  # set false if you want to hide it.header:
+footer: '<p>Created with <span class="has-text-danger">❤️</span> with <a href="https://bulma.io/">bulma</a>, <a href="https://vuejs.org/">vuejs</a> & <a href="https://fontawesome.com/">font awesome</a> // Fork me on <a href="https://github.com/bastienwirtz/homer"><i class="fab fa-github-alt"></i></a></p>'  # set false if you want to hide it.
+header: true # Set to false to hide the header on the top of the page.
 
 # Optional message
 message:
@@ -113,4 +120,4 @@ If you choose to fetch message information from an endpoint, the output format s
 ```
 
 `null` value or missing keys will be ignored and value from the `config.yml` will be used if available.
-Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar)
+Empty values (either in `config.yml` or the endpoint data) will hide the element (ex: set `"title": ""` to hide the title bar).

app.css

@@ -38,6 +38,10 @@ body {
       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
       body #app .card:hover {
         background-color: #ffffff; }
+    body #app .message {
+      background-color: #ffffff; }
+      body #app .message .message-body {
+        color: #363636; }
     body #app .footer {
       background-color: #ffffff;
       box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
@@ -56,6 +60,10 @@ body {
           box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
           body #app .card:hover {
             background-color: #ffffff; }
+        body #app .message {
+          background-color: #ffffff; }
+          body #app .message .message-body {
+            color: #363636; }
         body #app .footer {
           background-color: #ffffff;
           box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } }
@@ -74,6 +82,10 @@ body {
           box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
           body #app .card:hover {
             background-color: #2b2b2b; }
+        body #app .message {
+          background-color: #2b2b2b; }
+          body #app .message .message-body {
+            color: #eaeaea; }
         body #app .footer {
           background-color: #2b2b2b;
           box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } }
@@ -91,6 +103,10 @@ body {
         box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
         body #app.is-light .card:hover {
           background-color: #ffffff; }
+      body #app.is-light .message {
+        background-color: #ffffff; }
+        body #app.is-light .message .message-body {
+          color: #363636; }
       body #app.is-light .footer {
         background-color: #ffffff;
         box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
@@ -108,6 +124,10 @@ body {
         box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
         body #app.is-dark .card:hover {
           background-color: #2b2b2b; }
+      body #app.is-dark .message {
+        background-color: #2b2b2b; }
+        body #app.is-dark .message .message-body {
+          color: #eaeaea; }
       body #app.is-dark .footer {
         background-color: #2b2b2b;
         box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
@@ -153,13 +173,15 @@ body {
           padding: 10px;
           max-height: 70px;
           max-width: 70px; }
-    body #bighead .navbar {
+    body #bighead .navbar, body #bighead .navbar-menu {
       background-color: #4285f4; }
-      body #bighead .navbar a {
+      body #bighead .navbar a, body #bighead .navbar-menu a {
         color: #ffffff; }
-        body #bighead .navbar a:hover, body #bighead .navbar a:focus {
+        body #bighead .navbar a:hover, body #bighead .navbar a:focus, body #bighead .navbar-menu a:hover, body #bighead .navbar-menu a:focus {
           color: #ffffff;
           background-color: #5a95f5; }
+    body #bighead .navbar-end {
+      text-align: right; }
   body #main-section {
     margin-bottom: 2rem;
     padding: 0; }
@@ -242,7 +264,7 @@ body {
       background-color: #5f98f6;
       border-radius: 5px;
       padding: 2px 12px 2px 30px;
-      margin: 10px 0;
+      margin: 0 0 0 12px;
       transition: all 100ms linear;
       color: #ffffff;
       height: 30px;
@@ -254,16 +276,18 @@ body {
     body .search-bar .search-label::before {
       font-family: 'Font Awesome 5 Free';
       position: absolute;
-      top: 12px;
-      left: 8px;
+      top: 4px;
+      left: 16px;
       content: "\f002";
       font-weight: 900;
       width: 20px;
-      height: 20px; }
+      height: 20px;
+      color: #ffffff; }
     body .search-bar:focus-within .search-label::before {
       color: #4a4a4a; }
   body .icon-button {
-    display: inline-block; }
+    display: inline-block;
+    padding: 0 12px; }
   body .offline-message {
     text-align: center;
     margin: 35px 0; }

app.js

@@ -5,7 +5,8 @@ const app = new Vue({
         offline: false,
         filter: '',
         vlayout: true,
-        isDark: null
+        isDark: null,
+        showMenu: false
     },
     created: async function () {
         let that = this;
@@ -20,6 +21,7 @@ const app = new Vue({
         this.checkOffline();
         try {
             this.config =  await this.getConfig();
+            document.title = this.config.title + ' | Homer';
         } catch (error) {
             this.offline = true;
         }
@@ -80,6 +82,38 @@ const app = new Vue({
             this.vlayout = !this.vlayout;
             localStorage.vlayout = this.vlayout;
         },
+        toggleMenu: function() {
+            this.showMenu = !this.showMenu;
+        }
+    },
+    mounted() {
+        function isSmallScreen() {
+            return window.matchMedia('screen and (max-width: 1023px)').matches;
+        }
+        this._keyListener = function(e) {
+            if (e.key === '/') {
+                if (isSmallScreen()) {
+                    this.showMenu = true;
+                }
+                Vue.nextTick(() => {
+                    this.$refs.search.focus();
+                });
+
+                e.preventDefault();
+            }
+            if (e.key === 'Escape') {
+                this.filter = '';
+                this.$refs.search.blur();
+                if (isSmallScreen()) {
+                    this.showMenu = false;
+                }
+            }
+        }
+
+        document.addEventListener('keydown', this._keyListener.bind(this));
+    },
+    beforeDestroy() {
+        document.removeEventListener('keydown', this._keyListener);
     }
 });