Escaping a partial #62

lawlesscreation · 2017-11-23T11:00:16Z

I'm trying out a few tools for creating a style guide and Assemble seems to fit the bill but I'm stumbling when trying to implement a key feature. I want to be able include a partial twice with the second one escaped (rendered as text) - similar to how Twitter bootstrap and other styleguides document code:

// layout.hbs

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>{{title}}</title>
    </head>

    <body>
        <div class="container">
            {{> body }}
        </div>
    </body>
</html>

// page.hbs

{{#markdown}}
Some notes about the pattern.
{{/markdown}}

<h2>Example</h2>
{{> alert modifier="warning"  }}

<h2>Code</h2>
// None of these seem to work...
{{{{> alert modifier="warning" }}}}
{{{> alert modifier="warning" }}}
\{{> alert modifier="warning" }}

After scouring Google for Assemble/Handlebars mentions of how to escape a partial, I'm still none the wiser. Any help would be appreciated.

The text was updated successfully, but these errors were encountered:

assemblebot · 2017-11-23T11:00:17Z

@lawlesscreation Thanks for the issue! If you're reporting a bug, please be sure to include:

The version of assemble you are using.
Your assemblefile.js (This can be in a gist)
The commandline output. (Screenshot or gist is fine)
What you expected to happen instead.

doowb · 2017-11-23T15:25:10Z

The last example should work. Could you post the assemble part of your grunt config and let us know if you're using any other helpers or plugins?

In an older version of grunt-assemble we used to render the body then render the layout using the body as a partial but we doing do that anymore. There might be something else rendering the page twice causing the escaped partial to render on the second pass.

lawlesscreation · 2017-11-24T09:20:22Z

@doowb, thanks for the reply. For me, the last example simple renders the handlebars expression as text i.e.: \{{> alert modifier="warning" }}. I'm not using any helpers or plugins so it's fairly minimal config:

// package.json

  "devDependencies": {
    "grunt": "^1.0.1",
    "grunt-assemble": "^0.6.3",
    "grunt-browser-sync": "^2.2.0",
    "grunt-contrib-clean": "^1.1.0",
    "grunt-contrib-watch": "^1.0.0"
  },

// Gruntfile.js

module.exports = function(grunt) {
    'use strict';

    grunt.initConfig({

        config: {
            src: './src',
            dist: './dist'
        },

        // Builder
        assemble: {
            options: {
                assets: '<%= config.src %>/assets',
                data: ['<%= config.src %>/data/*.json'],
                partials: ['<%= config.src %>/partials/*.hbs'],
                flatten: true
            },
            docs: {
                options: {
                    layout: '<%= config.src %>/layouts/docs.hbs'
                },
                files: {'<%= config.dist %>/': ['<%= config.src %>/docs/**/*.md']}
            },
            patterns: {
                options: {
                    layout: '<%= config.src %>/layouts/patterns.hbs'
                },
                files: {'<%= config.dist %>/': ['<%= config.src %>/patterns/**/*.hbs']}
            }
        },

        // Clean the dist folder
        clean: {
            all: ['<%= config.dist %>/']
        },

        watch: {
            docs: {
                files: '<%= config.src %>/docs/**/*.md',
                tasks: ['assemble:docs']
            },
            html: {
                files: [
                    '<%= config.src %>/layouts/**/*.hbs',
                    '<%= config.src %>/patterns/**/*.{html,hbs,json}'
                ],
                tasks: ['assemble:patterns']
            }
        },

        // Static file server
        browserSync: {
            dev: {
                options: {
                    directory: true,
                    server: '<%= config.dist %>',
                    watchTask: true
                },
                bsFiles: {
                    src : [
                        '<%= config.dist %>/**/*'
                    ]
                }
            }
        }
    });
  
    grunt.loadNpmTasks('grunt-assemble');
    grunt.loadNpmTasks('grunt-browser-sync');
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-watch');

    // The default task to run with the `grunt` command.
    grunt.registerTask('default', ['clean', 'assemble', 'browserSync', 'watch']);

    // The build task to run with the `grunt` command.
    grunt.registerTask('build', ['clean', 'assemble']);
  };

lawlesscreation · 2017-11-28T08:05:45Z

Sadly, I've still not been able to work this one out. I'll try to create a demo repo on GitHub and link to it.

doowb · 2017-11-28T14:15:52Z

@lawlesscreation I was traveling and missed your first response... I'll take a closer look today. A demo repo will help a lot, thanks!

lawlesscreation · 2017-11-28T19:47:02Z

Here's a demo of the problem:

https://github.com/lawlesscreation/grunt-assemble-demo

Rendered output:

Some notes about the pattern.

Example

Alert

This is an alert

Code

{{> alert modifiers="warning" }}

Running on Node v6.11.3

doowb · 2017-11-29T01:45:28Z

@lawlesscreation I think I misunderstood what you're trying to accomplish. I thought that you wanted the result to be {{> alert modifiers="warning"}}.

Now that I've looked over it again, I think that you want the html contents of the rendered partial.
If this is the case, then you can use the {{#markdown}} helper and wrap the contents in backticks:

{{#markdown}}
```html
{{> alert modifiers="warning" }}

```
{{/markdown}}

This produces the following:

Some notes about the pattern.

Example

Alert

This is an alert

Code

<div class="alert warning" role="alert">
    <h2>Alert</h2>
    
    <p>This is an alert</p>
</div>

lawlesscreation · 2017-11-29T11:15:49Z

Thanks @doowb! that works great!

Looking at your solution reminded me that originally I had tried to use markdown for the pages instead of handlebars (it would be a lot easier to write documentation in MD). The problem was that when I included a .hbs partial inside a .md page, it seemed to break when there was whitespace between elements in the partial. Here's a quick demo (https://github.com/lawlesscreation/grunt-assemble-demo/tree/markdown-demo) where it stops rendering the partial as HTML after the whitespace.

You don't happen to know if this is possible? Most of the content in the page will be markdown so it seems easier than wrapping every block individually with {{#markdown}}.

update:

I can actually cheat a little and invert the tags to close/open those from the layout:

{{/markdown}}
{{> alert modifiers="warning" }}
{{#markdown}}

Feels like a hack though :)

lawlesscreation · 2017-12-05T13:40:46Z

I've not found a better way to do this yet but it still feels a little hacky. Is there a better way to use handlebars partials inside a .md file?

doowb · 2017-12-05T18:29:00Z

@lawlesscreation I thought I responded to this the other day...

I haven't had a chance to look into it more, but you should be able to do what you were trying in the original markdown-demo branch. If there is an issue with it breaking on whitespace, it might be indentation related since markdown expects different indentations in specific situations. For example, if something ends up being indented 4 spaces, then it becomes a code block.

I'll try to take a closer look and get back to you.

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Escaping a partial #62

Escaping a partial #62

lawlesscreation commented Nov 23, 2017 •

edited

Loading

assemblebot commented Nov 23, 2017

doowb commented Nov 23, 2017

lawlesscreation commented Nov 24, 2017 •

edited

Loading

lawlesscreation commented Nov 28, 2017

doowb commented Nov 28, 2017

lawlesscreation commented Nov 28, 2017

doowb commented Nov 29, 2017

lawlesscreation commented Nov 29, 2017 •

edited

Loading

lawlesscreation commented Dec 5, 2017

doowb commented Dec 5, 2017

Escaping a partial #62

Escaping a partial #62

Comments

lawlesscreation commented Nov 23, 2017 • edited Loading

assemblebot commented Nov 23, 2017

doowb commented Nov 23, 2017

lawlesscreation commented Nov 24, 2017 • edited Loading

lawlesscreation commented Nov 28, 2017

doowb commented Nov 28, 2017

lawlesscreation commented Nov 28, 2017

doowb commented Nov 29, 2017

lawlesscreation commented Nov 29, 2017 • edited Loading

lawlesscreation commented Dec 5, 2017

doowb commented Dec 5, 2017

lawlesscreation commented Nov 23, 2017 •

edited

Loading

lawlesscreation commented Nov 24, 2017 •

edited

Loading

lawlesscreation commented Nov 29, 2017 •

edited

Loading