From b102c9b2b3aaa4d66bda8d932ba2d6bd4575c044 Mon Sep 17 00:00:00 2001 From: Bastien Wirtz Date: Tue, 23 Jun 2020 22:56:33 -0700 Subject: Regroup all editable files in one place --- .dockerignore | 3 +- Dockerfile | 6 +-- Dockerfile.arm32v7 | 3 +- Dockerfile.arm64v8 | 3 +- README.md | 16 +++---- docs/configuration.md | 2 +- docs/tips-and-tricks.md | 2 +- entrypoint.sh | 15 +++++-- public/assets/config.yml.dist | 76 ++++++++++++++++++++++++++++++++ public/assets/config.yml.dist.sample-sui | 64 +++++++++++++++++++++++++++ public/config.yml.dist | 76 -------------------------------- public/config.yml.dist.sample-sui | 64 --------------------------- src/App.vue | 2 +- 13 files changed, 169 insertions(+), 163 deletions(-) create mode 100644 public/assets/config.yml.dist create mode 100644 public/assets/config.yml.dist.sample-sui delete mode 100644 public/config.yml.dist delete mode 100644 public/config.yml.dist.sample-sui diff --git a/.dockerignore b/.dockerignore index 6d01701..461e021 100644 --- a/.dockerignore +++ b/.dockerignore @@ -2,4 +2,5 @@ assets/* dockerfile *.md .git -screenshot.png \ No newline at end of file +screenshot.png +node_modules diff --git a/Dockerfile b/Dockerfile index cd3ab11..0375112 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,12 +19,12 @@ ENV UID 911 ENV PORT 8080 RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} && \ - apk add -U darkhttpd + apk add -U --no-cache su-exec darkhttpd COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist /www/ +COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist/assets /www/default-assets COPY --chown=${USER}:${GROUP} entrypoint.sh /entrypoint.sh -USER ${USER} EXPOSE ${PORT} -VOLUME [ "/www/config.yml", "/www/assets" ] +VOLUME /www/assets ENTRYPOINT ["/bin/sh", "/entrypoint.sh"] diff --git a/Dockerfile.arm32v7 b/Dockerfile.arm32v7 index ef01d1f..ba9c95d 100644 --- a/Dockerfile.arm32v7 +++ b/Dockerfile.arm32v7 @@ -32,9 +32,10 @@ RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} & rm /usr/bin/qemu-arm-static COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist /www/ +COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist/assets /www/default-assets COPY --chown=${USER}:${GROUP} entrypoint.sh /entrypoint.sh USER ${USER} EXPOSE ${PORT} -VOLUME [ "/www/config.yml", "/www/assets" ] +VOLUME /www/assets ENTRYPOINT ["/bin/sh", "/entrypoint.sh"] diff --git a/Dockerfile.arm64v8 b/Dockerfile.arm64v8 index 7899027..4e307d8 100644 --- a/Dockerfile.arm64v8 +++ b/Dockerfile.arm64v8 @@ -32,9 +32,10 @@ RUN addgroup -S ${GROUP} -g ${GID} && adduser -D -S -u ${UID} ${USER} ${GROUP} & rm /usr/bin/qemu-aarch64-static COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist /www/ +COPY --from=build-stage --chown=${USER}:${GROUP} /app/dist/assets /www/default-assets COPY --chown=${USER}:${GROUP} entrypoint.sh /entrypoint.sh USER ${USER} EXPOSE ${PORT} -VOLUME [ "/www/config.yml", "/www/assets" ] +VOLUME /www/assets ENTRYPOINT ["/bin/sh", "/entrypoint.sh"] diff --git a/README.md b/README.md index 65ef9ab..7d76b0e 100644 --- a/README.md +++ b/README.md @@ -38,31 +38,25 @@ ervices on hand, from a simple `yaml` configuration file. Homer is a full static html/js dashboard, generated from the source in `/src` using webpack. It's meant to be served by an HTTP server, **it will not work if you open dist/index.html directly over file:// protocol**. -For more information about the `config.yml` file see [configuration](docs/configuration.md) the section. +See [documentation](docs/configuration.md) for information about the configuration (`assets/config.yml`) options. ### Using docker ```sh -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/assets/:/www/assets b4bz/homer:latest ``` -As a bind mount is used here, docker will not copy the initial content of the `assets` directory to the mounted directory. -You can initialise your assets directory with the content provided in this repository -```sh -cp -r /public/assets/* /your/local/assets/ -``` - -**Alternatively** if you just want to provide images/icons without customizing the other files (app manifest & pwa icons), you can mount a custom directory in the `www` directory and use it in your `config.yml` for icons path. +Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner (`docker run -e "UID=1000" -e "GID=1000" [...]`). ### Using the release tarball (prebuilt, ready to use) -Download and extract the latest the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `config.yml.dist` file to `config.yml`, and put it behind a webserver. +Download and extract the latest the latest release (`homer.zip`) from the [release page](https://github.com/bastienwirtz/homer/releases), rename the `assets/config.yml.dist` file to `assets/config.yml`, and put it behind a webserver. ```sh wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip unzip homer.zip cd homer -cp config.yml.dist config.yml +cp assets/config.yml.dist assets/config.yml npx serve # or python -m http.server 8010 or apache, nginx ... ``` diff --git a/docs/configuration.md b/docs/configuration.md index a2469ed..409db34 100644 --- a/docs/configuration.md +++ b/docs/configuration.md @@ -1,6 +1,6 @@ ## Configuration -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. +Title, icons, links, colors, and services can be configured in the `config.yml` file (located in `/assets` directory once built, or in the `public/assets` directory in developement mode), using [yaml](http://yaml.org/) format. ```yaml --- diff --git a/docs/tips-and-tricks.md b/docs/tips-and-tricks.md index 632b62d..fda670d 100644 --- a/docs/tips-and-tricks.md +++ b/docs/tips-and-tricks.md @@ -74,7 +74,7 @@ Great if you have a lot of services or a lot of tags! Homer doesn't yet provide a way to edit your configuration from inside Homer itself, but that doesnt mean it cant be done! -You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your config.yml file from anywhere! +You can setup and use [Code-Server](https://github.com/cdr/code-server) to edit your `config.yml` file from anywhere! If you're running Homer in docker, you can setup a Code-Server container and pass your homer config directory into it. Simply pass your homer config directory as and extra -v parameter to your code-server container: diff --git a/entrypoint.sh b/entrypoint.sh index 7623322..dd55cdb 100644 --- a/entrypoint.sh +++ b/entrypoint.sh @@ -1,6 +1,15 @@ #!/bin/sh -yes n | cp -i /www/config.yml.dist /www/config.yml -while true; do echo n; done | cp -Ri /app/dist/www/assets /www/assets 2>/dev/null +# Ensure default assets are present. +while true; do echo n; done | cp -Ri /www/default-assets/* /www/assets/ &> /dev/null -darkhttpd /www/ --no-listing --port $PORT +# Ensure compatibility with previous version (config.yml was in the root directory) +if [ -f "/www/config.yml" ]; then + yes n | cp -i /www/config.yml /www/assets/ &> /dev/null +fi + +# Install default config if no one is available. +yes n | cp -i /www/default-assets/config.yml.dist /www/assets/config.yml &> /dev/null + +chown -R $UID:$GID /www/assets/* +exec su-exec $USER:$GROUP darkhttpd /www/ --no-listing --port "$PORT" diff --git a/public/assets/config.yml.dist b/public/assets/config.yml.dist new file mode 100644 index 0000000..6be66e1 --- /dev/null +++ b/public/assets/config.yml.dist @@ -0,0 +1,76 @@ +--- +# Homepage configuration +# See https://fontawesome.com/icons for icons options + +title: "Demo dashboard" +subtitle: "Homer" +logo: "logo.png" +# icon: "fas fa-skull-crossbones" # Optional icon + +header: true +footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. + +# Optionnal theme customization +theme: default +colors: + light: + highlight-primary: "#3367d6" + highlight-secondary: "#4285f4" + highlight-hover: "#5a95f5" + background: "#f5f5f5" + card-background: "#ffffff" + text: "#363636" + text-header: "#ffffff" + 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: + #url: https://b4bz.io + 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: [] # Allows for navbar (dark mode, layout, and search) without any links +links: + - name: "Contribute" + icon: "fab fa-github" + url: "https://github.com/bastienwirtz/homer" + target: "_blank" # optionnal html a tag target attribute + - name: "Wiki" + icon: "fas fa-book" + url: "https://www.wikipedia.org/" + +# 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: "Applications" + icon: "fas fa-cloud" + items: + - name: "Awesome app" + logo: "assets/tools/sample.png" + subtitle: "Bookmark example" + tag: "app" + url: "https://www.reddit.com/r/selfhosted/" + target: "_blank" # optionnal html a tag target attribute + - name: "Another one" + logo: "assets/tools/sample2.png" + subtitle: "Another application" + tag: "app" + url: "#" diff --git a/public/assets/config.yml.dist.sample-sui b/public/assets/config.yml.dist.sample-sui new file mode 100644 index 0000000..71eaef0 --- /dev/null +++ b/public/assets/config.yml.dist.sample-sui @@ -0,0 +1,64 @@ +--- +# Homepage configuration +# See https://fontawesome.com/icons for icons options + +title: "Hello beautiful!" +subtitle: "App dashboard" +logo: false +# icon: "fas fa-skull-crossbones" Optional icon + +header: true + +# Optionnal theme customization +theme: sui +colors: + light: + highlight-primary: transparent + highlight-secondary: transparent + highlight-hover: "#4a4a4a" + text-subtitle: "#424242" + dark: + background: "#2B2C56" + highlight-primary: transparent + highlight-secondary: transparent + highlight-hover: "#200b35" + text-subtitle: "#6375e8" + +# Optional navbar +# links: [] # Allows for navbar (dark mode, layout, and search) without any links +links: [] + +# 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: "APPLICATIONS" + items: + - name: "Jenkins" + logo: "assets/tools/jenkins.png" + subtitle: "Continuous integration server" + url: "https://jenkins.io/" + - name: "RabbitMQ Management" + logo: "assets/tools/rabbitmq.png" + subtitle: "Manage & monitor RabbitMQ server" + # Optional tagstyle + # Same styling options as the optional message. + tagstyle: "is-success" + url: "https://www.rabbitmq.com/" + - name: "M/Monit" + logo: "assets/tools/monit.png" + subtitle: "Monitor & manage all monit enabled hosts" + 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" + 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/" diff --git a/public/config.yml.dist b/public/config.yml.dist deleted file mode 100644 index 6be66e1..0000000 --- a/public/config.yml.dist +++ /dev/null @@ -1,76 +0,0 @@ ---- -# Homepage configuration -# See https://fontawesome.com/icons for icons options - -title: "Demo dashboard" -subtitle: "Homer" -logo: "logo.png" -# icon: "fas fa-skull-crossbones" # Optional icon - -header: true -footer: '

Created with ❤️ with bulma, vuejs & font awesome // Fork me on

' # set false if you want to hide it. - -# Optionnal theme customization -theme: default -colors: - light: - highlight-primary: "#3367d6" - highlight-secondary: "#4285f4" - highlight-hover: "#5a95f5" - background: "#f5f5f5" - card-background: "#ffffff" - text: "#363636" - text-header: "#ffffff" - 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: - #url: https://b4bz.io - 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: [] # Allows for navbar (dark mode, layout, and search) without any links -links: - - name: "Contribute" - icon: "fab fa-github" - url: "https://github.com/bastienwirtz/homer" - target: "_blank" # optionnal html a tag target attribute - - name: "Wiki" - icon: "fas fa-book" - url: "https://www.wikipedia.org/" - -# 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: "Applications" - icon: "fas fa-cloud" - items: - - name: "Awesome app" - logo: "assets/tools/sample.png" - subtitle: "Bookmark example" - tag: "app" - url: "https://www.reddit.com/r/selfhosted/" - target: "_blank" # optionnal html a tag target attribute - - name: "Another one" - logo: "assets/tools/sample2.png" - subtitle: "Another application" - tag: "app" - url: "#" diff --git a/public/config.yml.dist.sample-sui b/public/config.yml.dist.sample-sui deleted file mode 100644 index 71eaef0..0000000 --- a/public/config.yml.dist.sample-sui +++ /dev/null @@ -1,64 +0,0 @@ ---- -# Homepage configuration -# See https://fontawesome.com/icons for icons options - -title: "Hello beautiful!" -subtitle: "App dashboard" -logo: false -# icon: "fas fa-skull-crossbones" Optional icon - -header: true - -# Optionnal theme customization -theme: sui -colors: - light: - highlight-primary: transparent - highlight-secondary: transparent - highlight-hover: "#4a4a4a" - text-subtitle: "#424242" - dark: - background: "#2B2C56" - highlight-primary: transparent - highlight-secondary: transparent - highlight-hover: "#200b35" - text-subtitle: "#6375e8" - -# Optional navbar -# links: [] # Allows for navbar (dark mode, layout, and search) without any links -links: [] - -# 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: "APPLICATIONS" - items: - - name: "Jenkins" - logo: "assets/tools/jenkins.png" - subtitle: "Continuous integration server" - url: "https://jenkins.io/" - - name: "RabbitMQ Management" - logo: "assets/tools/rabbitmq.png" - subtitle: "Manage & monitor RabbitMQ server" - # Optional tagstyle - # Same styling options as the optional message. - tagstyle: "is-success" - url: "https://www.rabbitmq.com/" - - name: "M/Monit" - logo: "assets/tools/monit.png" - subtitle: "Monitor & manage all monit enabled hosts" - 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" - 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/" diff --git a/src/App.vue b/src/App.vue index 17c3214..613c743 100644 --- a/src/App.vue +++ b/src/App.vue @@ -156,7 +156,7 @@ export default { document.title = `${this.config.title} | ${this.config.subtitle}`; }, methods: { - getConfig: function (path = "config.yml") { + getConfig: function (path = "assets/config.yml") { return fetch(path).then((response) => { if (!response.ok) { throw Error(response.statusText); -- cgit v1.2.3