Need some help walking through a shortcode scenario

I’d like to embed some Codepens into some of my posts, but I’d like to use the prefill embeds which allow me to supply code to use for HTML and CSS. So, I’d create test.html and test.css in /static/code and reference them with a shortcode in my post like this, ideally:

{{< codepen markup="test" style="test" >}}

My initial idea was to set up a shortcode called codepen.html like the following:

{{ $markup := .Get "markup" }}
{{ $style := .Get "style" }}
<div class="codepen" other-attrs="yep">
<pre data-lang="html">{{ readFile (printf "/code-examples/%.html" $markup) | htmlEscape }}</pre>
</div>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

And the error I get (presumably because I can’t run a shortcode readFile within a shortcode?) is:

ERROR 2023/03/26 10:28:02 Rebuild failed: process: loading templates: "/layouts/partials/codepen.html:4:1": parse failed unexpected "<" in command
Total in 15 ms

What is the better method for me to give file prompts to feed into an existing shortcode like this, but that will still need to read the file?

The “verb” is incomplete—should be %s.

Also, I would stuff the files in assets instead of static, get the resource, and then its content with .Content.

Thank you, here is the updated shortcode:

{{ $markup := .Get "markup" }}
{{ $style := .Get "style" }}
{{ $html := resources.Get (printf "code-examples/%s/%s.html" $markup) }}
{{ $sass := resources.Get (printf "code-examples/%s/%s.scss" $style) }}
<div class="codepen" other-attrs="yep">
<pre data-lang="html">
{{ with $html }}
{{ .Content | htmlEscape }}
{{ end }}
</pre>
</div>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

Still getting this error though:

Error: add site dependencies: load resources: loading templates: "/layouts/partials/codepen.html:4:1": parse failed: template: partials/codepen.html:4: unexpected "<" in command

But you say it’s a shortcode. Not sure I understand.

Check out the documentation of printf. If you use two formatting placeholders like here, you need two parameters. You’re passing only one.

1 Like

Sorry, correct, I had an old partial file still there that was being referenced. All good now.

@chrillek Thank you, this was also preventing printf from spitting anything out. Changed to this to get the correct path:

{{ $html := resources.Get (printf "code-examples/%s/%s.html" $markup $markup) }}

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.