Add the local blog system to the site (#643)

* Add the local blog system to the site

* Fix the descritpion part

* Fix lint issue

* Align the logo and article to the left content edge

requirements.txt

@@ -1,4 +1,5 @@
 canonicalwebteam.flask_base==0.9.1
+canonicalwebteam.blog==6.4.0
 canonicalwebteam.discourse-docs==1.0.1
 canonicalwebteam.http==1.0.3
 canonicalwebteam.templatefinder==1.0.0

static/sass/_patterns_cards.scss

@@ -0,0 +1,132 @@
+@mixin maas-p-cards {
+  @include local-blog-card;
+}
+
+@mixin local-blog-card {
+  .p-blog-card {
+    @extend %p-card--highlighted;
+
+    border-top: 3px solid $color-brand;
+  }
+
+  .blog-p-card__category {
+    color: $color-mid-dark;
+    font-size: $sp-medium;
+    line-height: 1.5;
+    padding: 0 0 0 $sp-large;
+    text-transform: uppercase;
+
+    > a:link,
+    > a:visited {
+      color: $color-mid-dark;
+      text-decoration: none;
+    }
+
+    > a:hover,
+    > a:active {
+      color: $color-brand;
+      text-decoration: underline;
+    }
+  }
+
+  %post-card-header {
+    border-radius: 2px;
+    padding: $sp-medium $sp-medium $sp-small;
+  }
+
+  .blog-p-card--post {
+    @extend %p-card--highlighted;
+
+    display: flex !important;
+    flex-direction: column;
+    padding: 0;
+
+    .p-strip--featured & {
+      background-color: rgba(255, 255, 255, 0.9);
+      position: relative;
+      z-index: 1;
+    }
+
+    > .blog-p-card__content {
+      border-top: 1px solid $color-mid-light;
+      display: flex;
+      flex-direction: column;
+      height: 100%;
+      margin: 0;
+      padding: $sp-medium $sp-small $sp-small;
+
+      > a,
+      h3,
+      p {
+        display: block;
+        margin: $sp-small 0;
+      }
+    }
+
+    .blog-p-card__footer {
+      border-top: 1px dotted $color-mid-light;
+      font-size: 0.875rem;
+      margin: auto $sp-small 0;
+      max-width: inherit;
+      padding: $sp-medium $sp-small;
+    }
+  }
+
+  .blog-p-card__header {
+    &--canonical-announcements {
+      border-color: #ff8936;
+    }
+
+    &--cloud-and-server {
+      border-color: #a87ca0;
+    }
+
+    &--desktop {
+      border-color: #faba54;
+    }
+
+    &--internet-of-things {
+      border-color: #8db255;
+    }
+
+    &--phone-and-tablet {
+      border-color: $color-mid-light;
+    }
+
+    &--webinar {
+      border-color: #48929b;
+    }
+
+    &--tutorials {
+      border-color: #47919e;
+    }
+  }
+
+  .blog-p-card--muted {
+    @extend .p-card;
+
+    background-color: $color-light;
+    box-shadow: 0 1px 2px 0 transparentize($color-dark, 0.8);
+    padding: 0;
+
+    > .blog-p-card__header {
+      border-bottom: 0;
+      border-top: 3px solid $color-light;
+      margin-bottom: 0;
+    }
+
+    > .blog-p-card__content {
+      border-top: 1px dotted $color-mid-light;
+      margin: 0 $sp-small $sp-small;
+      padding: $sp-medium $sp-small $sp-small;
+    }
+  }
+
+  .blog-p-card__date {
+    @extend .p-media-object__meta-list;
+
+    display: flex;
+    margin-top: auto;
+    padding-top: $sp-medium;
+  }
+}

static/sass/main.scss

@@ -2,6 +2,7 @@
 @import "settings_colors";
 
 $increase-font-size-on-larger-screens: false;
+$breakpoint-navigation-threshold: 960px;
 
 // import vanilla-brochure-theme
 @import "vanilla-framework/scss/build";
@@ -13,7 +14,7 @@ $increase-font-size-on-larger-screens: false;
 @import "patterns_strips", "patterns_hero-video", "patterns_lists",
   "patterns_modal", "patterns_takeunders", "patterns_tables",
   "patterns_contact-modal", "layout_docs", "patterns_sidenav", "hljs",
-  "patterns_tutorials";
+  "patterns_tutorials", "patterns_cards";
 
 // patterns
 @include maas-p-hero-video;
@@ -26,6 +27,7 @@ $increase-font-size-on-larger-screens: false;
 @include maas-l-docs;
 @include maas-p-sidenav;
 @include maas-p-tutorials;
+@include maas-p-cards;
 
 .row.is-bordered::before {
   left: 0;
@@ -68,9 +70,15 @@ $increase-font-size-on-larger-screens: false;
   }
 }
 
