DISCUSSION [DO NOT MERGE]: Changing to stringify to allow converting YAML objs to JSON #1229
Conversation
|
Looks like when I amended, deleted the branch, and pushed the PR closed. 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. |
|
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> |
I think this will work for now.. |
|
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. 🙇 |
Do not merge... Just asking...
Would something like this be good? It would allow front matter like:
To be used in page.html like...