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.
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.
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)
|
comments
Characters: 0/1000
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.