Myst substitutions with html and directives

[firasm]

Describe the bug

I am trying to use myst_substitutions to replace text within a directive, and within html code. I know to specify the substitution in the _config.yml:

sphinx:
  config:
    myst_substitutions:
      - HW01: "https://homework.ca/1000/500/hw"

I'd like to embed the link into an iframe and/or a directive.

• Within a directive, my code is:

```{button-link} {{ HW01 }}
:color: success

Open your homework in a new window on PrairieLearn
```

and,

• Within an iframe, my code is:

<iframe src={{ HW01 }}></iframe> 

bug I expected the link to get replaced, but it doesn't seem to get parsed correctly. In the Javascript console, I see this error:

Not allowed to load local resource: file:///Users/firasm/phys111_course/_build/html/class/sample/%7B%7BHW01%7D%7D

To be clear, when I try specifying the URL directly (i.e. without the myst substitution) it all works fine.

I've also tried various other tricks like: {{ "{0}".format(HW01) }} and even replacing doing things like: {{ "https://homework.ca/1000/".join(HW01) }} to no avail.

Let me know if anyone has an idea!

Reproduce the bug

Use the directive or iframe code as specified above.

List your environment

▶ jupyter book --version
Jupyter Book      : 0.13.1
External ToC      : 0.2.4
MyST-Parser       : 0.15.2
MyST-NB           : 0.13.2
Sphinx Book Theme : 0.3.2
Jupyter-Cache     : 0.4.3
NbClient          : 0.5.13