From 4c77300eebfb2e5521954edb37ec79afd62fd92f Mon Sep 17 00:00:00 2001
From: zzossig <zzossig@gmail.com>
Date: Thu, 2 Apr 2020 09:48:57 +0900
Subject: [PATCH] twitterTimeline shortcode added

#240
---
 layouts/partials/head/scripts.html      | 14 ++++--
 layouts/shortcodes/twitterTimeline.html | 66 +++++++++++++++++++++++++
 2 files changed, 77 insertions(+), 3 deletions(-)
 create mode 100644 layouts/shortcodes/twitterTimeline.html

diff --git a/layouts/partials/head/scripts.html b/layouts/partials/head/scripts.html
index 76b05f3..e60a679 100644
--- a/layouts/partials/head/scripts.html
+++ b/layouts/partials/head/scripts.html
@@ -529,16 +529,24 @@
           }
         }
 
-        var utterances = document.querySelector('iframe');
+        var utterances = document.getElementById('utterances');
         if (utterances) {
-          utterances.contentWindow.postMessage({
+          utterances.querySelector('iframe').contentWindow.postMessage({
             type: 'set-theme',
             theme: selectedThemeVariant === "dark" || selectedThemeVariant === "hacker" ? 'photon-dark' : selectedThemeVariant === 'kimbie' ? 'github-dark-orange' : 'github-light',
           }, 'https://utteranc.es');
         }
+
+        var twitterCards = document.querySelectorAll('.twitter-timeline');
+        if (twitterCards) {
+          window.postMessage({
+            type: 'set-twitter-theme',
+            theme: selectedThemeVariant === 'light' || selectedThemeVariant === 'solarized' ? 'light' : 'dark',
+          });
+        }
       });
     }) : null;
-  // ============================================================  
+  // ============================================================
 
 
   // ========================== search ==========================
diff --git a/layouts/shortcodes/twitterTimeline.html b/layouts/shortcodes/twitterTimeline.html
new file mode 100644
index 0000000..a4ae837
--- /dev/null
+++ b/layouts/shortcodes/twitterTimeline.html
@@ -0,0 +1,66 @@
+{{ $id := substr (md5 .Inner) 0 16 }}
+<div id="{{ $id }}">
+  
+</div>
+
+<script>
+  'use strict';
+
+  var id = JSON.parse({{ $id | jsonify }});
+  var root = document.getElementById('root');
+  
+  {{ $href := (.Get "href") }}
+  var href = JSON.parse({{ $href | jsonify }});
+  {{ $height := (.Get "height") }}
+  var height = JSON.parse({{ $height | jsonify }});
+  {{ $width := (.Get "width") }}
+  var width = JSON.parse({{ $width | jsonify }});
+  {{ $inner := .Inner }}
+  var inner = JSON.parse({{ $inner | jsonify }});
+
+  function makeCard() {
+    var card = document.createElement('a');
+    card.setAttribute('class', 'twitter-timeline');
+    card.setAttribute('href', href);
+    card.setAttribute('data-chrome', 'nofooter');
+
+    var script = document.createElement('script');
+    script.setAttribute('src', 'https://platform.twitter.com/widgets.js');
+    script.setAttribute('charset', 'utf-8');
+
+    if (height) {
+      card.setAttribute('data-height', height);
+    }
+    if (width) {
+      card.setAttribute('data-width', width);
+    }
+    if (inner) {
+      card.textContent = inner;
+    }
+
+    var themeOption = root.getAttribute('class');
+    
+    if (themeOption.includes('light') || themeOption.includes('solarized')) {
+      card.setAttribute('data-theme', 'light');
+    } else {
+      card.setAttribute('data-theme', 'dark');
+    }
+
+    var timeline = document.getElementById(id);
+
+    timeline.innerHTML = '';
+    timeline.appendChild(script);
+    timeline.appendChild(card);
+  }
+
+  var twitterCards = document.querySelectorAll('.twitter-timeline');
+  if (twitterCards) {
+    window.addEventListener('message', function (e) {
+      if (e.data.type === 'set-twitter-theme') {
+        makeCard();
+      }
+    });
+  }
+
+  makeCard();
+</script>
\ No newline at end of file