docs: Setup mkdocs with mkdocs-material theme

This changes the framework used to generate the klipper3d site.

Signed-off-by: Damien Martin <damlobster@gmail.com>

11 files changed, 189 insertions, 165 deletions

diff --git a/.github/workflows/klipper3d-deploy.yaml b/.github/workflows/klipper3d-deploy.yaml
new file mode 100644
index 00000000..246209c8
--- /dev/null
+++ b/.github/workflows/klipper3d-deploy.yaml
@@ -0,0 +1,29 @@
+name: klipper3d deploy
+on:
+  push:
+    branches:
+      - master
+    paths:
+      - docs/**
+      - mkdocs.yml
+      - .github/workflows/klipper3d-deploy.yaml
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup python
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.8'
+      - uses: actions/cache@v2
+        with:
+          path: ~/.cache/pip
+          key: ${{ runner.os }}-pip-${{ hashFiles('docs/_klipper3d/mkdocs-requirements.txt') }}
+          restore-keys: |
+            ${{ runner.os }}-pip-
+      - name: Install dependencies
+        run: pip install -r docs/_klipper3d/mkdocs-requirements.txt
+      - name: Build and deploy klipper3d
+        run: |
+          mkdocs gh-deploy --force --remote-branch gh-pages --verbose
diff --git a/docs/_config.yml b/docs/_config.yml
deleted file mode 100644
index 9daee3ca..00000000
--- a/docs/_config.yml
+++ /dev/null
@@ -1,4 +0,0 @@
-# This is a Jekyll config file that is used by "github pages" to
-# produce the https://www.klipper3d.org/ website.
-include: CONTRIBUTING.md
-google_analytics: UA-138371409-1
diff --git a/docs/_klipper3d/css/extra.css b/docs/_klipper3d/css/extra.css
new file mode 100644
index 00000000..0bdfed47
--- /dev/null
+++ b/docs/_klipper3d/css/extra.css
@@ -0,0 +1,15 @@
+[data-md-color-scheme="slate"] {
+    --md-primary-fg-color: hsla(var(--md-hue),15%,12%,1);
+    --md-default-bg-color: hsla(var(--md-hue),17%,17%,1);
+    --md-typeset-a-color:  steelblue;
+    --md-accent-fg-color:  lightblue;
+}
+
+img {
+    background-color: white;
+}
+
+.center-image {
+    margin: 0 auto;
+    display: block;
+}
\ No newline at end of file
diff --git a/docs/_klipper3d/mkdocs-requirements.txt b/docs/_klipper3d/mkdocs-requirements.txt
new file mode 100644
index 00000000..6afd2723
--- /dev/null
+++ b/docs/_klipper3d/mkdocs-requirements.txt
@@ -0,0 +1,8 @@
+mkdocs==1.2.2
+mkdocs-material==7.2.0
+mkdocs-section-index==0.3.1
+mkdocs-simple-hooks==0.1.3
+mkdocs-exclude==1.0.2
+mdx-truly-sane-lists==1.2
+mdx-breakless-lists==1.0.1
+py-gfm==1.0.2
diff --git a/docs/_klipper3d/mkdocs_hooks.py b/docs/_klipper3d/mkdocs_hooks.py
new file mode 100644
index 00000000..5b122a1d
--- /dev/null
+++ b/docs/_klipper3d/mkdocs_hooks.py
@@ -0,0 +1,18 @@
+import re
+
+def transform(markdown: str, page, config, files):
+    in_list = False
+    lines = markdown.splitlines()
+    for i in range(len(lines)):
+        lines[i] = lines[i].replace('](../',
+                                    f"]({config['repo_url']}blob/master/")
+        lines[i] = re.sub(r"\\", "<br>", lines[i])
+        # check that lists at level 0 are not indented (no space before *|-|1.)
+        if len(lines[i]) == 0:
+            in_list = False
+        elif re.match(r"^(\*|-|\d+\.) ", lines[i]):
+            in_list = True
+        if not in_list:
+            lines[i] = re.sub(r"^\s+(\*|-|\d+\.) ", r"\1 ", lines[i])
+    output = "\n".join(lines)
+    return output
diff --git a/docs/_layouts/README b/docs/_layouts/README
deleted file mode 100644
index 266b60e4..00000000
--- a/docs/_layouts/README
+++ /dev/null
@@ -1,5 +0,0 @@
-This directory defines the https://www.klipper3d.org/ website. The
-site is hosted using "github pages" (which uses Jekyll to
-automatically convert the markdown files in the docs/ directory to
-html). In addition to the files in this directory, the docs/CNAME and
-docs/_config.yml file also control the website generation.
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
deleted file mode 100644
index 5bbb3cca..00000000
--- a/docs/_layouts/default.html
+++ /dev/null
@@ -1,139 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-  {% seo %}
-
-  <!-- Bootstrap css -->
-  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
-
-  <!-- Fixup markdown code blocks -->
-  <style>
-    .markdown-body pre {
-        background-color: #f6f8fa;
-        line-height: 1.45;
-        overflow: auto;
-        padding: 16px;
-    }
-    .markdown-body code, .markdown-body tt {
-        background-color: rgba(27,31,35,.1);
-        color: inherit;
-        border-radius: 3px;
-        font-size: 85%;
-        margin: 0;
-        padding: .2em .4em;
-    }
-    .markdown-body pre code {
-        padding: 0;
-        background: transparent;
-    }
-
-    .markdown-body table td, .markdown-body table th {
-        border: 1px solid #dfe2e5;
-        padding: 6px 13px;
-    }
-    .markdown-body table tr {
-        background-color: #fff;
-        border-top: 1px solid #c6cbd1;
-    }
-    .markdown-body table tr:nth-child(2n) {
-        background-color: #f6f8fa;
-    }
-    .markdown-body table {
-        margin-bottom: 16px;
-    }
-  </style>
-</head>
-<body>
-
-  <!-- Navbar at top of page -->
-  <nav class="navbar navbar-expand-md navbar-light bg-light">
-    <a class="navbar-brand" href="/">
-      <img src="img/klipper-logo-small.png" alt="Klipper">
-    </a>
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
-      <span class="navbar-toggler-icon"></span>
-    </button>
-    <div class="collapse navbar-collapse" id="navbarNavAltMarkup">
-      <div class="navbar-nav ml-auto">
-        <a class="nav-item nav-link" href="Overview.html">Documentation</a>
-        <a class="nav-item nav-link" href="https://github.com/KevinOConnor/klipper">Github</a>
-      </div>
-    </div>
-  </nav>
-
-  <div class="container-fluid">
-    <div class="row">
-
-      <!-- Sidebar for table of contents -->
-      <nav class="d-none d-md-block col-md-3 bg-light">
-        <ul id="toc" class="px-0" style="list-style: none">
-        </ul>
-      </nav>
-
-      <!-- Main markdown contents -->
-      <main class="col-md-9 ml-md-auto px-4">
-        <div class="markdown-body" style="max-width: 800px">
-          {{ content }}
-        </div>
-      </main>
-
-    </div>
-  </div>
-
-  <!-- Google analytics javascript -->
-  {% if site.google_analytics %}
-    <script>
-      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
-      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
-      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-      })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
-      ga('create', '{{ site.google_analytics }}', 'auto');
-      ga('send', 'pageview');
-    </script>
-  {% endif %}
-
-  <!-- Bootstrap / jquery javascript -->
-  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
-
-  <!-- Javascript to automatically add table of contents -->
-  <style>
-    .toc-item {
-        font-size: 80%;
-        line-height: 80%;
-        padding-top: .5em;
-        padding-bottom: .5em;
-    }
-    .toc-item-H1 { margin-left: 0px; }
-    .toc-item-H2 { margin-left: 8px; }
-    .toc-item-H3, .toc-item-H4, .toc-item-H5, .toc-item-H6 { margin-left: 16px; }
-  </style>
-  <script>
-  var levels = [];
-  $('.markdown-body').find('h1, h2, h3, h4, h5, h6').each(function() {
-    var $item = $(this);
-    var $id = $(this).attr('id');
-    var li = $('<li class="toc-item"/>');
-    var tag = $item.prop("tagName");
-    while (levels.length && tag <= levels[levels.length - 1]) {
-      levels.pop();
-    }
-    levels.push(tag);
-    li.addClass("toc-item-H" + levels.length);
-    var a = $('<a/>', {text: $item.text(), href: '#' + $id, title: $item.text()});
-    a.appendTo(li);
-    $('#toc').append(li);
-  });
-  </script>
-
-  <!-- Javascript to automatically fix links to files outside docs/ -->
-  <script>
-  $('.markdown-body').find('a[href^="../"]').each(function() {
-    this.href = $(this).attr("href").replace(/^\.\./, "https://github.com/KevinOConnor/klipper/blob/master");
-  });
-  </script>
-</body>
-</html>
diff --git a/docs/_layouts/home.html b/docs/_layouts/home.html
deleted file mode 100644
index 6f213fd0..00000000
--- a/docs/_layouts/home.html
+++ /dev/null
@@ -1,16 +0,0 @@
----
-# This file defines the main https://www.klipper3d.org/ page.
-layout: default
----
-<p class="text-center"><img src="img/klipper-logo.png"/></p>
-
-<p>Klipper is a 3d-Printer firmware. It combines the power of a general
-purpose computer with one or more micro-controllers. See the
-<a href="/Features.html">features</a> document for more information on why you
-should use Klipper.</p>
-
-<p>To begin using Klipper start by <a href="/Installation.html">installing</a> it.</p>
-
-<p>Klipper is Free Software. Read the <a href="/Overview.html">documentation</a> or
-view
-<a href="https://github.com/KevinOConnor/klipper">the Klipper code on github</a>.</p>
diff --git a/docs/img/favicon.ico b/docs/img/favicon.ico
new file mode 100644
index 00000000..fae28463
--- /dev/null
+++ b/docs/img/favicon.ico
diff --git a/docs/index.md b/docs/index.md
index 4e221914..37eca645 100644
--- a/docs/index.md
+++ b/docs/index.md
@@ -1,6 +1,5 @@
 ---
 hide:
-  - navigation
   - toc
 title: Welcome
 ---
diff --git a/mkdocs.yml b/mkdocs.yml
new file mode 100644
index 00000000..71ef4f29
--- /dev/null
+++ b/mkdocs.yml
@@ -0,0 +1,119 @@
+site_name: Klipper documentation
+theme:
+  name: material
+  palette:
+    - media: "(prefers-color-scheme: light)"
+      scheme: default
+      primary: white
+      accent: blue
+      toggle:
+        icon: material/lightbulb
+        name: Switch to dark mode
+    - media: "(prefers-color-scheme: dark)"
+      scheme: slate
+      primary: grey
+      accent: light blue
+      toggle:
+        icon: material/lightbulb-outline
+        name: Switch to light mode
+    # primary: white
+    # accent: blue
+  logo: img/klipper.svg
+  favicon: img/favicon.ico
+  icon:
+    repo: fontawesome/brands/github
+  features:
+      - navigation.instant
+      #- navigation.tabs
+      #- navigation.expand
+      - navigation.top
+      # if enabled, the TOC doesn't work for some pages
+      # - toc.integrate
+      - search.suggest
+      - search.highlight
+      - search.share
+extra_css:
+  - _klipper3d/css/extra.css
+repo_url: https://github.com/KevinOConnor/klipper
+repo_name: KevinOConnor/klipper
+edit_uri: blob/master/docs/
+plugins:
+  - search
+  - section-index
+  - mkdocs-simple-hooks:
+      hooks:
+        on_page_markdown: "docs._klipper3d.mkdocs_hooks:transform"
+  - exclude:
+      glob:
+        - README.md
+markdown_extensions:
+  - toc:
+      permalink: True
+      toc_depth: 6
+  #- pymdownx.snippets
+  - attr_list
+  - mdx_partial_gfm
+  - mdx_truly_sane_lists
+  - mdx_breakless_lists
+  
+extra:
+  analytics:
+  # https://squidfunk.github.io/mkdocs-material/setup/setting-up-site-analytics/#site-search-tracking
+    provider: google
+    property: UA-138371409-1
+  # version:
+  #   provider: mike
+nav:
+  - Overview:
+    - Overview.md
+    - Features.md
+    - FAQ.md
+    - Releases.md
+    - Config_Changes.md
+    - Contact.md
+  - Configuration and Tuning:
+    - Installation.md
+    - Configuration reference:
+      - Config_Reference.md
+      - Rotation_Distance.md
+    - Config_checks.md
+    - Bed level:
+      - Bed_Level.md
+      - Delta_Calibrate.md
+      - Probe_Calibrate.md
+      - BLTouch.md
+      - Manual_Level.md
+      - Bed_Mesh.md
+      - Endstop_Phase.md
+    - Resonance compensation:
+      - Resonance_Compensation.md
+      - Measuring_Resonances.md
+    - Pressure_Advance.md
+    - Slicers.md
+    - Command templates:
+      - Command_Templates.md
+      - Status_Reference.md
+    - TMC_Drivers.md
+    - skew_correction.md
+    - Using_PWM_Tools.md
+    - G-Codes.md
+  - Developer documentation:
+    - Code_Overview.md
+    - Kinematics.md
+    - Protocol.md
+    - API_Server.md
+    - MCU_Commands.md
+    - CANBUS_protocol.md
+    - Debugging.md
+    - Benchmarks.md
+    - CONTRIBUTING.md
+    - Packaging.md
+  - Device specific documents:
+    - Example_Configs.md
+    - SDCard_Updates.md
+    - RPi_microcontroller.md
+    - beaglebone.md
+    - Bootloaders.md
+    - CANBUS.md
+    - TSL1401CL_Filament_Width_Sensor.md
+    - HallFilamentWidthSensor.md