Patternlab Node Mustache - Looking for the Syntax For Rendering to Pages on Pattern Lab

77 Views Asked by At

I am currently using Node Patternlab together with Mustache - to answer this question you would need experience with Patternlab (Pattern Lab utilizes templating languages yes, to build up the hierarchical patterns which harness the atomic design principals it was intended to support.).

I've built atoms, molecules and finally, structured my molecules into header organism and everything is looking good. However, I'm at a point where I want to render my header organism onto a page.

Is it necessary to redefine the JSON for the organism on the page level? What is the syntax for rendering my organism to the page?

This is the contents of the home.mustache file located in the following folder structure: patterns > pages > home.mustache

I've tried, among other things:

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Home</title>
</head>
<body>
<h1> My organisms go here </h1>
  
  {{>organisms-primary-header}}

</body>
</html>

The thing is currently my basic html boilerplate even without the Mustache syntax is not rendering when I click on pages. I would assume I'd at least see the h1 - but nothing shows up.

This is my folder structure

patterns > atoms

patterns > molecules

patterns > organisms

patterns > pages > home.mustache

patterns > pages > home.json (The JSON data for the header, is it needed?)

1

There are 1 best solutions below

0
On

I've solved the problem. Instead of deleting my question I'll demonstrate how to render to pages in case someone runs into similar difficult.

Its as simple as defining your JSON data and just invoking your organism. Patternlab will handle the html boilerplate.

patterns > pages > home.json (where I define my JSON data)

patterns > pages > home.mustache

{{>organisms-primary-header}}

And it works!