-
-
- ![${video.name}]()
-
+ ${ posterHtml }
{
+ const [ minutes, seconds ] = timestamp.time.split(':')
+
+ return {
+ ...timestamp,
+ inSeconds: (minutes * 60) + Number(seconds)
+ }
+ })
+
+ return timestampsForRender.map( timestamp => (/* html */`
+
+ `) ).join('')
+}
+
+export default async function ( video, options = {} ) {
+ const {
+ coverBottomHtml = ''
+ // classes = 'w-full flex-shrink-0 flex-grow-0 border-2 border-transparent rounded-2xl overflow-hidden'
+ } = options
+
+ // Setup inline player script
+ await this.usingComponent( 'node_modules/can-autoplay/build/can-autoplay.min.js' )
+
+ await this.usingComponent( 'helpers/lite-youtube.js' )
+
+ // Setup inline lazysizes
+ await this.usingComponent( 'node_modules/lazysizes/lazysizes.min.js' )
+
+ // console.log('video', video)
+
+ const posterHtml = renderPoster( video )
+
+ const timestampsHtml = renderTimestamps( video )
+
+ return /* html */`
+
+
+
+
+ `
+}
diff --git a/components-eleventy/video/poster.js b/components-eleventy/video/poster.js
new file mode 100644
index 0000000..d78d888
--- /dev/null
+++ b/components-eleventy/video/poster.js
@@ -0,0 +1,32 @@
+
+
+export default function ( video ) {
+ const webpSource = {
+ ...video.thumbnail,
+ srcset: video.thumbnail.srcset.replaceAll('ytimg.com/vi/', 'ytimg.com/vi_webp/').replace(/.png|.jpg|.jpeg/g, '.webp')
+ }
+
+ const mergedSources = {
+ webp: webpSource,
+ jpeg: video.thumbnail
+ }
+
+ return /* html */`
+
+
+ ${ Object.entries( mergedSources ).map( ([ key, source ]) => (/* html */`
+
+ `) ).join('') }
+
+ ![${ video.name }]()
+
+ `
+}
diff --git a/components-eleventy/video/row.js b/components-eleventy/video/row.js
index 308e9c5..a796970 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',
@@ -23,18 +23,23 @@ export default function ( videos, options = {} ) {
const uid = Math.random().toString(36).substr(2, 9)
const rowId = `row-${ uid }`
+ // Setup inline scroll script
+ await this.usingComponent( 'helpers/scroll.js' )
+
// Setup inline lazysizes
- this.usingComponent( 'helpers/scroll.js' )
+ await this.usingComponent( 'node_modules/lazysizes/lazysizes.min.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/components/navbar.vue b/components/navbar.vue
index 58d0796..b9985e2 100644
--- a/components/navbar.vue
+++ b/components/navbar.vue
@@ -143,9 +143,9 @@
'underline px-3 py-2 rounded-md text-xs font-medium leading-5 focus:outline-none focus:text-white focus:bg-gray-700 transition duration-150 ease-in-out',
//($nuxt.$route.path === item.url) ? 'text-white bg-darker hover:text-white neumorphic-shadow' : 'text-gray-300 hover:bg-darker hover:neumorphic-shadow'
]"
- href="https://amzn.to/334Oyu6"
+ href="https://track.adtraction.com/t/t?a=1404987138&as=1609291769&t=2&tk=1&url=https://surfshark.com/blog/m1-chip-compatibility"
>
- 🖥 M1 iMac is now available for preorder
+ ✅ Surfshark VPN is now Apple Silicon native!
+
+
+
+
+
+
+ ${ posterHtml }
+
+
+
+