git kitty Hacking through NYC

theming my site

I started this blog a while ago. Then work got crazy, I hit roadblocks, etc. You don't really care and it doesn't really matter. The main blocker I had was theming. I was a designer in another life and while I always value functionality over design, I still want things to look as nice as they can. So where does that leave a full stack dev who's been working in Node for the past year? Frustrated. I didn't want something over designed or under designed and most of all it had to work... responsive, etc. So I stopped working on this whole blog thing for a couple months.

Fast forward to yesterday. I had some free time and started looking at what was out there in terms of Jekyll themes and that's when I found Layon. If you clicked on that link, you were probably momentarily confused. Yes, it's basically the same site—content aside, but it was exactly what I wanted. A clean, simple theme that was fully responsive. I wanted my site to use blacks and greys for the body text with lots of whitespace. This would allow me to add a crazy accent color and not make the user feel like they're tripping acid. Funny story the name of my Sublime theme is Acid Rayne. Anyway if you want to learn more about Layon and Poole the demo site has all the information you could want.

So after choosing the accent color #675FF5 I was done right? Not quite. When I said theming I didn't just mean site theming I also meant code theming AKA syntax highlighting. I took about two days working on the TextMate theme I use for Sublime. I even named it and everything (see quip above). I wanted something similar but did not want to spend that much time on it. Enter Pygments and highlight.js. Jekyll has built in support for Pygments and while it's great if you using most languages: Ruby, Python, Java, etc. When it comes to JavaScript it just falls short in my opinion, especially server side JS, which is what I'm usually working with. So that's where highlight.js came in. By combining both of these I was able to start with a base theme and build up from there by isolating the pieces I wanted to add. The final result? You can check it out below.

/**
 * Send Email Message
 **/

mailRouter.route('/submit/:toEmail')
  .get(function(req, res, next) {
    var data = {
      from: fromEmail,
      to: req.params.toEmail, 
      subject: 'Hello from Mailgun',
      html: 'Hello, This is not a plain-text email, I wanted to test some spicy Mailgun sauce in NodeJS! <a href="http://0.0.0.0:3030/validate?' + req.params.toEmail + '">Click here to add your email address to a mailing list</a>'
    }

    //Invokes the method to send emails given the above data with the helper library
    mailgun.messages().send(data, function (err, body) {
      if(err) {
        console.log('got an error: ', err);
        return res.render('errors/' + err.status, { error : err});
      } else {
        console.log(body);
        //Here 'submitted.jade' is the view file for this landing page 
        //We pass the variable "email" from the url parameter in an object rendered by Jade
        return res.render('submitted', {email : req.params.toEmail, title: 'Email Sent'});
      }
    });
  });

Pretty huh?

So theming is done. Now let's get to the good stuff...

#happyhacking