wolf-chews-tweets v1.0.2

Wolf-Chews-Tweets

What is this?

Show a random tweet with the data generated by wolf-bites-tweets. Support two methods: using embeded tweet or displaying pictures directly on the website.

Notice: Current version of wolf-chews-tweets accepts json data from wolf-bites-tweets v2 or v1.0.7(Not recommend).
It's recommended to use the latest version of wolf-bites-tweets with the latest version of wolf-chews-tweets to have better result and avoid unexpected error.

Requirement

• Twitter widgets.js
  It's optional if you want to display a tweet with the method widgets-light or widgets-dark.

• nolimits4web/swiper v7
  It's optional if you want to display a tweet with the method gallery.

Usage

With Unpkg CDN:

<!-- Need of twitter Widgets -->
<script type="application/javascript" src="https://platform.twitter.com/widgets.js"></script>
<!-- Need of Swiper -->
<link rel="stylesheet" href="https://unpkg.com/swiper@7/swiper-bundle.min.css"/>
<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>
<!-- wolf-chews-tweets -->
<link rel="stylesheet" href="https://unpkg.com/wolf-chews-tweets@1/wolf-chews.min.css">
<script src="https://unpkg.com/wolf-chews-tweets@1/wolf-chews.min.js"></script>

With jsDelivr CDN (国内访问速度更快):

<!-- Need of twitter Widgets -->
<script type="application/javascript" src="https://platform.twitter.com/widgets.js"></script>
<!-- Need of Swiper -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@7/swiper-bundle.min.css"/>
<script src="https://cdn.jsdelivr.net/npm/swiper@7/swiper-bundle.min.js"></script>
<!-- wolf-chews-tweets -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/wolf-chews-tweets@1/wolf-chews.min.css">
<script src="https://cdn.jsdelivr.net/npm/wolf-chews-tweets@1/wolf-chews.min.js"></script>

( Tips: In some conditions, loading widgets.js may be very slow and cause wolf-chews-tweets's loading state not showing properly. You can choose to add attribute "async": <script type="application/javascript" src="https://platform.twitter.com/widgets.js" async></script> or host widgets.js on your own website. )

Place this custom element to where you want to:

<wolf-chews 
    url="http://example.org/"
    method="widgets-light">
</wolf-chews>

• url
  The url to json data generated by wolf-bites-tweets.

• method
  Support widgets-light, widgets-dark and gallery.

• container_id (optional)
  If you want to change the id of the div acts as a container inside the custom element. The default id is wct_container.

• index (optional)
  For debug purpose. Force assign the tweet to display, skipping the random process. Please notice that the number will not be checked if it is out of range.

Other

• Wolf-Bites-Tweets: https://github.com/ohmykreee/wolf-bites-tweets

• 项目背后的故事：https://blog.ohmykreee.top/article/notes-of-developing-wbt-and-wct/