Fix tw element

docs/_includes/content/pro.html

@@ -12,8 +12,7 @@
       {{ include.content | markdownify }}
 
       {% if include.title == 'No JavaScript' %}
-        {% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
+        {% include elements/tw.html tweet_id="860885116909998080" modifier='bd-is-grey' %}
-        {% include elements/tw.html tweet=tweet modifier='bd-is-grey' %}
       {% endif %}
     </div>
   </div>

docs/_includes/elements/tw.html

@@ -1,54 +1,55 @@
-{% assign twUrl = "https://twitter.com/" | append: include.tweet.username | append: "/status/" | append: include.tweet.id %}
+{% assign tweet = site.data.love.tweets_by_id[include.tweet_id] %}
+{% assign twUrl = "https://twitter.com/" | append: tweet.username | append: "/status/" | append: tweet.id %}
 
 <article class="bd-tw {{ include.modifier }} {% if include.drawing_id %}bd-has-drawing{% endif %}">
   <header class="bd-tw-header">
     <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
       <figure class="bd-tw-avatar">
-        <img class="lazyload" src="{{ include.tweet.avatar }}">
+        <img class="lazyload" src="{{ tweet.avatar }}">
       </figure>
       <div class="bd-tw-name">
         <strong class="bd-tw-fullname">
-          {{ include.tweet.fullname }}
+          {{ tweet.fullname }}
         </strong>
         <span class="bd-tw-username">
-          @{{ include.tweet.username }}
+          @{{ tweet.username }}
         </span>
       </div>
     </a>
   </header>
 
   <div class="bd-tw-content">
-    {{ include.tweet.content }}
+    {{ tweet.content }}
   </div>
 
   <p class="bd-tw-date">
     <a href="{{ twUrl }}" target="_blank">
-      {{ include.tweet.date }}
+      {{ tweet.date }}
     </a>
   </p>
 
   <ul class="Tweet-actions">
     <li class="Tweet-action">
-      <a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ include.tweet.id }}">
+      <a class="TweetAction TweetAction--replyEdge web-intent" href="https://twitter.com/intent/tweet?in_reply_to={{ tweet.id }}">
         <div class="Icon Icon--reply TweetAction-icon Icon--replyEdge"></div>
       </a>
     </li>
     <li class="Tweet-action Tweet-action--retweet">
-      <a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ include.tweet.id }}">
+      <a class="TweetAction TweetAction--retweetEdge web-intent" href="https://twitter.com/intent/retweet?tweet_id={{ tweet.id }}">
         <div class="Icon Icon--retweet TweetAction-icon Icon--retweetEdge"></div>
-        {% if include.tweet.retweets != 0 %}
+        {% if tweet.retweets != 0 %}
           <span class="TweetAction-stat">
-            {{ include.tweet.retweets }}
+            {{ tweet.retweets }}
           </span>
         {% endif %}
       </a>
     </li>
     <li class="Tweet-action Tweet-action--heart">
-      <a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ include.tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ include.tweet.id }}&amp;tw_p=tweetembed" target="_blank">
+      <a class="TweetAction TweetAction--heartEdge web-intent" href="https://twitter.com/intent/like?tweet_id={{ tweet.id }}&amp;ref_src=twsrc%5Etfw&amp;ref_url=http%3A%2F%2Fbulma.io%2F&amp;original_referer=http%3A%2F%2Fbulma.io%2F&amp;tw_i={{ tweet.id }}&amp;tw_p=tweetembed" target="_blank">
         <div class="Icon Icon--heartEdge TweetAction-icon Icon--heartEdge"></div>
-        {% if include.tweet.hearts != 0 %}
+        {% if tweet.hearts != 0 %}
           <span class="TweetAction-stat">
-            {{ include.tweet.hearts }}
+            {{ tweet.hearts }}
           </span>
         {% endif %}
       </a>

docs/_includes/elements/tws.html

@@ -1,43 +1,29 @@
 <div class="container">
   <div class="columns">
     <div class="column is-4">
