From 60a43c2f39dba20ac4fdcb48b79e89eea7c23ba1 Mon Sep 17 00:00:00 2001
From: Sam Carlton <sam@sam.lc>
Date: Sat, 23 Jan 2021 16:53:25 -0600
Subject: [PATCH] Setup inline scripts and styles

---
 .eleventy.js                      | 68 +++++++++++++++++++++++++++++--
 components-eleventy/video/card.js |  3 ++
 layouts-eleventy/default.11ty.js  |  7 +++-
 pages-eleventy/tv.11ty.js         |  7 +++-
 4 files changed, 78 insertions(+), 7 deletions(-)

diff --git a/.eleventy.js b/.eleventy.js
index 8a94bc8..748c673 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -1,16 +1,78 @@
-// const eleventyVue = require("@11ty/eleventy-plugin-vue");
+import fs from 'fs'
+
 import nuxtConfig from './nuxt.config'
 
-module.exports = function ( eleventyConfig ) {
-    // eleventyConfig.addPlugin(eleventyVue)
+import { InlineCodeManager } from '@11ty/eleventy-assets'
 
+
+function getAssetFilePath(componentName) {
+	return `./${componentName}`
+}
+
+module.exports = function ( eleventyConfig ) {
     // console.log('eleventyConfig', eleventyConfig)
 
+    // Global Nuxt data
     eleventyConfig.addJavaScriptFunction('getNuxt', function () {
         return nuxtConfig
     })
     // eleventyConfig.addGlobalData('nuxt', () => nuxtConfig)
 
+    const cssManager = new InlineCodeManager()
+    const jsManager = new InlineCodeManager()
+
+    eleventyConfig.addJavaScriptFunction('usingComponent', function ( componentName ) {
+        // console.log('Getting component', componentName)
+
+        if ( componentName.includes('.js') ) {
+            // If a never before seen component, add the JS code
+            if(!jsManager.hasComponentCode(componentName)) {
+                const fileContents = fs.readFileSync(getAssetFilePath(componentName), { encoding: "UTF-8" })
+
+                // console.log('Got component', componentName, componentCss)
+
+                jsManager.addComponentCode(componentName, fileContents)
+            }
+
+            // Log usage for this url
+            // this.page.url is supported on Eleventy 0.11.0 and newer
+            jsManager.addComponentForUrl(componentName, this.page.url)
+        } else if ( componentName.includes('.css') ) {
+            // If a never before seen component, add the CSS code
+            if(!cssManager.hasComponentCode(componentName)) {
+                const fileContents = fs.readFileSync(getAssetFilePath(componentName), { encoding: "UTF-8" })
+
+                // console.log('Got component', componentName, componentCss)
+
+                cssManager.addComponentCode(componentName, fileContents)
+            }
+
+            // Log usage for this url
+            // this.page.url is supported on Eleventy 0.11.0 and newer
+            cssManager.addComponentForUrl(componentName, this.page.url)
+        }
+
+        return
+    })
+
+    // This needs to be called in a Layout template.
+	eleventyConfig.addJavaScriptFunction('getJs', function ( url = this.page.url ) {
+        // console.log( 'jsManager.getCodeForUrl(url)', url )
+
+		return jsManager.getCodeForUrl(url)
+    })
+
+    // This needs to be called in a Layout template.
+	eleventyConfig.addJavaScriptFunction('getCss', function ( url = this.page.url ) {
+        // console.log( 'jsManager.getCodeForUrl(url)', url )
+
+		return cssManager.getCodeForUrl(url)
+    })
+
+    eleventyConfig.addJavaScriptFunction('boundComponent', function ( Component ) {
+		return Component.bind(this)
+	})
+
 
 
     return {
diff --git a/components-eleventy/video/card.js b/components-eleventy/video/card.js
index 6a29916..8617cdb 100644
--- a/components-eleventy/video/card.js
+++ b/components-eleventy/video/card.js
@@ -11,6 +11,9 @@ function pill ( text ) {
 
 export default function ( video ) {
 
+    // Setup inline lazysizes
+    this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
+
     // console.log('video', video)
 
     return /* html */`
diff --git a/layouts-eleventy/default.11ty.js b/layouts-eleventy/default.11ty.js
index d5d266b..502928f 100644
--- a/layouts-eleventy/default.11ty.js
+++ b/layouts-eleventy/default.11ty.js
@@ -66,9 +66,10 @@ class DefaultLayout {
         return Object.values( linkTags ).join('')
     }
 
+
     render({
         content,
-        title = null
+        title = null,
     }) {
         return /* html */`
             <!doctype html>
@@ -152,7 +153,9 @@ class DefaultLayout {
                         </div>
                     </div>
 
-                    {{ Scripts }}
+                    <script>
+                        ${ this.getJs() }
+                    </script>
                 </body>
             </html>
         `;
diff --git a/pages-eleventy/tv.11ty.js b/pages-eleventy/tv.11ty.js
index ce52ce7..e05ab76 100644
--- a/pages-eleventy/tv.11ty.js
+++ b/pages-eleventy/tv.11ty.js
@@ -19,7 +19,10 @@ class TV {
                 title: ({ video }) => {
                     // console.log('data', data)
                     return `${ video.name } - ${ config.head.title }`
-                }
+                },
+                // footerInlineScripts: () => [
+                //     'node_modules/lazysizes/lazysizes.min.js'
+                // ]
             },
 
             permalink: ({ video }) => {
@@ -61,7 +64,7 @@ class TV {
                         <div class="video-row relative w-full">
                             <div class="video-row-contents flex overflow-x-auto whitespace-no-wrap py-2 space-x-6" style="scroll-snap-type:x mandatory;">
 
-                                ${ video.payload.relatedVideos.map(VideoCard) }
+                                ${ video.payload.relatedVideos.map( this.boundComponent(VideoCard) ) }
 
                             </div>
                             <button class="absolute left-0 h-10 w-10 flex justify-center items-center transform -translate-y-1/2 -translate-x-1/2 bg-darker rounded-full" style="top:50%;">