Merge branch 'develop'

functions/story-image-axis-svg.js

@@ -0,0 +1,60 @@
+exports.handler = async function(event, context) {
+    const {
+        //path, // Path parameter
+        //httpMethod, // Incoming request’s method name
+        // headers, // {Incoming request headers}
+        queryStringParameters, // {query string parameters }
+        // body, // A JSON string of the request payload
+        // isBase64Encoded, // A boolean flag to indicate if the applicable request payload is Base64-encode
+    } = event
+
+    // console.log('queryStringParameters', queryStringParameters)
+
+    const {
+        width = 200,
+        height = 100,
+        heading = 'Does It ARM'
+    } = queryStringParameters
+
+    return {
+        statusCode: 200,
+        headers: {
+            'Content-Type': 'image/svg+xml',
+        },
+        body: /* html */`
+            <svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 ${ width } ${ height }'>
+                <rect fill='#191a1d' width='${ width }' height='${ height }'/>
+                <defs>
+                    <linearGradient id='a' gradientUnits='userSpaceOnUse' x1='0' x2='0' y1='0' y2='${ height }'>
+                        <stop offset='0' stop-color='#191a1d'/>
+                        <stop offset='${ height }' stop-color='#292d31'/>
+                    </linearGradient>
+                    <linearGradient id='b' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='${ height }'>
+                        <stop offset='0' stop-color='#34393f' stop-opacity='0'/>
+                        <stop offset='${ height }' stop-color='#34393f' stop-opacity='${ height }'/>
+                    </linearGradient>
+                    <linearGradient id='c' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='${ width }' y2='${ width }'>
+                        <stop offset='0' stop-color='#34393f' stop-opacity='0'/>
+                        <stop offset='${ height }' stop-color='#34393f' stop-opacity='${ height }'/>
+                    </linearGradient>
+                </defs>
+                <rect x='0' y='0' fill='url(#a)' width='${ width }' height='${ height }'/>
+                <g fill-opacity='0.5'>
+                    <polygon fill='url(#b)' points='0 ${ height } 0 0 0 ${ width } 0'/>
+                    <polygon fill='url(#c)' points='${ width } ${ height } ${ width } 0 0 0'/>
+                </g>
+                <foreignObject x="${ width * 0.1 }" y="${ height * 0.1 }" width="${ width * 0.8 }" height="${ height * 0.8 }">
+                    <div
+                        xmlns="http://www.w3.org/1999/xhtml"
+                        style="
+                            font-size: 1px;
+                            color: white;
+                            font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Ubuntu, roboto, noto, arial, sans-serif;
+                            margin: 0;
+                        "
+                    >${ heading }</div>
+                </foreignObject>
+            </svg>
+        `
+    }
+}

helpers/build-video-list.js

@@ -84,23 +84,31 @@ const generateVideoTags = function ( video ) {
     return videoTags
 }
 
-const makeThumbnailData = function ( thumbnails ) {
+const makeThumbnailData = function ( thumbnails, widthLimit = null ) {
+
+    const thumbnailEntries = Object.entries( thumbnails )
+    const srcsetArray = []
 
     let maxWidth = 0
-    Object.entries( thumbnails ).forEach(([thumbnailKey, thumbnail]) => {
+
+    thumbnailEntries.forEach(([thumbnailKey, thumbnail]) => {
+        if ( widthLimit !== null &&  widthLimit < thumbnail.width) return
+
+        // If this width is more than known maxWidth
+        // then set maxWidth
         if (thumbnail.width > maxWidth) maxWidth = thumbnail.width
+
+        // Add this width to our srcset
+        srcsetArray.push(`${thumbnail.url} ${thumbnail.width}w`)
     })
 
+
     const sizes = `(max-width: ${maxWidth}px) 100vw, ${maxWidth}px`
-
+    const srcset = srcsetArray.join(', ')
-    const srcset = Object.entries( thumbnails ).map(([thumbnailKey, thumbnail]) => {
-        // console.log('thumbnail', thumbnail)
-        return `${thumbnail.url} ${thumbnail.width}w`
-    }).join(', ')
-
-
     const src = thumbnails.default.url
 
+    // console.log('srcsetArray', srcsetArray)
+
     return {
         sizes,
         srcset,
@@ -170,7 +178,7 @@ export default async function ( applist ) {
             tags: Array.from(tags),
             timestamps: fetchedVideos[videoId].timestamps,
             // thumbnails: fetchedVideos[videoId].rawData.snippet.thumbnails,
-            thumbnail: makeThumbnailData( fetchedVideos[videoId].rawData.snippet.thumbnails ),
+            thumbnail: makeThumbnailData( fetchedVideos[videoId].rawData.snippet.thumbnails, 700 ),
             endpoint: getVideoEndpoint({
                 slug
             })

netlify.toml

@@ -1,6 +1,7 @@
 [build]
   publish = "dist/"
   command = "npm run generate --quiet"
+  # functions = "functions/"
 
 
 
@@ -16,7 +17,7 @@
   from = "/app/node"
   to = "/app/nodejs"
   status = 301
-  
+
 # old git redirect
 [[redirects]]
   from = "/app/git"
@@ -34,16 +35,16 @@
   from = "/kind/photo-tools"
   to = "/kind/photo-and-graphic-tools/"
   status = 301
-  
+
-  
+
  # Other Redirects
- 
+
 # Random broken link from Chinese sites
 [[redirects]]
   from = "/。"
   to = "/"
   status = 301
-  
+
 [[redirects]]
   from = "/%E3%80%82"
   to = "/"

pages-eleventy/app.11ty.js

@@ -94,7 +94,7 @@ export class AppTemplate {
 
         return /* html */`
             <section class="container py-32">
-                <div class="flex flex-col items-center text-center">
+                <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0">
                     <h1 class="title text-sm md:text-2xl font-bold">
                         ${ data.mainHeading }
                     </h1>

pages/game/_slug/index.vue

@@ -1,14 +1,19 @@
 <template>
     <section class="container py-32">
         <div class="flex flex-col items-center text-center">
-            <h1 class="title text-sm md:text-2xl font-bold">
-                Does {{ app.name }} work on Apple Silicon?
-            </h1>
-            <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
-                {{ app.text }}
-            </h2>
 
-            <ThomasCredit />
+            <div class="intro-content flex flex-col items-center text-center min-h-3/4-screen md:min-h-0">
+
+                <h1 class="title text-sm md:text-2xl font-bold">
+                    Does {{ app.name }} work on Apple Silicon?
+                </h1>
+                <h2 class="subtitle text-2xl md:text-5xl font-bold py-6">
+                    {{ app.text }}
+                </h2>
+
+                <ThomasCredit />
+
+            </div>
 
 
             <div