docs: add social links in the website (#890)

* chore: support for custom_dir in theme

* feat: add social links banner in nav

* chore: add cloudflare analytics

docs/css/extra.css

@@ -47,4 +47,71 @@ body .card-grid-item:focus {
 .card-grid-item[href]:focus {
     background: #F2F4FE;
     color: var(--md-primary-fg-color);
-}
+}
+
+.community-callout-wrapper {
+    padding: 30px 10px 0 10px;
+}
+
+.community-callout {
+    color: #F2F4FE;
+    background: linear-gradient(10.88deg, rgba(102, 56, 242, 0.4) 9.56%, #6638F2 100%), #291A3F;
+    box-shadow: 0px 20px 45px rgba(#9991B5, 0.75);
+    border-radius: 10px;
+    padding: 20px;
+}
+
+.community-callout h2 {
+    font-size: 1.15em;
+    margin: 0 0 20px 0;
+    color: #F2F4FE;
+    text-align: center;
+}
+
+.community-callout ul {
+    list-style: none;
+    padding: 0;
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    margin-top: 20px;
+    margin-bottom: 0;
+}
+
+.community-callout a {
+    transition: opacity 0.2s ease;
+}
+
+.community-callout a:hover {
+    opacity: 0.5;
+}
+
+.community-callout a img {
+    height: 1.75em;
+    width: auto;
+    aspect-ratio: 1;
+}
+
+@media (min-width: 1220px) {
+    .community-callout-wrapper {
+       padding: 40px 0 0;
+    }
+
+    .community-callout h2 {
+        font-size: 1.25em;
+    }
+
+    .community-callout a img {
+        height: 2em;
+    }
+}
+
+@media (min-width: 1600px) {
+    .community-callout h2 {
+        font-size: 1.15em;
+    }
+
+    .community-callout a img {
+        height: 1.75em;
+    }
+}

docs/theme/main.html

@@ -0,0 +1,5 @@
+{% extends "base.html" %}
+
+{% block analytics %}
+<!-- Cloudflare Web Analytics --><script defer src='https://static.cloudflareinsights.com/beacon.min.js' data-cf-beacon='{"token": "e44a95720257486eab94698a6b4c6ca6"}'></script><!-- End Cloudflare Web Analytics -->
+{% endblock %}

docs/theme/partials/nav.html

@@ -0,0 +1,83 @@
+<!--
+  Copyright (c) 2016-2023 Martin Donath <martin.donath@squidfunk.com>
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Determine class according to configuration -->
+{% set class = "md-nav md-nav--primary" %}
+{% if "navigation.tabs" in features %}
+{% set class = class ~ " md-nav--lifted" %}
+{% endif %}
+{% if "toc.integrate" in features %}
+{% set class = class ~ " md-nav--integrated" %}
+{% endif %}
+
+<!-- Main navigation -->
+<nav class="{{ class }}" aria-label="{{ lang.t('nav') }}" data-md-level="0">
+
+    <!-- Site title -->
+    <label class="md-nav__title" for="__drawer">
+        <a href="{{ config.extra.homepage | d(nav.homepage.url, true) | url }}" title="{{ config.site_name | e }}"
+            class="md-nav__button md-logo" aria-label="{{ config.site_name }}" data-md-component="logo">
+            {% include "partials/logo.html" %}
+        </a>
+        {{ config.site_name }}
+    </label>
+
+    <!-- Repository information -->
+    {% if config.repo_url %}
+    <div class="md-nav__source">
+        {% include "partials/source.html" %}
+    </div>
+    {% endif %}
+
+    <!-- Render item list -->
+    <ul class="md-nav__list" data-md-scrollfix>
+        {% for nav_item in nav %}
+        {% set path = "__nav_" ~ loop.index %}
+        {% set level = 1 %}
+        {% include "partials/nav-item.html" %}
+        {% endfor %}
+        <li class="community-callout-wrapper">
+            <div class="community-callout">
+                <h2>Join the community</h2>
+                <ul>
+                    <li>
+                        <a href="https://slack.testcontainers.org/" target="_blank">
+                            <img src="/icons/slack.svg" alt="Slack" width="30" height="31">
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://github.com/testcontainers" target="_blank">
+                            <img src="/icons/github.svg" alt="GitHub" width="30" height="31">
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://stackoverflow.com/questions/tagged/testcontainers" target="_blank">
+                            <img src="/icons/stackoverflow.svg" alt="StackOverflow" width="26" height="31">
+                        </a>
+                    </li>
+                    <li>
+                        <a href="https://twitter.com/testcontainers" target="_blank">
+                            <img src="/icons/twitter.svg" alt="Twitter" width="37" height="31">
+                        </a>
+                    </li>
+                </ul>
+            </div>
+        </li>
+    </ul>
+</nav>

mkdocs.yml

@@ -5,6 +5,7 @@ plugins:
     - markdownextradata
 theme:
     name: material
+    custom_dir: docs/theme
     palette:
         scheme: testcontainers
     font:

modulegen/mkdocs.go

@@ -12,8 +12,9 @@ type MkDocsConfig struct {
 	SiteName string   `yaml:"site_name"`
 	Plugins  []string `yaml:"plugins"`
 	Theme    struct {
-		Name    string `yaml:"name"`
-		Palette struct {
+		Name      string `yaml:"name"`
+		CustomDir string `yaml:"custom_dir"`
+		Palette   struct {
 			Scheme string `yaml:"scheme"`
 		} `yaml:"palette"`
 		Font struct {