Refactor Twitter cards support

Remove the TWITTER_HANDLE variable and use the 'twitter' value
from SOCIAL. This eliminates duplicate settings!

Remove closing slash for meta tags, not required by HTML5, see
http://stackoverflow.com/a/21898502

In article.html Twitter images were specified twice - once as
relative URL and once as full site URL. Now only a single full
URL is used instead. Also stripped HTML tags from description.

The default card type is summary_large_image which better displays
with high-res images and the default header images.

``twitter_image`` article metadata is now supported, similar to
``og_image``.

Documentation is updated.

README.md

@@ -103,13 +103,6 @@ Accept many analytics:
  - Gauges: ``GAUGES``
  - Piwik: ``PIWIK_URL`` and ``PIWIK_SITE_ID``.
 
-### Twitter cards
-
-Twitter cards are automatically generated if TWITTER_HANDLE is set:
-```python
-TWITTER_HANDLE = "myprofile"
-```
-
 ### Other configuration
 
  - If ``ADDTHIS_PUBID`` is defined sharing buttons from AddThis will appear
@@ -122,10 +115,18 @@ TWITTER_HANDLE = "myprofile"
 
 ### Articles
 
-To customize header cover to articles, insert the metadata ``header_cover``.
-To customize OpenGraph images, insert the metadata ``og_image``, otherwise
-``header_cover``, ``HEADER_COVER`` or a default image is used. You can also
-use absolute URLs for ``og_image``. Example:
+ - To customize header cover to articles, insert the metadata ``header_cover``.
+ - To customize OpenGraph images, insert the metadata ``og_image``, otherwise
+ ``header_cover``, ``HEADER_COVER`` or a default image is used.
+ - To customize Twitter card images, insert the metadata ``twitter_image``,
+ otherwise ``header_cover``, ``HEADER_COVER`` or a default image is used.
+ Twitter cards are automatically generated if the ``twitter`` icon is configured
+ in ``SOCIAL``!
+
+All image paths are relative from the site root directory. You can also use
+absolute URLs for ``og_image`` and ``twitter_image``.
+
+Example:
 
 
  - To RST
@@ -142,6 +143,7 @@ My super title
 :summary: Short version for index and feeds
 :header_cover: /images/posts/super-title/cover.png
 :og_image: /images/posts/super-title/facebook_cover.png
+:twitter_image: /images/posts/super-title/twitter_cover.png
 ```
 
  - To Markdown
@@ -156,6 +158,7 @@ Authors: Alexis Metaireau, Conan Doyle
 Summary: Short version for index and feeds
 Header_Cover: /images/posts/super-title/cover.png
 Og_Image: http://example.com/facebook_cover.png
+Twitter_Image: http://example.com/twitter_cover.png
 
 This is the content of my super blog post.
 ```

templates/article.html

@@ -26,34 +26,33 @@
 {% endblock %}
 
 {% block twitter_card %}
-    {% if TWITTER_HANDLE %}
-        {% if article.header_cover %}
-            <meta name="twitter:card" content="summary_large_image" />
-            <meta name="twitter:image" content="{{ article.header_cover }}">
-        {% elif HEADER_COVER %}
-            <meta name="twitter:card" content="summary" />
-            <meta name="twitter:image" content="{{ HEADER_COVER }}">
-        {% else %}
-            <meta name="twitter:card" content="summary" />
-            <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
-        {% endif %}
-        <meta name="twitter:site" content="@{{ TWITTER_HANDLE }}" />
-        <meta name="twitter:title" content="{{ article.title }}" />
-        {% if description %}
-            <meta name="twitter:description" content="{{ description }}" />
-        {% elif article.headline %}
-            <meta name="twitter:description" content="{{ article.headline }}" />
-        {% else %}
-            <meta name="twitter:description" content="{{ article.summary }}" />
-        {% endif %}
-        {% if article.header_cover %}
+    {% for name,link in SOCIAL if name in ['twitter'] %}
+        <meta name="twitter:card" content="summary_large_image">
+        <meta name="twitter:site" content="@{{ link|replace('http://', 'https://')|replace('https://twitter.com/', '') }}">
+        <meta name="twitter:title" content="{{ article.title }}">
+
+        {% if article.twitter_image %}
+            {% if article.twitter_image|lower|truncate(4, True, '') == "http" %}
+                <meta property="twitter:image" content="{{ article.twitter_image }}">
+            {% else %}
+                <meta property="twitter:image" content="{{ SITEURL }}/{{ article.twitter_image }}">
+            {% endif %}
+        {% elif article.header_cover %}
             <meta name="twitter:image" content="{{ SITEURL }}/{{ article.header_cover }}">
         {% elif HEADER_COVER %}
             <meta name="twitter:image" content="{{ SITEURL }}/{{ HEADER_COVER }}">
         {% else %}
             <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
         {% endif %}
-    {% endif %}
+
+        {% if description %}
+            <meta name="twitter:description" content="{{ description }}">
+        {% elif article.headline %}
+            <meta name="twitter:description" content="{{ article.headline }}">
+        {% else %}
+            <meta name="twitter:description" content="{{ article.summary|striptags|truncate(140) }}">
+        {% endif %}
+    {% endfor %}
 {% endblock %}
 {% block opengraph %}
 	{{ super() }}

templates/base.html

@@ -81,21 +81,17 @@
 		<meta property="og:site_name" content="{{ SITENAME }}">
 	{% endblock opengraph %}
     {% block twitter_card %}
-        {% if TWITTER_HANDLE %}
-            <meta name="twitter:card" content="summary" />
-            <meta name="twitter:site" content="@{{ TWITTER_HANDLE }}" />
-            <meta name="twitter:title" content="{{ SITENAME }}" />
-            {% if SITESUBTITLE %}
-                <meta name="twitter:description" content="{{ SITESUBTITLE }}" />
-            {% else %}
-                <meta name="twitter:description" content="View the blog." />
-            {% endif %}
+        {% for name,link in SOCIAL if name in ['twitter'] %}
+            <meta name="twitter:card" content="summary_large_image">
+            <meta name="twitter:site" content="@{{ link|replace('http://', 'https://')|replace('https://twitter.com/', '') }}">
+            <meta name="twitter:title" content="{{ SITENAME }}">
+            <meta name="twitter:description" content="{{ SITESUBTITLE|default('View the blog.') }}">
             {% if HEADER_COVER %}
                 <meta name="twitter:image" content="{{ SITEURL }}/{{ HEADER_COVER }}">
             {% else %}
                 <meta name="twitter:image" content="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/images/post-bg.jpg">
             {% endif %}
-        {% endif %}
+        {% endfor %}
     {% endblock twitter_card %}
 </head>