In the previous blog entry I went thru the steps needed to get a Node.js site up and running with Express.js. Next I’m going to leap right into getting some mash ups going with Coder Wall. I’m currently waiting on Geekli.st to get me some beta API access, when that happens I’ll be adding some of the geeky list to the portfolio. For now… on with the mash up.
First things first, get the pertinent pieces you need from proudify.js (check it out here: https://github.com/icebreaker/proudify and on Mihail’s site here: http://proudify.me). My folder structure looked like this once I had pulled in the js & css files I needed. You may notice I have three image files too, I picked them up via http://iconfinder.com, but you can snag my github and they’re included in that.
If you just want to clone the code, I do have it available on github @ https://github.com/Adron/codingwall.
.
.
.
.
Next I setup the index.jade like this:
[sourcecode language=”vb”]
h1= title
div.splitter
div.left
div.navAlpha
p Welcome to #{title}’s Portfolio Site
a(href=’http://www.linkedin/in/adron’)
| <img alt="Linkedin" src="images/linkedin.png" style="border: 0px" />
br
a(href=’http://twitter.com/adron’)
| <img alt="Twitter @adron" src="images/twitter.png" style="border: 0px" />
br
a(href=’http://www.facebook.com/adron’)
| <img alt="Facebook" src="images/facebook.png" style="border: 0px" />
div.navBeta
p #{title}’s Other Web Presence
ul
li
a(href=’http://compositecode.com’)
| Composite Code
li
a(href=’https://github.com/Adron’)
| Github
li
a(href=’http://www.linkedin.com/in/adron’)
| LinkedIn
li
a(href=’http://www.facebook.com/adron’)
| Facebook
li
a(href=’http://twitter.com/adron’)
| Twitter
div.right
div.crazy
p the content
[/sourcecode]
After I setup the index.jade I changed the layout.jade to have the following code.
[sourcecode language=”vb”]
doctype 5
html(lang="en")
head
title= title
link(rel=’stylesheet’, href=’/stylesheets/style.css’)
link(rel=’stylesheet’, href=’/stylesheets/site.css’)
link(rel=’stylesheet’, href=’/stylesheets/splitter.css’)
link(rel=’stylesheet’, href=’/stylesheets/proudify.min.css’)
script(src=’/javascripts/jquery-1.4.4.min.js’)
script(src=’/javascripts/jquery-ui-1.8.7.custom.min.js’)
script(src=’/javascripts/jquery-proudify.min.js’)
body!= body
[/sourcecode]
Those are basically all the changes I made for the first push to github. Run the standard app:
[sourcecode language=”bash”]
node app.js
[/sourcecode]
Once it runs you should see the basic display of information. The proudify.js pulls the CoderWall badges from the their site.
At this time I still haven’t had time to weave in the Geekli.st yet, but will work toward doing that in the future and making a post.
I’ll be adding other features to this, as an example, around database support, connecting to services and a host of other functionalities. So stay tuned to this blog and be sure to follow the github repository for the latest bits.
Until then, enjoy.
Hey ! Thanks for the tutorial, it’s really nice. And today, what about Geekli.st API ? Have you got any news of it ? Do you know how to implent it in your code ?