Day 1

<!-- RENDER -->
<div id="ships_loading">Loading...</div>
<div id="ships" class="grid" data-masonry='{ "itemSelector": ".grid-item", "columnWidth": 300, "gutter": 20, "fitWidth": true}'></div>
/* RENDER */
; (() => {

    fetch('<https://potion-api.vercel.app/table?id=938293b1d53f4e1aa74445ca5d1a76a8>')
        .then(res => res.json())
        .then(getTweets)

    function getTweets(records) {

        const ships = records
            .filter(r => !!r.fields['Time Shipped'])
            .filter(r => {
                const ts = r.fields['Time Shipped']
                const ms = ts.start_time ? Date.parse(ts.start_date + ' ' + ts.start_time) : Date.parse(ts.start_date)
                return ms > Date.parse('2021-04-04 00:00') && ms < Date.parse('2021-04-11 00:00')
            })
					  .sort((a,b) => {
                const tsA = a.fields['Time Shipped']
                const msA = tsA.start_time ? Date.parse(tsA.start_date + ' ' + tsA.start_time) : Date.parse(tsA.start_date)
                const tsB = b.fields['Time Shipped']
                const msB = tsB.start_time ? Date.parse(tsB.start_date + ' ' + tsB.start_time) : Date.parse(tsB.start_date)
                return msA - msB
            })
            .map(record => {
                if (record.fields['Published Twitter link']) return record.fields['Published Twitter link']
                else return null
            })
            .filter(r => r !== null)
						.filter(t => t.match('twitter.com'))

        const shipsEl = document.getElementById('ships')

        shipsEl.innerHTML = ships.map(link => {
            return `<div class="grid-item"><blockquote class="twitter-tweet grid-item"><a href="${link}"></a></blockquote></div>`
        }).join('')

        let s = document.createElement('script')
        s.src = "<https://platform.twitter.com/widgets.js>"
        s.async = true
        document.head.appendChild(s)

        wait()

        function wait() {
            const iframes = shipsEl.querySelectorAll('iframe')
            const loaded = Array.from(iframes).filter(ifrm => ifrm.style.height && ifrm.style.height != '0px')
            if (loaded.length == ships.length) {
								document.getElementById('ships_loading').remove()
                // console.log('loaded!')
                let m = document.createElement('script')
                // m.src = "<https://assets.writual.xyz/masonry.pkgd.min.js>"
                m.src = "<https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js>"
                document.head.appendChild(m)
            } else {
                 console.log('waiting',{loaded})
                setTimeout(wait, 100)
            }
        }
    }

})();
/* RENDER */
/* center container with CSS */
.grid {
  margin: 0 auto;
}

.twitter-tweet {
  max-width: 300px !important;
}