How to setup a search feature in your Jekyll static site

I found Jekyll recently, and decided to give it a go. I already have my blog set up freely at wordpress but I’ve always looked for a way to manage the several notes and links and what nots in a way they are easily accessible.

Jekyll provides me with a simple and accessible way to do so, i can host them up at GitHub pages or just run them locally.

If you don’t know what Jekyll is go check out their website, but i’ll pull a simple description from the docs here:

It takes a template directory containing raw text files in various formats, runs it through Markdown (or Textile) and Liquid converters, and spits out a complete, ready-to-publish static website suitable for serving with your favorite web server. Jekyll also happens to be the engine behind GitHub Pages, which means you can use Jekyll to host your project’s page, blog, or website from GitHub’s servers for free.

Now for my use, i need to make sure i could search the site. But since Jekyll only serves static pages, there is no way to any server side magic.

Enter Tipue Search a jquery based search engine. This is pretty cool and it has a bunch of features.

In Jekyll we will be using Tipue Search in static mode, it basically reads a javascript file and displays the results based on the JSON object present.

I won’t get into how to set up Tipue Search, read their docs or the bazillion articles written on the web about it. It’s pretty straight forward.

After everything was setup there was the problem of feeding the tipue_content.js file (used by the engine to show the results page).

Jekyll is plugin friendly so we can create plugins to expand Jekyll to our own needs, basically when you build your site Jekyll automatically runs all plugins in the _plugins folder.

This happens before serving the static files. So we can create a plugin to generate our tipue_content.js file based on our _posts folder.

One type of plugins you can create are Generators, these allow us to generate content based on our site structure and information.

You can find my Tipue Search Generator here. To use it just put the file in your _plugins folder and rebuild your site. Notice that GitHub Pages are run in safe mode, so the plugins will not be executed. You need to build the site locally before committing the tipue_content.js file up to GitHub Pages.

To use this make sure to put the following tags in your post YAML:

* tags – space separated list of tags for a given post
* tipue_description – The searchable text for that post. Also shown on the search results page.

This generator does not use the post content itself, it uses the content for the YAML tag tipue_description. It is technically possible to use your entire post content as a searchable text, i decided against this since The post it self might be quite big or have a ton of stuff that shouldn’t be imported (images, links, etc) that i would need to cut out before generating the text.

I’d like to thank Dave Perrett since his Category Page Generator was really helpful in creating the tipue content generator.

Resource Links:

Categories: javascript, ruby Tags: , ,

A new Project is started

February 14, 2012 Leave a comment

I’ve always wanted to develop a game, though the lack of time, art skill and game ideas always stopped me. Recently i made up my mind and decided to get it started. I settled for making a small rpg dungeon crawler, though i have yet to define the fine detail specifics.

I started this project as a hobby, a way to have some fun doing something i like and as a learning instrument. Through out this project i will make many mistakes and end up refactoring the code base, i have already done a lot of that and i have yet to scratch the surface of the game.

Currently this is what i have

Ignore the game name, i just felt the whole path would be filled with trials and tribulations. As of this time i have managed to generate the dungeon, a simple 60×30 array of floor, water and wall tiles. I also have player movement and wall collision setup.

The art you see above is a placeholder for something i intend to make further down the road (as i said no art skill) and can be found here.

Framework

It took me more time than it should’ve to decide what language and framework to use for this little hobby. I looked at python and pygame, ruby, xna, c++, java. Ended up choosing java, because it allows me to avoid relearning the other languages. For framework i chose Slick2D, which is  set of tools wrapped around the LWJGL OpenGL binding for Java.

Dungeon Generation

I decided early on that the dungeons needed to be procedurally generated so I set out to learn how to do just that. I found the Procedural Content Generation Wiki and thanks to them i ended up settling on a Cellular Automata method that would allow me to generate cave like levels.

During generation i just place tiles that end up living or dying during the 3 generations i allow them. I place two types of tile, wall and water. All the other tiles are automatically considered to be floor. This is a simplistic approach that i will need to refine, for instance you will easily find isolated water tiles inside walls or even situations like you see on the screen above where there are just a couple of tiles that bring nothing to the dungeon.

Rendering Art

After generating the tiles its time to draw them. My first attempt slowed down my screen to a crawl. The reason was twofold: rendering all the map and using the wrong api from Slick2D.

