larlet-fr-david/david/2024/_sources/tmp.html

<!-- https://www.web3isgoinggreat.com/single/2024-02-28-0 -->
<!-- https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457 -->

<oembed-lazy url="https://umap.openstreetmap.fr/fr/map/grand-tour-de-la-foret-de-ouareau_1037457">
  Une carte de la Grande Boucle de la forêt de Ouareau
</oembed-lazy>

<script type="module">
  class OembedLazy extends HTMLElement {
    static tagName = 'oembed-lazy'

    static register(tagName, registry) {
      if(!registry && ('customElements' in globalThis)) {
        registry = globalThis.customElements
      }
      registry?.define(tagName || this.tagName, this)
    }

    get url() {
      return this.getAttribute('url') || ''
    }

    constructor() {
      super()
      this.attachShadow({ mode: 'open' })
    }

    async connectedCallback() {
      let slot = document.createElement('slot')
      this.shadowRoot.appendChild(slot)

      const html = await this.fetchText(this.url)
      const oEmbedLink = this.extractOembedLink(html)
      console.log(oEmbedLink)
      const corsLink = `http://cors-anywhere.herokuapp.com/${
        oEmbedLink.replaceAll('%3A', ':').replaceAll('%2F', '/')
      }`
      console.log(corsLink)
      const oEmbedJson = await this.fetchJson(corsLink)
      console.log(oEmbedJson)
      this.innerHTML = oEmbedJson.html
    }

    fetchText(url) {
      return fetch(url)
        .then((data) => data.text())
        .catch(console.error.bind(this))
    }

    fetchJson(url) {
      return fetch(url, { type: 'json' })
        .then((data) => data.json())
        .catch(console.error.bind(this))
    }

    extractOembedLink(html) {
      const parser = new DOMParser()
      const htmlDocument = parser.parseFromString(html, "text/html")
      const oEmbedMeta = htmlDocument.documentElement.querySelector(
        'link[type="application/json+oembed"]'
      )
      return oEmbedMeta.href
    }
  }

  OembedLazy.register()
</script>