CODEWITHSUNDEEP
node.jstemplatesmustachepatternlab.io
Damodog
Damodog

Reputation: 344

How to use Pattern Lab generated templates in a project?

We're using the node version of Pattern Lab to generate a styleguide for our new site build and we're also hoping to utilise the Pattern Lab generated template files inside our ecommerce platform's templates.

Is there a way to create another version of a Pattern Lab template WITHOUT the generated markup and Node tags appearing after compilation?

As an example, we have a PL template called main.mustache. When our PL grunt watch task runs, the generated template ends up inside the patternlab\public\patterns\30-templates-main-main folder as an html file with content like so...

<!-- Start: REMOVE THIS -->
<!DOCTYPE html>
<html class="pl">
<head>
    <title>My Component Library</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width" />

    <!--<link rel="stylesheet" href="../../css/style.css?1462369182849" media="all" />-->

    <!-- Begin Pattern Lab (Required for Pattern Lab to run properly) -->
    <!-- never cache patterns -->
    <meta http-equiv="cache-control" content="max-age=0" />
    <meta http-equiv="cache-control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="pragma" content="no-cache" />

    <link rel="stylesheet" href="../../styleguide/css/styleguide.css?1462369182849" media="all">
    <link rel="stylesheet" href="../../styleguide/css/styleguide-specific.css?1462369182849" media="all" />

    <!-- End Pattern Lab -->

</head>
<body class="body">
<!-- End: REMOVE THIS -->

**[ TEMPLATE CONTENT CODE IS HERE WHICH I WANT... ]**

<!-- Start: REMOVE THIS -->
<!--DO NOT REMOVE-->

<!-- DO NOT MODIFY -->
<script>
  // handle injection of items from Node
  var patternPartial = "templates-main";
  var lineage = [{lineagePattern:"organisms-messages",lineagePath:"../../patterns/20-organisms-global-messages/20-organisms-global-messages.html"},{lineagePattern:"organisms-header",lineagePath:"../../patterns/20-organisms-global-header/20-organisms-global-header.html"},{lineagePattern:"organisms-promotion-messages",lineagePath:"../../patterns/20-organisms-global-promotion-messages/20-organisms-global-promotion-messages.html"},{lineagePattern:"molecules-search",lineagePath:"../../patterns/10-molecules-forms-search/10-molecules-forms-search.html"},{lineagePattern:"organisms-footer",lineagePath:"../../patterns/20-organisms-global-footer/20-organisms-global-footer.html"}];
  var lineageR = [{lineagePattern:"pages-main",lineagePath:"../../patterns/40-pages-main/40-pages-main.html"}];
  var patternState = "";
  var baseurl = "";
  var cssEnabled = false; //TODO
</script>

<script type="text/html" id="sg-pattern-html">
  {% patternHTML %}
</script>

<script type="text/html" id="sg-pattern-css">
  {% patternCSS %}
</script>

    <script src="../../styleguide/js/vendor/jwerty.js?1462369182849"></script>
    <script src="../../styleguide/js/postmessage.js?1462369182849"></script>
    <script src="../../data/annotations.js?1462369182849"></script>
    <script src="../../styleguide/js/annotations-pattern.js?1462369182849"></script>
    <script src="../../styleguide/js/code-pattern.js?1462369182849"></script>


</body>
</html>
<!-- End: REMOVE THIS -->

It'd be great to have a version without the additional markup (see inside 'REMOVE THIS' comments above) so we're just left with the generated template html which is built using our organisms, molecules and atoms etc.

Upvotes: 0

Views: 993

Answers (1)

Eugen Baryshnikau
Eugen Baryshnikau

Reputation: 435

There is always an escaped version of the snippet generated in the same folder. For your example patternlab\public\patterns\30-templates-main-main will contain:

  • 30-templates-main-main.html - your snippet with additional markup (header + footer)
  • 30-templates-main-main.mustache - escaped .mustache (with variables), no additional markup
  • 30-templates-main-main.escaped.html - escaped HTML, no additional markup

Both .mustache and .escaped.html will contain only the snippet content, with no additional markup. Note that both files contains escaped HTML, so don't forget to unescape the HTML back before using it further. This could be done in a several ways depending on your language, i.e. there is an NPM-module which can decode HTML from escaped text: https://www.npmjs.com/package/html-entities

Upvotes: 2

Related Questions