Build system integration using vue-cli.

.browserslistrc

@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead

.eslintrc.js

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: ["plugin:vue/essential", "eslint:recommended", "@vue/prettier"],
+  parserOptions: {
+    parser: "babel-eslint",
+  },
+  rules: {
+    "no-console": "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "vue/require-v-for-key": "off",
+  },
+};

.github/workflows/main.yml

@@ -0,0 +1,38 @@
+# Publish pre-build release
+name: Upload Release Asset
+
+on:
+  push:
+    branches: [master]
+
+jobs:
+  build:
+    name: Upload Release Asset
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Build project
+        run: |
+          yarn install
+          yarn build
+          zip --junk-paths homer dist/*
+      - name: Create Release
+        id: create_release
+        uses: actions/create-release@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.run_id }}
+          release_name: Release ${{ github.run_id }}
+          draft: false
+          prerelease: false
+      - name: Upload Release Asset
+        id: upload-release-asset
+        uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./homer.zip
+          asset_name: homer.zip
+          asset_content_type: application/zip

.gitignore

@@ -0,0 +1,24 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+
+# App configuration
+public/config.yml

Dockerfile

@@ -1,6 +1,18 @@
+# build stage
+FROM node:lts-alpine as build-stage
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN yarn install
+
+COPY . .
+RUN yarn build
+
+# production stage
 FROM alpine:3.11
 
-COPY ./ /www/
+COPY --from=build-stage /app/dist /www/
 
 ENV USER darkhttpd
 ENV GROUP darkhttpd
@@ -12,4 +24,4 @@ RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} &
 
 USER darkhttpd
 
-ENTRYPOINT ["darkhttpd","/www/", "--no-listing"]
+ENTRYPOINT ["darkhttpd","/www/", "--no-listing"]

Dockerfile.arm32v7

@@ -1,13 +1,26 @@
+# build stage
+FROM node:lts-alpine as build-stage
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN yarn install
+
+COPY . .
+RUN yarn build
+
+# Multi arch build support
 FROM alpine as qemu
 
 ARG QEMU_VERSION="v4.2.0-7"
 
 RUN wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-arm-static && chmod +x qemu-arm-static
 
+# production stage
 FROM arm32v7/alpine:3.11
 
 COPY --from=qemu qemu-arm-static /usr/bin/
-COPY ./ /www/
+COPY --from=build-stage /app/dist /www/
 
 ENV USER darkhttpd
 ENV GROUP darkhttpd

Dockerfile.arm64v8

@@ -1,13 +1,26 @@
+# build stage
+FROM node:lts-alpine as build-stage
+
+WORKDIR /app
+
+COPY package*.json ./
+RUN yarn install
+
+COPY . .
+RUN yarn build
+
+# Multi arch build support
 FROM alpine as qemu
 
 ARG QEMU_VERSION="v4.2.0-7"
 
 RUN wget https://github.com/multiarch/qemu-user-static/releases/download/${QEMU_VERSION}/qemu-aarch64-static && chmod +x qemu-aarch64-static
 
+# production stage
 FROM arm64v8/alpine:3.11
 
 COPY --from=qemu qemu-aarch64-static /usr/bin/
-COPY ./ /www/
+COPY --from=build-stage /app/dist /www/
 
 ENV USER darkhttpd
 ENV GROUP darkhttpd

README.md

@@ -6,48 +6,130 @@ A dead simple static **HOM**epage for your serv**ER** to keep your services on h
 
 It supports keyboard shortcuts:
 
-* `/` Start searching.
-* `Escape` Stop searching.
-* `Enter` Open the first matching result (respects the bookmark's `_target` property).
-* `Alt`/`Option` + `Enter` Open the first matching result in a new tab.
+- `/` Start searching.
+- `Escape` Stop searching.
+- `Enter` Open the first matching result (respects the bookmark's `_target` property).
+- `Alt`/`Option` + `Enter` Open the first matching result in a new tab.
 
 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://raw.github.com/bastienwirtz/homer/master/screenshot.png)
 
 ## Roadmap
 
-* [ ] Colors / theme customization
-* [ ] Enable PWA support (making possible to "install" - add to homescreen - it)
-* [ ] Improve maintainability (external library import & service workers cached file list.)
+- [ ] Add more themes.
+- [ ] Add support for custom service card (add custom feature to some service / app link)
+- [x] Colors / theme customization
+- [x] Enable PWA support (making possible to "install" - add to homescreen - it)
+- [x] Improve maintainability (external library import & service workers cached file list.)
 
-## Installation
+## Usage
 
 ### 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
+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's meant to be stupid simple & zero maintenance required. Just copy the static files somewhere, and visit the `index.html`.
+Homer is a static page that need to be generated from the source in this repository.
+Use the folowing command to build the project:
+
+```sh
+# Using yarn (recommended)
+yarn install
+yarn build
+
+# **OR** Using npm
+npm install
+npm run build
+```
+
+Then your dashboard is ready to use in the `/dist` directory.
+The `dist` directory is meant to be served by an HTTP server, so **it will not work if you open dist/index.html directly over file:// protocol**.
+
+Use it like any static HTML content (use a webserver or open the html index directly).
+
+## Developement
+
+```sh
+# Using yarn (recommended)
+yarn install
+yarn serve
+
+# **OR** Using npm
+npm install
+npm run serve
+```
+
+### Themes
+
+Themes are meant to be simple customization (written in [scss](https://sass-lang.com/documentation/syntax)).
+To addd a new theme, just add a file in the theme directory, and put all style in the `body #app.theme-<name>` scope. Then import it in the main style file.
+
+```scss
+// `src/assets/themes/my-awesome-theme.scss`
+body #app.theme-my-awesome-theme. { ... }
+```
+
+```scss
+// `src/assets/app.scss`
+// Themes import
+@import "./themes/sui.scss";
+...
+@import "./themes/my-awesome-theme.scss";
+```
 
 ## Configuration
 
-Title, icons, links, colors, and services can be configured in the `config.yml` file, using [yaml](http://yaml.org/) format.
+Title, icons, links, colors, and services can be configured in the `config.yml` file (located in project root directory once built, or in the `public/` directory in developement mode), using [yaml](http://yaml.org/) format.
 
 ```yaml
 ---
 # Homepage configuration
 # See https://fontawesome.com/icons for icons options
 
-title: "Simple homepage"
+title: "App dashboard"
 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:
+# icon: "fas fa-skull-crossbones"
+
+header: true # Set to false to hide the 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:
+
+# Optional theming
+theme: default # 'default' or one of the theme available in 'src/assets/themes'.
+
+# Here is the exaustive list of customization parameters
+# However all value are optional and will fallback to default if not set.
+# if you want to change only some of the colors, feel free to remove all unused key.
+colors:
+  light:
+    highlight-primary: "#3367d6"
+    highlight-secondary: "#4285f4"
+    highlight-hover: "#5a95f5"
+    background: "#f5f5f5"
+    card-background: "#ffffff"
+    text: "#363636"
+    text-header: "#424242"
+    text-title: "#303030"
+    text-subtitle: "#424242"
+    card-shadow: rgba(0, 0, 0, 0.1)
+    link-hover: "#363636"
+  dark:
+    highlight-primary: "#3367d6"
+    highlight-secondary: "#4285f4"
+    highlight-hover: "#5a95f5"
+    background: "#131313"
+    card-background: "#2b2b2b"
+    text: "#eaeaea"
+    text-header: "#ffffff"
+    text-title: "#fafafa"
+    text-subtitle: "#f5f5f5"
+    card-shadow: rgba(0, 0, 0, 0.4)
+    link-hover: "#ffdd57"
 
 # Optional message
 message:
@@ -62,7 +144,7 @@ links:
   - name: "ansible"
     icon: "fab fa-github"
     url: "https://github.com/xxxxx/ansible/"
-    target: '_blank' # optional html a tag target attribute
+    target: "_blank" # optional html tag target attribute
   - name: "Wiki"
     icon: "fas fa-book"
     url: "https://wiki.xxxxxx.com/"
@@ -81,7 +163,7 @@ services:
         subtitle: "Continuous integration server"
         tag: "CI"
         url: "#"
-        target: '_blank' # optional html a tag target attribute
+        target: "_blank" # optional html tag target attribute
       - name: "RabbitMQ Management"
         logo: "/assets/tools/rabbitmq.png"
         subtitle: "Manage & monitor RabbitMQ server"
@@ -111,7 +193,6 @@ services:
         subtitle: "Pingdom public reports overview"
         tag: "CI"
         url: "#"
-
 ```
 
 If you choose to fetch message information from an endpoint, the output format should be: