Initial draft of new docs UI usuing MkDocs

diff --git a/.gitignore b/.gitignore
index ee51c8812002fe1f960b80a4f39b78d5a279a0cc..d2cfd0861c844c10f803f748d1f4e3d0dc2c12f7 100644 (file)
--- a/.gitignore
+++ b/.gitignore
@@ -23,4 +23,10 @@ yarn-error.log*
 # App configuration
 config.yml
 
-.drone.yml
\ No newline at end of file
+.drone.yml
+
+# Python venv
+venv
+
+# MkDocs
+site

diff --git a/docs/images/logo.png b/docs/images/logo.png
new file mode 100644 (file)
index 0000000..e088a4a
Binary files /dev/null and b/docs/images/logo.png differ

diff --git a/docs/screenshot.png b/docs/images/screenshot.png
similarity index 100%
rename from docs/screenshot.png
rename to docs/images/screenshot.png

diff --git a/docs/index.md b/docs/index.md
new file mode 100644 (file)
index 0000000..36965ca
--- /dev/null
+++ b/docs/index.md
@@ -0,0 +1,122 @@
+<div class="centered">
+  <img width="180"
+       alt="Homer's donut"
+       src="images/logo.png" />
+  <h1>Homer</h1>
+</div>
+
+<p class="centered">
+  A dead simple static <strong>HOM</strong>epage for your serv<strong>ER</strong> to keep
+  your services on hand, from a simple <code>yaml</code> configuration file.
+</p>
+
+<div align="center">
+  <a href="https://opensource.org/licenses/Apache-2.0">
+    <img alt="License: Apache 2"
+         src="https://img.shields.io/badge/License-Apache%202.0-blue.svg" />
+  </a>
+  <a href="https://gitter.im/homer-dashboard/community?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge">
+    <img alt="Gitter chat"
+         src="https://badges.gitter.im/homer-dashboard/community.svg" />
+  </a>
+  <a href="https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip">
+    <img alt="Download homer static build"
+         src="https://img.shields.io/badge/Download-homer.zip-orange" />
+  </a>
+  <a href="https://github.com/awesome-selfhosted/awesome-selfhosted">
+    <img alt="Awesome"
+         src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" />
+  </a>
+</div>
+
+## Demo
+
+[![Demo](images/screenshot.png)](https://homer-demo.netlify.app)
+[Check out the demo!](https://homer-demo.netlify.app)
+
+## Features
+
+- [yaml](http://yaml.org/) file configuration
+- Installable (pwa)
+- Search
+- Grouping
+- Theme customization
+- Offline health check
+- 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.
+
+## Getting started
+
+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**.
+
+See [documentation](docs/configuration.md) for information about the configuration (`assets/config.yml`) options.
+
+### Using docker
+
+To launch container:
+
+```sh
+docker run -d \
+  -p 8080:8080 \
+  -v </your/local/assets/>:/www/assets \
+  --restart=always \
+  b4bz/homer:latest
+```
+
+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 docker-compose
+
+The `docker-compose.yml` file must be edited to match your needs.
+Set the port and volume (equivalent to `-p` and `-v` arguments):
+
+```yaml
+volumes:
+  - /your/local/assets/:/www/assets
+ports:
+  - 8080:8080
+```
+
+To launch container:
+
+```sh
+cd /path/to/docker-compose.yml
+docker-compose up -d
+```
+
+Default assets will be automatically installed in the `/www/assets` directory. Use `UID` and/or `GID` env var to change the assets owner, also in `docker-compose.yml`:
+
+```yaml
+environment:
+  - UID=1000
+  - GID=1000
+```
+
+### Using the release tarball (prebuilt, ready to use)
+
+Download and extract 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 web server.
+
+```sh
+wget https://github.com/bastienwirtz/homer/releases/latest/download/homer.zip
+unzip homer.zip
+cd homer
+cp assets/config.yml.dist assets/config.yml
+npx serve # or python -m http.server 8010 or apache, nginx ...
+```
+
+### Build manually
+
+```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.

diff --git a/docs/stylesheets/styles.css b/docs/stylesheets/styles.css
new file mode 100644 (file)
index 0000000..e1e1a3e
--- /dev/null
+++ b/docs/stylesheets/styles.css
@@ -0,0 +1,7 @@
+.centered {
+  text-align: center;
+}
+
+.bold {
+  font-weight: bold;
+}
\ No newline at end of file

diff --git a/mkdocs.yml b/mkdocs.yml
new file mode 100644 (file)
index 0000000..58e37c3
--- /dev/null
+++ b/mkdocs.yml
@@ -0,0 +1,81 @@
+# Project information
+site_name: Homer
+site_url: https://bastienwirtz.github.io/homer/
+
+# Repository
+repo_name: bastienwirtz/homer
+repo_url: https://github.com/bastienwirtz/homer
+edit_uri: ""
+
+# Stylesheet
+extra_css:
+  - stylesheets/styles.css
+
+# Theme
+theme:
+  logo: images/logo.png
+  name: material
+  palette:
+    - media: "(prefers-color-scheme: light)" 
+      scheme: default
+      primary: blue
+      accent: blue
+      toggle:
+        icon: material/brightness-4
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)" 
+      scheme: slate
+      primary: blue
+      accent: blue
+      toggle:
+        icon: material/brightness-7
+        name: Switch to light mode
+  features:
+    - content.code.annotate
+    - navigation.indexes
+    - navigation.sections
+    - navigation.top
+    - navigation.tracking
+    - search.highlight
+    - search.share
+    - search.suggest
+    - toc.follow
+
+# Copyright - name for footer text
+copyright: Homer dashboard
+
+# Socials
+extra:
+  social:
+    - icon: fontawesome/brands/github
+      link: https://github.com/bastienwirtz/homer
+    - icon: fontawesome/brands/gitter
+      link: https://gitter.im/homer-dashboard/community
+    - icon: fontawesome/brands/docker
+      link: https://hub.docker.com/r/b4bz/homer
+
+# Extensions
+markdown_extensions:
+  - abbr
+  - admonition
+  - attr_list
+  - def_list
+  - footnotes
+  - meta
+  - md_in_html
+  - toc:
+      permalink: true
+  - pymdownx.highlight:
+      anchor_linenums: true
+  - pymdownx.inlinehilite
+  - pymdownx.snippets
+  - pymdownx.superfences
+
+# Page tree
+nav:
+  - Home: index.md
+  - Configuration: configuration.md
+  - Custom services: customservices.md
+  - Tips & tricks: tips-and-tricks.md
+  - Development: development.md
+  - Troubleshooting: troubleshooting.md