Code View on Pattern Detail Page

[pattern-lab]

Code View on Pattern Detail Page

[dmolsen]

I created a feature branch for this this morning. Good news and bad news. The good news is that I integrated CSS Rule Saver quickly... the bad news is that it takes two seconds to generate PL when saving the CSS rules. Waiting two seconds for a simple refresh when using the watcher seems like a bad idea if the CSS output isn't going to be used.

So I was thinking that we'd have a default code view that was lineage and mark-up. If someone needed the rules they could set a flag that caused PL to generate that as well and it would then get put into code view. I figure this would only happen near the end of a project.

A useful feature but a performance hog.

I was also thinking of using prism.js in the pop-up window for styling.

[bradfrost]

Yeah, I think at the end of the day we have to be mindful of performance more than anything. I like the idea of having it as a feature flag, but honestly I'm happy to punt on this as there are a lot of other ways to inspect styles.

Another thing I remember was someone talking about commenting CSS, and using that as a flag to spit out into the pattern. So something like:

/* PL Pattern: molecule-tabs */
.tabs {  ... }
/* End molecule-tabs */

Pattern Lab would then associate whatever's in between those comments with the appropriate molecule/organism/whatver.

Again, I say we defer this for a later date, but definitely good to think about how this could be accomplished.

[dmolsen]

Ok, I'll focus on the other. The use case I had in mind was a code repository (came up here) where we'd want to make assets easily copy-able. Not just for inspecting.

The commenting CSS idea sounds really fragile.

[bradfrost]

I get a little nervous having Pattern Lab become a code repository. There are lots of other tools that do that sort of thing way better, and I feel like if we were to go down that route, it would be a whole lot of work.

I've seen companies using JS Bin internally to manage their production code modules, and that seems to work pretty well. I don't think it makes logistical sense for Pattern Lab to try to do double duty in that respect.

[dmolsen]

Code view on the list views and pattern detail view is now sort of working in dev branch. I plugged the data I had into the areas you had noted on the list view. Fairly painless. I've also built out the pattern detail view but it isn't styled at all and doesn't "shut off". I'm assuming that's a style issue. I basically created a new mark-up structure for it and you can play with it as much as you want. Some things to note:

• the markup for the pattern detail view is in public/styleguide/js/code-viewer.js. Should be very similar to how you marked up annotations.
• code view and annotations can't be run at the same time. for example, clicking "code" in the drop down will turn off annotations and vice versa. just the nature of using the same UI construct. i also think it's a little cleaner even on the list view.
• the syntax highlighting on the pattern view is courtesy of Prism. it's using the OKAIDIA theme. nuke it, change it, whatever you want. i was curious what it looked like.
• patterns listed in the lineage will eventually link to their pattern views. haven't gotten there yet.
• by default, CSS isn't being parsed and included on the pattern detail view. if you want to generate your PL site with CSS parsing support just double-click on scripts/generateSiteWithCSS.command. the CSS will be dropped into the code view if it's available.

I didn't test this overly much. Just make sure to clear your cache and generate your PL site. The header pattern is probably the best use case when testing.

[dmolsen]

Tried to tackle the linking. Works on list view. Can't really test on the pattern detail view.

[dmolsen]

Feature is live.