DISCUSSION [DO NOT MERGE]: Changing to stringify to allow converting YAML objs to JSON

jstockdi commented 1 month ago

Do not merge... Just asking...

Would something like this be good? It would allow front matter like:

---
title:  Featured Mixtape
songs:
 - title: You Can Close Your Eyes
   url: http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/01 You Can Close Your Eyes.mp3
 - title: Country Road
   url:  http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/09 Country Road.mp3
foo: bar
---

# James Taylor Montreux Jazz Festival

James Taylor & Friends live on 4/4/1988 at the Montreux Jazz Festival in Montreux, Switzerland. This performance was recorded and broadcast by Radio Suisse Romande (RSR) in Switzerland.

Available for [download on archive.org](https://archive.org/details/james-taylor-montreux-jazz-fest-1988-rsr/)

To be used in page.html like...

  document.addEventListener("DOMContentLoaded", function() {
    const plEl = document.querySelector("#main-player");

    if(plEl.load){
      plEl.load([{"title":"You Can Close Your Eyes","url":"http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/01 You Can Close Your Eyes.mp3"},{"title":"Country Road","url":"http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/09 Country Road.mp3"}]);
    }
  });

jstockdi commented 1 month ago

Looks like when I amended, deleted the branch, and pushed the PR closed.

https://github.com/jstockdi/greenwood/commit/8eaa130f48506cc05b85b09728780b4781b7b249

is the updated commit where the tests pass. Looks like the test uses a default build, so adding another check for the object will have to wait until decided if this is an accepted idea.

thescientist13 commented 1 month ago

I guess the one thing I would have to look into is how well can rich data be expressed in frontmatter, given that HTML is so closely aligned with using simples strings, unlike something like JSX which can express / support functions, arrays, objects, etc.

Not sure how feasible it would be to do something like this in your markdown?

---
title:  Featured Mixtape
template: 'playlist'
---

<script type="application/json" id="playlist">
  [{
    "title": "You Can Close Your Eyes
    "url": "http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/01 You Can Close Your Eyes.mp3"
  }, {
    "title": "Country Road
    "url": "http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/09 Country Road.mp3"
  }]
</script>

# James Taylor Montreux Jazz Festival

...

And then in a template for these files, pull in your custom element that can do something like this (just off the top of my head)

export default class MusicPlayer extends HTMLElement {
  connectedCallback() {
    if(!this.shadowRoot) {
      // users could set the playlist as an attribute, or you check for a global config as a fallback
      const contents = this.hasAttribute('playlist')
        ? this.getAttribute('playlist')
        : document.querySelector('script#playlist')?.textContent;
      const playlist = contents ? JSON.parse(contents) : [];

      // now boot up that player, just as long as it's not the Eagles, man...
      this.shadowRoot.innerHTML = `...`;
    }
  }
}

customElements.define('music-player', MusicPlayer);

<!-- src/layouts/playlist.html -->
<html>
  <script type="module" src="../components/music-player.js"></script>
  <body>
    <content-outlet></content-outlet>
  </body>
</html>

jstockdi commented 1 month ago

---
title:  Featured Mixtape
template: 'playlist'
---

<app-player><script type="application/json" id="playlist">
  [{
    "title": "You Can Close Your Eyes
    "url": "http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/01 You Can Close Your Eyes.mp3"
  }, {
    "title": "Country Road
    "url": "http://archive.org/download/james-taylor-montreux-jazz-fest-1988-rsr/09 Country Road.mp3"
  }]
</script></app-player>

# James Taylor Montreux Jazz Festival

I think this will work for now..

thescientist13 commented 1 month ago

Cool, and thanks for bringing this up! Good timing for this as I am doing a deeper dive into #1167 atm, so stayed tuned!

Please feel to drop any additional use cases / requests / etc there as you find them. 🙇

ProjectEvergreen / greenwood

DISCUSSION [DO NOT MERGE]: Changing to stringify to allow converting YAML objs to JSON #1229