![]() Browsers have a focus outline for a reason: accessibility, letting users interact with the page using just the keyboard. We, web developers, must not remove the focus outline without providing an equivalent alternative. * https://accessiblewebsiteservices.com/accessible-css-focus-on-the-outline/ * https://theadminbar.com/accessibility-weekly/focus-outlines/ * https://stackoverflow.com/questions/9274948/css-outline-best-practices I considered using the same visual feedback as the mouse-over effect, but that's not possible in the current HTML/CSS. That `transform: translateY(-3px)` effect is being applied to the parent `div.card`, which is not focusable, and thus we cannot trigger the same effect. The solution would require reworking both the HTML and CSS. (It can also be argued that tiny 3px offset is too subtle to be used as a focus indicator.) For now, I've restored the default browser focus outline, and someday in the future someone could try to provide a different focus indication. |
||
---|---|---|
.github | ||
.schema | ||
docs | ||
dummy-data | ||
public | ||
src | ||
.dockerignore | ||
.gitignore | ||
.jsconfig.json | ||
CODE_OF_CONDUCT.md | ||
CONTRIBUTING.md | ||
Dockerfile | ||
LICENSE | ||
README.md | ||
entrypoint.sh | ||
eslint.config.js | ||
index.html | ||
lighttpd-ipv6.sh | ||
lighttpd.conf | ||
package.json | ||
pnpm-lock.yaml | ||
vite.config.js |
README.md
Homer
A dead simple static HOMepage for your servER to keep your services on hand, from a simple yaml
configuration file.
Demo • Docker Hub • Get started
Highlights
- ⚡️ Lightweight & Fast
- 🥱 Low / No maintenance
- 📄 Simple yaml file configuration
- ➕ Installable (pwa)
- 🧠 Smart cards
- 🔍️ Fuzzy search
- 📂 Multi pages & item grouping
- 🎨 Theme customization
- ⌨️ keyboard shortcuts:
- / Start searching.
- Escape Stop searching.
- Enter Open the first matching result (respects the bookmark's
_target
property). - Alt (or Option) + Enter Open the first matching result in a new tab.
Table of Contents
- Getting started
- Kubernetes Installation
- Configuration
- Theming
- Smart cards
- Tips & tricks
- Development
- Troubleshooting
Get started
Homer is a full static html/js dashboard, based on a simple yaml configuration file. See documentation for information about the configuration (assets/config.yml
) options.
It's meant to be served by an HTTP server, it will not work if you open the index.html directly over file:// protocol.
Using docker
The configuration directory is bind mounted to make your dashboard easy to maintain.
Start the container with docker run
# Make sure your local config directory exists
docker run -d \
--name homer \
-p 8080:8080 \
--mount type=bind,source="/path/to/config/dir",target=/www/assets \
--restart=unless-stopped \
b4bz/homer:latest
[!NOTE]
The container will run using a user uid and gid 1000 by default, add--user <your-UID>:<your-GID>
to the docker command to adjust it if necessary. Make sure this match the permissions of your assets directory.
or docker-compose
services:
homer:
image: b4bz/homer
container_name: homer
volumes:
- /path/to/config/dir:/www/assets # Make sure your local config directory exists
ports:
- 8080:8080
user: 1000:1000 # default
environment:
- INIT_ASSETS=1 # default, requires the config directory to be writable for the container user (see user option)
restart: unless-stopped
Environment variables:
-
INIT_ASSETS
(default:1
) Install example configuration file & assets (favicons, ...) to help you get started. -
SUBFOLDER
(default:null
) If you would like to host Homer in a subfolder, (ex: http://my-domain/homer), set this to the subfolder path (ex/homer
). -
PORT
(default:8080
) If you would like to change internal port of Homer from default8080
to your port choice. -
IPV6_DISABLE
(default: 0) Set to1
to disable listening on IPv6.
Using the release tarball (prebuilt, ready to use)
Download and extract the latest release (homer.zip
) from the release page, rename the assets/config.yml.dist
file to assets/config.yml
, and put it behind a web server.
wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip
unzip homer.zip -d homer
cd homer
cp assets/config.yml.dist assets/config.yml
pnpx http-server # or python -m http.server 8010 or any web server.
Build manually
pnpm install
pnpm build
Then your dashboard is ready to use in the /dist
directory.