Merge pull request #322 from creativecommons/add_recent_posts

Add recent posts section

content/contents.lr

@@ -70,3 +70,5 @@ links_plugins:
   <h5 class="link-heading"><a href="https://opensource.creativecommons.org/ccsearch-browser-extension/" class="has-text-forest-green">CC Search Browser Extension</a></h5>
   <p class="link-caption">Search the Catalog using our Extension.</p>
 </div>
+#### recent-posts ####
+title: Recent Blog Post

flowblocks/recent-posts.ini

@@ -0,0 +1,6 @@
+[block]
+name = Recent Posts
+
+[fields.title]
+label = Title
+type = string

models/home.ini

@@ -9,4 +9,4 @@ type = string
 [fields.block_content]
 label = Block Content
 type = flow
-flow_blocks = hero, get-involved
+flow_blocks = hero, get-involved, recent-posts

themes/vocabulary_theme/templates/blocks/recent-posts.html

@@ -0,0 +1,43 @@
+{% from "macros/author_name.html" import render_author_name %}
+
+<section class="recent-posts">
+  <div class="container">
+    <div class="level">
+      <h4 class="is-paddingless level-left">
+        {{ this.title }}
+      </h4>
+      <span class="level-right">
+        <a class="posts-link" href="/blog">See all posts <i class="icon angle-right"></i></a>
+      </span>
+    </div>
+    <div class="columns">
+      {% for post in site.query('/blog/entries') %}
+        {% if loop.index <= 3 %}
+          {% set author = post.parent.parent.children.get('authors').children.get(post.author) %}
+          <div class="column is-one-third is-paddingless padding-horizontal-big padding-top-bigger">
+            <article class="card entry-post horizontal no-border blog-entry">
+              <header>
+                <figure class="image blog-image">
+                {% if author.about %}
+                  {% if author.md5_hashed_email %}
+                    <img class="profile" src="https://secure.gravatar.com/avatar/{{ author.md5_hashed_email }}?size=200"
+                    alt="gravatar" />
+                  {% endif %}
+                {% endif %}
+                </figure>
+              </header>
+              <div class="blog-content">
+                <h4 class="b-header"><a class="has-color-dark-slate-gray" href="{{ post|url }}">{{ post.title }}</a></h4>
+                <span class="blog-author">by <a class="author-name" href="{{ author|url }}">{{ render_author_name(author) }}</a>
+                on {{ post.pub_date|dateformat("YYYY-MM-dd") }}</span>
+                <div class="excerpt">
+                  {{ post.body | excerpt | string | striptags() | truncate(100) }}
+                </div>
+              </div>
+            </article>
+          </div>
+        {% endif %}
+      {% endfor %}
+    </div>
+  </div>
+</section>

webpack/sass/main.scss

@@ -117,6 +117,34 @@ a {
   }
 }
 
+.recent-posts {
+  background-color: rgba(4, 166, 53, 0.1);
+
+  .container {
+    @extend .padding-vertical-xl;
+    @extend .padding-horizontal-big;
+
+    .columns {
+      @extend .padding-top-bigger;
+      @extend .padding-bottom-xl;
+    }
+  }
+
+  .posts-link {
+    @extend .has-color-forest-green;
+    @extend .body-normal;
+
+    font-weight: bold;
+    line-height: 1.5;
+    text-decoration: none;
+
+    .icon {
+      @extend .has-color-forest-green;
+      @extend .padding-left-small;
+    }
+  }
+}
+
 .breadcrumb-container {
   border-top: 4px solid $color-forest-green;
   background-color: $color-lighter-gray;