https://www.netflixjunkie.com/amp-tag-feed-loader.js

1// Vercel / Next.js bundling doesn't work here
2const ENDPOINT = 'https://nj-frontend-git-alpha-essentiallysports.vercel.app'
3
4const imgCdnTransformer = (sourceUrl) => {
5  if (sourceUrl.includes('image-cdn')) {
6    const s = sourceUrl.split('.')
7    s[0] = 'https://image-webp-cdn'
8
9    return s.join('.')
10  } else if (sourceUrl.includes('staging')) {
11    const [subdomain, ...rest] = sourceUrl.split('.')
12    const pathDump = sourceUrl.split('/')
13    const filename = pathDump[pathDump.length - 1]
14
15    return `https://image-cdn.netflixjunkie.com/wp-content/uploads/${filename}`
16  }
17
18  return sourceUrl
19}
20
21const wrapper = document.querySelector('#more-content-wrapper')
22const trigger = document.querySelector('#trigger-load-more')
23const id = trigger.getAttribute('data-tag-id')
24
25let loading = false
26let page = 2
27
28trigger.addEventListener('click', function (evt) {
29  if (!loading) {
30    loading = true
31
32    fetch(`${ENDPOINT}/api/tag-post-search/?page=${page}&perPage=10&tag=${id}`)
33      .then(res => res.json())
34      .then(jsonRes => {
35        jsonRes.forEach(article => {
36          const w = article.sourceDetails ? article.sourceDetails.width : 120
37          const h = article.sourceDetails ? article.sourceDetails.height : 120
38          const s = article.sourceDetails ? article.sourceDetails.source_url : article.thumbnail
39
40          const a = document.createElement('a')
41          a.setAttribute('href', `${ENDPOINT}/${article.slug}/`)
42          a.style.display = 'block'
43          a.style.textDecoration = 'none'
44
45          const fig = document.createElement('figure')
46          fig.style.display = 'flex'
47          fig.style.margin = '0'
48
49          const imgRatioWrap = document.createElement('div')
50          imgRatioWrap.style.position = 'relative'
51          imgRatioWrap.style.width = '120px'
52          imgRatioWrap.style.height = '0'
53          imgRatioWrap.style.paddingBottom = `${120*(h/w)}px`
54
55          const ampImg = document.createElement('amp-img')
56          ampImg.setAttribute('src', imgCdnTransformer(s))
57          ampImg.setAttribute('layout', 'responsive')
58          ampImg.setAttribute('width', w)
59          ampImg.setAttribute('height', h)
60          ampImg.style.position = 'absolute'
61          ampImg.style.width = '100%'
62          ampImg.style.height = '100%'
63
64          const figCaption = document.createElement('figcaption')
65          figCaption.style.width = 'calc(100% - 120px)'
66          figCaption.style.paddingLeft = '20px'
67
68          const p = document.createElement('p')
69          p.textContent = article.title
70          p.style.fontSize = '14px'
71          p.style.fontStyle = 'normal'
72          p.style.fontWeight = 700
73          p.style.lineHeight = '19px'
74          p.style.letterSpacing = '0em'
75          p.style.textAlign = 'left'
76          p.style.color = '#000000'
77          p.style.margin = '0'
78
79          const d = document.createElement('p')
80          d.textContent = article.formattedDate
81          d.style.fontSize = '11px'
82          d.style.fontStyle = 'normal'
83          d.style.fontWeight = 400
84          d.style.lineHeight = '13px'
85          d.style.letterSpacing = '0em'
86          d.style.textAlign = 'left'
87          d.style.color = '#535353'
88
89
90          figCaption.appendChild(p)
91          figCaption.appendChild(d)
92
93          imgRatioWrap.appendChild(ampImg)
94          fig.appendChild(imgRatioWrap)
95          fig.appendChild(figCaption)
96          a.appendChild(fig)
97
98          wrapper.appendChild(a)
99          wrapper.appendChild(document.createElement('hr'))
100        })
101
102        page = page + 1
103        loading = false
104        AMP.setState({ action: 'More Articles' })
105      })
106  }
107})