Merge branch 'feat/eleventy' into feat/nuxt-incremental

# Conflicts:
#	package-lock.json

helpers/build-payload.js

@@ -4,7 +4,7 @@ import { appsRelatedToVideo, videosRelatedToVideo, videosRelatedToApp } from './
 // import videoList from '~/static/video-list.json'
 
 
-export function buildVideoPayload ( video, allVideoAppsList, videoList ) {
+export function buildVideoPayload ( video, allVideoAppsListSet, videoListSet ) {
     // const { appsRelatedToVideo, videosRelatedToVideo } = await import('~/helpers/related.js')
     // const { default: videoList } = await import('~/static/video-list.json')
 
@@ -12,26 +12,26 @@ export function buildVideoPayload ( video, allVideoAppsList, videoList ) {
     // const video = videoList.find(video => (video.slug === slug))
 
     // Get featured apps
-    const featuredApps = appsRelatedToVideo( video, allVideoAppsList )
+    const featuredApps = appsRelatedToVideo( video, allVideoAppsListSet )
 
     // Get related videos
-    const relatedVideos = videosRelatedToVideo( video, allVideoAppsList, videoList )
+    const relatedVideos = videosRelatedToVideo( video, allVideoAppsListSet, videoListSet )
 
     return {
         video,
         featuredApps,
         // If no related video found just get the 12 newest ones
-        relatedVideos: (relatedVideos.length !== 0) ? relatedVideos : videoList.slice(0, 12)
+        relatedVideos: (relatedVideos.length !== 0) ? relatedVideos.slice(0, 24) : Array.from(videoListSet).slice(0, 12)
     }
 }
 
 
-export function buildAppBenchmarkPayload ( app, allVideoAppsList, videoList ) {
-    // const { allVideoAppsList } = await import('~/helpers/get-list.js')
+export function buildAppBenchmarkPayload ( app, allVideoAppsListSet, videoListSet ) {
+    // const { allVideoAppsListSet } = await import('~/helpers/get-list.js')
 
     // const { videosRelatedToApp } = await import('~/helpers/related.js')
 
-    // const app = allVideoAppsList.find(app => (app.slug === slug))
+    // const app = allVideoAppsListSet.find(app => (app.slug === slug))
 
     const submitVideoCard = {
         endpoint: `https://docs.google.com/forms/d/e/1FAIpQLSeEVGM9vE7VcfLMy6fJkfU70X2VZ60rHDyhDQLtnAN4nso0WA/viewform?usp=pp_url&entry.1018125313=${app.name}`
@@ -39,7 +39,7 @@ export function buildAppBenchmarkPayload ( app, allVideoAppsList, videoList ) {
 
     // const featuredApps = []
 
-    const relatedVideos = videosRelatedToApp( app, videoList ).map(video => {
+    const relatedVideos = videosRelatedToApp( app, videoListSet ).map(video => {
         // console.log('video', video)
         return {
             ...video,

helpers/build-video-list.js

@@ -87,6 +87,30 @@ const generateVideoTags = function ( video ) {
     return videoTags
 }
 
+const makeThumbnailData = function ( thumbnails ) {
+
+    let maxWidth = 0
+    Object.entries( thumbnails ).forEach(([thumbnailKey, thumbnail]) => {
+        if (thumbnail.width > maxWidth) maxWidth = thumbnail.width
+    })
+
+    const sizes = `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`
+
+    const srcset = Object.entries( thumbnails ).map(([thumbnailKey, thumbnail]) => {
+        // console.log('thumbnail', thumbnail)
+        return `${thumbnail.url} ${thumbnail.width}w`
+    }).join(', ')
+
+
+    const src = thumbnails.default.url
+
+    return {
+        sizes,
+        srcset,
+        src
+    }
+}
+
 export default async function ( applist ) {
 
     // Fetch Commits
@@ -139,14 +163,15 @@ export default async function ( applist ) {
             lastUpdated,
             apps,
             slug,
-            channel:{
+            channel: {
                 name: fetchedVideos[videoId].rawData.snippet.channelTitle,
                 id: fetchedVideos[videoId].rawData.snippet.channelId
             },
             // Convert tags set into array
             tags: Array.from(tags),
             timestamps: fetchedVideos[videoId].timestamps,
-            thumbnails: fetchedVideos[videoId].rawData.snippet.thumbnails,
+            // thumbnails: fetchedVideos[videoId].rawData.snippet.thumbnails,
+            thumbnail: makeThumbnailData( fetchedVideos[videoId].rawData.snippet.thumbnails ),
             endpoint: getVideoEndpoint({
                 slug
             })

helpers/categories.js

@@ -1,3 +1,5 @@
+// Universal JS imports only
+
 
 // Contains all types of properies to keep data consistent
 export const categoryTemplate = {
@@ -10,62 +12,85 @@ export const categoryTemplate = {
 
 export const categories = {
 
+    'no-category': {
+        id: 0
+    },
+
     // App lists
     'developer-tools': {
+        id: 1,
         ...categoryTemplate,
         label: 'Developer Tools',
         pluralLabel: 'Developer Tools',
         slug: 'developer-tools',
     },
+
     'productivity-tools': {
+        id: 2,
         ...categoryTemplate,
         label: 'Productivity Tools',
         pluralLabel: 'Productivity Tools',
         slug: 'productivity-tools',
     },
+
     'video-and-motion-tools': {
+        id: 3,
         ...categoryTemplate,
         label: 'Video and Motion Tools',
         pluralLabel: 'Video and Motion Tools',
         slug: 'video-and-motion-tools',
     },
+
     'social-and-communication': {
+        id: 4,
         ...categoryTemplate,
         label: 'Social and Communication',
         pluralLabel: 'Social and Communication Apps',
         slug: 'social-and-communication',
     },
+
     'entertainment-and-media-apps': {
+        id: 5,
         ...categoryTemplate,
         label: 'Entertainment and Media Apps',
         pluralLabel: 'Entertainment and Media Apps',
         slug: 'entertainment-and-media-apps',
     },
+
     'music-and-audio-tools': {
+        id: 6,
         ...categoryTemplate,
         label: 'Music and Audio Tools',
         pluralLabel: 'Music and Audio Tools',
         slug: 'music-and-audio-tools',
     },
+
     'photo-and-graphic-tools': {
+        id: 7,
         ...categoryTemplate,
         label: 'Photo and Graphic Tools',
         pluralLabel: 'Photo and Graphic Tools',
         slug: 'photo-and-graphic-tools',
     },
+
     'science-and-research-software': {
+        id: 8,
         ...categoryTemplate,
         label: 'Science and Research Software',
         pluralLabel: 'Science and Research Software',
         slug: 'science-and-research-software',
     },
+
     '3d-and-architecture': {
+        id: 9,
         ...categoryTemplate,
         label: '3D and Architecture',
         pluralLabel: '3D and Architecture Applications',
         slug: '3d-and-architecture',
     },
+
     'vpns-security-and-privacy': {
+        id: 10,
         ...categoryTemplate,
         label: 'VPNs, Security, and Privacy',
         pluralLabel: 'VPN, Security, and Privacy Applications',
@@ -74,6 +99,7 @@ export const categories = {
 
     // Special Lists
     'games': {
+        id: 100,
         ...categoryTemplate,
         label: 'Games',
         pluralLabel: 'Games',
@@ -87,6 +113,7 @@ export const categories = {
         ]
     },
     'homebrew': {
+        id: 101,
         ...categoryTemplate,
         label: 'Homebrew',
         pluralLabel: 'Homebrew Formulae',

helpers/get-list.js

@@ -21,9 +21,9 @@ export const allList = [
 ]
 
 
-export function makeAppSearchLinks ( app, videoList ) {
+export function makeAppSearchLinks ( app, videoListSet ) {
 
-    const videos = videosRelatedToApp( app, videoList )
+    const videos = videosRelatedToApp( app, videoListSet )
 
     // If there are no videos
     // then skip

helpers/related.js

@@ -1,15 +1,17 @@
-// import { allVideoAppsList } from '~/helpers/get-list.js'
+// import { allVideoAppsListSet } from '~/helpers/get-list.js'
 // import videoList from '~/static/video-list.json'
 
 export function matchesWholeWord (needle, haystack) {
     return new RegExp('\\b' + needle + '\\b').test(haystack)
 }
 
-export function appsRelatedToVideo ( video, allVideoAppsList ) {
+export function appsRelatedToVideo ( video, allVideoAppsListSet ) {
+    // console.log('allVideoAppsListSet', allVideoAppsListSet.length)
+
     const relatedApps = []
 
     // Find the apps listed in this video
-    for (const app of allVideoAppsList) {
+    for (const app of allVideoAppsListSet) {
         // console.log('video', video)
         // Skip this app if it's not listed in the videos apps
         if (!video.apps.includes(app.slug)) continue
@@ -21,16 +23,16 @@ export function appsRelatedToVideo ( video, allVideoAppsList ) {
     return relatedApps
 }
 
-export function videosRelatedToVideo ( video, allVideoAppsList, videoList ) {
+export function videosRelatedToVideo ( video, allVideoAppsListSet, videoListSet ) {
     const relatedVideos = {}
 
     // console.log('videoList', videoList[0])
-    // console.log('allVideoAppsList', allVideoAppsList[0])
+    // console.log('allVideoAppsListSet', allVideoAppsListSet[0])
 
-    const featuredApps = appsRelatedToVideo( video, allVideoAppsList )
+    const featuredApps = appsRelatedToVideo( video, allVideoAppsListSet )
 
     // Find other videos that also feature this video's app
-    for (const otherVideo of videoList) {
+    for (const otherVideo of videoListSet) {
         for (const app of featuredApps) {
             // console.log('otherVideo', otherVideo)
             // Skip if this app is not in the other video's apps
@@ -48,12 +50,14 @@ export function videosRelatedToVideo ( video, allVideoAppsList, videoList ) {
 }
 
 
-export function videosRelatedToApp ( app, videoList ) {
+export function videosRelatedToApp ( app, videoListSet ) {
+
+    // console.log('videoListSet', videoListSet)
 
     const relatedVideos = {}
 
     // Find other videos that also feature this video's app
-    for (const video of videoList) {
+    for (const video of videoListSet) {
         if (!video.apps.includes(app.slug)) continue
 
         relatedVideos[video.id] = video

helpers/scroll.js

@@ -0,0 +1,13 @@
+
+
+function scrollHorizontalCarousel ( event ) {
+    event.stopPropagation()
+
+    // console.log('event.target', event.currentTarget)
+    // console.log('distance', event.currentTarget.getAttribute('distance'))
+
+    const distance = Number(event.currentTarget.getAttribute('distance'))
+    const scrollTarget = document.querySelector(event.currentTarget.getAttribute('scroll-target'))
+
+    scrollTarget.scrollBy({ left: distance, behavior: 'smooth' })
+}

helpers/searchable-list.js

@@ -0,0 +1,84 @@
+// Universal JS imports only
+import { getAppCategory } from './categories.js'
+
+
+// Converts a list into a smaller searchable list
+// similar to a table/spreadsheet
+export function makeSearchableList ( listSet ) {
+    let firstLoop = true
+
+    const searchableList = new Set()
+
+    const tableHeader = new Set()
+
+    // const searchableKeys = new Set([
+    //     'name',
+    //     'text',
+    //     'lastUpdated',
+    //     'endpoint'
+    // ])
+
+    const makeSearchable = new Map([
+        [
+            'name',
+            item => {
+                // console.log('Running name method', item)
+                return item.name
+            }
+        ],
+        [
+            'text',
+            item => item.text
+        ],
+        [
+            'endpoint',
+            item => item.endpoint
+        ],
+        [
+            'category',
+            app => {
+                return getAppCategory( app ).id
+            }
+        ]
+    ])
+
+    listSet.forEach( ( searchableItem ) => {
+        // If this is the first items
+        // then store the keys
+        if ( firstLoop ) {
+            Object.keys(searchableItem).forEach( key => {
+                // console.log(key, makeSearchable.has(key))
+
+                if ( !makeSearchable.has(key) ) return
+
+                // Add to table header so we can loop it later on
+                tableHeader.add( key )
+            })
+
+            // Add keys to table head
+            searchableList.add( Array.from( tableHeader ) )
+
+            firstLoop = false
+        }
+        // This could cause an issue if the keys
+        // are out of order
+
+        // console.log('tableHeader', tableHeader)
+
+        const tableRow = []
+
+        // Loop through keys from table header
+        // and push them to this row
+        tableHeader.forEach( key => {
+            // console.log('searchableValue', key, searchableItem[key], makeSearchable.get(key)(searchableItem) )
+
+            tableRow.push( makeSearchable.get(key)(searchableItem) )
+        })
+
+        searchableList.add( tableRow )
+
+        return
+    })
+
+    return searchableList
+}