This is part five of our series on Panini. By now you should have a good understanding of how Panini’s pages, layout, partials, and helpers will save you time reduce mistakes. Ultimately you’ll be able to deliver Cleaner more maintainable, more organized code and really step up your web development game. This week we’re taking all the pieces we’ve learned in the previous four lessons and putting them together for some advanced examples.

Applying an .active Class to Menu’s

People ask about this one very often. It’s pretty straight forward using the {{#ifpage}} helper. You can use Panini’s helpers anywhere in your HTML. So for our menu, we can set it up like this:

The {{#ifpage}} helper is being used here to create a conditional that will only show the HTML inside if the page inside the string matches. So the first link will get the .active class if the page is “installation”. This allows this component be a re-usable partial without having to embed it on each page and manually change one small bit of HTML.

You can also use Panini’s helpers inside the class attribute:

Mixing Data and Helpers for Super Maintainable Code

Having lots of code on your pages can quickly get hard to maintain, harder to find things, and more error prone. In programming, less code usually means let potential for bugs. So we’ll do that in our HTML. Take this filter navigation for example:

We can optimize this in a few ways. We’ll use data to store the content and use that in a template of each button in this navigation. The {{#each}} helper will help us here.

Instead of having a ton of code like this:

We can simplify by having a single “template” for the buttons in which we inject our data (content). Now we only have one button in our HTML.

So in this example we’ve created some variables that data will be injected into. These correspond with data that we set up in our data folder:

Now we’ll set this to repeat for each object we have in our data:

We’ve wrapped our button template in the{{#each}} helper and pointed it to the data file we’ve created. global points to the global folder and filter-nav scopes this to the data within filter-nav only. This will now create a button for each object in the array in filter-nav.

We can also change the active class based on the page here using the{{#ifpage}} helper.

This is similar to our previous example but now we’re pointing to a variable on our data using{{#ifpage page}}active{{/ifpage}}. In our data we’ll add our page variable in each object:

Creating Component Types

The idea of reusable components can extend to any components that shares some similar patterns. We often have a component that looks similar or shares enough styles with another but has slight differences in the markup. Using Panini we can create a component “type” using the{{#ifequal}} helper.

Let’s take this fancy card for example:

We have a similar card on many other pages but the markup is slightly different.

We’ll use the{{#ifequal}} helper to make this one component with different types.

We’ll find the markup that differentiates a different type, and wrap it in the {{#ifequal}} helper.

Now the code wrapped in the {{#ifequal type 'detailed-card'}} will only display when the type is “detailed-card”. Now we can specify the type on our partial include like so:

Adding Custom Helpers

Panini can be extended with any custom Handlebars helpers you need. For this example we’ll be creating a custom month/year helper that you’ll find useful.

Say you’re sending a monthly email newsletter to your user base and need both the header and footer of the email to include the month and year it was created. We could just type this by hand each month, but that can get tedious and may be forgotten. We’ll create a custom Handlebars helper that can be placed in the template of our email to inject the month and year into our text.

Let’s make our custom handlebars helper. First, we’ll create a helpers folder to keep our custom helpers.

Panini’s setup in the Gulfile is already set up to look for a folder named helpers in the root directory (inside src). We’ll also create our file called month-year.js.

If you want to name the folder something else, you can change it in the Gulpfile. Example name: panini-helpers

We’ll drop in some JS into our helper:

Now we can add our Handlebars into our header, footer or wherever else we need to print the date in our email. The name of our new Handlebar helper is the exact name of our JS file, so in this case we’ll be calling month-year as follows.

Now that you know how to produce custom Handlebars helpers we can start creating tons of custom tags to help automate more tedious features of our email creation process. You can also check out some custom handlebars helpers from the Assemble team.

---