Merge pull request #392 from bitovi/docs/tracking

Landing page: templating, hubspot

docs/stylesheets/custom.css

@@ -46,3 +46,11 @@
     margin-left: 50px;
     margin-right: 10px
 }
+
+/* Disable Hubspot chat widget */
+#hubspot-messages-iframe-container {
+  display: none !important;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}

docs/theme/js/hubspot.js

@@ -0,0 +1,8 @@
+const scriptSrc = "//js.hs-scripts.com/2171535.js";
+
+const script = document.createElement('script');
+script.src = scriptSrc;
+script.async = true;
+script.defer = true;
+
+document.body.appendChild(script);

docs/theme/main.html

@@ -2,19 +2,26 @@
 
 # https://www.mkdocs.org/user-guide/customizing-your-theme/#overriding-template-blocks
 {% block extrahead %}
-        <meta name="description" content="BitOps is like bootstrap but for the infrastructure. It centralizes, organizes, and deploys your Infrastructure-as-Code.">
+        {% set title = config.site_name %}
+        {% if page and page.meta and page.meta.title %}
+        {% set title = title ~ " - " ~ page.meta.title %}
+        {% elif page and page.title and not page.is_homepage %}
+        {% set title = title ~ " - " ~ page.title %}
+        {% endif %}
+
+        <meta name="description" content="{{ config.site_description }}">
         <meta name="author" content="Bitovi">
         <!-- Social Meta Tags -->
-        <meta property="og:url" content="https://bitops.sh/">
+        <meta property="og:url" content="{{ page.canonical_url }}">
         <meta property="og:type" content="website">
-        <meta property="og:title" content="BitOps Documentation">
-        <meta property="og:description" content="BitOps is like bootstrap but for the infrastructure. It centralizes, organizes, and deploys your Infrastructure-as-Code.">
+        <meta property="og:title" content="{{ title }}">
+        <meta property="og:description" content="{{ config.site_description }}">
         <meta property="og:image" content="https://bitops.sh/assets/images/website-preview.png">
         <!-- Twitter Meta Tags -->
         <meta name="twitter:card" content="summary_large_image">
         <meta property="twitter:domain" content="bitops.sh">
-        <meta property="twitter:url" content="https://bitops.sh/">
-        <meta name="twitter:title" content="BitOps Documentation">
-        <meta name="twitter:description" content="BitOps is like bootstrap but for the infrastructure. It centralizes, organizes, and deploys your Infrastructure-as-Code.">
+        <meta property="twitter:url" content="{{ page.canonical_url }}">
+        <meta name="twitter:title" content="{{ title }}">
+        <meta name="twitter:description" content="{{ config.site_description }}">
         <meta name="twitter:image" content="https://bitops.sh/assets/images/website-preview.png">
 {% endblock %}

mkdocs.yml

@@ -1,6 +1,7 @@
 site_name: BitOps Documentation
-# Set site_url when we have a real domain
-site_url: https://bitops.sh
+site_url: https://bitops.sh/
+# Will be used for meta tags and previews in social media. 150-160 characters is recommendation.
+site_description: "BitOps is like bootstrap but for the infrastructure. It centralizes, organizes, and deploys your Infrastructure-as-Code."
 
 theme:
   features:
@@ -72,3 +73,6 @@ markdown_extensions:
   - pymdownx.extra
   - toc:
       permalink: "#"
+
+extra_javascript:
+  - theme/js/hubspot.js