Fix for #620

.yaspeller.json

@@ -58,6 +58,8 @@
     "gulpjs",
     "Gómez",
     "https",
+    "instagram",
+    "Instagram",
     "iOS",
     "iranzo",
     "Jinja",

documentation/content/Components/line-numbers-code-snippet.md

@@ -36,7 +36,7 @@ markup. Use `linenos` flag to switch on line numbers for the snippet.
 [CodeHilite](https://python-markdown.github.io/extensions/code_hilite/) <!-- yaspeller ignore -->
 extension for syntax highlighting. Setup
 CodeHilite <!-- yaspeller ignore -->
-, then use Shebang `!#` to
+, then use Shebang `#!` to
 generate line numbers.
 
     :::markdown

documentation/content/Components/photoswipe-instagram-gallery.md

@@ -0,0 +1,48 @@
+---
+Title: Gallery -- Embed Instagram Post
+authors: Talha Mansoor, Pablo Iranzo Gómez
+Tags: nuances, images, gallery, instagram
+Date: 2020-02-07 13:17
+Slug: gallery-embed-instagram-post
+Category: Components
+---
+
+Pelican-Elegant has built in support for Instagram post.
+
+## Article contents
+
+To embed Instagram post, just define a div in this manner,
+
+```html
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+```
+
+`<div>` class should be `elegant-instagram`.
+
+Value of `data-instagram-id` attribute is taken from Instagram post URL, for example:
+
+If URL is <https://www.instagram.com/p/OzF8OwS43q/> then set `data-instagram-id` to `OzF8OwS43q`.
+
+Instagram URL can be a single or multiple pictures post.
+
+Here is how Elegant will render your Instagram posts.
+
+## A Post With Multiple Images
+
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+
+It's code is
+
+```html
+<div class="elegant-instagram" data-instagram-id="BwWo35fAcR3"></div>
+```
+
+## Single Image Post
+
+<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>
+
+It's code is
+
+```html
+<div class="elegant-instagram" data-instagram-id="B7yh4IdItNd"></div>
+```

gulpfile.babel.js

@@ -94,6 +94,7 @@ const minifyJS = () => {
     "static/photoswipe/photoswipe-array-from-dom.js",
     "static/lunr/lunr.js",
     "static/clipboard/clipboard.js",
+    "static/js/create-instagram-gallery.js",
     "static/js/copy-to-clipboard.js",
     "static/js/lunr-search-result.js",
     "!static/js/elegant.prod.9e9d5ce754.js"

static/css/links.css

@@ -1,6 +1,3 @@
-article p:not(#list-of-translations):not(#post-share-links) a:not(.ampl),
-article ol a:not(.ampl),
-blockquote a:not(.ampl),
 article
   div.article-content
   ul:not(.articles-timeline):not(.related-posts-list)
@@ -44,8 +41,7 @@ div.recent-posts-posted a {
     text-decoration: none;
   }
 }
-#lunr-search-result > div.lunr-search-result-item > h4 > a,
-a.ampl {
+#lunr-search-result > div.lunr-search-result-item > h4 > a {
   color: royalblue;
   display: inline-block;
   position: relative;

static/js/create-instagram-gallery.js

@@ -0,0 +1,116 @@
+const convertInstagramToPhotoSwipe = () => {
+  // inner function to return figure html
+  const getFigureHTML = (
+    image,
+    height,
+    width,
+    thumbnail,
+    username,
+    name,
+    instagramId
+  ) => `
+     <figure
+        itemprop="associatedMedia"
+        itemscope
+        itemtype="http://schema.org/ImageObject"
+     >
+        <a
+            href="${image}"
+            itemprop="contentUrl"
+            data-size="${width}x${height}"
+        >
+        <img
+            src="${thumbnail}"
+            itemprop="thumbnail"
+            alt="Image description"
+        />
+        </a>
+        <figcaption itemprop="caption description">
+          <a href="https://www.instagram.com/p/${instagramId}/"
+              target="_blank" rel="nofollow noopener noreferrer"
+          >
+              Photo
+          </a> by
+          <a href="https://www.instagram.com/${username}/"
+              target="_blank" rel="nofollow noopener noreferrer"
+          >
+              ${name}
+          </a>
+        </figcaption>
+     </figure>
+    `;
+
+  // Get div.elegant-instagram
+  document.querySelectorAll(".elegant-instagram").forEach(ele => {
+    // Get instagram-id
+    const instagramId = ele.dataset.instagramId;
+
+    fetch(`https://www.instagram.com/p/${instagramId}/?__a=1`)
+      .then(response => {
+        response.json().then(json => {
+          // Get Original image from the json
+          const level1 = json.graphql.shortcode_media;
+
+          let divHTML = `<div
+                          class="elegant-gallery"
+                          itemscope
+                          itemtype="http://schema.org/ImageGallery"
+                        >`;
+
+          const username = level1.owner.username;
+          const name = level1.owner.full_name;
+
+          if (
+            level1.edge_sidecar_to_children &&
+            level1.edge_sidecar_to_children.edges.length > 0
+          ) {
+            // It is more than one image
+            level1.edge_sidecar_to_children.edges.forEach(edge => {
+              const origImage = edge.node.display_url;
+              const height = edge.node.dimensions.height;
+              const width = edge.node.dimensions.width;
+              const thumbnail = edge.node.display_resources[0].src;
+
+              divHTML += getFigureHTML(
+                origImage,
+                height,
+                width,
+                thumbnail,
+                username,
+                name,
+                instagramId
+              );
+            });
+          } else {
+            const origImage = level1.display_url;
+            const height = level1.dimensions.height;
+            const width = level1.dimensions.width;
+            const thumbnail = level1.display_resources[0].src;
+
+            divHTML += getFigureHTML(
+              origImage,
+              height,
+              width,
+              thumbnail,
+              username,
+              name,
+              instagramId
+            );
+          }
+
+          // Close div
+          divHTML += `</div>`;
+
+          // Replace ele with the div
+          ele.innerHTML = divHTML;
+          ele.replaceWith(ele.children[0]);
+
+          // Trigger PhotoSwipe
+          initPhotoSwipeFromDOM(".elegant-gallery");
+        });
+      })
+      .catch(err => console.error("Failed", err));
+  });
+};
+
+convertInstagramToPhotoSwipe();

templates/_includes/last_updated.html

@@ -6,8 +6,7 @@
 {% set delta = (article.modified - article.date).days %}
 {% if delta > 0 %}
 <h4>Last Updated</h4>
-{% set day = article.modified.strftime('%d')|int %}
-<time datetime="{{ article.modified.isoformat() }}">{{ article.modified.strftime('%b') }} {{ day }} {{- article.modified.strftime(', %Y') }}</time>
+<time datetime="{{ article.modified.isoformat() }}">{{ article.locale_modified }}</time>
 {% endif %}
 
 {% elif article.modified %}