Eleventy + Liquid object in PairShortcodes

Question

I am using liquid and eleventy — I want to pass an object to my shortcode, but I am getting an error.

With nunjunks you could do something like...

// .eleventy.js

config.addPairedShortcode('alert', function(content, options = {}) {
  const { variant = 'primary' } = options;
  return `<div class="alert alert-${variant}" role="alert">${content}</div>
});

I could then pass the alert in my template as

{# index.njk #}

{% alert { variant: 'danger' } %}
  A danger alert
{% endalert %}

Using this shortcode works with my liquid templates, I'm just not able to pass an object to the shortcode as I can with njk templates.

I'm not sure if I would then just have to something like:

function(content, variant)

then in my liquid template pass {% alert "danger" %} — I was hoping to have an object as I plan to have quite a few options, it would make it difficult to see what options are set in my templates.

Here is the error I am getting with the shortcode in my liquid templates:

[dev:11ty  ] `TemplateContentRenderError` was thrown
[dev:11ty  ] > invalid syntax at line 1 col 1:
[dev:11ty  ]
[dev:11ty  ]   { variant: 'danger' }
[dev:11ty  ]   ^, file:./src/index.liquid, line:2
[dev:11ty  ]
[dev:11ty  ] `RenderError` was thrown
[dev:11ty  ] > invalid syntax at line 1 col 1:
[dev:11ty  ]
[dev:11ty  ]   { variant: 'danger' }
[dev:11ty  ]   ^
[dev:11ty  ]
[dev:11ty  ] `Error` was thrown:
[dev:11ty  ]     Error: invalid syntax at line 1 col 1:
[dev:11ty  ]
[dev:11ty  ]       { variant: 'danger' }
[dev:11ty  ]       ^
[dev:11ty  ]         at Lexer._token (/Users/Workspace/app/node_modules/moo/moo.js:533:13)
[dev:11ty  ]         at Lexer.next (/Users/Workspace/app/node_modules/moo/moo.js:480:19)
[dev:11ty  ]         at Function.parseArguments (/Users/Workspace/app/node_modules/@11ty/eleventy/src/Engines/Liquid.js:107:23)
[dev:11ty  ]         at Object.render (/Users/Workspace/app/node_modules/@11ty/eleventy/src/Engines/Liquid.js:177:33)
[dev:11ty  ]         at Object._callee$ (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:1851:55)
[dev:11ty  ]         at tryCatch (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:108:40)
[dev:11ty  ]         at Generator.invoke [as _invoke] (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:319:22)
[dev:11ty  ]         at Generator.prototype.<computed> [as next] (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:156:21)
[dev:11ty  ]         at step (/Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:25:30)
[dev:11ty  ]         at /Users/Workspace/app/node_modules/liquidjs/dist/liquid.common.js:43:14

Answer 1

I figured it out. In my _data folder I added options.js file with the following:

{
  "alert1": {
    "variant": "danger"
  }
}

Then in my liquid template I passed:

{% alert options.alert1 %}
   danger alert
{% endalert %}