From 84355645bf0ff71c412e09fedf419c37b7692a0e Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 8 May 2021 15:31:01 -0500
Subject: [PATCH] Make eleventy js templates asynchronus

---
 .eleventy.js                      |  2 +-
 components-eleventy/video/card.js |  4 ++--
 components-eleventy/video/row.js  | 12 +++++++-----
 pages-eleventy/tv.11ty.js         |  8 ++++++--
 4 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 8999d32..f9baf7f 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -25,7 +25,7 @@ module.exports = function ( eleventyConfig ) {
     const cssManager = new InlineCodeManager()
     const jsManager = new InlineCodeManager()
 
-    eleventyConfig.addJavaScriptFunction('usingComponent', function ( componentName ) {
+    eleventyConfig.addJavaScriptFunction('usingComponent', async function ( componentName ) {
         // console.log('Getting component', componentName)
 
         if ( componentName.includes('.js') ) {
diff --git a/components-eleventy/video/card.js b/components-eleventy/video/card.js
index 0f77819..2035852 100644
--- a/components-eleventy/video/card.js
+++ b/components-eleventy/video/card.js
@@ -9,14 +9,14 @@ function pill ( text ) {
     `
 }
 
-export default function ( video, options = {} ) {
+export default async function ( video, options = {} ) {
     const {
         width = '325px',
         classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
     } = options
 
     // Setup inline lazysizes
-    this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
+    await this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
 
     // console.log('video', video)
 
diff --git a/components-eleventy/video/row.js b/components-eleventy/video/row.js
index 308e9c5..43675c4 100644
--- a/components-eleventy/video/row.js
+++ b/components-eleventy/video/row.js
@@ -10,7 +10,7 @@ function getCardType ( video ) {
     return VideoCard
 }
 
-export default function ( videos, options = {} ) {
+export default async function ( videos, options = {} ) {
 
     const {
         cardWidth = '325',
@@ -24,17 +24,19 @@ export default function ( videos, options = {} ) {
     const rowId = `row-${ uid }`
 
     // Setup inline lazysizes
-    this.usingComponent( 'helpers/scroll.js' )
+    await this.usingComponent( 'helpers/scroll.js' )
 
     // console.log('video', video)
 
-    const cardsHtml = videos.map( video => {
+    const renderedCards = await Promise.all(videos.map( async video => {
         const Card = getCardType( video )
 
         // console.log('Card', this.boundComponent(Card)( video ) )
 
-        return this.boundComponent(Card)( video )
-    } ).join('')
+        return await this.boundComponent(Card)( video )
+    } ))
+
+    const cardsHtml = renderedCards.join('')
 
     // console.log( 'cardsHtml', cardsHtml )
 
diff --git a/pages-eleventy/tv.11ty.js b/pages-eleventy/tv.11ty.js
index a5d29f3..2d5c7f0 100644
--- a/pages-eleventy/tv.11ty.js
+++ b/pages-eleventy/tv.11ty.js
@@ -57,10 +57,14 @@ class TV {
         }
     }
 
-    render({ payload: { video } }) {
+    async render({ payload: { video } }) {
 
         // console.log('video.payload', Object.keys(video.payload))
 
+        const rowHtml = await this.boundComponent(VideoRow)( video.payload.relatedVideos )
+
+        // const rowHtml = renderedRow.join('')
+
         return /* html */`
             <section class="container pb-16">
                 <div class="flex flex-col items-center text-center space-y-6">
@@ -87,7 +91,7 @@ class TV {
                     <div class="related-videos w-full">
                         <h2 class="subtitle text-xl md:text-2xl font-bold mb-3">Related Videos</h2>
 
-                        ${ this.boundComponent(VideoRow)( video.payload.relatedVideos ) }
+                        ${ rowHtml }
 
                     </div>