How to pass front matter values to a JavaScript?

[rohitfarmer]

Description

Hi, I want to pass front matter values to a JavaScript to fetch and display a Mastodon toot at the bottom of the page on page load. Below is my code where I want to pass values from [Toot](https://{{< meta comment.host >}}/@{{< meta comment.username >}}/{{< meta comment.id >}}) on Mastodon/Fediverse. to fetchToot function call. Any suggestions would be helpful. Thanks!

---
comment:
    host: "fosstodon.org"
    username: "swatantra"
    id: "112113114285387412"
---

<script>
async function fetchToot(u_rl) {
    const jsonFileUrl = u_rl;
    try {
        // Fetching the JSON file
        const response = await fetch(jsonFileUrl);
        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();

        // Parsing the creation date of the toot and formatting it in UTC
        const createdAtDate = new Date(data.published);
        const formattedDate = createdAtDate.toUTCString(); // Converts date to a string, using the UTC time zone.

        // Accessing the necessary details from the JSON object
        // Adjusted paths to match the provided JSON structure
        const tootContentElement = document.getElementById('tootContent');

        // Creating elements for displaying the toot's details
        const dateElement = document.createElement('p');
        dateElement.textContent = `${formattedDate}`;
        //dateElement.textContent = `Date: ${data.published}`;

        const urlElement = document.createElement('a');
        urlElement.href = data.url;
        urlElement.textContent = 'To comment >>';
        urlElement.target = '_blank';

        const contentElement = document.createElement('p');
        contentElement.innerHTML = `${data.content}`; // Using innerHTML to render any HTML content safely

        // Appending the elements to the tootContent div
        tootContentElement.appendChild(dateElement);
        tootContentElement.appendChild(contentElement);
        tootContentElement.appendChild(urlElement);
    } catch (error) {
        console.error('Error fetching the toot:', error);
    }
}

// Call the function when the script loads
fetchToot('https://corsproxy.io/?https://fosstodon.org/@swatantra/112113749849006788.json');

</script>


<div class="card border-primary mb-3">
  <div class="card-header">Comments</div>
  <div class="card-body">

To comment or participate in a discussion related to this blog post, please respond to the following 

[Toot](https://{{< meta comment.host >}}/@{{< meta comment.username >}}/{{< meta comment.id >}}){.btn .btn-primary} on Mastodon/Fediverse. 

  <div id="tootContent">
  </div>

  </div>
</div>

[mcanouil]

You need a LUA filter.
Take a look at the extension page, there are several extensions using JS and taking parameters from the YAML front matter.

PS: you should not mix HTML with Markdown.
You can use include- to include scripts and you can use fenced divs (see markdown basics in documentation) or eventually raw code blocks ```{=html}.

Note that the community already developed and shared an extension to embed social media: https://github.com/sellorm/quarto-social-embeds