-.p-navigation__banner {
-  background-color: #e95420;
-  padding-left: 1rem;
+.p-navigation__row {
+  @media screen and (min-width: $breakpoint-navigation-threshold) {
+    padding: 0 1.5rem;
+  }
+
+  .p-navigation__banner {
+    background-color: #e95420;
+    padding-left: 1rem;
+  }
 }
 
 // XXX Ant: This fixes an issue with the use of dark navigation.

templates/base_index.html

@@ -9,6 +9,13 @@
       {% include "includes/head.html" %}
     {% endwith %}
     {% if self.meta_copydoc() %}<meta name="copydoc" content="{% block meta_copydoc %}{% endblock %}">{% endif %}
+    {% block extra_meta %}{% endblock %}
+
+    {% if self.meta_image %}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:image" content="{{ self.meta_image() }}">
+    <meta property="og:image" content="{{ self.meta_image() }}">
+    {% endif %}
 
   </head>
   <body class="{% block page_class %}{% endblock %}">

templates/blog/article.html

@@ -0,0 +1,91 @@
+{% extends "base_index.html" %}
+
+{% block page_title %}{{ article.title.rendered|safe }} | Snapcraft{% endblock %}
+{% block page_description %}{{ article.excerpt.raw }}{% endblock %}
+{% if article.image and article.image.source_url %}
+  {% block meta_image %}{{ article.image.source_url }}{% endblock %}
+{% endif %}
+
+{% block meta_schema %}
+<script type="application/ld+json">
+    {
+      "@context": "http://schema.org",
+      "@id": "https://maas.io/#article",
+      "@type": "Article",
+      "name": "{{ article.title.renderered|safe }}",
+      "author": {
+         "@type": "Person",
+         "name": "{{ article.author.name }}"
+      },
+      "datePublished": "{{ article.date_gmt }}",
+      {% if article.image and article.image.source_url %}
+        "image": "{{ article.image.source_url }}",
+      {% endif %}
+      "url": "https://maas.io{{ self.meta_path() }}",
+      "publisher": {
+        "@type": "Organization",
+        "name": "MAAS"
+      }
+    }
+  </script>
+{% endblock %}
+
+{% block extra_meta %}
+  <meta property="og:type" content="article" />
+  <meta property="article:published_time" content="{{ article.date_gmt }}" />
+  <meta property="article:author" content="{{ article.author.name }}" />
+{% endblock %}
+
+{% block content %}
+<section id="main-content" class="p-strip">
+  {% if newsletter_subscribed %}
+    <div class="row">
+      <div class="p-notification--positive">
+        <p class="p-notification__content">
+          <h5 class="p-notification__title">Success</h5>
+          <p class="p-notification__message">Thanks for subscribing!</p>
+        </div>
+      </div>
+    </div>
+  {% endif %}
+  <div class="row">
+    <div class="col-8">
+      <h1 class="p-heading--2">{{ article.title.rendered|safe }}</h1>
+      <p class="u-text--muted">by {{ article.author.name }} on {{ article.date }}</p>
+      {{ article.content.rendered|safe }}
+    </div>
+  </div>
+</section>
+
+{% if related_articles %}
+  <section class="p-strip is-shallow is-bordered">
+    <div class="u-fixed-width">
+      <h3>
+        Related posts
+      </h3>
+    </div>
+    <div class="row p-divider">
+      {% for related_article in related_articles %}
+        <div class="col-4 p-divider__block">
+          <h4>
+            <a href="/blog/{{ related_article.slug }}">
+              {{ related_article.title.rendered|safe }}
+            </a>
+          </h4>
+          <p>{{ related_article.excerpt.raw }}</p>
+        </div>
+      {% endfor %}
+    </div>
+  </section>
+{% endif %}
+
+<script type="text/template" id="blog-series-item-template">
+  <li class="p-list__item">
+    <h5>
+      <a href="/blog/${slug}" class="p-blog-list__item ${className}">
+        ${title}
+      </a>
+    </h5>
+  </li>
+</script>
+{% endblock %}