Include Pattern Title in the Header Template?

[maxx1128]

I am using Pattern Lab Node v1.3.0 on Mac, with Node v4.0.0, using the Gulp Edition.

I'm trying to use the _source/01-atoms/00-meta/_00-head.mustache file to show that current page's title. This would be for both singular patterns, pattern sub-types, and all patterns. If possible, including the page comments from annotations would be nice as well.

Was originally trying to add this data through the JSON in the patternlab.js file, so referencing it in the header file would be as simple as below:

<h1 class="pattern__title">
  {{ patternTitle }}
</h1>
<p>
   {{ patternDescription }}
</p>

However, I've had no luck making a dent in this.

You can see my current fork here: https://github.com/maxx1128/patternlab-node. However I don't think it'd be necessary, as I've only really changed some template .mustache files and added Sass.

Let me know if you need any other info. Thanks.

[bmuenzenmeyer]

Hey @maxx1128

Thanks so much for the thorough report. I'll make sure to take a look at this soon!.

[bmuenzenmeyer]

I cannot find the code you are referencing in the above fork, and apparently forks are not indexed so I cannot search for it via the Github UI. Can you point me to the file directly.

Even so, a mustache tag like {{ patternTitle }} will only display data if its supplied at the time of render, whether that's in data.json, or an individual pattern's foo.json file. If you wanted every pattern to have these two things, you're best bet would be to go with individual .json files.

I also want to mention that Pattern Lab Node 2.0.0 is out with much better support for pattern descriptions - they are now first class citizens, imported via companion markdown files. There is also a clearer meta separation outside the patterns directory and a slew of other things. If you can, please check out https://github.com/pattern-lab/edition-node-gulp/ and see if that meets your needs better. I don't plan on supporting 1.X code in the long run.

[maxx1128]

Thanks very much for the response! I did change a directory file in the source folder, so the specific file path would be:

patternlab-node/source/_patterns/01-base/00-meta/_00-head.mustache

I did test the individual JSON files and this does work, but ideally I was hoping to import the data from the annotations files. I actually already added the feature to add annotations as markdown files, I use a separate gulp dependency to compile the markdown files and save them as the needed patternlab-node/source/_data/annotations.js.

If there's a way to take this annotation data and load it as part the data.json file on load, that would be ideal for me, whether it's a custom solution or based on the new Pattern Lab Node system. But I will definitely check out the new edition of the project!

[bmuenzenmeyer]

Unfortunately, annotations data and pattern data are two separate structures not really meant to overlap or mingle. Annotations is meant to be outside your patterns and serve only to document it, while pattern data is intrinsically linked to your patterns. I am sure a motivated person could get something together, but I don't think it's on spec or an improvement we plan to build.

Using your example of a title and a patternTitle and a patternDescription, I honestly don't see why you'd want these in your pattern template code at all. The "chrome" around a pattern provides the name of the pattern, and the infoToggle displays the description as markdown. Here's a screenshot of what I mean...

Am i understanding your use case right?

[maxx1128]

I understand the example you're giving. I guess my biggest worry here is when it comes to showing all elements or showing an element sub-category. From my past experience working in pattern libraries, it's best to have the basic title and description at the top since it's a better user experience. Currently for those sections, there's no general title or description for at the top. For example, if you're in a section for image elements and wanted a basic title and description at the top: http://maxwellantonucci.com/patternlab-node/?p=viewall-base-images

I can understand the info toggle being needed for individual patterns, since that's made to scale more effectively when multiple components and patterns are being used, especially when it comes to templates and pages. But I'm worried the current setup of descriptions and titles isn't too friendly for new visitors or users, which is only an issue for me since I'm planning to make this both a public-facing style guide as well as a pattern library generator.

I know this a big change for an older version, so I may just need to shift my focus to making better use of the current Annotations feature. Maybe aim to have it enabled by default and see if that'll work. Either way thanks for the help into this, it's been the last big issue in my fork of Pattern Lab.

[maxx1128]

I'll also definitely look at migrating my current version to the new one as well :)

[bmuenzenmeyer]

Since you mentioned the view-all pages, I feel you should know about Implement Pattern Subtype Documentation, a PL/Node enhancement I plan to develop this month. It directly addresses the need of documenting whole sets of patterns, no toggle needed. @dmolsen has already built this into PL/PHP and it looks and works great.

The new version also has a configuration option to have the patternInfo toggle open or closed by default, which puts descriptions and annotations front and center faster.

[maxx1128]

Awesome! I'll definitely follow that issue, once it's set I'll make plans to migrate my version over.

[bmuenzenmeyer]

@maxx1128 can this issue be closed?

[bmuenzenmeyer]

closing this due to inactivity. OP or anyone still experiencing an issue - feel free to bump this again.