Integrating text-vide with blog posts

[cadojo]

I want to add a toggle, like the built-in light/dark theme toggle, but for activating a "Bionic Reading" kind of formatting for blog posts. This open source library, text-vide, looks great for this purpose. Ideally, once I get my bearings I'll add this functionality as an open source extension.

I've run npm install text-vide at the top level of my website. This added a node_modules folder with the text-vide library inside. I've not yet committed the node_modules folder.

How can I import text-vide into a script in the HTML? Do I actually need to download text-vide as a dependency with the website? Or is there a way to fetch it at runtime?

I know this is a generic HTML/JS question, but I am hoping I can get Quarto-relevant guidance early as I move this functionality to an extension.

[mcanouil]

Using something like the following in your yaml header:

format:
  html:
   include-in-header: |
     <script type="text/javascript" src="node_modules/***/**.js"></script>

[cadojo]

So I could not get this to work, I'm sure it could but I've never programmed with javascript before. Instead, I used browserify to statically compile the library I want to use, text-vide, into a file called /lib/static/text-vide.js.

The steps I took are...

1. Write the following contents to /lib/dynamic/text-vide.js: const vide = require("text-vide")
2. Run browserify lib/dynamic/text-vide.js -o lib/static/text-vide.js

I've added the following content to include-before-body (I've also tried include-in-header):

<script type="text/javascript" src="/lib/static/text-vide.js">
    let content = document.querySelector("#quarto-document-content");
    var paragraphs = content.getElementsByTagName("p");
    for (var i = 0;i < paragraphs.length; i++){
        console.log(vide.textVide(paragraphs[i].innerText));
        paragraphs[i].innerText = ""; // vide.textVide(paragraphs[i].innerText);
    }
</script>

When I open up my blog post, the script is there in the HTML. But no content has changed. Note that the body of the for loop has a couple debugging elements. I print out the text-vide formatted text, and I set each paragraph's text to an empty string (just to see an effect). I don't think I see either effect in the console, or on the page.

Does anyone see anything glaring I'm doing wrong? This is now pretty much entirely a JS question, not a Quarto question, so I'll continue to look elsewhere for help.

[mcanouil]

Unfortunately, I am not a JavaScript expert and far from it, and I do not know at all the "text-vide" library. 🤷‍♂️

[dragonstyle]

Have you pushed this to a sample repo? I'm happy to look a little more closely, but I think tinkering with the actual QMD would be helpful. A few ideas:

• Use developer tools to check the console for errors.

• The selector for retrieving content isn't returning an element as you expect.

• getElementsByTagName return an HTMLCollection which is iterable (not an array), so maybe try

for (const para of paragraphs) {
 console.log(vide.textVide(paragraphs[i].innerText));
        paragraphs[i].innerText = ""; // vide.textVide(paragraphs[i].innerText);
}

• vide isn't yet initialized because the js is being loaded as a separate file, but the inline script is using it directly.

So maybe:

  document.addEventListener('DOMContentLoaded', () => {
 let content = document.querySelector("#quarto-document-content");
    var paragraphs = content.getElementsByTagName("p");
    for (var i = 0;i < paragraphs.length; i++){
        console.log(vide.textVide(paragraphs[i].innerText));
        paragraphs[i].innerText = ""; // vide.textVide(paragraphs[i].innerText);
    }