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

Setup inline scripts and styles

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

68
.eleventy.js
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 {

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

@ -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 */`

7
layouts-eleventy/default.11ty.js
View file

@ -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>
`;

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

@ -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%;">