Pull from the atom feed instead, and retrieve the thumbnail_url/alt i…

…f available.

Use the blog entry's thumbnail_url/alt if possible for the front-page blog preview section.

Style fixes to make the blog entry's thumbnail image size consistent (and pretty!)

Fix comment count, and properly align images with centre.

assets/less/components/links.less

@@ -73,29 +73,6 @@ a {
   }
 }
 
-.social-link-large {
-  &:extend(.social-link, .font-regular, .bg-grey, .text-blue-dark, .font-semibold, .shadow-md, .mb-4);
-  min-width: 164px;
-
-  span {
-    &:extend(.w-6, .h-6, .p-1, .bg-blue, .rounded-full, .mr-1, .text-center);
-    .transition(@transition-default);
-
-    svg {
-      &:extend(.text-grey-lighter);
-      // Make the icons just a little bit smaller
-      width: 80%;
-      height: 80%;
-      margin-top: 0.15rem;
-    }
-  }
-
-  &:hover,
-  &:focus {
-    &:extend(.bg-blue-dark, .text-white);
-  }
-}
-
 .p-links {
   a {
     &:extend(.inline-link);
@@ -132,4 +109,5 @@ a {
       height: 200px;
     }
   }
+
 }

helper.py

@@ -416,11 +416,23 @@ def get_blog_data(ctx, entry):
     data = ctx.get('blog_data')
     parsed = {}
 
-    parsed['summary'] = jinja2.Markup(data['entries'][entry]['summary_detail']['value'])
-    parsed['title'] = data['entries'][entry]['title']
-    parsed['comments'] = data['entries'][entry].get('slash_comments', '0')
-    parsed['date'] = datetime.fromtimestamp(mktime(data['entries'][entry]['published_parsed'])).strftime('%B %-m, %Y')
-    parsed['link'] = data['entries'][entry]['links'][0]['href']
+    entry = data['entries'][entry]
+
+
+    parsed['summary'] = jinja2.Markup(entry['summary_detail']['value'])
+    parsed['title'] = entry['title']
+    parsed['comments'] = entry.get('thr_total', '0')  # Comment count (atom extension)
+    parsed['date'] = datetime.fromtimestamp(mktime(entry['published_parsed'])).strftime('%B %-m, %Y')
+    parsed['link'] = entry['links'][0]['href']
+    parsed['thumbnail_url'] = None
+    parsed['thumbnail_alt'] = None
+
+    # Find our thumbnail
+    for link in entry['links']:
+        if link['rel'] == 'thumbnail':
+            parsed['thumbnail_url'] = link['href']
+            parsed['thumbnail_alt'] = link['title']
+            break
 
     return parsed
 

settings.py

@@ -171,7 +171,7 @@
     'thunderbird.site.bug-report': 'https://github.com/thundernest/thunderbird-website/issues',
 }
 
-BLOG_FEED_URL = 'https://blog.thunderbird.net/feed/'
+BLOG_FEED_URL = 'https://blog.thunderbird.net/feed/atom/'
 
 ENUS_ONLY = [
     'thunderbird.contact',

website/index.html

@@ -81,16 +81,21 @@ <h3 class="header-section pr-4 pl-4">
       </p>
 
       {% if LANG.startswith('en-') %}
-        <section class="flex flex-col lg:flex-row max-w-6xl mx-auto justify-between pl-8 pr-8 mb-12 leading-relaxed">
+        <section class="flex flex-col lg:flex-row max-w-8xl mx-auto justify-between pl-8 pr-8 mb-12 leading-relaxed">
 
           {% for x in range(3): %}
             <article class="flex flex-col p-4 flex-1 lg:max-w-sm bg-white rounded shadow-lg{% if x != 2 %} mb-10 lg:mb-0{% endif %}{% if x == 1 %} lg:ml-16 lg:mr-16{% endif %}">
               <a class="blog-link" href="{{ get_blog_data(x)['link'] }}" title="Continue Reading {{ get_blog_data(x)['title'] }}">
                 {{ get_blog_data(x)['title'] }}
               </a>
-              <p class="blog-body">
+              <span class="blog-body">
+                {% if get_blog_data(x)['thumbnail_url'] %}
+                <p class="thumbnail">
+                  <img src="{{ get_blog_data(x)['thumbnail_url'] }}" alt="{{ get_blog_data(x)['thumbnail_alt'] }}"/>
+                </p>
+                {% endif %}
                 {{ get_blog_data(x)['summary'] }}
-              </p>
+              </span>
               <footer class="flex justify-between items-center pt-4 border-grey-light border-solid border-0 border-t uppercase text-blue-dark font-bold tracking-tight">
                 <span>{{ get_blog_data(x)['date'] }}</span>
                 <span>COMMENTS {{ get_blog_data(x)['comments'] }}</span>