Created new custom home page, moved Getting started to its own page, fixed requirements.txt, added docs/README.md

8 files changed, 259 insertions, 210 deletions

diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 0000000..5fca6ed
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,25 @@
+# Homer docs
+
+Live on github pages: [https://bastienwirtz.github.io/homer/](https://bastienwirtz.github.io/homer/)
+
+## Local development
+
+### Install Python dependencies
+
+Homer's documentation is built using [Material for MkDocs](https://squidfunk.github.io/mkdocs-material/). To get started, you'll need Python 3 installed on your machine and set up your local environment.
+
+```sh
+python -m venv venv
+source venv/bin/activate
+pip install -r requirements.txt
+```
+
+### Preview local copy
+
+MkDocs comes with a command-line utility for building and serving the static documentation site every time you save a file. To launch it, run the `serve` command.
+
+```sh
+mkdocs serve
+```
+
+Your local version of the docs site will now be available at http://localhost:8000/.
diff --git a/docs/getting_started.md b/docs/getting_started.md
new file mode 100644
index 0000000..2a123e2
--- /dev/null
+++ b/docs/getting_started.md
@@ -0,0 +1,70 @@
+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/index.md b/docs/index.md
index b7ac66c..a572d90 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,122 +1,3 @@
-<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 class="centered">
-  <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.
+---
+template: home.html
+---
diff --git a/docs/overrides/assets/stylesheets/home.css b/docs/overrides/assets/stylesheets/home.css
new file mode 100644
index 0000000..76f585b
--- /dev/null
+++ b/docs/overrides/assets/stylesheets/home.css
@@ -0,0 +1,81 @@
+.hero {
+  padding: 32px 2.8rem;
+  color: var(--md-primary-bg-color);
+  background: linear-gradient(
+    to bottom,
+    var(--md-primary-fg-color),
+    hsla(160deg, 47%, 55%, 1) 99%,
+    #fff 99%
+  );
+}
+
+.hero-container {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: 1rem 0;
+}
+
+.hero-content {
+  flex: 0 0 40%;
+}
+
+.hero-title {
+  height: 4rem;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.hero-title > img {
+  max-height: 100%;
+  width: auto;
+}
+
+.hero-title > h1 {
+  margin: 0 0 0 0.5rem;
+  font-size: 4rem;
+  line-height: 1;
+  color: currentColor;
+  font-weight: 700;
+}
+
+.hero-image {
+  width: 17rem;
+  height: auto;
+  flex: 0 0 50%;
+  transform: perspective(300px) rotate3D(0, 1, 0, -5deg);
+  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
+}
+
+.hero .md-button {
+  margin-top: 0.5rem;
+  margin-right: 0.5rem;
+  color: var(--md-primary-bg-color);
+}
+
+.hero .md-button-primary {
+  background-color: var(--md-primary-bg-color);
+  color: hsla(280deg, 37%, 48%, 1);
+  border-color: var(--md-primary-bg-color);
+}
+
+.hero .md-button:focus,
+.hero .md-button:hover {
+  background-color: var(--md-accent-fg-color);
+  color: var(--md-default-bg-color);
+  border-color: var(--md-accent-fg-color);
+}
+
+.md-header {
+  position: initial;
+}
+
+.md-main__inner {
+  margin: 0;
+}
+
+.md-content {
+  display: none;
+}
diff --git a/docs/overrides/home.html b/docs/overrides/home.html
new file mode 100644
index 0000000..81ef4aa
--- /dev/null
+++ b/docs/overrides/home.html
@@ -0,0 +1,49 @@
+{% extends "base.html" %}
+
+{% block extrahead %}
+<link
+  rel="stylesheet"
+  href="{{ 'overrides/assets/stylesheets/home.css' | url }}" />
+{% endblock %}
+
+{% block tabs %}
+{{ super() }}
+
+<section class="hero">
+  <div class="md-grid md-typeset hero-container">
+    <div class="hero-content">
+      <div class="hero-title">
+        <img src="images/logo.png" draggable="false" />
+        <h1>Homer</h1>
+      </div>
+      <p>
+        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>
+      <a
+        href="{{ page.next_page.url | url }}"
+        title="{{ page.next_page.title | striptags }}"
+        class="md-button md-button-primary"
+      >
+        Get started
+      </a>
+      <a
+        href="{{ config.repo_url }}"
+        title="{{ lang.t('source.link.title') }}"
+        class="md-button"
+      >
+        Go to GitHub
+      </a>
+    </div>
+    <img class="hero-image" src="images/screenshot.png" draggable="false" />
+  </div>
+</section>
+
+<div>
+  TODO!
+</div>
+{% endblock %}
+
+{% block site_nav %}{% endblock %}
+{% block content %}{% endblock %}
+{% block footer %}{% endblock %}
diff --git a/docs/stylesheets/styles.css b/docs/stylesheets/styles.css
deleted file mode 100644
index e1e1a3e..0000000
--- a/docs/stylesheets/styles.css
+++ /dev/null
@@ -1,7 +0,0 @@
-.centered {
-  text-align: center;
-}
-
-.bold {
-  font-weight: bold;
-}
\ No newline at end of file
diff --git a/mkdocs.yml b/mkdocs.yml
index 2d4704c..9af5b79 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -1,22 +1,21 @@
 # Project information
 site_name: Homer
-site_url: https://bastienwirtz.github.io/homer/
+site_url: https://bastienwirtz.github.io/
 
 # Repository
 repo_name: bastienwirtz/homer
 repo_url: https://github.com/bastienwirtz/homer
 edit_uri: ""
 
-# Stylesheet
-extra_css:
-  - stylesheets/styles.css
-
 # Theme
 theme:
+  favicon: images/logo.png
   logo: images/logo.png
   name: material
+  custom_dir: docs/overrides/
   icon:
     repo: fontawesome/brands/github
+  language: en
   palette:
     - media: "(prefers-color-scheme: light)" 
       scheme: default
@@ -42,6 +41,9 @@ theme:
     - search.share
     - search.suggest
     - toc.follow
+  # Don't include MkDocs' JavaScript
+  include_search_page: false
+  search_index_only: true
 
 # Copyright - name for footer text
 copyright: Homer dashboard
@@ -76,6 +78,7 @@ markdown_extensions:
 # Page tree
 nav:
   - Home: index.md
+  - Getting started: getting_started.md
   - Configuration: configuration.md
   - Custom services: customservices.md
   - Tips & tricks: tips-and-tricks.md
diff --git a/requirements.txt b/requirements.txt
index 568942b..078b3dc 100644
--- a/requirements.txt
+++ b/requirements.txt
@@ -1,76 +1,23 @@
-attrs==19.3.0
-Automat==0.8.0
-blinker==1.4
-certifi==2019.11.28
-chardet==3.0.4
-Click==7.0
-cloud-init==21.4
-colorama==0.4.3
-command-not-found==0.3
-configobj==5.0.6
-constantly==15.1.0
-cryptography==2.8
-cupshelpers==1.0
-dbus-python==1.2.16
-defer==1.0.6
-distro==1.4.0
-distro-info===0.23ubuntu1
-entrypoints==0.3
-httplib2==0.14.0
-hyperlink==19.0.0
-idna==2.8
-importlib-metadata==1.5.0
-incremental==16.10.1
-Jinja2==2.10.1
-jsonpatch==1.22
-jsonpointer==2.0
-jsonschema==3.2.0
-keyring==18.0.1
-language-selector==0.1
-launchpadlib==1.10.13
-lazr.restfulclient==0.14.2
-lazr.uri==1.0.3
-macaroonbakery==1.3.1
-MarkupSafe==1.1.0
-more-itertools==4.2.0
-netifaces==0.10.4
-oauthlib==3.1.0
-pexpect==4.6.0
-powerline-shell==0.7.0
-protobuf==3.6.1
-psutil==5.5.1
-pyasn1==0.4.2
-pyasn1-modules==0.2.1
-pycairo==1.16.2
-pycups==1.9.73
-PyGObject==3.36.0
-PyHamcrest==1.9.0
-PyJWT==1.7.1
-pymacaroons==0.13.0
-PyNaCl==1.3.0
-pyOpenSSL==19.0.0
-pyRFC3339==1.1
-pyrsistent==0.15.5
-pyserial==3.4
-python-apt==2.0.0+ubuntu0.20.4.6
-python-debian===0.1.36ubuntu1
-pytz==2019.3
-pyxdg==0.26
-PyYAML==5.3.1
-requests==2.22.0
-requests-unixsocket==0.2.0
-SecretStorage==2.3.1
-service-identity==18.1.0
-simplejson==3.16.0
-six==1.14.0
-sos==4.2
-ssh-import-id==5.10
-systemd-python==234
-Twisted==18.9.0
-ubuntu-advantage-tools==27.5
-ufw==0.36
-unattended-upgrades==0.1
-urllib3==1.25.8
-wadllib==1.3.3
-zipp==1.0.0
-zope.interface==4.7.1
+bracex==2.2.1
+click==8.0.4
+ghp-import==2.0.2
+importlib-metadata==4.11.3
+Jinja2==3.0.3
+Markdown==3.3.6
+MarkupSafe==2.1.1
+mergedeep==1.3.4
+mkdocs==1.2.3
+mkdocs-awesome-pages-plugin==2.7.0
+mkdocs-material==8.2.5
+mkdocs-material-extensions==1.0.3
+packaging==21.3
+Pygments==2.11.2
+pymdown-extensions==9.3
+pyparsing==3.0.7
+python-dateutil==2.8.2
+PyYAML==6.0
+pyyaml-env-tag==0.1
+six==1.16.0
+watchdog==2.1.6
+wcmatch==8.3
+zipp==3.7.0