Merge master

22 files changed, 255 insertions, 181 deletions

diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..cc06f081
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,22 @@
+# Mitmproxy Documentation
+
+This directory houses the mitmproxy documentation available at <https://docs.mitmproxy.org/>.
+
+## Quick Start
+
+ 1. Install [hugo](https://gohugo.io/).
+ 2. Windows users: Depending on your git settings, you may need to manually create a symlink from 
+ /docs/src/examples to /examples.
+
+
+Now you can run `hugo server -D` in ./src.
+
+
+## Extended Install
+
+This is required to modify CSS files.
+
+ 1. Install node, yarn, and [modd](https://github.com/cortesi/modd).
+ 2. Run `yarn` in this directory to get node-sass.
+
+You can now run `modd` in this directory instead of running hugo directly.
diff --git a/docs/build b/docs/build
deleted file mode 100755
index 1ca3fdb8..00000000
--- a/docs/build
+++ /dev/null
@@ -1,3 +0,0 @@
-#!/bin/sh
-
-cd src; hugo
\ No newline at end of file
diff --git a/docs/build-archive b/docs/build-archive
new file mode 100755
index 00000000..bd11d86e
--- /dev/null
+++ b/docs/build-archive
@@ -0,0 +1,5 @@
+#!/bin/sh
+set -e
+
+cd src
+DOCS_ARCHIVE=true hugo
diff --git a/docs/build-current b/docs/build-current
new file mode 100755
index 00000000..a78acab4
--- /dev/null
+++ b/docs/build-current
@@ -0,0 +1,5 @@
+#!/bin/sh
+set -e
+
+cd src
+hugo
diff --git a/docs/ci b/docs/ci
index 1584c5e1..ab442257 100755
--- a/docs/ci
+++ b/docs/ci
@@ -1,13 +1,14 @@
 #!/bin/bash
+set -e
 
 # This script gets run from CI to render and upload docs
 
-./build
+./build-current
 
 # Only upload if we have defined credentials - we only have these defined for
 # trusted commits (i.e. not PRs).
 if [[ ! -z "${AWS_ACCESS_KEY_ID}" && $TRAVIS_BRANCH == "master" ]]; then
     aws s3 sync --acl public-read ./public s3://docs.mitmproxy.org/master
     aws cloudfront create-invalidation --distribution-id E1TH3USJHFQZ5Q \
-        --paths "/master"
+        --paths "/master/*"
 fi
diff --git a/docs/setup b/docs/setup
index 8a9c31fd..cb63841a 100755
--- a/docs/setup
+++ b/docs/setup
@@ -1,4 +1,5 @@
 #!/bin/sh
+set -e
 
 aws configure set preview.cloudfront true
 aws --profile mitmproxy \
diff --git a/docs/src/config.toml b/docs/src/config.toml
index c9cecd8b..ee2b9224 100644
--- a/docs/src/config.toml
+++ b/docs/src/config.toml
@@ -4,6 +4,7 @@ title = "mitmproxy.org docs"
 theme = "mitmproxydocs"
 publishDir = "../public"
 RelativeURLs = true
+googleAnalytics = "UA-4150636"
 
 [indexes]
   tag = "tags"
diff --git a/docs/src/content/_index.md b/docs/src/content/_index.md
index a977e2db..44d41611 100644
--- a/docs/src/content/_index.md
+++ b/docs/src/content/_index.md
@@ -1,5 +1,6 @@
 ---
 title: "Introduction"
+layout: single
 menu:
     overview:
         weight: 1
diff --git a/docs/src/content/concepts-certificates.md b/docs/src/content/concepts-certificates.md
index 6956ff3f..e6586576 100644
--- a/docs/src/content/concepts-certificates.md
+++ b/docs/src/content/concepts-certificates.md
@@ -19,7 +19,7 @@ configure your target device with the correct proxy settings. Now start a
 browser on the device, and visit the magic domain **mitm.it**. You should see
 something like this:
 
-{{< figure src="/certinstall-webapp.png" >}}
+{{< figure src="/certinstall-webapp.png" class="has-border" >}}
 
 Click on the relevant icon, follow the setup instructions for the platform
 you're on and you are good to go.
@@ -32,8 +32,8 @@ reason. Below is a list of pointers to manual certificate installation
 documentation for some common platforms. The mitmproxy CA cert is located in
 `~/.mitmproxy` after it has been generated at the first start of mitmproxy.
 
-- [IOS](http://jasdev.me/intercepting-ios-traffic) On
-  iOS 10.3 and onwards, you also need to enable full trust for the mitmproxy
+- [IOS](http://jasdev.me/intercepting-ios-traffic)  
+  On iOS 10.3 and onwards, you also need to enable full trust for the mitmproxy
   root certificate:
     1. Go to Settings > General > About > Certificate Trust Settings.
     2. Under "Enable full trust for root certificates", turn on trust for
@@ -42,13 +42,13 @@ documentation for some common platforms. The mitmproxy CA cert is located in
 - [Java](https://docs.oracle.com/cd/E19906-01/820-4916/geygn/index.html)
 - [Android/Android Simulator](http://wiki.cacert.org/FAQ/ImportRootCert#Android_Phones_.26_Tablets)
 - [Windows](https://web.archive.org/web/20160612045445/http://windows.microsoft.com/en-ca/windows/import-export-certificates-private-keys#1TC=windows-7)
-- [Windows (automated)](https://technet.microsoft.com/en-us/library/cc732443.aspx)
+- [Windows (automated)](https://technet.microsoft.com/en-us/library/cc732443.aspx)  
 
 {{< highlight bash  >}}
 certutil.exe -importpfx Root mitmproxy-ca-cert.p12
 {{< / highlight >}}
-
-- [Mac OS X](https://support.apple.com/kb/PH7297?locale=en_US)
+  
+- [Mac OS X](https://support.apple.com/kb/PH20129)
 - [Ubuntu/Debian]( https://askubuntu.com/questions/73287/how-do-i-install-a-root-certificate/94861#94861)
 - [Mozilla Firefox](https://wiki.mozilla.org/MozillaRootCertificate#Mozilla_Firefox)
 - [Chrome on Linux](https://stackoverflow.com/a/15076602/198996)
@@ -90,7 +90,7 @@ The files created by mitmproxy in the .mitmproxy directory are as follows:
 | mitmproxy-ca-cert.p12 | The certificate in PKCS12 format. For use on Windows.                                |
 | mitmproxy-ca-cert.cer | Same file as .pem, but with an extension expected by some Android devices.           |
 
-## Using a custom certificate
+## Using a custom server certificate
 
 You can use your own (leaf) certificate by passing the `--cert
 [domain=]path_to_certificate` option to mitmproxy. Mitmproxy then uses the
@@ -156,7 +156,7 @@ hostname, while using a filename allows a single specific certificate to be used
 for all SSL connections. Certificate files must be in the PEM format and should
 contain both the unencrypted private key and the certificate.
 
-### Multiple certs by Hostname
+### Multiple client certificates
 
 You can specify a directory to `--client-certs`, in which case the matching
 certificate is looked up by filename. So, if you visit example.org, mitmproxy
diff --git a/docs/src/content/howto-transparent.md b/docs/src/content/howto-transparent.md
index e30dcab0..ea1b1076 100644
--- a/docs/src/content/howto-transparent.md
+++ b/docs/src/content/howto-transparent.md
@@ -27,87 +27,50 @@ At the moment, mitmproxy supports transparent proxying on OSX Lion and above,
 and all current flavors of Linux.
 
 
-## Linux fully transparent mode
-
-By default mitmproxy will use its own local IP address for its server-side
-connections. In case this isn't desired, the --spoof-source-address argument can
-be used to use the client's IP address for server-side connections. The
-following config is required for this mode to work:
-
-{{< highlight bash  >}}
-CLIENT_NET=192.168.1.0/24
-TABLE_ID=100
-MARK=1
-
-echo "$TABLE_ID     mitmproxy" >> /etc/iproute2/rt_tables
-iptables -t mangle -A PREROUTING -d $CLIENT_NET -j MARK --set-mark $MARK
-iptables -t nat \
-    -A PREROUTING -p tcp -s $CLIENT_NET \
-    --match multiport --dports 80,443 -j \
-    REDIRECT --to-port 8080
-
-ip rule add fwmark $MARK lookup $TABLE_ID
-ip route add local $CLIENT_NET dev lo table $TABLE_ID
-{{< / highlight >}}
-
-This mode does require root privileges though. There's a wrapper in the examples
-directory called 'mitmproxy_shim.c', which will enable you to use this mode with
-dropped privileges. It can be used as follows:
-
-{{< highlight bash  >}}
-gcc examples/complex/full_transparency_shim.c -o mitmproxy_shim -lcap
-sudo chown root:root mitmproxy_shim
-sudo chmod u+s mitmproxy_shim
-./mitmproxy_shim $(which mitmproxy) --mode transparent --set spoof-source-address
-{{< / highlight >}}
-
-
-
 ## Linux
 
 On Linux, mitmproxy integrates with the iptables redirection mechanism to
 achieve transparent mode.
 
-### 1. [Install the mitmproxy certificate on the test device]({{< relref "concepts-certificates" >}})
-
-### 2. Enable IP forwarding:
+### 1. Enable IP forwarding.
 
 {{< highlight bash  >}}
 sysctl -w net.ipv4.ip_forward=1
 sysctl -w net.ipv6.conf.all.forwarding=1
 {{< / highlight >}}
 
-You may also want to consider enabling this permanently in `/etc/sysctl.conf` or
-newly created `/etc/sysctl.d/mitmproxy.conf`, see
-[here](https://superuser.com/a/625852).
+This makes sure that your machine forwards packets instead of rejecting them.
 
-### 3. If your target machine is on the same physical network and you configured it to use a custom  gateway, disable ICMP redirects:
+If you want to persist this across reboots, you need to adjust your `/etc/sysctl.conf` or
+a newly created `/etc/sysctl.d/mitmproxy.conf` (see [here](https://superuser.com/a/625852)).
+
+### 2. Disable ICMP redirects.
 
 {{< highlight bash  >}}
 sysctl -w net.ipv4.conf.all.send_redirects=0
 {{< / highlight >}}
 
-You may also want to consider enabling this permanently in `/etc/sysctl.conf` or
-a newly created `/etc/sysctl.d/mitmproxy.conf`, see
-[here](https://superuser.com/a/625852).
+If your test device is on the same physical network, your machine shouldn't inform the device that 
+there's a shorter route available by skipping the proxy.
+
+If you want to persist this across reboots, see above.
 
-### 4. Create an iptables ruleset that redirects the desired traffic to the mitmproxy port
+### 3. Create an iptables ruleset that redirects the desired traffic to mitmproxy.
 
 Details will differ according to your setup, but the ruleset should look
 something like this:
 
 {{< highlight bash  >}}
-    iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080
-    iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 8080
-    ip6tables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080
-    ip6tables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 8080
+iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080
+iptables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 8080
+ip6tables -t nat -A PREROUTING -i eth0 -p tcp --dport 80 -j REDIRECT --to-port 8080
+ip6tables -t nat -A PREROUTING -i eth0 -p tcp --dport 443 -j REDIRECT --to-port 8080
 {{< / highlight >}}
 
-   You may also want to consider enabling this permanently with the
-`iptables-persistent` package, see
-[here](http://www.microhowto.info/howto/make_the_configuration_of_iptables_persistent_on_debian.html).
+If you want to persist this across reboots, you can use the `iptables-persistent` package (see
+[here](http://www.microhowto.info/howto/make_the_configuration_of_iptables_persistent_on_debian.html)).
 
-### 5. Fire up mitmproxy
+### 4. Fire up mitmproxy.
 
 You probably want a command like this:
 
@@ -118,24 +81,22 @@ mitmproxy --mode transparent --showhost
 The `--mode transparent` option turns on transparent mode, and the `--showhost` argument tells
  mitmproxy to use the value of the Host header for URL display.
 
-### 6. Finally, configure your test device
+### 5. Finally, configure your test device.
 
-Set the test device up to use the host on which mitmproxy is running as the
-default gateway. For a detailed walkthrough, have a look at the [tutorial for
-transparently proxying VMs]({{< relref "howto-transparent-vms" >}}).
+Set the test device up to use the host on which mitmproxy is running as the default gateway and 
+[install the mitmproxy certificate authority on the test device]({{< relref "concepts-certificates" >}}).
 
 
-## OpenBSD
 
-### 1  [Install the mitmproxy certificate on the test device]({{< relref "concepts-certificates" >}})
+## OpenBSD
 
-### 2. Enable IP forwarding
+### 1. Enable IP forwarding.
 
 {{< highlight bash  >}}
 sudo sysctl -w net.inet.ip.forwarding=1
 {{< / highlight >}}
 
-### 3. Place the following two lines in **/etc/pf.conf**
+### 2. Place the following two lines in **/etc/pf.conf**.
 
 {{< highlight none  >}}
 mitm_if = "re2"
@@ -146,19 +107,19 @@ These rules tell pf to divert all traffic from `$mitm_if` destined for port 80
 or 443 to the local mitmproxy instance running on port 8080. You should replace
 `$mitm_if` value with the interface on which your test device will appear.
 
-### 4. Enable the pf ruleset and enable it
+### 3. Configure pf with the rules.
 
 {{< highlight bash  >}}
 doas pfctl -f /etc/pf.conf
 {{< / highlight >}}
 
-And now enable it:
+### 4. And now enable it.
 
 {{< highlight bash  >}}
 doas pfctl -e
 {{< / highlight >}}
 
-### 5. Fire up mitmproxy
+### 5. Fire up mitmproxy.
 
 You probably want a command like this:
 
@@ -169,10 +130,11 @@ mitmproxy --mode transparent --showhost
 The `--mode transparent` option turns on transparent mode, and the `--showhost` argument tells
 mitmproxy to use the value of the Host header for URL display.
 
-### 6. Finally, configure your test device
+### 6. Finally, configure your test device.
+
+Set the test device up to use the host on which mitmproxy is running as the default gateway and 
+[install the mitmproxy certificate authority on the test device]({{< relref "concepts-certificates" >}}).
 
-Set the test device up to use the host on which mitmproxy is running as the
-default gateway.
 
 
 {{% note %}}
@@ -195,15 +157,13 @@ packet filter from the OpenBSD project, which mitmproxy uses to implement
 transparent mode on OSX. Note that this means we don't support transparent mode
 for earlier versions of OSX.
 
-### 1. [Install the mitmproxy certificate on the test device]({{< relref "concepts-certificates" >}})
-
-### 2. Enable IP forwarding
+### 1. Enable IP forwarding.
 
 {{< highlight bash  >}}
 sudo sysctl -w net.inet.ip.forwarding=1
 {{< / highlight >}}
 
-### 3. Place the following two lines in a file called, say, **pf.conf**
+### 2. Place the following two lines in a file called, say, **pf.conf**.
 
 
 {{< highlight none  >}}
@@ -214,19 +174,19 @@ These rules tell pf to redirect all traffic destined for port 80 or 443
 to the local mitmproxy instance running on port 8080. You should replace
 `en2` with the interface on which your test device will appear.
 
-### 4. Configure pf with the rules
+### 3. Configure pf with the rules.
 
 {{< highlight bash  >}}
 sudo pfctl -f pf.conf
 {{< / highlight >}}
 
-### 5. And now enable it
+### 4. And now enable it.
 
 {{< highlight bash  >}}
 sudo pfctl -e
 {{< / highlight >}}
 
-### 6. Configure sudoers to allow mitmproxy to access pfctl
+### 5. Configure sudoers to allow mitmproxy to access pfctl.
 
 Edit the file **/etc/sudoers** on your system as root. Add the following line to
 the end of the file:
@@ -240,7 +200,7 @@ state` as root without a password. This only allows inspection of the state
 table, so should not be an undue security risk. If you're special feel free to
 tighten the restriction up to the user running mitmproxy.
 
-### 7. Fire up mitmproxy
+### 6. Fire up mitmproxy.
 
 You probably want a command like this:
 
@@ -251,26 +211,25 @@ mitmproxy --mode transparent --showhost
 The `--mode transparent` flag turns on transparent mode, and the `--showhost` argument tells
 mitmproxy to use the value of the Host header for URL display.
 
-### 6. Finally, configure your test device
+### 7. Finally, configure your test device.
 
-Set the test device up to use the host on which mitmproxy is running as the
-default gateway.
+Set the test device up to use the host on which mitmproxy is running as the default gateway and 
+[install the mitmproxy certificate authority on the test device]({{< relref "concepts-certificates" >}}).
 
 {{% note %}}
 Note that the **rdr** rules in the pf.conf given above only apply to
 inbound traffic. **This means that they will NOT redirect traffic coming
 from the box running pf itself.** We can't distinguish between an
 outbound connection from a non-mitmproxy app, and an outbound connection
-from mitmproxy itself - if you want to intercept your OSX traffic, you
-should use an external host to run mitmproxy or see the work-around below. 
-PF is flexible to cater for a range of creative possibilities, like
+from mitmproxy itself. If you want to intercept your own macOS traffic, see the work-around below or use an external host to run mitmproxy. In fact, PF is
+flexible to cater for a range of creative possibilities, like
 intercepting traffic emanating from VMs. See the **pf.conf** man page
 for more.
 {{% /note %}}
 
 ### Work-around to redirect traffic originating from the machine itself
 
-Follow the steps **1, 2** as above. In step **3** change the file **pf.conf** to 
+Follow the steps **1, 2** as above. In step **3** change the contents of the file **pf.conf** to
 
 {{< highlight none >}}
 #The ports to redirect to proxy
@@ -303,3 +262,37 @@ Follow steps **4-6** above. This will redirect the packets from all users other
 {{< highlight bash  >}}
 sudo -u nobody mitmproxy --mode transparent --showhost
 {{< / highlight >}}
+
+## "Full" transparent mode on Linux
+
+By default mitmproxy will use its own local IP address for its server-side
+connections. In case this isn't desired, the --spoof-source-address argument can
+be used to use the client's IP address for server-side connections. The
+following config is required for this mode to work:
+
+{{< highlight bash  >}}
+CLIENT_NET=192.168.1.0/24
+TABLE_ID=100
+MARK=1
+
+echo "$TABLE_ID     mitmproxy" >> /etc/iproute2/rt_tables
+iptables -t mangle -A PREROUTING -d $CLIENT_NET -j MARK --set-mark $MARK
+iptables -t nat \
+    -A PREROUTING -p tcp -s $CLIENT_NET \
+    --match multiport --dports 80,443 -j \
+    REDIRECT --to-port 8080
+
+ip rule add fwmark $MARK lookup $TABLE_ID
+ip route add local $CLIENT_NET dev lo table $TABLE_ID
+{{< / highlight >}}
+
+This mode does require root privileges though. There's a wrapper in the examples
+directory called 'mitmproxy_shim.c', which will enable you to use this mode with
+dropped privileges. It can be used as follows:
+
+{{< highlight bash  >}}
+gcc examples/complex/full_transparency_shim.c -o mitmproxy_shim -lcap
+sudo chown root:root mitmproxy_shim
+sudo chmod u+s mitmproxy_shim
+./mitmproxy_shim $(which mitmproxy) --mode transparent --set spoof-source-address
+{{< / highlight >}}
diff --git a/docs/src/layouts/_default/single.html b/docs/src/layouts/_default/single.html
index 4a8baf53..801b6341 100644
--- a/docs/src/layouts/_default/single.html
+++ b/docs/src/layouts/_default/single.html
@@ -1,10 +1,12 @@
-{{ partial "header.html" . }}
-<div class="columns">
-    <div class="column is-one-quarter sidebody">
-        {{ partial "sidebar.html" . }}
+{{ partial "header" . }}
+<div class="columns container is-marginless">
+    <div id="sidebar" class="column is-one-quarter">
+        {{ partial "sidebar" . }}
     </div>
-    <div class="column content mainbody">
-        {{.Content}}
+    <div id="main" class="column content">
+        {{ partial "outdated" . }}
+        {{ partial "edit-on-github" . }}
+        {{ partial "add-anchors" .Content}}
     </div>
 </div>
 {{ partial "footer.html" . }}
diff --git a/docs/src/layouts/index.html b/docs/src/layouts/index.html
deleted file mode 100644
index 4a8baf53..00000000
--- a/docs/src/layouts/index.html
+++ /dev/null
@@ -1,10 +0,0 @@
-{{ partial "header.html" . }}
-<div class="columns">
-    <div class="column is-one-quarter sidebody">
-        {{ partial "sidebar.html" . }}
-    </div>
-    <div class="column content mainbody">
-        {{.Content}}
-    </div>
-</div>
-{{ partial "footer.html" . }}
diff --git a/docs/src/layouts/partials/add-anchors.html b/docs/src/layouts/partials/add-anchors.html
new file mode 100644
index 00000000..f7050f7f
--- /dev/null
+++ b/docs/src/layouts/partials/add-anchors.html
@@ -0,0 +1 @@
+{{ . | replaceRE "(<h[1-9] id=\"(.+?)\".*?>)(.+?</h[1-9]>)" "${1}<a class=\"anchor\" href=\"#${2}\">#&nbsp;&nbsp;</a>${3}" | safeHTML }}
diff --git a/docs/src/layouts/partials/edit-on-github.html b/docs/src/layouts/partials/edit-on-github.html
new file mode 100644
index 00000000..d2c3098c
--- /dev/null
+++ b/docs/src/layouts/partials/edit-on-github.html
@@ -0,0 +1,9 @@
+{{ if and .IsPage (not (getenv "DOCS_ARCHIVE")) }}
+<a class="button is-small is-outlined is-link is-pulled-right"
+   target="_blank"
+   href="https://github.com/mitmproxy/mitmproxy/blob/master/docs/src/content/{{ .File.Path }}"
+>
+    Edit on GitHub
+</a>
+{{ end }}
+
diff --git a/docs/src/layouts/partials/outdated.html b/docs/src/layouts/partials/outdated.html
new file mode 100644
index 00000000..5b3dd6ed
--- /dev/null
+++ b/docs/src/layouts/partials/outdated.html
@@ -0,0 +1,9 @@
+{{- if (getenv "DOCS_ARCHIVE") -}}
+<article class="message is-warning">
+    <div class="message-body">
+        You are not viewing the most up to date version of the documentation.
+        Click <a href="https://docs.mitmproxy.org/stable{{ .Page.URL }}">here</a>
+        to view the latest version.
+    </div>
+</article>
+{{- end -}}
diff --git a/docs/src/layouts/partials/sidebar.html b/docs/src/layouts/partials/sidebar.html
index ef853fc6..5ea41c12 100644
--- a/docs/src/layouts/partials/sidebar.html
+++ b/docs/src/layouts/partials/sidebar.html
@@ -1,24 +1,22 @@
-<div class="sidebar">
-    <div class="brand">
-        <img src='{{"logo-docs.png" | relURL}}' alt="mitmproxy docs">
-    </div>
-    <div class="version">
-        <span class="tag is-info is-rounded is-medium">v3.x</span>
-    </div>
-    <aside class="menu">
-        <p class="menu-label"> Overview </p>
-        {{ partial "sidemenu" (dict "ctx" . "menuname" "overview") }}
+<div class="brand">
+    <a href="https://mitmproxy.org/">
+        <img src='{{"logo-docs.png" | relURL}}' alt="mitmproxy docs"/>
+    </a>
 
-        <p class="menu-label">Core concepts</p>
-        {{ partial "sidemenu" (dict "ctx" . "menuname" "concepts") }}
+</div>
+<nav class="menu">
+    <p class="menu-label"> Overview </p>
+    {{ partial "sidemenu" (dict "ctx" . "menuname" "overview") }}
 
-        <p class="menu-label"> Addon Development </p>
-        {{ partial "sidemenu" (dict "ctx" . "menuname" "addons") }}
+    <p class="menu-label">Core concepts</p>
+    {{ partial "sidemenu" (dict "ctx" . "menuname" "concepts") }}
 
-        <p class="menu-label"> HOWTOs </p>
-        {{ partial "sidemenu" (dict "ctx" . "menuname" "howto") }}
+    <p class="menu-label"> Addon Development </p>
+    {{ partial "sidemenu" (dict "ctx" . "menuname" "addons") }}
 
-        <p class="menu-label"> Tutorials </p>
-        {{ partial "sidemenu" (dict "ctx" . "menuname" "tutes") }}
-    </aside>
-</div>
\ No newline at end of file
+    <p class="menu-label"> HOWTOs </p>
+    {{ partial "sidemenu" (dict "ctx" . "menuname" "howto") }}
+
+    <p class="menu-label"> Tutorials </p>
+    {{ partial "sidemenu" (dict "ctx" . "menuname" "tutes") }}
+</nav>
diff --git a/docs/src/static/logo-docs.png b/docs/src/static/logo-docs.png
index b37dbd85..a46016dd 100644
--- a/docs/src/static/logo-docs.png
+++ b/docs/src/static/logo-docs.png
diff --git a/docs/src/themes/mitmproxydocs/layouts/partials/footer.html b/docs/src/themes/mitmproxydocs/layouts/partials/footer.html
index 308b1d01..dc9ddc85 100644
--- a/docs/src/themes/mitmproxydocs/layouts/partials/footer.html
+++ b/docs/src/themes/mitmproxydocs/layouts/partials/footer.html
@@ -1,2 +1,3 @@
+{{ template "_internal/google_analytics_async.html" . }}
 </body>
 </html>
diff --git a/docs/src/themes/mitmproxydocs/static/css/style.css b/docs/src/themes/mitmproxydocs/static/css/style.css
index 868c7d0a..db5a36cf 100644
--- a/docs/src/themes/mitmproxydocs/static/css/style.css
+++ b/docs/src/themes/mitmproxydocs/static/css/style.css
@@ -6717,9 +6717,17 @@ label.panel-block {
   background-color: whitesmoke;
   padding: 3rem 1.5rem 6rem; }
 
-.sidebody {
-  overflow-x: hidden;
-  overflow-y: scroll; }
+#sidebar {
+  background-color: #eee;
+  border-right: 1px solid #c1c1c1;
+  box-shadow: 0 0 20px rgba(50, 50, 50, 0.2) inset;
+  padding: 1.75rem; }
+  #sidebar .brand {
+    padding: 1rem 0;
+    text-align: center; }
+
+#main {
+  padding: 3rem; }
 
 .example {
   margin-bottom: 1em; }
@@ -6730,21 +6738,6 @@ label.panel-block {
     width: 100%;
     text-align: right; }
 
-.sidebar {
-  background-color: #F1F1F1; }
-  .sidebar .version {
-    padding: 1em; }
-  .sidebar .brand {
-    background-color: #303030;
-    color: #c0c0c0;
-    padding: 1em;
-    top: 0; }
-  .sidebar .menu {
-    padding: 1em; }
-
-.mainbody {
-  padding: 3em; }
-
 code {
   color: #1a9f1a;
   font-size: 0.875em;
@@ -6753,3 +6746,26 @@ code {
 .content h2 {
   padding-top: 1em;
   border-top: 1px solid #c0c0c0; }
+
+h1 .anchor, h2 .anchor, h3 .anchor, h4 .anchor, h5 .anchor, h6 .anchor {
+  display: inline-block;
+  width: 0;
+  margin-left: -1.5rem;
+  margin-right: 1.5rem;
+  transition: all 100ms ease-in-out;
+  opacity: 0; }
+
+h1:hover .anchor, h2:hover .anchor, h3:hover .anchor, h4:hover .anchor, h5:hover .anchor, h6:hover .anchor {
+  opacity: 1; }
+
+h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {
+  color: #C93312; }
+  h1:target .anchor, h2:target .anchor, h3:target .anchor, h4:target .anchor, h5:target .anchor, h6:target .anchor {
+    opacity: 1;
+    color: #C93312; }
+
+.footnotes p {
+  display: inline; }
+
+figure.has-border img {
+  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25); }
diff --git a/docs/style/style.scss b/docs/style/style.scss
index bc146fd5..2b0d2993 100644
--- a/docs/style/style.scss
+++ b/docs/style/style.scss
@@ -10,9 +10,20 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Ox
 @import "../node_modules/bulma/sass/components/_all";
 @import "../node_modules/bulma/sass/layout/_all";
 
-.sidebody {
-    overflow-x: hidden;
-    overflow-y: scroll;
+#sidebar {
+    background-color: #eee;
+    border-right: 1px solid #c1c1c1;
+    box-shadow: 0 0 20px rgba(50, 50, 50, .2) inset;
+    padding: $column-gap + 1rem;
+
+    .brand {
+        padding: 1rem 0;
+        text-align: center;
+    }
+}
+
+#main {
+    padding: 3rem;
 }
 
 .example {
@@ -27,30 +38,10 @@ $family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Ox
     margin-bottom: 1em;
 }
 
-.sidebar {
-    background-color: #F1F1F1;
-    .version {
-        padding: 1em;
-    }
-    .brand {
-        background-color: #303030;
-        color: #c0c0c0;
-        padding: 1em;
-        top: 0;
-    }
-    .menu {
-        padding: 1em;
-    }
-}
-
-.mainbody {
-  padding: 3em;
-}
-
 code {
-  color: #1a9f1a;
-  font-size: 0.875em;
-  font-weight: normal;
+    color: #1a9f1a;
+    font-size: 0.875em;
+    font-weight: normal;
 }
 
 .content {
@@ -59,3 +50,32 @@ code {
         border-top: 1px solid #c0c0c0;
     }
 }
+
+h1, h2, h3, h4, h5, h6 {
+    .anchor {
+        display: inline-block;
+        width: 0;
+        margin-left: -1.5rem;
+        margin-right: 1.5rem;
+        transition: all 100ms ease-in-out;
+        opacity: 0;
+    }
+    &:hover .anchor {
+        opacity: 1;
+    }
+    &:target {
+        color: $primary;
+        .anchor {
+            opacity: 1;
+            color: $primary
+        }
+    }
+}
+
+.footnotes p {
+    display: inline;
+}
+
+figure.has-border img {
+    box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.25);
+}
diff --git a/docs/upload-archive b/docs/upload-archive
index 86dd248e..3aaeb9be 100755
--- a/docs/upload-archive
+++ b/docs/upload-archive
@@ -1,4 +1,5 @@
-#!/bin/sh
+#!/bin/bash
+set -e
 
 if [[ $# -eq 0 ]] ; then
     echo "Please supply a version, e.g. 'v3'"
@@ -14,4 +15,4 @@ aws --profile mitmproxy \
     s3 sync --acl public-read ./public s3://docs.mitmproxy.org$SPATH
 aws --profile mitmproxy \
     cloudfront create-invalidation --distribution-id E1TH3USJHFQZ5Q \
-    --paths "$SPATH"
+    --paths "$SPATH/*"
diff --git a/docs/upload-stable b/docs/upload-stable
index c2c1267e..5aea7479 100755
--- a/docs/upload-stable
+++ b/docs/upload-stable
@@ -1,8 +1,9 @@
-#!/bin/sh
+#!/bin/bash
+set -e
 
 aws configure set preview.cloudfront true
 aws --profile mitmproxy \
     s3 sync --acl public-read ./public s3://docs.mitmproxy.org/stable
 aws --profile mitmproxy \
     cloudfront create-invalidation --distribution-id E1TH3USJHFQZ5Q \
-    --paths "/stable"
+    --paths "/stable/*"