Merge pull request #56 from heitorPB/opengraph

Opengraph

README.md

@@ -101,6 +101,24 @@ Example:
           caption_style="font-weight: bold; font-style: italic;") }}
 ```
 
+## OpenGraph
+
+To add an image to a post, set the `og_image` extra option to the desired image
+in the same directory of the markdown file:
+
+```toml
+[extra]
+og_image = "colocated_image.png"
+```
+
+Additionally, for the section pages and for posts to have a fallback image, add
+`default_og_image` to the `[extra]` section:
+
+```toml
+[extra]
+default_og_image = "static/ocean.jpg"
+```
+
 ## Configuration
 
 ### Colors
@@ -358,7 +376,7 @@ This theme has been forked from https://github.com/panr/hugo-theme-terminal
   - Prism.js syntax highlighting is not supported (you can use
     [Zola's](https://www.getzola.org/documentation/content/syntax-highlighting/)).
 
-- All references to social media (e.g. Twitter, OpenGraph) have been removed.
+- All references to social media (e.g. Twitter) have been removed.
 
 - All references to external URLs (e.g. Google CDN) have been removed.
   This theme's static assets are meant to be served from where it's hosted.

config.toml

@@ -96,3 +96,8 @@ use_full_hack_font = false
 #
 # Note that the main (index) page only has the main title.
 page_titles = "main_only"
+
+# Optional: default image to use for OpenGraph.
+#           If the page doesnt set og_image, use this one as fallback. Usefull
+#           for indexes and taxonomies' pages.
+#default_og_image = "static/ocean.jpg"

templates/404.html

@@ -1,7 +1,7 @@
 {% extends "index.html" %}
 
 {% block title %}
-404
+404 | {{ config.title }}
 {% endblock title %}
 
 {% block header_menu %}

templates/index.html

@@ -11,6 +11,8 @@
     <title>{%- block title %}{{ config.title }}{% endblock title -%}</title>
     {{ head_macros::head(config=config) }}
 
+    {%- block open_graph %}{{ head_macros::open_graph(config=config) }}{% endblock open_graph -%}
+
     {%- if config.generate_feed %}
         {%- if "rss" in config.feed_filename %}
             {% set feed_type = 'rss+xml' %}

templates/macros/head.html

@@ -1,3 +1,5 @@
+{% import "macros/title.html" as title_macros -%}
+
 {% macro head(config) %}
     <meta http-equiv="content-type" content="text/html; charset=utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
@@ -24,3 +26,69 @@
 {% endif -%}
 
 {% endmacro head %}
+
+
+{# Extra Meta tags for OpenGraph and Twitter cards #}
+{% macro open_graph(config) %}
+{%- if page %}
+    {%- set permalink = page.permalink %}
+    {%- set title = title_macros::title(page_title=page.title, main_title=config.title) %}
+    {%- set description = page.description %}
+    {%- set type = "article" %}
+    {%- if page.extra and page.extra.og_image %}
+        {%- if page.colocated_path %}
+            {%- set og_image = page.path ~ page.extra.og_image %}
+        {%- else %}
+            {%- set og_image = page.extra.og_image %}
+        {% endif %}
+    {%- elif config.extra.default_og_image %}
+        {%- set og_image = config.extra.default_og_image %}
+    {%- endif %}
+{%- elif section %}
+    {%- set permalink = section.permalink %}
+    {%- set title = title_macros::title(page_title=section.title, main_title=config.title) %}
+    {%- set description = section.description | default(value=config.description) %}
+    {%- set type = "website" %}
+    {%- if section.extra and section.extra.og_image %}
+        {%- set og_image = section.extra.og_image %}
+    {%- elif config.extra.default_og_image %}
+        {%- set og_image = config.extra.default_og_image %}
+    {%- endif %}
+{%- else %}
+    {# For 404 and taxonomy pages #}
+    {%- if taxonomy %}
+        {% if term %}
+            {%- set permalink = term.permalink %}
+            {%- set title = title_macros::title(page_title=term.name, main_title=config.title) %}
+            {%- set description = "All posts tagged " ~ term.name %}
+        {% else %}
+            {%- set permalink = config.base_url ~ "/" ~ taxonomy.slug %}
+            {%- set title = title_macros::title(page_title=taxonomy.name, main_title=config.title) %}
+            {%- set description = "All " ~ taxonomy.name %}
+        {% endif %}
+    {%- else %}
+        {%- set permalink = config.base_url %}
+        {%- set title = title_macros::title(page_title="404", main_title=config.title) %}
+        {%- set description = "Page not found" %}
+    {%- endif %}
+    {%- set type = "website" %}
+    {%- if config.extra.default_og_image %}
+        {%- set og_image = config.extra.default_og_image %}
+    {%- endif %}
+{%- endif -%}{# #}
+    <meta name="description" content="{{ description | safe }}">
+
+    <meta property="og:description" content="{{ description | safe }}">
+    <meta property="og:title" content="{{ title | safe }}">
+    <meta property="og:type" content="{{ type }}">
+    <meta property="og:url" content="{{ permalink | safe }}">
+{% if og_image %}
+    <meta property="og:image" content="{{ get_url(path=og_image) }}">
+    <meta name="twitter:image" content="{{ get_url(path=og_image) }}">
+{% endif %}
+    <meta name="twitter:card" content="summary_large_image">
+    <meta name="twitter:description" content="{{ description | safe }}">
+    <meta name="twitter:title" content="{{ title | safe }}">
+    <meta property="twitter:domain" content="{{ config.base_url | replace(from="https://", to="") }}">
+    <meta property="twitter:url" content="{{ permalink | safe }}">
+{% endmacro open_graph %}

templates/shortcodes/figure.html

@@ -2,7 +2,7 @@
   <figure class="{% if position %}{{ position }}{% else -%} center {%- endif %}" >
     <img src="{{ src | safe }}"{% if alt %} alt="{{ alt }}"{% endif %}{% if style %} style="{{ style }}"{% endif %} />
     {% if caption %}
-      <figcaption class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"{% if caption_style %} style="{{ caption_style | safe }}"{% endif %}>{{ caption }}</figcaption>
+      <figcaption class="{% if caption_position %}{{ caption_position }}{% else -%} center {%- endif %}"{% if caption_style %} style="{{ caption_style | safe }}"{% endif %}>{{ caption | markdown() | safe }}</figcaption>
     {% endif %}
   </figure>
 {% endif %}