Mustache

Why "Mustache"? Because the curly brackets look like a mustache 😎

🌎 Mustache Demo

🌎 Mustache Profiles Demo

⚠️ Mustache requires very basic PHP knowledge and PHP Hosting!

Usages

Global Values for the whole RapidWeaver project centralized:

• Everywhere you want to change content elements or stack configurations in one place and share across many pages without updating every single page
• Content fragments (text) used through out the project, such as product names and -configurations
• Define data objects (products, user data...) and populate product or user pages on the fly with configured data (see 🌎 Mustache Profiles Demo)
• Additional css classes on stacks, activating / deactivating styles without messing the CSS itself
• Globally configured urls for warehoused pictures
• Replace static content elements with dynamic php expressions (see "advanced data files")
• ...and many more!

Mustache Stack

This is the main stack for Mustache content templating and processing. All stacks placed inside the Mustache stack will be processed. Every occurence of a placeholder (a variable name / key enclosed with double curly brackets, "{{placeholder}}") is replaced with the corresponding value from the data file. This includes also values in the Stack inspector for stacks placed inside the Mustache stack.

All processing is done on the server.

Requried:

• Mustache Data Stack NEW or a Data File containing a PHP array with the values to translate
• Configured Mustache stack.

A Mustache Stack is a "Template" and all occurences of Mustache Tags / placeholders ({{placeholder}}) inside this stack will be replaced with the corresponding value from the configured data file and array.

Place a Mustache stack on the page. Open the inspector and look for the Configuration section. Use the page selector "Key/Value File" to select a data file, this can be either a page containng a Mustacha Data stack or plain data file.

If you have specified a different array name other than values, enter the array name into "Value Array". The array name must match the array name you specified in the data pages / data files.

The Debug Setting "Show Values" will ad a button to the page which will show the data of the given array. This comes handy when the page doesn't show up all values as expected.

Mustache Data Stack NEW

The Mustache Data stack is a convenient way to create global data for your site. Just create a empty Stacks page, add one or more Mustache Data stacks and populate your required data. Configure a Mustache stack to link to your data page.

• You can add as many key/value pairs as you want
• you can have as many data stacks as you want. Make sure that the array name is unique!
• Mustache Data doesn't support nesting, for more advanced usage, create a plain data file.
• If you change the data, you have to preview the page to see changes locally.
• To update the data on a published page, you need to visit the url of the data page to update the data file.
• Mustache Date supports expression values only on data generation. If you need dynamic expressions, create a plain data file (see below).

Advanced: creating a plain data file

1. Add a plain HTML page to your Rapid Weaver project, name the folder accordingly and change the file extension from .html to .php.
2. Now start adding a PHP array containing the required key/values to the document. By default, Mustache looks for a array called $values, here's an example:

<?php 
    $values = [
        "firstname" => "Heiko",
        "lastname" => "Kanzer",
    ];
?>

Note:

• The key is the left part before the arrow.
• A key must be a single word, hyphens (-) and underscores (_) are allowed.
• The value can be any text or raw html (see also Mustache Raw Stack). If you want to use quotes in the value, you have to add a \ (aka "escaping") before each quote, otherwise you break the code: "Hello World" becomes \"Hello World\"
• You can add as many key/value pairs as you want. The sky 🌁 is the limit. Or the memory of your server 🙃.
• You can do simple math / calculations and call PHP methods. This is a powerful tool, but not for the faint hearted ⚠️ (see also Mustache Section stack for an advanced example)

For a better organisation, you can "nest" the values:

<?php 
    $values = [
        "person" => [
            "firstname" => "Heiko",
            "lastname" => "Kanzler",            
        ],
    ];
?>

Access the nested data via "dot notation": {{person.firstname}}

Mustache Section Helper Stack

The Mustache Section Helper Stack has two powerfull features:

Show/hide content

The stack can hide content placed in its drop zone if a specified key is set to false, e.g. "show_intro" => false, or show the content if set to true.

If you set the value of the key to someting like "show_text" => $_GET['show'] == "true" ? true : false,, you can disable / enable the content by appending ?show=true or ?show=false to the page url.

Iteration

If the given key coontains a sub-array of key/value pairs, Mustache Section automatically repeats the stacks for each occurence in this sub-array. This allows to loop over predefined data.

Example: This defines a array people inside the main data array, containing four sub-arrays with user data.

<?php 
    $values = [
        "people" => [
            [ 
                "username" => "Anna",
                "profile_image" => "../resources/profile_images/user1",
                "profession" => "Key Account Manager",
                "location" => "Madrid",
            ] ,
            [ 
                "username" => "Markus",
                "profile_image" => "../resources/profile_images/user2",
                "profession" => "Sales Executive",
                "location" => "Berlin",
            ] ,
            [ 
                "username" => "Debbie",
                "profile_image" => "../resources/profile_images/user3",
                "profession" => "Team Lead",
                "location" => "Gibraltar",
            ] ,
            [ 
                "username" => "François",
                "profile_image" => "../resources/profile_images/user4",
                "profession" => "liaison Manager",
                "location" => "Paris",
            ] ,
        ],
    ];
?>

Setting the key of the Mustache Section stack to people now iterates / loops over all elements of the people: All stacks placed inside the Mustache Section will be rendered four times, each with the data of a single person (see also Mustache Profiles Demo)

The output will look like this:

Mustache RAW Helper Stack

The Mustache Raw helper stack renders the value of the given key as raw html.

🪲Troubleshooting

• Changes to data file not reflected in preview of page: switch to data file apge and press preview to generate updated data file.
• Data file is not generated, preview fails with PHP error:
  • Check array for syntax errors
  • Missing , after each key value pair
  • Mismatching open/close square brackets
  • Quotes not properly closed or not escaped (" to \")
  • Assignments after the => are misspelled