bulma/docs/_includes/tw.html

{% assign twUrl = "https://twitter.com/" | append: include.username | append: "/status/" | append: include.id %}

<article class="bd-tw">
  <header class="bd-tw-header">
    <a class="bd-tw-author" href="{{ twUrl }}" target="_blank">
      <figure class="bd-tw-avatar">
        <img src="{{ include.avatar }}">
      </figure>
      <div class="bd-tw-name">
        <strong class="bd-tw-fullname">
          {{ include.fullname }}
        </strong>
        <span class="bd-tw-username">
          @{{ include.username }}
        </span>
      </div>
    </a>
  </header>

  <div class="bd-tw-content">
    {{ include.content }}
  </div>

  <p class="bd-tw-date">
    <a href="{{ twUrl }}" target="_blank">
      {{ include.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.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.id }}">
        <div class="Icon Icon--retweet TweetAction-icon Icon--retweetEdge"></div>
        {% if include.retweets %}
          <span class="TweetAction-stat">
            {{ include.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.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.id }}&amp;tw_p=tweetembed" target="_blank">
        <div class="Icon Icon--heartEdge TweetAction-icon Icon--heartEdge"></div>
        {% if include.hearts %}
          <span class="TweetAction-stat">
            {{ include.hearts }}
          </span>
        {% endif %}
      </a>
    </li>
  </ul>
</article>