-      {% assign tweet = site.data.love.tweets_by_id.869284735440363520 %}
+      {% include elements/tw.html tweet_id="869284735440363520" modifier='bd-is-white' %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% include elements/tw.html tweet_id="966731525709619200" modifier='bd-is-white' %}
-
+      {% include elements/tw.html tweet_id="959005382273355776" modifier='bd-is-white' %}
-      {% assign tweet = site.data.love.tweets_by_id.966731525709619200 %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
-
-      {% assign tweet = site.data.love.tweets_by_id.959005382273355776 %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
     </div>
 
     <div class="column is-4">
-      {% assign tweet = site.data.love.tweets_by_id.915580081938018304 %}
+      {% include elements/tw.html tweet_id="915580081938018304" modifier='bd-is-white' %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% include elements/tw.html tweet_id="835834634655174658" modifier='bd-is-white' %}
-
+      {% include elements/tw.html tweet_id="910956939886043136" modifier='bd-is-white' %}
-      {% assign tweet = site.data.love.tweets_by_id.835834634655174658 %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
-
-      {% assign tweet = site.data.love.tweets_by_id.910956939886043136 %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
     </div>
 
     <div class="column is-4">
-      {% assign tweet = site.data.love.tweets_by_id.903629781744439297 %}
       {% include
         elements/tw.html
         modifier='bd-is-white'
-        tweet=tweet
+        tweet_id="903629781744439297"
         drawing_id='love-letters'
         drawing_width=240
         drawing_height=120
       %}
 
-      {% assign tweet = site.data.love.tweets_by_id.949986519250624513 %}
+      {% include elements/tw.html tweet_id="949986519250624513" modifier='bd-is-white' %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
+      {% include elements/tw.html tweet_id="922849122008354817" modifier='bd-is-white' %}
-
-      {% assign tweet = site.data.love.tweets_by_id.922849122008354817 %}
-      {% include elements/tw.html tweet=tweet modifier='bd-is-white' %}
     </div>
   </div>
 

docs/_includes/index/customize.html

@@ -11,6 +11,13 @@
       <h4 class="subtitle is-4">
         Simply set your own Sass variables before importing Bulma
       </h4>
+      <div class="bd-index-custom-tweet">
+        {% include
+          elements/tw.html
+          tweet_id="1070320154452656128"
+          modifier='bd-is-grey'
+        %}
+      </div>
     </header>
 
     <div class="columns">

docs/_includes/index/js.html

@@ -19,10 +19,9 @@
 
       <div class="column">
         <div class="bd-index-js-tweet">
-          {% assign tweet = site.data.love.tweets_by_id.860885116909998080 %}
           {% include
             elements/tw.html
-            tweet=tweet
+            tweet_id="860885116909998080"
             modifier='bd-is-grey'
             drawing_id='opinion-free'
             drawing_width=152

docs/_includes/index/modifiers.html

@@ -15,10 +15,9 @@
           </h4>
         </header>
 
-        {% assign tweet = site.data.love.tweets_by_id.868829487072464897 %}
         {% include
           elements/tw.html
-          tweet=tweet
+          tweet_id="868829487072464897"
           modifier='bd-is-grey'
           drawing_id='crazy'
           drawing_width=108

docs/_sass/index.sass

@@ -35,6 +35,11 @@
 
 // Customize
 
+.bd-index-custom-tweet
+  .bd-tw
+    margin-left: auto
+    margin-right: auto
+
 .bd-index-custom-title
   color: $grey-light
 

docs/_sass/twitter.sass

@@ -15,6 +15,7 @@ $tw-border: #e1e8ed
   font-size: 16px
   max-width: 420px
   padding: 20px
+  text-align: left
   &.bd-is-white
     background-color: $white
 
@@ -43,7 +44,7 @@ $tw-border: #e1e8ed
     width: 36px
 
 .bd-tw-fullname
-  color: currentColor
+  color: $text-strong
   display: block
   font-size: 16px
   font-weight: 700

docs/love.html

@@ -52,8 +52,7 @@ tweets:
           <div class="bd-tws-love">
             {% for tweet_pair in site.data.love.tweets_by_id reversed %}
               {% assign tweet_id = tweet_pair[0] %}
-              {% assign tweet = site.data.love.tweets_by_id[tweet_id] %}
+              {% include elements/tw.html tweet_id=tweet_id %}
-              {% include elements/tw.html tweet=tweet %}
             {% endfor %}
           </div>
         </div>