At first i was simply iterating all the map and drawing images to the screen with SpriteSheet.getSprite(x, y).

SpriteSheet is a wrapper for an image that contains all your tiles. when you do getSprite it creates an Image object with the appropriate tile. A good explanation taken from StackOverflow:

There is a SpriteSheet class in Slick that does exactly this.

SpriteSheets, in Slick, are large images made up of a series of uniformly sized tiles. Each tile is typically an animation frame in a Sprite. In the SpriteSheet constructor you specify the image (which has all the tiles), and the width/height of the tiles in the sheet, along with any spacing and margin, if you have/need that.

Finally, the getSprite(x, y) method allows you to retrieve the specified tile, as if it were an element in a 2D array. In other words, if you have a SpriteSheet of 16 tiles, that are arranged in a 4×4 grid of tiles, then to get the tile in column 3, row 2, you would call getSprite(3, 2);

I believe the indexes in getSprite(x, y) are zero-based, just like arrays in Java.

Unfortunately this solution has really bad performance when you are rendering a tile map iteratively. The best option is to use the renderInUse method of the spritesheet, you can see a simple example bellow.

Also in the code bellow you can see that i fixed the my other problem (rendering all the map), initially i was rendering the whole 60×30 array independently of whether or not the map could be seen on the screen. The trick was to determine the view area of the map and only render those tiles.

    sh.startUse();
    for (int i = startingY; i < endingY; i++) {
        String[] columns = map[i];
        for (int j = startingX; j < endingX; j++) {
            int xp = (int) x + ((j - startingX) * 32);
            int yp = (int) y + ((i - startingY) * 32);
            if (columns[j].equals("#")) {
                sh.renderInUse(xp, yp, 8, 3);
            } else if (columns[j].equals("$")) {
                sh.renderInUse(xp, yp, 1, 2);
            } else {
                sh.renderInUse(xp, yp, 4, 3);
            }
        }
    }
    sh.endUse();

A little warning, this method of drawing does not play well if you try and do other things in between (GL calls, drawing other images not in this sprite).

That is it for now, i will probably put player movement and collision in it’s own post. For now i will say it gave me much more trouble i ever expected it to.

Since this is a pet project and i’m using it to learn i don’t really have a pre defined path of what i will code next. I go with what i feel like doing, as of now i figure the next steps will be:

  • Fog of War
  • New Art
  • Mob Spawning

Unknown Runtime Error in Internet Explorer while using innerHTML

December 13, 2011 Leave a comment

This is one of those awesome “features” of the Microsoft browser. One which can send web developers of the deep end.

Seems this error may happen due to several reasons:

  • You are trying to put a block-level element inside an inline element like a div element inside a p element (see source 1)
  • You are trying to set a table’s innerHTML (see source 2)
  • You are trying to put a form element inside an element that is itself inside another form
By looking at those two sources you can easily fix the first two errors. On the third one i didn’t seem to find any sources for it so here it is.
I had a strange (read stupid) situation where i was trying to do the following
<form>
   <div id=”container”>
   </div>
</form>
<script type=”text/javascript”>
    <!–
    var obj=document.getElementById(‘container’);
    obj.innerHTML=’<form>….. another form</form>’;
    //–>
</script>
Note that div is already inside another form tag. The code above will throw our URE friend since i am trying to put a form tag inside another form tag. Chrome and Firefox jump over this problem by doing some kind of code clean up on render.

In my case i chose to  replace the original form completely or avoid using the form tag in these situations. All together this seems like a design problem as situations like this should not occur in the first place.

Note that if you run into trouble with the prototype Ajax functions you might want to set the onException option in order to see what is really happening. Though in this case the exceptions isn’t particularly helpful since it only states : Unknown Runtime Error

 

Update:

If this happens to you when using prototype ajaxupdater, create your own ajaxreplacer that replaces the div instead of trying to set innerHtml.

Sources:

  1. http://blog.rakeshpai.me/2007/02/ies-unknown-runtime-error-when-using.html
  2. http://stackoverflow.com/questions/555965/javascript-replace-innerhtml-throwing-unknown-runtime-error#556020
Categories: web Tags: ,

Extreme Exception Programming – Catch Every Exception and Work Around It

