website: add sponsor section on homepage (#1062)

.gitignore

@@ -20,3 +20,4 @@ data/
 
 website/public/
 website/docs-pre-processed/
+!website/data

docs/contributing/how-to-contribute-to-docs.md

@@ -63,12 +63,26 @@ Keep `menu` the same as sub-directory the file is in. This will help to manage a
 
 Show new menu section in main page by changing `website/layouts/_default/baseof.html` file.
 
+## Logos
+
+If your company is using Thanos in production, we'd love to showcase your company's logo on our page. Add yourself in [`website/data/sponsors.yml`](/website/data/sponsors.yml) like so:
+
+```yml
+- name: My Awesome Company
+  url: https://wwww.company.com
+  logo: company.png
+```
+
+Copy your company's logo in `website/static/logos`, and make sure it follows these rules:
+
+* Rectangle shape
+* Greyscale is prefered but color is fine
+* Keep it under 50KB
+
 ## Testing
 
 Every PR is building website and on success it shows the link to preview.
 
-Alternatively you can run `make web-serve` to serve and preview the website locally.
-
 ## Deployment.
 
 We use [Netlify](https://www.netlify.com/) for hosting. We are using Open Source license (PRO). Thanks Netlify for this!

website/data/sponsors.yml

@@ -0,0 +1,3 @@
+---
+
+sponsors: []

website/layouts/_default/single.html

@@ -5,7 +5,9 @@
                 {{ template "_default/sidemenu.html" . }}
             </div>
             <div class="col-12 col-lg-9">
-                {{ replace .Content "<table>" "<table class='table table-striped'>" | safeHTML }}
+                {{ $content := replace .Content "<table>" "<table class='table table-striped'>" }}
+                {{ $content = $content | replaceRE "(<h[1-4] id=\"([^\"]+)\".+)(</h[1-9]+>)" `${1} <a href="#${2}" class="header-anchor" aria-label="Header Anchor">#</a> ${3}` }}
+                {{ $content | safeHTML}}
             </div>
         </div>
     </div>

website/layouts/index.html

@@ -52,7 +52,38 @@ <h4 class="font-weight-bold">Downsampling & Compaction</h4>
         </div>
     </div>
 </div>
-<div class="container-fluid">
+<div class="container py-5">
+    <div class="row">
+        <div class="col-12"><h3 class="text-center">Founded by</h3></div>
+    </div>
+    <div class="row">
+        <div class="col-4 col-xl-2 offset-4 offset-xl-5 py-3">
+            <div class="img-sponsor">
+                <a href="https://improbable.io" rel="nofollow" target="_blank"><img src="{{ "/logos/improbable.png" | relURL }}" class="img-fluid" alt="Improbable"></a>
+            </div>
+        </div>
+    </div>
+    <div class="row">
+        <div class="col-12"><h3 class="text-center">Used by</h3></div>
+    </div>
+    <div class="row">
+        {{ range $sponsor := $.Site.Data.sponsors.sponsors }}
+        {{ if $sponsor.logo }}
+        <div class="col-4 col-xl-2 py-3">
+            <div class="img-sponsor">
+                <a href="{{ $sponsor.url }}" rel="nofollow" target="_blank"><img src="{{ (printf "/logos/%s" $sponsor.logo) | relURL }}" alt="{{ $sponsor.name }}"></a>
+            </div>
+        </div>
+        {{ end }}
+        {{ end }}
+        <div class="col-4 col-xl-2 py-3">
+            <div class="img-sponsor">
+                <a class="text-muted" href="{{ "contributing/how-to-contribute-to-docs.md#logos" | relURL }}">Your Company</a>
+            </div>
+        </div>
+    </div>
+</div>
+<div class="container-fluid bg-light">
     <div class="row py-5">
         <div class="col text-center">
             <h3 class="color-purple">Join the community !</h3>

website/static/main.css

@@ -49,4 +49,22 @@ pre {
 
 .list-group-item-thanos:hover {
     color: #6D41FF;
-}
+}
+
+.img-sponsor {
+    padding: 1rem;
+    background-color: #fff;
+    border: 1px solid #dee2e6;
+    border-radius: .25rem;
+    height: 75px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.img-sponsor img {
+    width: 100%;
+}
+
+.header-anchor { font-size: 100%; visibility: hidden;}
+h1:hover a, h2:hover a, h3:hover a, h4:hover a { visibility: visible}