feat(curtana): better meddia detection for Twitter Cards and Open Graph

sparanoid · Nov 28, 2016 · 0594582 · 0594582
1 parent ba60f33
commit 0594582
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 16 deletions.
diff --git a/_app/_includes/_amsf.html b/_app/_includes/_amsf.html
@@ -28,10 +28,8 @@
   {% if page.permalink != '/' %}
     {% if page.desc %}
       {{ page.desc | strip_html | strip_newlines | xml_escape }}
-    {% elsif page.excerpt %}
-      {{ page.excerpt | strip_html | strip_newlines | xml_escape | truncatewords: 50 }}
     {% else %}
-      {{ page.content | markdownify | strip_html | xml_escape | truncatewords: 50 | truncate: 210 }}
+      {{ page.content | markdownify | strip_html | normalize_whitespace | xml_escape | truncate: 300 | truncatewords: 40 }}
     {% endif %}
   {% else %}
     {{ site.description }}
@@ -58,6 +56,13 @@
 {% endcomment %}
 {% capture amsf_user_assets %}{{ site.assets | prepend: site.base }}{% endcapture %}
 
+{% comment %}
+  Favicons
+{% endcomment %}
+{% capture amsf_favicon %}{{ '/favicon.ico' | prepend: site.base }}{% endcapture %}
+{% capture amsf_favicon_svg %}{{ '/favicon.svg' | prepend: site.base }}{% endcapture %}
+{% capture amsf_apple_touch_icon %}{{ '/apple-touch-icon.png' | prepend: site.base }}{% endcapture %}
+
 {% comment %}
   Feed URL
 {% endcomment %}
@@ -78,7 +83,6 @@
 {% endcomment %}
 {% capture amsf_page_pubdate %}{{ page.date }}{% endcapture %}
 
-
 {% comment %}
   Page update date
 {% endcomment %}
@@ -185,8 +189,24 @@
 {% comment %}
   Page thumbnail
 {% endcomment %}
+{% capture amsf_post_first_image %}
+  {% assign post_images = page.content | split: "<img " %}
+  {% assign hero_image = amsf_apple_touch_icon | prepend: amsf_site_base %}
+  {% for image in post_images %}
+    {% if image contains "src=" %}
+      {% assign hero_image = image | split: ">" | first | match_regex: 'src="([^"]+)"' %}
+      {% break %}
+    {% endif %}
+  {% endfor %}
+  {{ hero_image }}
+{% endcapture %}
+
 {% capture amsf_page_thumb %}
-  {{ site.file }}/thumb/{% if page.thumb %}{{ page.thumb }}{% else %}na.png{% endif %}
+  {% if page.thumb %}
+    {{ site.file }}/thumb/{% if page.thumb %}{{ page.thumb }}{% else %}na.png{% endif %}
+  {% else %}
+    {{ amsf_post_first_image }}
+  {% endif %}
 {% endcapture %}
 
 {% comment %}

diff --git a/_app/_includes/themes/curtana/includes/open-graph.html b/_app/_includes/themes/curtana/includes/open-graph.html
@@ -7,16 +7,17 @@
 <meta property="og:title" content="{{ amsf_page_title }}">
 <meta property="og:url" content="{{ amsf_page_url }}">
 <meta property="og:description" content="{{ amsf_site_desc | strip }}">
+<meta property="og:image" content="{{ amsf_page_thumb | strip }}">
 
 <meta name="twitter:card" content="summary">
 <meta name="twitter:title" content="{{ amsf_page_title }}">
 <meta name="twitter:url" content="{{ amsf_page_url }}">
 <meta name="twitter:description" content="{{ amsf_site_desc | strip }}">
+<meta name="twitter:image" content="{{ amsf_page_thumb | strip }}">
 
-{% if page.path contains '_posts' %}
+{% if page.path contains "_posts" %}
   <meta property="article:published_time" content="{{ amsf_page_pubdate | date_to_xmlschema }}">
   <meta property="article:modified_time" content="{{ amsf_page_update | date_to_xmlschema }}">
-
   <meta name="twitter:label1" value="Words">
   <meta name="twitter:data1" value="{{ amsf_page_words | strip }}">
   <meta name="twitter:label2" value="Reading time">
@@ -30,8 +31,3 @@
 {% if author.twitter %}
   <meta name="twitter:creator" content="@{{ author.twitter }}">
 {% endif %}
-
-{% if page.thumb %}
-  <meta name="twitter:image" content="{{ amsf_page_thumb }}">
-  <meta property="og:image" content="{{ amsf_page_thumb }}">
-{% endif %}
diff --git a/_app/_includes/themes/curtana/includes/top.html b/_app/_includes/themes/curtana/includes/top.html
@@ -16,12 +16,12 @@
 
 <!-- Site icons -->
 {% if site.base != "" %}
-  <link rel="icon" href="{{ '/favicon.ico' | prepend: site.base }}">
-  <link rel="apple-touch-icon" href="{{ '/apple-touch-icon.png' | prepend: site.base }}">
+  <link rel="icon" href="{{ amsf_favicon }}">
+  <link rel="apple-touch-icon" href="{{ amsf_apple_touch_icon }}">
 {% endif %}
 
 <!-- Pinned icon for Safari -->
-<link rel="mask-icon" href="{{ '/favicon.svg' | prepend: site.base }}" color="{{ site.primary_color }}">
+<link rel="mask-icon" href="{{ amsf_favicon_svg }}" color="{{ site.primary_color }}">
 
 <!-- Main CSS -->
 <link rel="stylesheet" href="{{ '/css/app.css?assets-inline' | prepend: amsf_theme_assets }}">
@@ -30,7 +30,7 @@
 <link rel="canonical" href="{{ amsf_page_url }}">
 
 <!-- DNS prefetching for static files -->
-{% if page.permalink == '/' %}<link rel="dns-prefetch" href="{{ site.file }}">{% endif %}
+{% if page.permalink == "/" %}<link rel="dns-prefetch" href="{{ site.file }}">{% endif %}
 
 <!-- browser-sync, don't remove this -->
 <!-- BS_INSERT -->