Skip to content

Commit

Permalink
Build system integration using vue-cli.
Browse files Browse the repository at this point in the history
  • Loading branch information
bastienwirtz committed May 25, 2020
1 parent ab7ac44 commit b9c5fcf
Show file tree
Hide file tree
Showing 69 changed files with 10,028 additions and 10,347 deletions.
3 changes: 3 additions & 0 deletions .browserslistrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead
15 changes: 15 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -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",
},
};
21 changes: 21 additions & 0 deletions .gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
.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?
16 changes: 14 additions & 2 deletions Dockerfile
Original file line number Diff line number Diff line change
@@ -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
Expand All @@ -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"]
15 changes: 14 additions & 1 deletion Dockerfile.arm32v7
Original file line number Diff line number Diff line change
@@ -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
Expand Down
15 changes: 14 additions & 1 deletion Dockerfile.arm64v8
Original file line number Diff line number Diff line change
@@ -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
Expand Down
109 changes: 94 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,24 @@ 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

Expand All @@ -31,7 +33,51 @@ 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'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.
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

Theme 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

Expand All @@ -42,12 +88,46 @@ Title, icons, links, colors, and services can be configured in the `config.yml`
# 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:
Expand All @@ -62,7 +142,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 a tag target attribute
- name: "Wiki"
icon: "fas fa-book"
url: "https://wiki.xxxxxx.com/"
Expand All @@ -81,7 +161,7 @@ services:
subtitle: "Continuous integration server"
tag: "CI"
url: "#"
target: '_blank' # optional html a tag target attribute
target: "_blank" # optional html a tag target attribute
- name: "RabbitMQ Management"
logo: "/assets/tools/rabbitmq.png"
subtitle: "Manage & monitor RabbitMQ server"
Expand Down Expand Up @@ -111,7 +191,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:
Expand Down
Loading

0 comments on commit b9c5fcf

Please sign in to comment.