Buck9195/doesitarm
1
0
Fork 0
mirror of https://github.com/ThatGuySam/doesitarm.git synced 2026-05-18 06:44:46 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions 3

Make eleventy js templates asynchronus

Browse source
This commit is contained in:
Sam Carlton 2021-05-08 15:31:01 -05:00
parent bb40fd294c
commit 84355645bf
4 changed files with 16 additions and 10 deletions
Download patch file Download diff file Expand all files Collapse all files

2
.eleventy.js
View file

@ -25,7 +25,7 @@ module.exports = function ( eleventyConfig ) {
const cssManager = new InlineCodeManager() const cssManager = new InlineCodeManager()
const jsManager = new InlineCodeManager() const jsManager = new InlineCodeManager()
eleventyConfig.addJavaScriptFunction('usingComponent', function ( componentName ) { eleventyConfig.addJavaScriptFunction('usingComponent', async function ( componentName ) {
// console.log('Getting component', componentName) // console.log('Getting component', componentName)
if ( componentName.includes('.js') ) { if ( componentName.includes('.js') ) {

4
components-eleventy/video/card.js
View file

@ -9,14 +9,14 @@ function pill ( text ) {
` `
} }
export default function ( video, options = {} ) { export default async function ( video, options = {} ) {
const { const {
width = '325px', width = '325px',
classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden' classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
} = options } = options
// Setup inline lazysizes // Setup inline lazysizes
this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' ) await this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
// console.log('video', video) // console.log('video', video)

12
components-eleventy/video/row.js
View file

@ -10,7 +10,7 @@ function getCardType ( video ) {
return VideoCard return VideoCard
} }
export default function ( videos, options = {} ) { export default async function ( videos, options = {} ) {
const { const {
cardWidth = '325', cardWidth = '325',
@ -24,17 +24,19 @@ export default function ( videos, options = {} ) {
const rowId = `row-${ uid }` const rowId = `row-${ uid }`
// Setup inline lazysizes // Setup inline lazysizes
this.usingComponent( 'helpers/scroll.js' ) await this.usingComponent( 'helpers/scroll.js' )
// console.log('video', video) // console.log('video', video)
const cardsHtml = videos.map( video => { const renderedCards = await Promise.all(videos.map( async video => {
const Card = getCardType( video ) const Card = getCardType( video )
// console.log('Card', this.boundComponent(Card)( video ) ) // console.log('Card', this.boundComponent(Card)( video ) )
return this.boundComponent(Card)( video ) return await this.boundComponent(Card)( video )
} ).join('') } ))
const cardsHtml = renderedCards.join('')
// console.log( 'cardsHtml', cardsHtml ) // console.log( 'cardsHtml', cardsHtml )

8
pages-eleventy/tv.11ty.js
View file

@ -57,10 +57,14 @@ class TV {
} }
} }
render({ payload: { video } }) { async render({ payload: { video } }) {
// console.log('video.payload', Object.keys(video.payload)) // console.log('video.payload', Object.keys(video.payload))
const rowHtml = await this.boundComponent(VideoRow)( video.payload.relatedVideos )
// const rowHtml = renderedRow.join('')
return /* html */` return /* html */`
<section class="container pb-16"> <section class="container pb-16">
<div class="flex flex-col items-center text-center space-y-6"> <div class="flex flex-col items-center text-center space-y-6">
@ -87,7 +91,7 @@ class TV {
<div class="related-videos w-full"> <div class="related-videos w-full">
<h2 class="subtitle text-xl md:text-2xl font-bold mb-3">Related Videos</h2> <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">Related Videos</h2>
${ this.boundComponent(VideoRow)( video.payload.relatedVideos ) } ${ rowHtml }
</div> </div>