Site banner image, showing the newly started bind9 server for the domain you are visiting.

 24.08.2019 ruby

Jekyll Plugin for html5 canvases

This is the code for a plugin in jekyll, with which you can embed a html5 canvas directly in Jekyll, using a simple liquid tag.

Usage in Jekyll

Save the code below and save it as html5game.rb in the folder _plugins in your Jekyll root directory. The tricky part is, that it expects a certain structure. I have coded it to look into the folder /games on my web root, then use the second parameter as folder and the last 2 parameters are the size of the canvas. Quick example:

{{ "{% htmlgame directory_under_games width height" }} %}

Quite simple, but effective. Enjoy.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
# Purpose:	Jekyll Plugin to display a html5 game/context via markdown
# Usage:	{% html5game foldername width height %}
# Note:		The script expects the context to live in your webroot in a folder called '/games'.
#			Replace this below if you have a different setup.
# Author:   Domeniko Gentner <contact@tuxstash.de>
module Jekyll
	module Tags
		class HTML5Game < Liquid::Tag
			def initialize(tag_name, markup, tokens)
				@arg = markup.gsub(/\s+/m, ' ').strip.split(" ")
				super
			end

			def render(context)
				#output = super(context)
				site_url = context.registers[:site].config['url']
				url = "#{site_url}/games/#{@arg[0]}/index.html"

				"<div class=\"htmlgame card-panel center white-text\"><iframe width=\"#{@arg[1]}\" height=\"#{@arg[2]}\" src=\"#{url}\"></iframe></div>"
			end
		end
	end
end

Liquid::Template.register_tag('html5game', Jekyll::Tags::HTML5Game)

Link to the author's twitter Link to the authors ko-fi page

comments

Characters: 0/1000

gravatar portrait

 Pinned by contact@tuxstash.de

Come join the discussion and write something nice. You will have to confirm your comment by mail, so make sure it is legit and not a throwaway. Only the name part of it will be displayed, so don't worry about spam. If it does not show up after confirming it, it may be considered spam, but I curate them manually, so don't worry. Please read the privacy statement for more.