Merge pull request #94 from bastienwirtz/avoid-file-volume

Regroup all editable files in one place

.dockerignore

@@ -2,4 +2,5 @@ assets/*
 dockerfile
 *.md
 .git
-screenshot.png
+screenshot.png
+node_modules

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"]

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"]

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"]

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 ...
 ```
 

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
 ---

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:

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"

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);