Great work keeping this up but its a total mess.
Manually copying the config files from the localmachine? The dockerfile should be configured to do this.

Hi,

Thank you for the amazing work.

If i try to remove the footer by removing the below lines, the page ends up with a white bar the bottom when using the Dark Theme. How can i get rid of this bar?

File Modified : Index.html
Lines Removed:

        <div class="container">
          <div class="content has-text-centered">
            <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>
          </div>
        </div>
      </footer>

Running on Raspberry Pi Model 3B+ V1.3 with:
docker run --name=homer -d --restart=unless-stopped -p 8080:8080 -v /home/pi/homer/config.yml:/www/config.yml -v /home/pi/homer/assets:/www/assets b4bz/homer:latest-arm64v8

produces the error:
standard_init_linux.go:211: exec user process caused "exec format error"
in docker logs.

I suspect this may have something to do with the architecture, but I thought that the Raspberry Pi was supported through the ARM64v8 Docker image. Any thoughts on why this is happening?

Just adding an issue to start discussion on what to do for a PWA.

Current thoughts:

• Manifests needs to be static file that contains some data from config.yml
• Could have a pwa: true tag in config to insert the HEAD LINK tag (use it or not, allows for the simple clone, edit, serve approach).
• Basic bash script (and batch.bat?) that gets the data from config.yml and populates manifest (avoiding a build system). This has the advantage of being a RUN command in Dockerfile (I think).
• Icons...what to do with those (don't you need like 5 different sizes?).

That's a start. Just throwing it out there for conversation.

When I run yarn install and yarn build I get links to images from manifest json as "./img/icons/*" not "./icons/*". Changing this might also fix #66 (comment) as changing the manifest.json fixes it when run without Docker.

Feature Request - Support for Pro level Font Awesome icons (incl. light and duotone icons)

It would be good to be able to use some of the FA Pro icons (as a Pro licence holder)

For me it would be useful to have the status message and its properties loaded from an api to be more dynamic. So as an alternate you could provide an URL to the endpoint and every client will make the call to the api to get the message and its state (success and so on) then.

I edit config.yml file but i can't see any changes. am i missing something ?

Hello,

Would love to see a clear button on the search bar to clear an active search. Even better would be a keyboard shortcut to focus the search bar and another to clear the search.

Thanks

Love the dark mode feature, but it would be great if it could darken the title bar (leave the nav bar blue) in addition to the already darkened sections.

Hi,

I wanted to make a few feature requests, namely:

1. Option to remove the following section from the page, and consequentially remove the entire blue bar which appears on the top part of the page

title: "Moksh's Homelab"
subtitle: "Homelab"
logo: "assets/logo.png"
 icon: "fas fa-skull-crossbones" Optional icon
footer: false

2. I would also like the option to retain the search, view switch and theme switcher to remain, even if no pages are referenced in the following section:

  - name: "Home Page"
    icon: "fab fa-github"
    url: "https://mokshmridul.in"
    target: '_blank' # optional html a tag target attribute

Thanks a ton

There is no icon when you bookmark Homer and place it in your bookmark bar in Chrome. I included YouTube in the bookmark to the left to clarify what a normal website does when you bookmark it.

https://imgur.com/a/CSgmjd8

Hi!

It's meant to be stupid simple & zero maintenance required. Just copy the static files somewhere, and visit the index.html

Call me stupid, but I clone the repository, open the index.html in my browser and nothing happens. It's all blank.

I'm doing something wrong?
Of course I'm doing something wrong, but I don't know what.

Thanks in advance!

Since #12 is finished, could you enable Docker Hub builds for this project?

Information: https://docs.docker.com/docker-hub/builds/

Using the docker run command from the readme, changing the directories and adding the -d option.

docker run -d -p 8803:8080 -v /container/config.yml:/www/config.yml -v /container/assets/:/www/assets b4bz/homer:latest

(copy assets directory to local assets directory)

Local /container/config.yml is created as a directory.

If I remove the local config.yml directory and manually replace it with a default config file, I get errors about binding a volume to a file.

If I create the config.yml prior to creating the container, I get a "404 page not found" error.

Hey @bastienwirtz - I love the project, and have been happily hacking away on a home server page. I've noticed that while developing locally everything is perfect, but for some reason when I deploy the dashboard remotely my Font Awesome images don't render.

Any thoughts? I've looked into potential issues with service workers, etc, but have no leads.

Details:

• Using simple config file (from README) + docker: docker run -d -p $PORT:8080 -v $(pwd)/config.yml:/www/config.yml -v $(pwd)/webfonts:/www/webfonts -v $(pwd)/vendors:/www/vendors -v $(pwd)/assets:/www/assets b4bz/homer:latest
• Result: http://162.243.159.167:8090/

Screenshot:

I can confirm that the asset files are exactly from the repo:

$ tree                     
.
├── assets
│   ├── favicon.png
│   ├── logo.png
│   └── tools
│       ├── calendar.png
│       ├── elastic.png
│       ├── grafana.png
│       ├── habitory.png
│       ├── jenkins.png
│       ├── kibana.png
│       ├── monica.png
│       ├── monit.png
│       ├── netdata.png
│       ├── notes.png
│       ├── pingdom.png
│       ├── rabbitmq.png
│       ├── todoist.png
│       ├── ynab.jpg
│       └── ynab.png
├── config.yml
├── run.sh
└── vendors
    ├── bulma.min.css
    ├── font-awesone.min.css
    ├── js-yaml.min.js
    └── vue.min.js

Any thoughts? Am I incorrectly mounting the docker folder, or is there some funky caching issue? Maybe the async css load is messing things up?

I've spent an evening on this to try and debug, but at this point I'm stuck :(

Hey,

just wanted to ask is there a way to make linebreaks in the "message" box to get some order.
I wanted to Provide a small text like:

"Hey Welcome on the Landingpage.

Planed Maintenance:
-- Server Number 1"

Would it be possible to allow the tabs to open in an iFrame so that I never have to leave the Homer location, obviously if it turns Homer into a resource hog or goes sluggish then please disregard this request.

I'm submitting a ...

• feature request

Current Behavior

Current Example/Usage as displayed by README.md

services:
  - name: "DevOps"
    icon: "fas fa-code-branch"
    items:
      - name: "Jenkins"
        logo: "assets/tools/jenkins.png"
        subtitle: "Continuous integration server"
        tag: "CI"

Only one tag is available to use

Expected Behavior & Possible Solution

Multiple tags are available to search

services:
  - name: "DevOps"
    icon: "fas fa-code-branch"
    items:
      - name: "Jenkins"
        logo: "assets/tools/jenkins.png"
        subtitle: "Continuous integration server"
        tag: 
          - "CI"
          - "continuous integration"
          - "pipeline"

One can use multiple tags. When searching, one does not necessarily need to remember the name of the service to find it in the dashboard.

Context

The only instance I've seen the tag used in the web dashboard for searching. Changing the tag functionality to a list would make searching larger dashboards more useful.

Using the provided docker run command, I do not see any files show up in the config or assets folder.

docker run -p 8080:80 -v /opt/homer/config.yml:/www/config.yml -v /opt/homer/assets/:/www/assets b4bz/homer:latest

I created the folders manually in this directory:
/opt/homer/ and /opt/homer/assets/

I check the assets folder and its blank.
I created the config.yml file and used the template from the main Github page.
I made sure the folders permissions are set correctly as well.
Any idea?

Instead of hiding on mobile, it would be interesting that navbar-menu toggles into navbar-burger.

Bulma documentation : https://versions.bulma.io/0.7.0/documentation/components/navbar/

我把有些服务转发到了外网。
我希望能够设置两个地址, 在主页可以有一个按钮,切换内网和外网的地址
Thank you！

May be there is already a way, but can't find. I like to keep "homer" tab as first on my browser, so i can come back at any time to open my next application. Unfortunately, link opens in same tab and I always forget to press CTRL or mid-mouse-button.

Hi @bastienwirtz,

I have been playing around with your start page a bit and in my test environment I am actually running it in a subdir (I have opened #8 to fix some code related to that).

Once thing I am unable to fix myself is the following:

When switching in the dev console to offline mode, all externally added fonts are missing. Which means for example the font awesome icons, but also the title looks different (which is a google font as far as I can see). I have found https://stackoverflow.com/questions/39432717/how-can-i-cache-external-urls-using-service-worker which sounds like it could help to improve, but I am not sufficient enough with Javascript to actually implement the solution.

Hello

I'm trying your great project and it seems pretty promising :)
I was wondering if it could be possible to have an option to open links in a new tab (target _blank) in an item configuration.
That's all :)

Title should be enough to explain, but the option to add a favicon would be nice!

Hi,
I just downloaded zip archive, uncompressed it in folder and opened browser (firefox 72 and chromium 79) via file protocol

file:///$PATHTO/homer/index.html

both browser fail to open page and return a CORS related error located at
app.js:48
app.js:58

in firefox (68+) resing reason error is described at https://developer.mozilla.org/it/docs/Web/HTTP/CORS/Errors/CORSRequestNotHttp

some idea how to fix issue without having to edit browser settings ?

Hey when trying to initially set up Homer my installation gets stuck on
darkhttpd/1.12, copyright (c) 2003-2016 Emil Mikulic
I have tried a few times, removing the image and downloading again to no avail.
Since the default port of 8080 is in use on my machine I am using
sudo docker run -p 6200:6200 --name=homer -v /path/to/pre-created/config.yml:/www/config.yml -v /same/path/with-nested/assets/:/www/assets b4bz/homer:latest
Using Portainer I attempted to check the logs but the logs only contain the same copyright message.
Any ideas?

I guess I'm being a bit lazy and don't want to ssh into my server to edit my config.yml file. So if it's possible I would like it being on the webpage. Might be silly, but who knows?

update 200603: For me it doesn't have to be that fancy as frederickbeulieu is showing.

The Dockerfile can be make way more simple using something like this:

Dockerfile

FROM busybox

COPY ./ /www/

EXPOSE 8080/tcp

ENTRYPOINT [ "httpd", "-f", "-v", "-u", "1000", "-h", "/www", "-p", "8080" ]

Docker run

docker run -d -p 80:8080 --cap-drop=ALL --cap-add=SETGID --cap-add=SETUID homer

This removes the need for:

• Many unneeded CAPs
• Alpine
• darkhttpd

Stats

Memory: 500Kib
Image Size: 4.55MB

I have not created a PR for this, as I need to do more end-to-end testing for different ARCHs and complex homer configs.

Is there any way to create multiple message-boxes? I cant figure it out.

As I'm hosting most of my applications on the same host, I would like to add the hostname
everywhere without repeating myself.

I basically got the basics working with YAML anchors:

hostname: &hostname
  url: "http://192.168.1.1"

services:
  - name: "Supervision"
    icon: "fa fa-binoculars"
    items:
      - name: "Portainer"
        logo: "/assets/tools/portainer.png"
        subtitle: "Docker management dashboard"
        >>: * hostname

That pretty much copies my hostname to every url.
Now my problem is that I can't seem to concatenate hostname & port or extend the url.

So what I was thinking is, that it might be possible to create nodes like in the following example:

hostname: &hostname
  base_url: "http://192.168.1.1"

services:
  - name: "Supervision"
    icon: "fa fa-binoculars"
    items:
      - name: "Portainer"
        logo: "/assets/tools/portainer.png"
        subtitle: "Docker management dashboard"
        >>: * hostname
        extended_url: "/portainer"

Then they would be concatenated for more universal usage.

If someone wouldn't want to use this feature they wouldn't have to, as base_url could still be
used like it is now with url. It's just an idea and maybe it would be possible to keep the name of the node 'url' so as not to break existing configurations.

Cheers
sohnemann

Favicon used to work before, and pinning the site as an app in chrome (android or desktop) showed an icon.
I don't see the favicon anymore.
Did anything change ? The path is still the same ?
I have a favicon.png in assets folder.
Thanks.

I would love to be able to use an image in place of font awesome icons in places. A lot of things that I want to link to do not have icons on font awesome.

Thanks for great job btw!

By default, directory listing is enabled for darkhttpd. This could be a security problem.

Is there a way to remove or customise the Homer title in the tab bar?

After changing the site's config.yml, the page goes blank. There are no errors in the docker logs, but

Service worker event waitUntil() was passed a promise that rejected with 'Error: bad-precaching-response :: [{"url":"https://homer.dusterthefirst.com/assets/tools/sample.png?__WB_REVISION__=2310e486d38639bd762c521ecfff5673","status":404}]'.

shows up in the web console.

When the "name" or "subtitle" defined in the config.yml are too long, the text is overflowing from the card component or causing some unwanted line breaks.
Example below:

Would it be possible to add the functionality to automatically truncate the text?
For example with this component ?

(BTW great project ;) )

Have you considered using a CI to build and publish the docker image automatically? There are several options:

• GitHub Actions <- I would recommend that one
• TravisCI
• CircleCI

It would be possible also to publish the image not only for amd64 systems but also for arm ones.

I'd like to be able to disable the connectivity check from the configuration file. (Due to the configuration of my server, the check fails after a while, even though my connection is just fine.)

Hello,

I spun up your docker image mapped the folder and importer static files in www, however it keeps serving me the demo page no matter how much I try. my config.yml is completely ignored.

when i run docker container, it automatically exits. log shows this:
standard_init_linux.go:211: exec user process caused "exec format error"

I guess the dockerfile is not build for raspberry pi?

Not an issue, but maybe something that should be mentioned in the documentation?

I figured out that YAML Anchoring works in config.yml

For example, you can define tags and tag styles for each "item" in a service.
Using Anchoring, you can define all your tags and their styles once like this: (for example)

# Some pre-defined tag styles. reference these using <<: *{NAME} inside an item definition; For Example, <<: *Apps
tags: 
  Favourite: &Favourite
    - tag: "Favourite"
      tagstyle: "is-medium is-primary"
  CI: &CI
    - tag: "CI"
      tagstyle: "is-medium is-success"
  App: &App
    - tag: "App"
      tagstyle: "is-medium is-info"

and then simply reference these pre-defined tags in each item like so:

- name: "VS Code"
  logo: "/assets/vscode.png"
  subtitle: "Develope Code Anywhere, On Anything!"
  <<: *App # Regerence to the predefined "App" Tag
  url: "https://vscode.example.com/"
  target: "_blank" # optional html tag target attribute

then, if you want to update the name or style of any perticular tag, just update it once, in the tags section!
Great if you have a lot of services or a lot of tags!

When I copy files from github to my assets folder and launch homer through Docker, I get error "assets/manifest.json 403 (Forbidden)". Any suggestions?

I have a request, would it be possible to configure the number of columns or maximum number of columns? I would like to have more than 3. I have a wide screen and there is a lot of unused space.

I could potentially edit the code/css to make it wider, but would be more convenient for all to be in the configuration.

Thanks!

The current content of /www is a bit much:

/ $ ls -la /www/
total 212
drwxr-xr-x    1 root     root           230 Mar 10 04:02 .
drwxr-xr-x    1 root     root           140 Mar 12 20:02 ..
drwxr-xr-x    1 root     root           138 Mar 10 04:02 .git
-rw-r--r--    1 root     root           256 Mar 10 04:02 Dockerfile
-rw-r--r--    1 root     root         11357 Mar 10 04:02 LICENSE
-rw-r--r--    1 root     root          4266 Mar 10 04:02 README.md
-rw-r--r--    1 root     root          8584 Mar 10 04:02 app.css
-rw-r--r--    1 root     root          4013 Mar 10 04:02 app.js
-rw-r--r--    1 root     root          6971 Mar 10 04:02 app.scss
drwxr-xr-x    1 root     root            48 Mar 10 04:02 assets
-rw-rw-rw-    1 root     root          1885 Mar 12 20:21 config.yml
-rw-r--r--    1 root     root          4827 Mar 10 04:02 index.html
-rw-r--r--    1 root     root        151159 Mar 10 04:02 screenshot.png
drwxr-xr-x    1 root     root           114 Mar 10 04:02 vendors
drwxr-xr-x    1 root     root           550 Mar 10 04:02 webfonts
-rw-r--r--    1 root     root          1919 Mar 10 04:02 worker.js

because of this line in your Dockerfile:

COPY ./ /www/

Please consider only copying required stuff to keep the docker image clean and small. .git, Dockerfile etc. but especially assets/ should not be there.

AFAIK this is the only stuff required:

app.css
app.js
index.html
vendors/
webfonts/
worker.js

and maybe assets/favicon.png, but thats debatable.

After searching for some time I have come across an extension that allows me to use homer in my new tab page, without putting the homer address in my addressbar.

https://addons.mozilla.org/firefox/addon/custom-new-tab-page

The extension loads Homer in an iframe on your new tab page, meaning you have to add target: '_top' to each of your items.

This extension allows you to have your homer dashboard in your new tab page, while leaving focus on the address bar meaning you can still type right away if you want to search or go to a page that is not on your homer dash.

- name: "Reddit"
  logo: "assets/daily/reddit.png"
  url: "https://reddit.com"
  target: '_top'

- name: "YouTube"
  logo: "assets/daily/youtube.png"
  url: "https://youtube.com"
  target: '_top'

This extension was the finishing touch to how I wanted to use Homer and I am so happy that I wanted to share it with other people using it. Perhaps recommend it in the README.md ?

Hi,

today I wanted to update my front facing Homer installation with the newest release from https://github.com/bastienwirtz/homer/releases/tag/120425999 and with this release it is no longer possible to run Homer in a subfolder.

From looking at index.html I could spot that all resources are now referenced from the root, like for example /css/app.22d049fe.css, while for running it from a subdir it should be like `css/app.22d049fe.css.

I tried looking into the Vue files, but could not yet make sense of the changes that need to be done.

Thanks for the great work first of all !

Is it possible to set the default theme (to dark) and the default layout at all ?
I've been digging around, but can't see where I could set this.