Referencing images from dynamic data

[rombert]

Hi,

I would like to achieve the following with Parcel:

• load external data from YAML
• fill in data based on a HTML template, including image references

The template is

  <template id="card-template">
    <div class="tile is-parent is-3">
      <div class="tile is-child card">
        <div class="card-content">
          <div class="media">
            <div class="media-left">
              <figure class="image is-64x64">
                <img class="logo">
              </figure>
            </div>
          
            <div class="media-content">
              <p class="title is-4"></p>
              <p class="subtitle is-6"></p>
            </div>
          </div>
          <div class="content"></div>
        </div>
      </div>
    </div>
  </template>

The javascript code is

  import apps from './data/apps.yaml';
  const template = document.querySelector('#card-template');
  const clone = template.content.cloneNode(true);
  const theApps = apps.apps
  for ( const app of apps.apps ) {
    clone.querySelector('.title').textContent = app.title;
    clone.querySelector('.subtitle').textContent = app.subtitle
    clone.querySelector('.logo').src = new URL(app.logo, import.meta.url);
    document.querySelector('#tiles').appendChild(clone);
  }

The problem is that parcel does not identify the images and uses the 'raw' links, e.g.

The YAML file looks like

apps:
- title: Prometheus
  subtitle: Metrics scraping, storage, and aggregation
  logo: assets/prometheus_logo.png

The problem is that the logo property is not processed by Parcel, so the link is not rewritten and the asset not copied to the dist directory.

Is there a possibility of making such a scenarion work with Parcel? I guess I can inline the data as JSON in the index.html, but I'm curious if there is a solution that keeps the file external.

Using "parcel": "^2.8.1".

Thanks!

[mischnic]

There's no builtin way to achieve this. But a transformer plugin could achieve this by reading in the yaml and outputting a JS file that looks something like

export default [{title: "...", subtitle: "...", logo: new URL("assets/prometheus_logo.png", import.meta.url)}];

And that would then work with the existing Parcel features.

[rombert]

Thanks for the reply. I am actually happy with an external javascript file that is imported in the main HTML file, YAML is not a requirement. So I just moved the YAML data to JSON

export { apps };

const apps = [
    {
...
    }
];

    <script type="module">
    import { apps } from './data/apps.js';
    ....
    </script>