How do I successfully integrate a Middleman frontmatter variable in a javascript snippet in the layout page written in haml?

Question

Yesterday I decided to go in for Middleman and HAML and they are awesome! Since I don't want to create multiple layouts for just a value, I tried to use a frontmatter variable to change a value in a javascript snippet at the bottom of the layout page.

The javascript snippet is wrapped in the :javascript filter (here's the reference), that triggers a jQuery plugin. The plugin needs some variables. The variable I want to change in other pages is top. According to the Middleman frontmatter guide page (here's the reference), you just have to add <% current_page.data.top %> where you want that variable in the layout page. This string, written in erb is translated to haml in = current_page.data.top but when I run the page in a browser, the developer console tells SyntaxError: expected expression, got '='.

How do I successfully integrate a Middleman frontmatter variable in a javascript snippet in the layout page written in haml?

The bottom of the layout page (where the snippet is) looks like this below:

/ content of the layout the page

:javascript
    $('#sidenav').simplerSidebar({
        opener: '#toggle-sidenav',
        top: = current_page.data.top
        animation: {
            easing: 'easeOutQuint'
        },
        sidebar: {
            align: 'right',
            width: 320,
            closingLinks: 'a',
            css: {
                zIndex: 3000
            }
        }
    });

the page I want to change looks like this:

---
top: 30
---

/ rest of the page

Answer 1

I managed to answer my question on my own. I read once again and more carefully the Haml reference and in the Filter section I read that "Filters can have Ruby code interpolated with #{}.".

Basically, while coding under a filter (no matter what filter it is), instead of using the strings provided by Middleman and Haml, you should use this one #{current_page.data}.

In my case the snippet code should be:

:javascript
    $('#sidenav').simplerSidebar({
        opener: '#toggle-sidenav',
        top: #{current_page.data.top},
        animation: {
            easing: 'easeOutQuint'
        },
        sidebar: {
            align: 'right',
            width: 320,
            closingLinks: 'a',
            css: {
                zIndex: 3000
            }
        }
    });