Jekyll “port” of PatternLab

[caycefischer]

I was really inspired by your talk and article – but I dislike PHP – so I'm working on a static-site implementation of a pattern lab that's easy to modify and generate “dynamically” with Jekyll pages and categories.

I haven't thrown up a repo yet because I just started this morning, but I will keep you posted!

This is some great work you've done, @bradfrost.

[bradfrost]

@zakkain Excellent! I'm not a big fan of PHP either, so it will be great to see things done in a flat environment. I'm hoping to come into some free time soon, so we'll be making a lot of progress on this project soon. Happy to have you on board!

[dmolsen]

@zakkain fwiw, the static-site implementation is something i've played with in PHP and really like. can you update this issue when you throw up the repo, please? curious how we match up. hopefully we have something to share soon.

[caycefischer]

I absolutely will! So far I've worked out most of the actual looping and logic, I need to fit it into a clean jekyll template and then I'll post it up. Then we can add all the other goodies you've packed in there.

[caycefischer]

Hey, so here's my initial repo (extremely barebones): https://github.com/zakkain/patternlab-jekyll

I've hit a snag – there is a weird problem with rendering Liquid inside some looped-through pages... but only some, and it seems arbitrary. (if you build the site, you can see the red-boxed elements work for Atoms, but not for Molecules or Organisms... with no rhyme or reason). I'm looking into that, but I can't figure it out yet. Anyone a Jekyll whiz?

My approach may have been mistaken – it might be better to make good use of the _includes folder, not Jekyll posts or pages.

I'll keep you posted.

Edit: I've posted an issue here to address the problem I'm having: https://github.com/mojombo/jekyll/issues/1209

[caycefischer]

Whoops, I had the repo private for a sec. Fixed.

Edit: OK so I talked to @qrush on twitter and my code is seriously monkeyballs. Full steam ahead on a plan that uses includes!

[caycefischer]

Hokay, after that flurry of activity and embarrassing loop thing, I've got a much easier structure using _includes. I've put the gist of it down in the README, but take a look at the repo and tell me what you think: https://github.com/zakkain/patternlab-jekyll

[dmolsen]

First off, I really like the use of the animated gifs :)

Second, if you're looking to wrap your patterns inside the viewer and mimic what Brad's done I'm not sure Jekyll, after seeing what you've done, will be the most sustainable solution. Does the directory watcher service (I've never hacked at it so I don't know much about it) give you the ability to generate new files? For example, add a new atom and you can generate a new atoms.html? That might make life a little easier for you. I've been treating patterns as quasi-pages. This is a little easier for me since I'm building my system from the ground-up rather than on top of an existing solution like Jekyll. Patterns need to be standalone and they need to be includable. It's annoying ;)

Keep at it. It's eye opening as I try to figure out what we can provide to make ports easier to set-up.

[caycefischer]

I'm feeling the same – Jekyll may not be the most sustainable solution. As flat-file generators go it's the one I'm most familiar with, but maybe it isn't the best. It does have the Github Pages integration going for it though.

You're absolutely right, patterns being recursively include-able and standalone is a real pain. With Jekyll, treating patterns as pages isn't possible (as I can see it) because of the looping issue. Includes would be the way to go – but I do know a few attractive options for easily creating new files that don't involve manual labour:

1. Rake tasks, run from the command line
2. Prose is a great GUI on top of Jekyll (open source, integrated with github pages or standalone)
3. Yeoman has a Jekyll generator

I'll keep you posted.

[dmolsen]

I'd also throw out Ruhoh as an interesting alternative. I'm currently using mustache for templates plus it might make it easier to do the include & standalone patterns in a page like format. FWIW, when rendering patterns I'm just setting the mustache template and partial directories to be the same location.

But, at the end of the day, my stuff probably most resembles custom rake tasks.

[dmolsen]

As a follow-up, the PHP-based static site generator version of Pattern Lab is now out in the wild.

https://github.com/pattern-lab/patternlab-php

Hopefully the separation means it's easier to build static site generators in other languages.

[caycefischer]

​Yeah I saw this the other day, it looks awesome

Can't wait to dive in

[darrenmothersele]

@zakkain are you still working on this Jekyll "port"?

I just found this (old) thread. The PHP pattern lab is great, but I'd like to abstract some of the components out and allow for other static generator backends (i.e. Jekyll). I think from reading various bits of readme and @dmolsen's comment here that this is inline with pattern labs aims?

I started working on a Jekyll Generator plugin that would create the required index.html and bootstrap the rest of the pattern library.

[dmolsen]

@darrenmothersele -

FWIW, I think we oversold the "static site generator" aspect of Pattern Lab. It runs that way but it's not terribly useful for creating real sites. Also, I haven't been terribly "port" or "fork" friendly when it comes to new features. I tend to just re-write things when I want.

Not trying to dissuade you. Definitely have at it :) Just noting some downsides. Would love to see what you come up with :)

[caycefischer]

Dave put it very well. I think the "static generator" version would be needlessly complicated/clever. PHP gets a bad rap but it does the job well here.

[alexanmtz]

Hey, I've been past days in a conference with @bradfrost and just discovered PatternLab, so I was a little disturbed about PHP use because we don't support it in my company. But I saw that in the end, like Bootstrap it was did before, the PHP it's just to generate the static site. So this is a great job and don't need at really a Port to another language. Maybe Jekyll it could be useful this case because it has native support to github pages and it could be useful if there's a automatically github page to access the contents of the PatternLab repository. But this it can be done with a PHP command too. No problem with the language at all I think.