Setup inline scripts and styles

This commit is contained in:
Sam Carlton 2021-01-23 16:53:25 -06:00
parent 5cc0703508
commit 60a43c2f39
4 changed files with 78 additions and 7 deletions

View file

@ -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 {