OJS inputs hidden in Hugo output?

[aaronschiff]

Not tagging this as a bug as I'm not sure if I'm doing something wrong -- would appreciate any help. I'm using Quarto 1.1.251.

Inputs in ObservableJS cells created in Quarto with hugo as the output format, then rendered to html using hugo seem to be hidden. Here is an example qmd:

---
title: Test Quarto + Hugo + OJS
author: Aaron Schiff
date: 2022-09-19T17:12:56+12:00
draft: false
format: html
execute:
    echo: false
    warning: true
---

## Testing OJS input

```{ojs}
viewof test_input = Inputs.select(['A', 'B', 'C'], { label: "Pick one:" });
```

Should be input box above here.

The output after rendering with hugo looks like this:

The select input exists in the rendered html but has display: none; applied by quarto-ojs.css:

If I change the output target to html, the select input appears as expected:

Is this a Quarto issue or have I done something wrong, eg in the yaml?

[cscheid]

We do a fair bit of DOM processing in the OJS runtime to find the emitted OJS cells, and I imagine that this processing is not working correctly with the DOM emitted by Hugo.

This is a bug, but it will take a while for me to fix. Can you share a full HTML site with this somewhere so I can see precisely what the DOM structure is that you're getting?

[aaronschiff]

Thanks for checking. Here is the html output I get for the qmd example above after rendering with Hugo: https://test.schiff.nz/blog/quarto-ojs-test/

[aaronschiff]

I also tried adding //| classes: showme to the OJS input cell (based on the documentation) so I could try to override the display: none in quarto-ojs.css, but the class name doesn't seem to get added to the rendered .md file and so doesn't appear in the Hugo html output.