chaelcodes / jekyll-twitch

Embed Twitch clips, VODs, and broadcasts in your Jekyll sites.

Jekyll::Twitch

This gem allows you to embed twitch channels, clips, collections, and videos in your Jekyll websites. It adds and registers a new twitch liquid tag that accepts a twitch clip, channel, broadcast, or highlight url. It's based on the Twitch video embeds.

{% twitch https://www.twitch.tv/chaelcodes/clip/SpoopySlipperyGrasshopperPogChamp %}

See the DEMO site

Check out the demo site for install instructions and to review different embed examples.

Installation

Add this line to your application's Gemfile:

gem 'jekyll-twitch'

And then execute:

$ bundle install

Or install it yourself as:

$ gem install jekyll-twitch

Then add Jekyll-Twitch to your _config.yml like so:

plugins:
  - jekyll-twitch

Usage

This is a Jekyll liquid tag, so just put {% twitch https://www.twitch.tv/chaelcodes/clip/SpoopySlipperyGrasshopperPogChamp %} to embed your clip, channel, or broadcast.

When building your site, Jekyll no longer substitutes site.url for localhost, which means Twitch embeds will not render. You need to supply host and localhost to view clips in development. jekyll serve --host localhost --port 4000

All of the below examples are on the demo site with actual embeds. I strongly recommend using that.

Channel

This channel embed will show the broadcast while the streamer is live, and the channel offline art when they are not.

<div style="width:720px;height:480px">
  {% twitch https://twitch.tv/ChaelCodes %}
</div>

Collection

This embed is used to add a collection of videos to your page or post.

<div style="width:720px;height:480px">
  {% twitch https://www.twitch.tv/collections/x5bG2TGTeBYIRg %}
</div>

Clips

This embed is used to add one Twitch clip to your page or post.

<div style="width:720px;height:480px">
  {% twitch https://www.twitch.tv/chaelcodes/clip/DeterminedSweetRedpandaDoritosChip-pQiRlDz6rQ9uvuuq %}
</div>

Videos

Whether you call them videos, vods, or higlights, this will embed them in your page or psot.

<div style="width:720px;height:480px">
  {% twitch https://www.twitch.tv/videos/716698136 %}
</div>

Contributing

Bug reports and pull requests are welcome on GitHub at https://github.com/ChaelCodes/jekyll-twitch. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the code of conduct.

For more details on setting up the local environment, demo site, and releasing a new version, see our CONTRIBUTING.md.

License

The gem is available as open source under the terms of the MIT License.

Code of Conduct

Everyone interacting in the Jekyll::Twitch project's codebases, issue trackers, chat rooms and mailing lists is expected to follow the code of conduct.

jekyll-twitch's Issues

Update Footer of Demo Site

There are two links in the footer of the demo site that link to GitHub and Twitter. The GitHub one should link to this repo, and the twitter one can link to twitter.com/ChaelCodes

Support Twitch Broadcasts and Vods

Right now, this only supports clips, let's expand it to include broadcasts and vods.

Create Documentation for Jekyll::TwitchTag

Why

We need a good environment for testing our gem and documenting its usage. With the right Jekyll site, we can do both. We can have a hosted Jekyll site that shows off the gem, and acts as a great testing ground in development.

How

Create a demo Jekyll site hosted on GitHub Pages with a page that shows off each example and how to use it.
Use the default Jekyll theme for simplicity.
We should utilize a gem convention that imports from github in order to make testing easier. Perhaps a commented ruby gems version, and an uncommented GitHub solution? Or the reverse?

Resources

• Deploy site to GitHub Pages

Update README

• Extract CONTRIBUTING section from README.
• link to the demo site from README
• Add Installation and Troubleshooting guide to demo site
• reverse usage and troubleshooting
• usage should cover what different clips/broadcasts/etc are supported
• explain how Jekyll-Twitch works

Cut a new release for 1.0.1

Description

Jekyll-Twitch is releasing a new version!

• Create a post in docs site with the expected changes
• Update the docs site with the newest version
• Test the changes in the docs site
• Run bundle exec rake release

Remove Jekyll-Cache

Description

The .gitignore was configured for a ruby gem, which means it's missing common Jekyll ignore directories, like .jekyll-cache/Jekyll/Cache .

Tech Plan

1. Remove the offending files/folder
2. Add .jekyll-cache to the .gitignore

References

See GitHub's Jekyll gitignore example

GitHub Issue Template for Releases

Create two GitHub issue templates. A default one, and one for creating new releases. The one for releases should include all the steps associated with releasing a new gem version from CONTRIBUTING.md. The default one just needs a description header and a closes # placeholder for the issue it closes.

Fix date on Version 1.0.1 release

Version 1.0.1 was released October 17th, 2022, but the date on the post is April 23rd, 2021. This was the date version 1 was released. We should fix that. This should update the url as well.

clips.twitch.tv refused to connect.

Description

The parent url is always 127.0.0.1, and Twitch doesn't recognize that as the location the iframe is embedded in production.

Suggested fix

jekyll-twitch/lib/jekyll-twitch/twitch_tag.rb

Lines 30 to 32 in 2a41773

	def self.site_host(context)
	context.registers[:site].config['host']
	end

should utilize site url instead of host.