update

Author: adrien-f

.gitignore

@@ -17,3 +17,4 @@ data/
 
 /.idea
 /*.iml
+website/public/

docs/components/bucket.md

@@ -11,7 +11,7 @@ It is normally run as a stand alone command to aid with troubleshooting.
 
 Example:
 
-```
+```bash
 $ thanos bucket verify --objstore.config-file=bucket.yml
 ```
 

docs/components/compact.md

@@ -11,7 +11,7 @@ It is generally not semantically concurrency safe and must be deployed as a sing
 
 Example:
 
-```
+```bash
 $ thanos compact --data-dir /tmp/thanos-compact --objstore.config-file=bucket.yml
 ```
 

docs/components/query.md

@@ -13,7 +13,7 @@ on how to connect querier with desired StoreAPIs.
 
 Querier currently is fully stateless and horizontally scalable.
 
-```
+```bash
 $ thanos query \
     --http-address     "0.0.0.0:9090" \
     --store            "<store-api>:<grpc-port>" \

docs/components/rule.md

@@ -14,7 +14,7 @@ The rule component evaluates Prometheus recording and alerting rules against ran
 
 The data of each rule node can be labeled to satisfy the clusters labeling scheme. High-availability pairs can be run in parallel and should be distinguished by the designated replica label, just like regular Prometheus servers.
 
-```
+```bash
 $ thanos rule \
     --data-dir          "/path/to/data" \
     --eval-interval     "30s" \

docs/components/sidecar.md

@@ -19,14 +19,14 @@ Prometheus servers connected to the Thanos cluster via the sidecar are subject t
 The retention is recommended to not be lower than three times the block duration. This achieves resilience in the face of connectivity issues 
 to the object storage since all local data will remain available within the Thanos cluster. If connectivity gets restored the backlog of blocks gets uploaded to the object storage.
 
-```console
+```bash
 $ prometheus \
   --storage.tsdb.max-block-duration=2h \
   --storage.tsdb.min-block-duration=2h \
   --web.enable-lifecycle
 ```
 
-```console
+```bash
 $ thanos sidecar \
     --tsdb.path        "/path/to/prometheus/data/dir" \
     --prometheus.url   "http://localhost:9090" \

docs/components/store.md

@@ -9,7 +9,7 @@ menu: "components"
 The store component of Thanos implements the Store API on top of historical data in an object storage bucket. It acts primarily as an API gateway and therefore does not need significant amounts of local disk space. It joins a Thanos cluster on startup and advertises the data it can access.
 It keeps a small amount of information about all remote blocks on local disk and keeps it in sync with the bucket. This data is generally safe to delete across restarts at the cost of increased startup times.
 
-```
+```bash
 $ thanos store \
     --data-dir        "/local/state/data/dir" \
     --cluster.peers    "thanos-cluster.example.org" \

docs/design.md

@@ -30,7 +30,7 @@ The sidecar implements the gRPC service on top of Prometheus' [HTTP and remote-r
 
 Data sources that persist their data for long-term storage do so via the Prometheus 2.0 storage engine. The storage engine periodically produces immutable blocks of data for a fixed time range. A block is a directory with a handful of larger files containing all sample data and peristed indices that are required to retrieve the data:
 
-```
+```bash
 01BX6V6TY06G5MFQ0GPH7EMXRH
 ├── chunks
 │   ├── 000001

docs/getting-started.md

@@ -2,6 +2,7 @@
 title: Getting Started
 type: docs
 menu: "thanos"
+weight: 1
 ---
 
 # Getting started
@@ -11,6 +12,10 @@ Thanos provides a global query view, data backup, and historical data access as
 In this quick-start guide, we will configure Thanos and all components mentioned to work against a Google Cloud Storage bucket. 
 At the moment, Thanos is able to use [different storage providers](storage.md), with the ability to add more providers as necessary.
 
+## Architecture Overview
+
+![architecture_overview](../img/arch.jpg)
+
 ## Requirements
 
 * One or more [Prometheus](https://prometheus.io) v2.2.1+ installations
@@ -24,7 +29,7 @@ You can find the latest Thanos release [here](https://github.com/improbable-eng/
 If you want to build Thanos from source -
 with a working installation of the Go [toolchain](https://github.com/golang/tools) (`GOPATH`, `PATH=${GOPATH}/bin:${PATH}`), Thanos can be downloaded and built by running:
 
-```
+```bash
 go get -d github.com/improbable-eng/thanos/...
 cd ${GOPATH}/src/github.com/improbable-eng/thanos
 make
@@ -52,7 +57,7 @@ NOTE: If you want to use `reload.*` flags for sidecar, make sure you enable `rel
 
 The following configures the sidecar to only backup Prometheus data into a chosen object storage:
 
-```
+```bash
 thanos sidecar \
     --tsdb.path            /var/prometheus \               # TSDB data directory of Prometheus
     --prometheus.url       "http://localhost:9090" \
@@ -75,7 +80,7 @@ The Sidecar component implements and exposes gRPC _[Store API](/pkg/store/storep
 
 Let's extend the Sidecar in the previous section to connect to a Prometheus server, and expose the Store API.
 
-```
+```bash
 thanos sidecar \
     --tsdb.path                 /var/prometheus \
     --objstore.config-file      bucket_config.yaml \       # Bucket config file to send data to
@@ -93,7 +98,7 @@ Prometheus allows the configuration of "external labels" of a given Prometheus i
 
 Every Prometheus instance must have a globally unique set of identifying labels. For example, in Prometheus's configuration file:
 
-```
+```yaml
 global:
   external_labels:
     region: eu-west
@@ -112,7 +117,7 @@ Query also implements Prometheus's offical HTTP API and can thus be used with ex
 
 Below, we will set up a Query to connect to our Sidecars, and expose its HTTP UI. 
 
-```
+```bash
 thanos query \
     --http-address              0.0.0.0:19192 \         # HTTP Endpoint for Query UI
     --store                     1.2.3.4:19090 \         # Static gRPC Store API Address for the query node to query
@@ -127,7 +132,7 @@ The Query component is also capable of deduplicating data collected from Prometh
 
 A typical choice is simply the label name "replica" while letting the value be whatever you wish. For example, you might set up the following in Prometheus's configuration file:
 
-```
+```yaml
 global:
   external_labels:
     region: eu-west
@@ -138,7 +143,7 @@ global:
 
 Reload your Prometheus instances, and then, in Query, we will enable `replica` as the label we want to enable deduplication to occur on:
 
-```
+```bash
 thanos query \
     --http-address              0.0.0.0:19192 \
     --store                     1.2.3.4:19090 \
@@ -158,7 +163,7 @@ The metadata includes the information about time windows and external labels for
 There are various ways to tell query component about the StoreAPIs it should query data from. The simplest way is to use a static list of well known addresses to query. 
 These are repeatable so can add as many endpoint as needed. You can put DNS domain prefixed by `dns://` or `dns+srv://` to have Thanos Query do an `A` or `SRV` lookup to get all required IPs to communicate with.
 
-```
+```bash
 thanos query \
     --http-address              0.0.0.0:19192 \                     # Endpoint for Query UI
     --grpc-address              0.0.0.0:19092 \                     # gRPC endpoint for Store API
@@ -175,7 +180,7 @@ Given a sidecar we can have it join a gossip cluster by advertising itself to ot
 
 NOTE: Gossip will be removed. See [here](/docs/proposals/approved/201809_gossip-removal.md) why. New FileSD with DNS support is enabled and described [here](/docs/service_discovery.md)
 
-```
+```bash
 thanos sidecar \
     --prometheus.url            http://localhost:9090 \
     --tsdb.path                 /var/prometheus \
@@ -193,7 +198,7 @@ When a peer advertises itself / joins a gossip cluster it sends information abou
 
 Once the Peer joins the cluster it will periodically update the information it sends out with new / updated information about other peers and the time windows for the metrics that it can access.
 
-```
+```bash
 thanos query \
     --http-address              0.0.0.0:19192 \         # Endpoint for Query UI
     --grpc-address              0.0.0.0:19092 \         # gRPC endpoint for Store API
@@ -204,7 +209,7 @@ thanos query \
 
 You can mix both static `store` and `cluster` based approaches:
 
-```
+```bash
 thanos query \
     --http-address              0.0.0.0:19192 \                     # Endpoint for Query UI
     --grpc-address              0.0.0.0:19092 \                     # gRPC endpoint for Store API
@@ -233,7 +238,7 @@ As the sidecar backs up data into the object storage of your choice, you can dec
 The store gateway does just that by implementing the same gRPC data API as the sidecars but backing it with data it can find in your object storage bucket.
 Just like sidecars and query nodes, the store gateway exposes StoreAPI and needs to be discovered by Thanos Querier.
 
-```
+```bash
 thanos store \
     --data-dir                  /var/thanos/store \     # Disk space for local caches
     --objstore.config-file      bucket_config.yaml \    # Bucket to fetch data from
@@ -251,7 +256,7 @@ A local Prometheus installation periodically compacts older data to improve quer
 
 The compactor component simple scans the object storage and processes compaction where required. At the same time it is responsible for creating downsampled copies of data to speed up queries.
 
-```
+```bash
 thanos compact \
     --data-dir             /var/thanos/compact \  # Temporary workspace for data processing
     --objstore.config-file bucket_config.yaml \   # Bucket where to apply the compacting

docs/service-discovery.md

@@ -1,4 +1,10 @@
-# Thanos Service Discovery
+---
+title: Service Discovery
+type: docs
+menu: "thanos"
+---
+
+# Service Discovery
 
 Service discovery has a vital place in Thanos components. It allows Thanos to discover different set API targets required to perform certain operations.
 This logic is meant to replace Gossip that [is planned to be removed.](/docs/proposals/approved/201809_gossip-removal.md)

docs/storage.md

@@ -2,6 +2,7 @@
 title: Object Storage
 type: docs
 menu: "thanos"
+markup: mmark
 ---
 
 # Object Storage
@@ -14,6 +15,7 @@ All clients are configured using `--objstore.config-file` to reference to the co
 
 Current object storage client implementations:
 
+{.table .table-striped}
 | Provider             | Maturity | Auto-tested on CI | Maintainers |
 |----------------------|-------------------|-----------|---------------|
 | Google Cloud Storage | Stable  (production usage)             | yes       | @bwplotka   |

website/config.toml

@@ -1,6 +1,10 @@
 baseURL = "https://adrien-f.github.io/thanos/"
 languageCode = "en-us"
 title = "Thanos - Highly available Prometheus setup with long term storage capabilities"
+pygmentsCodeFences = true
+pygmentsUseClasses = true
 
-[permalinks]
-  docs = "/docs/:filename/"
+[params]
+  SlackInvite = "https://join.slack.com/t/improbable-eng/shared_invite/enQtMzQ1ODcyMzQ5MjM4LWY5ZWZmNGM2ODc5MmViNmQ3ZTA3ZTY3NzQwOTBlMTkzZmIxZTIxODk0OWU3YjZhNWVlNDU3MDlkZGViZjhkMjc"
+  GithubUser = "improbable-eng"
+  GithubProject = "thanos"

website/layouts/_default/baseof.html

@@ -8,8 +8,14 @@
         crossorigin="anonymous">
     <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr"
         crossorigin="anonymous">
-    <link rel="stylesheet" href="{{ "/main.css" | relURL }}">
+    <link rel="stylesheet" href="{{ "/main.css" | relURL }}" />
+    <link rel="stylesheet" href="{{ "/syntax.css" | relURL }}" />
+    <link rel="icon" href="{{ "/icon-light.png" | relURL }}" />
     <title>{{ block "title" . }}{{ .Site.Title }}{{ end }}</title>
+    <meta property="og:image" content="{{ "/icon-light.png" | relURL }}" />
+    <meta property="og:type" content="object" />
+    <meta property="og:title" content="Thanos" />
+    <meta property="og:description" content="{{ .Site.Title }}" />
 </head>
 
 <body>
@@ -22,13 +28,13 @@
         <div class="collapse navbar-collapse" id="navbarSupportedContent">
             <ul class="navbar-nav ml-auto">
                 <li class="nav-item">
-                    <a class="nav-link" href="{{ "/docs/getting-started" | relURL }}">Docs</a>
+                    <a class="nav-link" href="{{ "/docs/getting-started" | relURL }}">Documentation</a>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#">Download</a>
+                    <a class="nav-link" href="https://github.com/{{ .Site.Params.GithubUser }}/{{ .Site.Params.GithubProject }}/releases">Download</a>
                 </li>
                 <li class="nav-item">
-                    <a href="#" class="nav-link"><i class="fab fa-github"></i> GitHub</a>
+                    <a href="https://github.com/{{ .Site.Params.GithubUser }}/{{ .Site.Params.GithubProject }}" class="nav-link"><i class="fab fa-fw fa-github"></i> GitHub</a>
                 </li>
             </ul>
         </div>
@@ -38,26 +44,12 @@
         <div class="container">
             <div class="row py-5">
                 <div class="col">
-                    <h6 class="font-weight-bold">Documentation</h6>
+                    <h6 class="font-weight-bold">Thanos</h6>
                     <ul class="list-unstyled">
-                        <li><a href="#" class="text-reset">Lorem ipsum dolor sit amet</a></li>
-                        <li><a href="#" class="text-reset">Consectetur adipiscing elit</a></li>
-                    </ul>
-                </div>
-                <div class="col">
-                    <h6 class="font-weight-bold">Community</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-reset">Slack</a></li>
-                        <li><a href="#" class="text-reset">GitHub</a></li>
-                        <li><a href="#" class="text-reset">User Showcase</a></li>
-                    </ul>
-                </div>
-                <div class="col">
-                    <h6 class="font-weight-bold">More</h6>
-                    <ul class="list-unstyled">
-                        <li><a href="#" class="text-reset">Slack</a></li>
-                        <li><a href="#" class="text-reset">Github</a></li>
-                        <li><a href="#" class="text-reset">User Showcase</a></li>
+                        <li><a href="{{ "/docs/getting-started" | relURL }}" class="text-reset">Documentation</a></li>
+                        <li><a href="{{ .Site.Params.SlackInvite }}" class="text-reset">Slack</a></li>
+                        <li><a href="https://github.com/{{ .Site.Params.GithubUser }}/{{ .Site.Params.GithubProject }}" class="text-reset">GitHub</a></li>
+                        <li><a href="https://github.com/{{ .Site.Params.GithubUser }}/{{ .Site.Params.GithubProject }}/issues" class="text-reset">Issues</a></li>
                     </ul>
                 </div>
             </div>
@@ -70,5 +62,4 @@ <h6 class="font-weight-bold">More</h6>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k"
         crossorigin="anonymous"></script>
 </body>
-
 </html>

website/layouts/component/single.html

@@ -0,0 +1,28 @@
+{{ define "main" }}
+<div class="container">
+    <div class="row py-5">
+        <div class="col col-3">
+                {{ $currentPage := . }}
+                <h5>Thanos</h5>
+                <ul class="list-unstyled">
+                {{ range .Site.Menus.thanos }}
+                    <li class="ml-3">
+                        <a href="{{ .URL }}">{{ .Title }}</a>
+                    </li>
+                {{ end }}
+                </ul>
+                <h5 class="mt-3">Components</h5>
+                <ul class="list-unstyled">
+                {{ range .Site.Menus.components }}
+                    <li class="ml-3">
+                        <a href="{{ .URL }}">{{ .Title }}</a>
+                    </li>
+                {{ end }}
+            </ul>
+        </div>
+        <div class="col col-9">
+            {{ .Content }}
+        </div>
+    </div>
+</div>
+{{ end }}