website: add sponsor section on homepage

Makefile

@@ -34,7 +34,7 @@ GIT               ?= $(shell which git)
 BZR               ?= $(shell which bzr)
 
 WEB_DIR           ?= website
-WEBSITE_BASE_URL  ?= thanos.io
+WEBSITE_BASE_URL  ?= https://thanos.io
 PUBLIC_DIR        ?= $(WEB_DIR)/public
 ME                ?= $(shell whoami)
 

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

@@ -63,11 +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
 
 Run `make web-serve` to serve and preview the website locally.
 
-
 ## Deployment.
 
 Ask maintainer to deploy the page. (`GOOGLE_ANALYTICS_TOKEN="<  >" make web-deploy`)

website/hugo.yaml

@@ -19,7 +19,7 @@ relativeURL: true
 contentDir: "docs-pre-processed"
 archetypeDir: "archetypes"
 layoutDir: "layouts"
-publishDi: "public"
+publishDir: "public"
 staticDir: "static"
 
 permalinks:

website/layouts/_default/baseof.html

@@ -70,9 +70,10 @@ <h6 class="font-weight-bold">Community</h6>
                 <div class="col col-md-6 col-lg">
                     <h6 class="font-weight-bold">About</h6>
                     <p>Thanos is an OSS licensed project as Apache License 2.0</p>
+                    <p>Founded by <a href="https://improbable.io" class="text-reset">Improbable ❤️</a></p>
                 </div>
                 <div class="col col-md-6 col-lg">
-                    <a href="https://www.netlify.com">
+                     <a href="https://www.netlify.com">
                         <img src="https://www.netlify.com/img/global/badges/netlify-light.svg"/>
                     </a>
                 </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 href="{{ "contributing/how-to-contribute-to-docs.md" | 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,19 @@ 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%;
+}