First commit

2020-03-12 00:27:20 +01:00 · 2020-03-12 00:27:20 +01:00 · 8f5a8529de
commit 8f5a8529de
52 changed files with 10582 additions and 0 deletions
--- a/15
+++ b/15
@ -0,0 +1,15 @@
+FROM alpine:3.11
+
+COPY ./ /www/
+
+ENV USER darkhttpd
+ENV GROUP darkhttpd
+ENV GID 911
+ENV UID 911
+
+RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} && \
+    apk add -U darkhttpd
+
+USER darkhttpd
+
+ENTRYPOINT ["darkhttpd","/www/"]
--- a/201
+++ b/201
@ -0,0 +1,201 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work
+      (an example is provided in the Appendix below).
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship. For the purposes
+      of this License, Derivative Works shall not include works that remain
+      separable from, or merely link (or bind by name) to the interfaces of,
+      the Work and Derivative Works thereof.
+
+      "Contribution" shall mean any work of authorship, including
+      the original version of the Work and any modifications or additions
+      to that Work or Derivative Works thereof, that is intentionally
+      submitted to Licensor for inclusion in the Work by the copyright owner
+      or by an individual or Legal Entity authorized to submit on behalf of
+      the copyright owner. For the purposes of this definition, "submitted"
+      means any form of electronic, verbal, or written communication sent
+      to the Licensor or its representatives, including but not limited to
+      communication on electronic mailing lists, source code control systems,
+      and issue tracking systems that are managed by, or on behalf of, the
+      Licensor for the purpose of discussing and improving the Work, but
+      excluding communication that is conspicuously marked or otherwise
+      designated in writing by the copyright owner as "Not a Contribution."
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      (except as stated in this section) patent license to make, have made,
+      use, offer to sell, sell, import, and otherwise transfer the Work,
+      where such license applies only to those patent claims licensable
+      by such Contributor that are necessarily infringed by their
+      Contribution(s) alone or by combination of their Contribution(s)
+      with the Work to which such Contribution(s) was submitted. If You
+      institute patent litigation against any entity (including a
+      cross-claim or counterclaim in a lawsuit) alleging that the Work
+      or a Contribution incorporated within the Work constitutes direct
+      or contributory patent infringement, then any patent licenses
+      granted to You under this License for that Work shall terminate
+      as of the date such litigation is filed.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file, excluding those notices that do not
+          pertain to any part of the Derivative Works, in at least one
+          of the following places: within a NOTICE text file distributed
+          as part of the Derivative Works; within the Source form or
+          documentation, if provided along with the Derivative Works; or,
+          within a display generated by the Derivative Works, if and
+          wherever such third-party notices normally appear. The contents
+          of the NOTICE file are for informational purposes only and
+          do not modify the License. You may add Your own attribution
+          notices within Derivative Works that You distribute, alongside
+          or as an addendum to the NOTICE text from the Work, provided
+          that such additional attribution notices cannot be construed
+          as modifying the License.
+
+      You may add Your own copyright statement to Your modifications and
+      may provide additional or different license terms and conditions
+      for use, reproduction, or distribution of Your modifications, or
+      for any such Derivative Works as a whole, provided Your use,
+      reproduction, and distribution of the Work otherwise complies with
+      the conditions stated in this License.
+
+   5. Submission of Contributions. Unless You explicitly state otherwise,
+      any Contribution intentionally submitted for inclusion in the Work
+      by You to the Licensor shall be under the terms and conditions of
+      this License, without any additional terms or conditions.
+      Notwithstanding the above, nothing herein shall supersede or modify
+      the terms of any separate license agreement you may have executed
+      with Licensor regarding such Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor,
+      except as required for reasonable and customary use in describing the
+      origin of the Work and reproducing the content of the NOTICE file.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work (and each
+      Contributor provides its Contributions) on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+      implied, including, without limitation, any warranties or conditions
+      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+      PARTICULAR PURPOSE. You are solely responsible for determining the
+      appropriateness of using or redistributing the Work and assume any
+      risks associated with Your exercise of permissions under this License.
+
+   8. Limitation of Liability. In no event and under no legal theory,
+      whether in tort (including negligence), contract, or otherwise,
+      unless required by applicable law (such as deliberate and grossly
+      negligent acts) or agreed to in writing, shall any Contributor be
+      liable to You for damages, including any direct, indirect, special,
+      incidental, or consequential damages of any character arising as a
+      result of this License or out of the use or inability to use the
+      Work (including but not limited to damages for loss of goodwill,
+      work stoppage, computer failure or malfunction, or any and all
+      other commercial damages or losses), even if such Contributor
+      has been advised of the possibility of such damages.
+
+   9. Accepting Warranty or Additional Liability. While redistributing
+      the Work or Derivative Works thereof, You may choose to offer,
+      and charge a fee for, acceptance of support, warranty, indemnity,
+      or other liability obligations and/or rights consistent with this
+      License. However, in accepting such obligations, You may act only
+      on Your own behalf and on Your sole responsibility, not on behalf
+      of any other Contributor, and only if You agree to indemnify,
+      defend, and hold each Contributor harmless for any liability
+      incurred by, or claims asserted against, such Contributor by reason
+      of your accepting any such warranty or additional liability.
+
+   END OF TERMS AND CONDITIONS
+
+   APPENDIX: How to apply the Apache License to your work.
+
+      To apply the Apache License to your work, attach the following
+      boilerplate notice, with the fields enclosed by brackets "[]"
+      replaced with your own identifying information. (Don't include
+      the brackets!)  The text should be enclosed in the appropriate
+      comment syntax for the file format. We also recommend that a
+      file or class name and description of purpose be included on the
+      same "printed page" as the copyright notice for easier
+      identification within third-party archives.
+
+   Copyright [yyyy] [name of copyright owner]
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.
--- a/README.md
+++ b/README.md
@ -0,0 +1,115 @@
+# Homer
+A dead simple static **HOM**epage for your serv**ER** to keep your services on hand, from a simple `yaml` configuration file.
+
+**Check out the live demo [here](https://homer-demo.netlify.com/).**
+
+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)
+
+## installation
+
+### Using docker
+
+```sh
+sudo docker run -p 8080:8080 -v /your/local/config.yml:/www/config.yml -v /your/local/assets/:/www/assets b4bz/homer:latest
+```
+
+### 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`.
+
+
+## configuration
+
+Title, icons, links, colors, and services can be configured in the `config.yml` file, using [yaml](http://yaml.org/) format.
+
+
+```yaml
+---
+# Homepage configuration
+# See https://fontawesome.com/icons for icons options
+
+title: "Simple homepage"
+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:
+
+# Optional message
+message:
+  # url: "https://<my-api-endpoint>" # Can fetch information from an endpoint to override value below.
+  style: "is-warning"
+  title: "Optional message!"
+  content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque risus mi, tempus quis placerat ut, porta nec nulla. Vestibulum rhoncus ac ex sit amet fringilla. Nullam gravida purus diam, et dictum felis venenatis efficitur. Aenean ac eleifend lacus, in mollis lectus. Donec sodales, arcu et sollicitudin porttitor, tortor urna tempor ligula."
+
+# Optional navbar
+links:
+  - name: "ansible"
+    icon: "fa-github"
+    url: "https://github.com/xxxxx/ansible/"
+    target: '_blank' # optionnal html a tag target attribute
+  - name: "Wiki"
+    icon: "fa-book"
+    url: "https://wiki.xxxxxx.com/"
+
+# Services
+# First level array represent a group.
+# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
+services:
+  - name: "DevOps"
+    icon: "fa-code-fork"
+    items:
+      - name: "Jenkins"
+        logo: "/assets/tools/jenkins.png"
+        # Alternatively a fa icon can be provided:
+        # icon: "fab fa-jenkins"
+        subtitle: "Continuous integration server"
+        tag: "CI"
+        url: "#"
+        target: '_blank' # optionnal html a tag target attribute
+      - name: "RabbitMQ Management"
+        logo: "/assets/tools/rabbitmq.png"
+        subtitle: "Manage & monitor RabbitMQ server"
+        tag: "haproxy"
+        # Optional tagstyle
+        tagstyle: "is-success"
+        url: "#"
+  - name: "Monitoring"
+    icon: "fa-heartbeat"
+    items:
+      - name: "M/Monit"
+        logo: "/assets/tools/monit.png"
+        subtitle: "Monitor & manage all monit enabled hosts"
+        tag: "monit"
+        url: "#"
+      - name: "Grafana"
+        logo: "/assets/tools/grafana.png"
+        subtitle: "Metric analytics & dashboards"
+        url: "#"
+      - name: "Kibana"
+        logo: "/assets/tools/elastic.png"
+        subtitle: "Explore & visualize logs"
+        tag: "elk"
+        url: "#"
+      - name: "Website monitoring"
+        logo: "/assets/tools/pingdom.png"
+        subtitle: "Pingdom public reports overview"
+        tag: "CI"
+        url: "#"
+
+```
+
+If you choose to fetch message information from an endpoint, the output format should be:
+
+```json
+{
+	"style": null,
+	"title": "Lorem ipsum 42",
+	"content": "LA LA LA Lorem ipsum dolor sit amet, ....."
+}
+```
+
+`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)
--- a/app.css
+++ b/app.css
@ -0,0 +1,277 @@
+/* raleway-regular - latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Raleway"), local("Raleway-Regular"), url("./webfonts/raleway/raleway-v14-latin-regular.woff2") format("woff2"), url("./webfonts/raleway/raleway-v14-latin-regular.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
+
+/* lato-regular - latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local("Lato Regular"), local("Lato-Regular"), url("./webfonts/lato/lato-v16-latin-regular.woff2") format("woff2"), url("./webfonts/lato/lato-v16-latin-regular.woff") format("woff");
+  /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */ }
+
+html {
+  height: 100%; }
+
+body {
+  font-family: 'Raleway', sans-serif;
+  height: 100%; }
+  body #app {
+    min-height: 100%;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+    background-color: #f5f5f5;
+    color: #363636; }
+    body #app a:hover {
+      color: #363636; }
+    body #app .title {
+      color: #303030; }
+    body #app .subtitle {
+      color: #424242; }
+    body #app .card {
+      background-color: #ffffff;
+      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+      body #app .card:hover {
+        background-color: #ffffff; }
+    body #app .footer {
+      background-color: #ffffff;
+      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+      body #app {
+        background-color: #f5f5f5;
+        color: #363636; }
+        body #app a:hover {
+          color: #363636; }
+        body #app .title {
+          color: #303030; }
+        body #app .subtitle {
+          color: #424242; }
+        body #app .card {
+          background-color: #ffffff;
+          box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+          body #app .card:hover {
+            background-color: #ffffff; }
+        body #app .footer {
+          background-color: #ffffff;
+          box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); } }
+    @media (prefers-color-scheme: dark) {
+      body #app {
+        background-color: #131313;
+        color: #eaeaea; }
+        body #app a:hover {
+          color: #ffdd57; }
+        body #app .title {
+          color: #fafafa; }
+        body #app .subtitle {
+          color: #f5f5f5; }
+        body #app .card {
+          background-color: #2b2b2b;
+          box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
+          body #app .card:hover {
+            background-color: #2b2b2b; }
+        body #app .footer {
+          background-color: #2b2b2b;
+          box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); } }
+    body #app.is-light {
+      background-color: #f5f5f5;
+      color: #363636; }
+      body #app.is-light a:hover {
+        color: #363636; }
+      body #app.is-light .title {
+        color: #303030; }
+      body #app.is-light .subtitle {
+        color: #424242; }
+      body #app.is-light .card {
+        background-color: #ffffff;
+        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 .footer {
+        background-color: #ffffff;
+        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+    body #app.is-dark {
+      background-color: #131313;
+      color: #eaeaea; }
+      body #app.is-dark a:hover {
+        color: #ffdd57; }
+      body #app.is-dark .title {
+        color: #fafafa; }
+      body #app.is-dark .subtitle {
+        color: #f5f5f5; }
+      body #app.is-dark .card {
+        background-color: #2b2b2b;
+        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 .footer {
+        background-color: #2b2b2b;
+        box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.4); }
+  body h1, body h2, body h3, body h4, body h5, body h6 {
+    font-family: 'Lato', sans-serif; }
+  body h1 {
+    font-size: 2rem; }
+  body h2 {
+    font-size: 1.7rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem; }
+    body h2 .fas, body h2 .fab, body h2 .far {
+      margin-right: 10px; }
+    body h2 span {
+      font-weight: bold;
+      color: #4285f4; }
+  body [v-cloak] {
+    display: none; }
+  body #bighead {
+    color: #ffffff; }
+    body #bighead .dashboard-title {
+      padding: 6px 0 0 80px; }
+    body #bighead .first-line {
+      height: 100px;
+      vertical-align: center;
+      background-color: #3367d6; }
+      body #bighead .first-line h1 {
+        margin-top: -12px;
+        font-size: 2rem; }
+      body #bighead .first-line .headline {
+        margin-top: 5px;
+        font-size: 0.9rem; }
+      body #bighead .first-line .container {
+        height: 80px;
+        padding: 10px 0; }
+      body #bighead .first-line .logo {
+        float: left; }
+        body #bighead .first-line .logo i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px; }
+        body #bighead .first-line .logo img {
+          padding: 10px;
+          max-height: 70px;
+          max-width: 70px; }
+    body #bighead .navbar {
+      background-color: #4285f4; }
+      body #bighead .navbar a {
+        color: #ffffff; }
+        body #bighead .navbar a:hover, body #bighead .navbar a:focus {
+          color: #ffffff;
+          background-color: #5a95f5; }
+  body #main-section {
+    margin-bottom: 2rem;
+    padding: 0; }
+    body #main-section h2 {
+      border-bottom: 1px dashed #ccc;
+      padding-bottom: 10px; }
+    body #main-section .title {
+      font-size: 1.1em; }
+    body #main-section .subtitle {
+      font-size: .9em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis; }
+    body #main-section .container {
+      padding: 1.2rem .75rem; }
+    body #main-section .message {
+      margin-top: 45px;
+      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1); }
+      body #main-section .message .message-header {
+        font-weight: bold; }
+      body #main-section .message .message-body {
+        border: none; }
+  body .media-content {
+    overflow: inherit; }
+  body .tag {
+    color: #4285f4;
+    background-color: #4285f4;
+    position: absolute;
+    top: 1rem;
+    right: -0.2rem;
+    width: 3px;
+    overflow: hidden;
+    transition: all 0.2s ease-out;
+    padding: 0; }
+    body .tag .tag-text {
+      display: none; }
+  body .card {
+    border-radius: 5px;
+    border: none;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+    transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
+    body .card a {
+      outline: none; }
+  body .card:hover {
+    transform: translate(0, -3px); }
+    body .card:hover .tag {
+      width: auto;
+      color: #ffffff;
+      padding: 0 0.75em; }
+      body .card:hover .tag .tag-text {
+        display: block; }
+  body .card-content {
+    height: 85px;
+    padding: 1.3rem; }
+  body .layout-vertical .card {
+    border-radius: 0; }
+  body .layout-vertical .column div:first-of-type .card {
+    border-radius: 5px 5px 0 0; }
+  body .layout-vertical .column div:last-child .card {
+    border-radius: 0 0 5px 5px; }
+  body .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0.5rem;
+    text-align: left;
+    color: #676767;
+    font-size: 0.85rem;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms; }
+  body .no-footer #main-section {
+    margin-bottom: 0; }
+  body .no-footer .footer {
+    display: none; }
+  body .search-bar {
+    position: relative;
+    display: inline-block; }
+    body .search-bar #search {
+      border: none;
+      background-color: #5f98f6;
+      border-radius: 5px;
+      padding: 2px 12px 2px 30px;
+      margin: 10px 0;
+      transition: all 100ms linear;
+      color: #ffffff;
+      height: 30px;
+      width: 100px; }
+      body .search-bar #search:focus {
+        color: #000000;
+        width: 250px;
+        background-color: #ffffff; }
+    body .search-bar .search-label::before {
+      font-family: 'Font Awesome 5 Free';
+      position: absolute;
+      top: 12px;
+      left: 8px;
+      content: "\f002";
+      font-weight: 900;
+      width: 20px;
+      height: 20px; }
+    body .search-bar:focus-within .search-label::before {
+      color: #4a4a4a; }
+  body .icon-button {
+    display: inline-block; }
+  body .offline-message {
+    text-align: center;
+    margin: 35px 0; }
+    body .offline-message i {
+      font-size: 2rem; }
+    body .offline-message i.fa-redo-alt {
+      font-size: 1.3rem;
+      line-height: 1rem;
+      vertical-align: middle;
+      cursor: pointer;
+      color: #3273dc; }
--- a/app.js
+++ b/app.js
@ -0,0 +1,120 @@
+const app = new Vue({
+    el: '#app',
+    data: {
+        config: null,
+        offline: false,
+        filter: '',
+        vlayout: true,
+        isDark: null
+    },
+    created: async function () {
+        let that = this;
+
+        this.isDark = 'overrideDark' in localStorage ?
+            JSON.parse(localStorage.overrideDark) : matchMedia("(prefers-color-scheme: dark)").matches;
+
+        if ('vlayout' in localStorage) {
+            this.vlayout = JSON.parse(localStorage.vlayout)
+        }
+
+        this.checkOffline();
+        try {
+            this.config =  await this.getConfig();
+        } catch (error) {
+            this.offline = true;
+        }
+
+        // Look for a new message if an endpoint is provided.
+        if (this.config.message && this.config.message.url) {
+            this.getMessage(this.config.message.url).then(function(message){
+                // keep the original config value if no value is provided by the endpoint
+                for (const prop of ['title','style','content']) {
+                    if (prop in message && message[prop] !== null) {
+                        that.config.message[prop] = message[prop];
+                    }    
+                }
+            });
+        }
+
+        document.addEventListener('visibilitychange', function () {
+            if (document.visibilityState == "visible") {
+                that.checkOffline();
+            }
+        }, false);
+    },
+    methods: {
+        checkOffline: function () {
+            let that = this;
+            return fetch(window.location.href + "?alive", {
+                method: 'HEAD',
+                cache: 'no-store'
+            }).then(function () {
+                that.offline = false;
+            }).catch(function () {
+                that.offline = true;
+            });
+        },
+        getConfig: function (event) {
+            return fetch('config.yml').then(function (response) {
+                if (response.status != 200) {
+                    return
+                }
+                return response.text().then(function (body) {
+                    return jsyaml.load(body);
+                });
+            });
+        },
+        getMessage: function (url) {
+            return fetch(url).then(function (response) {
+                if (response.status != 200) {
+                    return;
+                }
+                return response.json();
+            });
+        },
+        toggleTheme: function() {
+            this.isDark = !this.isDark;
+            localStorage.overrideDark = this.isDark; 
+        }, 
+        toggleLayout: function() {
+            this.vlayout = !this.vlayout;
+            localStorage.vlayout = this.vlayout;
+        },
+    }
+});
+
+Vue.component('service', {
+    props: ['item'],
+    template: `<div>
+    <div class="card">
+        <a :href="item.url" :target="item.target">
+            <div class="card-content">
+                <div class="media">
+                    <div v-if="item.logo" class="media-left">
+                        <figure class="image is-48x48">
+                            <img :src="item.logo" />
+                        </figure>
+                    </div>
+                    <div v-if="item.icon" class="media-left">
+                        <figure class="image is-48x48">
+                            <i style="font-size: 35px" :class="item.icon"></i>
+                        </figure>
+                    </div>
+                    <div class="media-content">
+                        <p class="title is-4">{{ item.name }}</p>
+                        <p class="subtitle is-6">{{ item.subtitle }}</p>
+                    </div>
+                </div>
+                <div class="tag" :class="item.tagstyle" v-if="item.tag">
+                    <strong class="tag-text">#{{ item.tag }}</strong>
+                </div>
+            </div>
+        </a>
+    </div></div>`
+});
+
+if ('serviceWorker' in navigator) {
+    window.addEventListener('load', function () {
+        navigator.serviceWorker.register('worker.js');
+    });
+}
--- a/app.scss
+++ b/app.scss
@ -0,0 +1,374 @@
+$primary-color: #3367d6;
+$secondary-color: #4285f4;
+
+
+// /!\ Keep background colors sync with `theme-color` meta info
+$theme-light: (
+  background: #f5f5f5,
+  card-background: #ffffff,
+  text: #363636,
+  text-title: #303030,
+  text-subtitle: #424242,
+  card-shadow: rgba(0, 0, 0, 0.1),
+  a-hover: #363636
+);
+$theme-dark: (
+  background: #131313,
+  card-background: #2b2b2b,
+  text: #eaeaea,
+  text-title: #fafafa,
+  text-subtitle: #f5f5f5,
+  card-shadow: rgba(0, 0, 0, 0.4),
+  a-hover: #ffdd57
+);
+
+/* raleway-regular - latin */
+@font-face {
+  font-family: 'Raleway';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Raleway'), local('Raleway-Regular'),
+       url('./webfonts/raleway/raleway-v14-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./webfonts/raleway/raleway-v14-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+/* lato-regular - latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Lato Regular'), local('Lato-Regular'),
+       url('./webfonts/lato/lato-v16-latin-regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
+       url('./webfonts/lato/lato-v16-latin-regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
+}
+
+@mixin theme($theme) {
+  background-color: map-get($theme, "background");
+  color: map-get($theme, "text");
+  a {
+    &:hover {
+      color: map-get($theme, "a-hover");
+    }
+  }
+  
+  .title {
+    color: map-get($theme, "text-title");
+  }
+  .subtitle {
+    color: map-get($theme, "text-subtitle");
+  }
+
+  .card {
+    background-color: map-get($theme, "card-background");
+    box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
+    &:hover {
+      background-color: map-get($theme, "card-background");
+    }
+  }
+
+  .footer {
+    background-color:  map-get($theme, "card-background");
+    box-shadow: 0 2px 15px 0 map-get($theme, "card-shadow");
+  }
+}
+
+html { 
+  height: 100%; 
+}
+
+body {
+  font-family: 'Raleway', sans-serif;
+  height: 100%;
+
+  #app {
+    min-height: 100%;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    // Default theme
+    @include theme($theme-light);
+
+    // System pref theme
+    @media (prefers-color-scheme: light), (prefers-color-scheme: no-preference) {
+      @include theme($theme-light);
+    }
+    @media (prefers-color-scheme: dark) {
+      @include theme($theme-dark);
+    }
+
+    // User override theme
+    &.is-light {
+      @include theme($theme-light);
+    }
+    &.is-dark {
+      @include theme($theme-dark);
+    }
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: 'Lato', sans-serif;
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  h2 {
+    font-size: 1.7rem;
+    margin-top: 2rem;
+    margin-bottom: 1rem;
+
+    .fas, .fab, .far {
+      margin-right: 10px;
+    }
+
+    span {
+      font-weight: bold;
+      color: $secondary-color;
+    }
+  }
+
+  [v-cloak] {
+    display: none
+  }
+
+  #bighead {
+    color: #ffffff;
+
+    .dashboard-title {
+      padding: 6px 0 0 80px;
+    }
+
+    .first-line {
+      height: 100px;
+      vertical-align: center;
+      background-color: $primary-color;
+
+      h1 {
+        margin-top: -12px;
+        font-size: 2rem;
+      }
+
+      .headline {
+        margin-top: 5px;
+        font-size: 0.9rem;
+      }
+
+      .container {
+        height: 80px;
+        padding: 10px 0;
+      }
+
+      .logo {
+        float: left;
+        i {
+          vertical-align: top;
+          padding: 8px 15px;
+          font-size: 50px
+        }
+
+        img {
+          padding: 10px;
+          max-height: 70px;
+          max-width: 70px;
+        }
+      }
+    }
+    .navbar {
+      background-color: $secondary-color;
+
+      a {
+        color: #ffffff;
+        &:hover, &:focus {
+          color: #ffffff;
+          background-color: lighten( $secondary-color, 5% );
+        }
+      }
+    }
+  }
+
+  #main-section {
+    margin-bottom: 2rem;
+    padding: 0;
+
+    h2 {
+      border-bottom: 1px dashed #ccc;
+      padding-bottom: 10px;
+    }
+
+    .title {
+      font-size: 1.1em;
+    }
+
+    .subtitle {
+      font-size: .9em;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .container {
+      padding: 1.2rem .75rem;
+    }
+
+    .message {
+      margin-top: 45px;
+      box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+
+      .message-header {
+        font-weight: bold;
+      }
+
+      .message-body {
+        border: none;
+      }
+    }
+  }
+
+  .media-content {
+    overflow: inherit;
+  }
+
+  .tag {
+    color: $secondary-color;
+    background-color: $secondary-color;
+    position: absolute;
+    top: 1rem;
+    right: -0.2rem;
+    width: 3px;
+    overflow: hidden;
+    transition: all 0.2s ease-out;
+    padding: 0;
+    
+    .tag-text {
+      display: none;
+    }
+  }
+
+  .card {
+    border-radius: 5px;
+    border: none;
+    box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
+    transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+
+    a {
+      outline: none;
+    }
+  }
+
+  .card:hover {
+    transform: translate(0, -3px);
+
+    .tag {
+      width: auto;
+      color: #ffffff;
+      padding: 0 0.75em;
+      
+      .tag-text {
+        display: block;
+      }
+    }
+  }
+
+  .card-content {
+    height: 85px;
+    padding: 1.3rem;
+  }
+
+  .layout-vertical {
+    .card {
+      border-radius: 0;
+    }
+
+    .column div:first-of-type .card {
+      border-radius: 5px 5px 0 0;
+    }
+
+    .column div:last-child .card {
+      border-radius: 0 0 5px 5px;
+    }
+  }
+
+  .footer {
+    position: fixed;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    padding: 0.5rem;
+    text-align: left;
+    color: #676767;
+    font-size: 0.85rem;
+    transition: background-color cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
+  }
+
+  .no-footer {
+    #main-section {
+      margin-bottom: 0;
+    }
+    
+    .footer {
+      display: none;
+    }
+  }
+
+  .search-bar {
+    position: relative;
+    display: inline-block;
+    #search {
+      border: none;
+      background-color: lighten( $secondary-color, 6% );
+      border-radius: 5px;
+      padding: 2px 12px 2px 30px;
+      margin: 10px 0;
+      transition: all 100ms linear;
+      color: #ffffff;
+      height: 30px;
+      width: 100px;
+
+
+      &:focus {
+        color: #000000;
+        width: 250px;
+        background-color: #ffffff;
+      }
+    }
+
+    .search-label::before {
+      font-family: 'Font Awesome 5 Free';
+      position: absolute;
+      top: 12px;
+      left: 8px;
+      content: "\f002";
+      font-weight: 900;
+      width: 20px;
+      height: 20px;
+    }
+
+      &:focus-within .search-label::before {
+          color: #4a4a4a;
+      }
+  }
+
+  .icon-button {
+    display: inline-block;
+  }
+
+  .offline-message {
+      text-align: center;
+      margin: 35px 0;
+
+      i {
+        font-size: 2rem;
+      }
+
+      i.fa-redo-alt {
+        font-size: 1.3rem;
+        line-height: 1rem;
+        vertical-align: middle;
+        cursor: pointer;
+        color: #3273dc;
+      }
+  }
+
+}
--- a/assets/favicon.png
+++ b/assets/favicon.png
--- a/assets/logo.png
+++ b/assets/logo.png
--- a/assets/tools/bludit.png
+++ b/assets/tools/bludit.png
--- a/assets/tools/caddy.svg
+++ b/assets/tools/caddy.svg
--- a/assets/tools/elastic.png
+++ b/assets/tools/elastic.png
--- a/assets/tools/gitea.png
+++ b/assets/tools/gitea.png
--- a/assets/tools/goaccess.png
+++ b/assets/tools/goaccess.png
--- a/assets/tools/grafana.png
+++ b/assets/tools/grafana.png
--- a/assets/tools/jenkins.png
+++ b/assets/tools/jenkins.png
--- a/assets/tools/kibana.png
+++ b/assets/tools/kibana.png
--- a/assets/tools/lychee.png
+++ b/assets/tools/lychee.png
--- a/assets/tools/monit.png
+++ b/assets/tools/monit.png
--- a/assets/tools/nextcloud.png
+++ b/assets/tools/nextcloud.png
--- a/assets/tools/pingdom.png
+++ b/assets/tools/pingdom.png
--- a/assets/tools/rabbitmq.png
+++ b/assets/tools/rabbitmq.png
--- a/assets/tools/transmission.png
+++ b/assets/tools/transmission.png
--- a/assets/tools/wikijs.png
+++ b/assets/tools/wikijs.png
--- a/config.yml
+++ b/config.yml
@ -0,0 +1,70 @@
+---
+# Homepage configuration
+# See https://fontawesome.com/icons for icons options
+
+title: "Demo homepage"
+subtitle: "Homer"
+logo: "assets/logo.png"
+# icon: "fas fa-skull-crossbones" Optional icon
+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.
+
+# Optional message
+message:
+  # url: https://....
+  style: "is-dark" # See https://bulma.io/documentation/components/message/#colors for styling options.
+  title: "Demo !" 
+  content: "This is a dummy homepage demo. Find more information on github.com/bastienwirtz/homer"
+
+# Optional navbar
+links:
+  - name: "ansible"
+    icon: "fab fa-github"
+    url: "https://github.com/xxxxx/ansible/"
+    target: '_blank' # optionnal html a tag target attribute
+  - name: "Wiki"
+    icon: "fas fa-book"
+    url: "https://wiki.xxxxxx.com/"
+
+# Services
+# First level array represent a group.
+# Leave only a "items" key if not using group (group name, icon & tagstyle are optional, section separation will not be displayed).
+services:
+  - name: "DevOps"
+    icon: "fas fa-code-branch"
+    items:
+      - name: "Jenkins"
+        logo: "assets/tools/jenkins.png"
+        subtitle: "Continuous integration server"
+        tag: "CI"
+        url: "https://jenkins.io/"
+        target: '_blank' # optionnal html a tag target attribute
+      - name: "RabbitMQ Management"
+        logo: "assets/tools/rabbitmq.png"
+        subtitle: "Manage & monitor RabbitMQ server"
+        tag: "haproxy"
+        # Optional tagstyle
+        # Same styling options as the optional message.
+        tagstyle: "is-success"
+        url: "https://www.rabbitmq.com/"
+  - name: "Monitoring"
+    icon: "fas fa-heartbeat"
+    items:
+      - name: "M/Monit"
+        logo: "assets/tools/monit.png"
+        subtitle: "Monitor & manage all monit enabled hosts"
+        tag: "monit"
+        url: "https://mmonit.com/monit/"
+      - name: "Grafana"
+        logo: "assets/tools/grafana.png"
+        subtitle: "Metric analytics & dashboards"
+        url: "https://grafana.com/"
+      - name: "Kibana"
+        logo: "assets/tools/elastic.png"
+        subtitle: "Explore & visualize logs"
+        tag: "elk"
+        url: "https://www.elastic.co/products/kibana"
+      - name: "Website monitoring"
+        logo: "assets/tools/pingdom.png"
+        subtitle: "Pingdom public reports overview"
+        tag: "CI"
+        url: "https://www.pingdom.com/"
--- a/index.html
+++ b/index.html
@ -0,0 +1,119 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="robots" content="noindex">
+  <link rel="icon" type="image/png" href="assets/favicon.png">
+  <title>Homer</title>
+  <link defer rel="stylesheet" href="vendors/font-awesone.min.css">
+  <link defer rel="stylesheet" href="vendors/bulma.min.css">
+  <link rel="stylesheet" href="app.css">
+</head>
+
+<body>
+  <div id="app" v-if="config" :class="[isDark ? 'is-dark' : 'is-light', !config.footer ? 'no-footer': '']">
+    <div id="bighead">
+      <section class="first-line">
+        <div v-cloak class="container">
+          <div class="logo">
+            <img v-if="config.logo" :src="config.logo" />
+            <i v-if="config.icon" :class="config.icon"></i>
+          </div>
+          <div class="dashboard-title">
+            <span class="headline">{{ config.subtitle }}</span>
+            <h1>{{ config.title }}</h1>
+          </div>
+        </div>
+      </section>
+      <div v-cloak v-if="config.links" class="container-fluid">
+        <nav class="navbar" role="navigation" aria-label="main navigation">
+          <div class="container">
+            <div class="navbar-menu">
+              <div class="navbar-start">
+                <a v-for="link in config.links" class="navbar-item" :href="link.url" :target="link.target">
+                  <i v-if="link.icon" style="margin-right: 6px;" :class="link.icon"></i>
+                  {{ link.name }}
+                </a>
+              </div>
+              <div class="end">
+                  <a
+                    v-on:click="toggleTheme()"
+                    aria-label="Toggle dark mode"
+                    ><i class="fas fa-adjust"></i>
+                </a>
+                <a v-on:click="toggleLayout()" class="icon-button navbar-item"><i
+                    :class="['fas', vlayout ? 'fa-list' : 'fa-columns']"></i></a>
+                <div class="search-bar">
+                  <label for="search" class="search-label"></label>
+                  <input type="text" id="search" v-model="filter" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </nav>
+      </div>
+    </div>
+
+    <section id="main-section" class="section">
+      <div v-cloak class="container">
+        <div v-if="offline" class="offline-message">
+          <i class="far fa-dizzy"></i>
+          <h1>You're offline bro. <i class="fas fa-redo-alt" v-on:click="checkOffline()"></i></h1>
+        </div>
+        <div v-else>
+          <!-- Optional messages -->
+          <article v-if="config && config.message" class="message" :class="config.message.style">
+            <div v-if="config.message.title" class="message-header">
+              <p>{{ config.message.title }}</p>
+            </div>
+            <div v-if="config.message.content" class="message-body">
+              {{ config.message.content }}
+            </div>
+          </article>
+
+          <h2 v-if="filter"><i class="fas fa-search"></i> Search</h2>
+
+          <!-- Horizontal layout -->
+          <div v-if="!vlayout || filter" class="columns is-multiline">
+            <template v-for="(group, index) in config.services">
+              <h2 v-if="!filter && group.name" class="column is-full"><i v-if="group.icon" :class="group.icon"></i><span
+                  v-else>#</span>
+                {{ group.name }}</h2>
+              <service v-for="item in group.items" v-bind:item="item" class="column is-one-third-widescreen"
+                v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))">
+              </service>
+            </template>
+          </div>
+
+          <!-- Vertical layout -->
+          <div v-if="!filter && vlayout" class="columns is-multiline layout-vertical">
+            <div class="column is-one-third-widescreen" v-for="(group, index) in config.services">
+              <h2 v-if="!filter && group.name"><i v-if="group.icon" :class="group.icon"></i><span v-else>#</span>
+                {{ group.name }}</h2>
+              <service v-for="item in group.items" v-bind:item="item"
+                v-if="!filter || (item && (item.name.toLowerCase().includes(filter.toLowerCase()) || (item.tag && item.tag.toLowerCase().includes(filter.toLowerCase()))))">
+              </service>
+            </div>
+          </div>
+
+
+        </div>
+      </div>
+    </section>
+    <footer class="footer">
+        <div class="container">
+          <div class="content has-text-centered" v-if="config.footer" v-html="config.footer">
+            
+          </div>
+        </div>
+      </footer>
+  </div>
+
+  <script src="vendors/vue.min.js"></script>
+  <script src="vendors/js-yaml.min.js"></script>
+  <script src="app.js"></script>
+</body>
+
+</html>
--- a/screenshot.png
+++ b/screenshot.png
--- a/vendors/bulma.min.css
+++ b/vendors/bulma.min.css
--- a/vendors/font-awesone.min.css
+++ b/vendors/font-awesone.min.css
--- a/vendors/js-yaml.min.js
+++ b/vendors/js-yaml.min.js
--- a/vendors/vue.min.js
+++ b/vendors/vue.min.js
--- a/webfonts/fa-brands-400.eot
+++ b/webfonts/fa-brands-400.eot
--- a/webfonts/fa-brands-400.svg
+++ b/webfonts/fa-brands-400.svg
--- a/webfonts/fa-brands-400.ttf
+++ b/webfonts/fa-brands-400.ttf
--- a/webfonts/fa-brands-400.woff
+++ b/webfonts/fa-brands-400.woff
--- a/webfonts/fa-brands-400.woff2
+++ b/webfonts/fa-brands-400.woff2
--- a/webfonts/fa-regular-400.eot
+++ b/webfonts/fa-regular-400.eot
--- a/webfonts/fa-regular-400.svg
+++ b/webfonts/fa-regular-400.svg
@ -0,0 +1,803 @@
+<?xml version="1.0" standalone="no"?>
+<!--
+Font Awesome Free 5.12.0 by @fontawesome - https://fontawesome.com
+License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+-->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+<metadata>
+Created by FontForge 20190801 at Tue Dec 10 16:09:21 2019
+ By Robert Madole
+Copyright (c) Font Awesome
+</metadata>
+<defs>
+<font id="FontAwesome5Free-Regular" horiz-adv-x="512" >
+  <font-face 
+    font-family="Font Awesome 5 Free Regular"
+    font-weight="400"
+    font-stretch="normal"
+    units-per-em="512"
+    panose-1="2 0 5 3 0 0 0 0 0 0"
+    ascent="448"
+    descent="-64"
+    bbox="-0.0663408 -64.0662 640.01 448.1"
+    underline-thickness="25"
+    underline-position="-50"
+    unicode-range="U+0020-F5C8"
+  />
+    <missing-glyph />
+    <glyph glyph-name="heart" unicode="&#xf004;" 
+d="M458.4 383.7c75.2998 -63.4004 64.0996 -166.601 10.5996 -221.3l-175.4 -178.7c-10 -10.2002 -23.2998 -15.7998 -37.5996 -15.7998c-14.2002 0 -27.5996 5.69922 -37.5996 15.8994l-175.4 178.7c-53.5996 54.7002 -64.5996 157.9 10.5996 221.2
+c57.8008 48.7002 147.101 41.2998 202.4 -15c55.2998 56.2998 144.6 63.5996 202.4 15zM434.8 196.2c36.2002 36.8994 43.7998 107.7 -7.2998 150.8c-38.7002 32.5996 -98.7002 27.9004 -136.5 -10.5996l-35 -35.7002l-35 35.7002
+c-37.5996 38.2998 -97.5996 43.1992 -136.5 10.5c-51.2002 -43.1006 -43.7998 -113.5 -7.2998 -150.7l175.399 -178.7c2.40039 -2.40039 4.40039 -2.40039 6.80078 0z" />
+    <glyph glyph-name="star" unicode="&#xf005;" horiz-adv-x="576" 
+d="M528.1 276.5c26.2002 -3.7998 36.7002 -36.0996 17.7002 -54.5996l-105.7 -103l25 -145.5c4.5 -26.3008 -23.1992 -45.9004 -46.3994 -33.7002l-130.7 68.7002l-130.7 -68.7002c-23.2002 -12.2998 -50.8994 7.39941 -46.3994 33.7002l25 145.5l-105.7 103
+c-19 18.5 -8.5 50.7998 17.7002 54.5996l146.1 21.2998l65.2998 132.4c11.7998 23.8994 45.7002 23.5996 57.4004 0l65.2998 -132.4zM388.6 135.7l100.601 98l-139 20.2002l-62.2002 126l-62.2002 -126l-139 -20.2002l100.601 -98l-23.7002 -138.4l124.3 65.2998
+l124.3 -65.2998z" />
+    <glyph glyph-name="user" unicode="&#xf007;" horiz-adv-x="448" 
+d="M313.6 144c74.2002 0 134.4 -60.2002 134.4 -134.4v-25.5996c0 -26.5 -21.5 -48 -48 -48h-352c-26.5 0 -48 21.5 -48 48v25.5996c0 74.2002 60.2002 134.4 134.4 134.4c28.7998 0 42.5 -16 89.5996 -16s60.9004 16 89.5996 16zM400 -16v25.5996
+c0 47.6006 -38.7998 86.4004 -86.4004 86.4004c-14.6992 0 -37.8994 -16 -89.5996 -16c-51.2998 0 -75 16 -89.5996 16c-47.6006 0 -86.4004 -38.7998 -86.4004 -86.4004v-25.5996h352zM224 160c-79.5 0 -144 64.5 -144 144s64.5 144 144 144s144 -64.5 144 -144
+s-64.5 -144 -144 -144zM224 400c-52.9004 0 -96 -43.0996 -96 -96s43.0996 -96 96 -96s96 43.0996 96 96s-43.0996 96 -96 96z" />
+    <glyph glyph-name="clock" unicode="&#xf017;" 
+d="M256 440c137 0 248 -111 248 -248s-111 -248 -248 -248s-248 111 -248 248s111 248 248 248zM256 -8c110.5 0 200 89.5 200 200s-89.5 200 -200 200s-200 -89.5 -200 -200s89.5 -200 200 -200zM317.8 96.4004l-84.8994 61.6992
+c-3.10059 2.30078 -4.90039 5.90039 -4.90039 9.7002v164.2c0 6.59961 5.40039 12 12 12h32c6.59961 0 12 -5.40039 12 -12v-141.7l66.7998 -48.5996c5.40039 -3.90039 6.5 -11.4004 2.60059 -16.7998l-18.8008 -25.9004c-3.89941 -5.2998 -11.3994 -6.5 -16.7998 -2.59961z
+" />
+    <glyph glyph-name="list-alt" unicode="&#xf022;" 
+d="M464 416c26.5098 0 48 -21.4902 48 -48v-352c0 -26.5098 -21.4902 -48 -48 -48h-416c-26.5098 0 -48 21.4902 -48 48v352c0 26.5098 21.4902 48 48 48h416zM458 16c3.31152 0 6 2.68848 6 6v340c0 3.31152 -2.68848 6 -6 6h-404c-3.31152 0 -6 -2.68848 -6 -6v-340
+c0 -3.31152 2.68848 -6 6 -6h404zM416 108v-24c0 -6.62695 -5.37305 -12 -12 -12h-200c-6.62695 0 -12 5.37305 -12