Overhauled landing page

material/overrides/home.html

@@ -4,7 +4,7 @@
 {% extends "overrides/main.html" %}
 {% block tabs %}
   {{ super() }}
-  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1123.97,2.105c0.222,0 0,256.95 0,256.95l-1125.2,0l0,-48.177c0,0 15.954,4.645 54.489,4.645c116.177,0 196.902,-91.837 324.776,-91.837c120.62,0 113.834,45.468 254.071,45.468c140.237,0 214.262,-167.049 491.868,-167.049Z' style='fill: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),hsla(160deg,47%,55%,1) 99%,#fff 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}.tx-hero__content{padding-bottom:6rem}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button--primary{background-color:var(--md-primary-bg-color);color:hsla(193deg,37%,48%,1);border-color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{background-color:var(--md-accent-fg-color);color:var(--md-default-bg-color);border-color:var(--md-accent-fg-color)}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch;justify-items:space-between}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{width:38rem;order:1;transform:translateX(4rem)}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}.tx-hero__image{transform:translateX(8rem)}}</style>
+  <style>.md-header{position:initial}.md-main__inner{margin:0}.md-content{display:none}.tx-container{padding-top:1rem;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom,linear-gradient(to bottom,var(--md-primary-fg-color),hsla(160deg,47%,55%,1) 99%,#fff 99%)}.tx-hero{margin:0 .8rem;color:var(--md-primary-bg-color)}.tx-hero h1{margin-bottom:1rem;color:currentColor;font-weight:700}.tx-hero__content{padding-bottom:6rem}.tx-hero .md-button{margin-top:.5rem;margin-right:.5rem;color:var(--md-primary-bg-color)}.tx-hero .md-button--primary{background-color:var(--md-primary-bg-color);color:hsla(193deg,37%,48%,1);border-color:var(--md-primary-bg-color)}.tx-hero .md-button:focus,.tx-hero .md-button:hover{background-color:var(--md-accent-fg-color);color:var(--md-default-bg-color);border-color:var(--md-accent-fg-color)}@media screen and (min-width:60em){.md-sidebar--secondary{display:none}.tx-hero{display:flex;align-items:stretch;justify-items:space-between}.tx-hero__content{max-width:19rem;margin-top:3.5rem;padding-bottom:14vw}.tx-hero__image{width:38rem;order:1;transform:translateX(4rem)}}@media screen and (min-width:76.25em){.md-sidebar--primary{display:none}.tx-hero__image{transform:translateX(8rem)}}</style>
   <section class="tx-container">
     <div class="md-grid md-typeset">
       <div class="tx-hero">
@@ -12,12 +12,8 @@
           <img src="assets/images/illustration.png">
         </div>
         <div class="tx-hero__content">
-          <h1>Beautiful and functional project documentation</h1>
+          <h1>Technical documentation that just works</h1>
-          <p>
+          <p>{{ config.site_description }}. Set up in 5 minutes.</p>
-            Create a static site to host the documentation of your Open Source
-            or commercial project in a matter of minutes – hackable,
-            mobile-ready, translated into 41 languages, client-side search.
-          </p>
           <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">
             Get started
           </a>

material/overrides/main.html

@@ -2,6 +2,23 @@
   This file was automatically generated - do not edit
 -#}
 {% extends "base.html" %}
+{% block extrahead %}
+  {% set title = config.site_name %}
+  {% if page and page.title and not page.is_homepage %}
+    {% set title = config.site_name ~ " - " ~ page.title | striptags %}
+  {% endif %}
+  {% set image = 'assets/images/illustration.png' | url %}
+  <meta property="og:title" content="{{ title }}">
+  <meta property="og:description" content="{{ config.site_description }}">
+  <meta property="og:url" content="{{ page.canonical_url }}">
+  <meta property="og:image" content="{{ image }}">
+  <meta name="twitter:card" content="summary_large_image">
+  <meta name="twitter:site" content="@squidfunk">
+  <meta name="twitter:creator" content="@squidfunk">
+  <meta name="twitter:title" content="{{ title }}">
+  <meta name="twitter:description" content="{{ config.site_description }}">
+  <meta name="twitter:image" content="{{ image }}">
+{% endblock %}
 {% block announce %}
   Material for MkDocs 5.0.0rc3
 {% endblock %}

mkdocs.yml

@@ -20,7 +20,10 @@
 
 # Project information
 site_name: Material for MkDocs
-site_description: A Material Design theme for MkDocs
+site_description: >-
+  Create a branded static site from a set of Markdown files to host the
+  documentation of your Open Source or commercial project – customizable,
+  searchable, mobile-friendly, 40+ languages
 site_author: Martin Donath
 site_url: https://squidfunk.github.io/mkdocs-material/
 

src/overrides/home.html

@@ -47,7 +47,7 @@
     .tx-container {
       padding-top: 1rem;
       background:
-        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1123.97,2.105c0.222,0 0,256.95 0,256.95l-1125.2,0l0,-48.177c0,0 15.954,4.645 54.489,4.645c116.177,0 196.902,-91.837 324.776,-91.837c120.62,0 113.834,45.468 254.071,45.468c140.237,0 214.262,-167.049 491.868,-167.049Z' style='fill: white' /></svg>") no-repeat bottom,
+        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom,
         linear-gradient(
           to bottom,
           var(--md-primary-fg-color),
@@ -153,12 +153,8 @@
 
         <!-- Hero content -->
         <div class="tx-hero__content">
-          <h1>Beautiful and functional project documentation</h1>
+          <h1>Technical documentation that just works</h1>
-          <p>
+          <p>{{ config.site_description }}. Set up in 5 minutes.</p>
-            Create a static site to host the documentation of your Open Source
-            or commercial project in a matter of minutes – hackable,
-            mobile-ready, translated into 41 languages, client-side search.
-          </p>
           <a
             href="{{ page.next_page.url | url }}"
             title="{{ page.next_page.title | striptags }}"

src/overrides/main.html

@@ -22,6 +22,34 @@
 
 {% extends "base.html" %}
 
+
+<!-- Custom front matter -->
+{% block extrahead %}
+
+  <!-- Determine title -->
+  {% set title = config.site_name %}
+  {% if page and page.title and not page.is_homepage %}
+    {% set title = config.site_name ~ " - " ~ page.title | striptags %}
+  {% endif %}
+
+  <!-- Determine image -->
+  {% set image = 'assets/images/illustration.png' | url %}
+
+  <!-- Open graph meta tags -->
+  <meta property="og:title" content="{{ title }}" />
+  <meta property="og:description" content="{{ config.site_description }}" />
+  <meta property="og:url" content="{{ page.canonical_url }}" />
+  <meta property="og:image" content="{{ image }}" />
+
+  <!-- Twitter meta tags -->
+  <meta name="twitter:card" content="summary_large_image" />
+  <meta name="twitter:site" content="@squidfunk" />
+  <meta name="twitter:creator" content="@squidfunk" />
+  <meta name="twitter:title" content="{{ title }}" />
+  <meta name="twitter:description" content="{{ config.site_description }}" />
+  <meta name="twitter:image" content="{{ image }}" />
+{% endblock %}
+
 <!-- Announcement bar -->
 {% block announce %}
   Material for MkDocs 5.0.0rc3