October 10, 2010 Leave a comment
I was reviewing the commit log from the last week commits and found this gem:
try{
list = (ArrayList<MyObject1>)session.getAttribute(TEMPORARY_LIST);
}catch (ClassCastException e){
if(add.getMyObjectCurrentItem()) != -1)
try{
list = add.getOtherList().get(add.getMyObjectList()).getMyObjectList();
} catch(IndexOutOfBoundsException e2){
try{
list = add.getOtherList().get(add.getMyObjectList()-1).getMyObjectList();<
} catch(IndexOutOfBoundsException e3){
//Move On
}
}
}

Only thing that came to mind was WTF, after Showing it to my boss he called it : Extreme Exception Programming.
I tweeted before about how in Enterprise we end up coding for every possible chance, but this is going too far.
Categories: java, WTF Tags: , , ,

Cygwin with Tabs using Console(and still portable)

I recently found a way to use tabs with cygwin wich reduces the clutter in your taskbar. You can easily use Console to achieve this, unfortunally the instructions around the web assume your cygwin is installed in the default manner (not portable, not using rxvt as an emulator) so those of you using my instructions to set up a portable cygwin instalation will have a hard time getting Console to work with cygwin.

To use Console just make sure to set up the shell execution path to call /bin/bash and not rxvt.

In the spirit of keeping things portable you need to do the following:

  • just edit your bat file and edit the last line:

%WD%\bin\run %WD%\bin\rxvt.exe -geometry 140×40 -sl 1500 -fn “Courier New” -bg black -fg grey -sr -e %WD%\bin\bash –login -i

to

%WD%\bin\bash –login -i

  • move all Console files to the cygwin folder (same folder as CygwinPortable.exe)
  • make sure the path defined in the Console settings is relative(If you have trouble doing this just edit the console.xml file by hand):

Shell: “\App\Cygwin\cygwin.bat”

Startup Dir: “.”

Console changes some of the window behavior but you can work around that by changing the settings:

  • Mark Settings>Behavior>copy on select
  • Mark Settings>Behavior>Clear selection on copy
  • Settings>Hotkeys>Select Rename Tab on the list > hit the clear button (this will make sure you can use the bash history)
  • There might be some mouse configurations i forgot that you can change.

Links :

Split Windows and Shell Commands in VI

March 23, 2010 Leave a comment
Been working on a project to learn Ruby and decided it was also a great opportunity to learn VIM. One of the gripes i was having was needing to close vim to open another file or run commands on the shell. I figured there should be another way to do this so i googled around and found a way to do it.
The sp command will split you window horizontally and spw will split it vertically. Let’s say you want to edit another file and split the window horizontally you use the command:
:sp filename
This will split the window with your new file on the top pane, and your old file on your bottom pane. You can also decide how big your new pane should be by supplying the line number before issuing the command:
:20 sp filename
The above command splits the window and gives your top pane 20 lines, leaving the rest for the bottom pane.
To switch between panes just us Ctrl-w [up|down|j|k], you can also change the pane size with Ctrl-w[number+|number-] (where number is the number of lines to grow or shrink). If  you want to split the window without opening a new file just use Ctrl-ws
A small note: you have other options besides split to edit multiple files since VI supports buffers easily, use :
:e filename
to open a new file in a new buffer and :bn or :bp to cycle between them.
Now i just needed a way to call the ruby interpreter on the shell without being forced to quit vi. Found its pretty easy to run code on the shell. just use :
:!command
So to run ruby on some file (on the folder i ran vi) i just typed
:!ruby file
Also you can run a command on the file in the current buffer by using the % character:
:!ruby %

Even though i used ruby as an example you can run any shell command you need.

For further explanations visit links bellow.

References:

No GTK# version when creating new project in MonoDevelop

February 7, 2010 2 comments

I’ve recently had to do a full reinstall of my development environment and ran into to some issues with monodevelop.One of these issues appeared when i tried to create a new gtk# application solution. MonoDevelop didn’t detect any gtk# versions on my system.

I had this same issue on the first time i installed mono develop on my fedora box so this time i knew what i was looking for.

Installing monodevelop with yum from fedora repositories isn’t enough to get you started on developing gtk# 2.0 apps. You are going to need to install one other package : gtk# 2.0 development. Just run : yum install gtk-sharp2-devel and this will solve your problem.

Categories: fedora, Linux, Mono Tags: ,
Follow

Get every new post delivered to your Inbox.