feat: cover image (#586)

* feat: cover image

* refactor(ogImage): use pwa module meta config

* ci: nuxt generate rather than export

* chore(env): VERCEL_GITHUB_COMMIT_SHA

* chore: remove dotenv

* fix(env): base url force protocol

Co-authored-by: Damien Robinson <damien.robinson@xcommedia.com.au>

.travis.yml

@@ -9,7 +9,7 @@ cache: npm
 script:
   - npm run lint
   # - npm run test
-  - npm run build:export
+  - npm run generate
   - npx semantic-release
 
 deploy:

components/hero.vue

@@ -4,9 +4,9 @@
       <v-col cols="12" align-self="center">
         <v-card :color="color" flat dark tile>
           <v-img
-            :lazy-src="lazySrc"
-            :src="src"
-            :src-set="srcSet"
+            :lazy-src="src.placeholder"
+            :src="src.src"
+            :srcset="src.srcSet"
             :height="height"
             width="1785"
             sizes="(max-width: 1785px) 100vw, 1785px"
@@ -51,16 +51,8 @@ export default {
     },
   },
   computed: {
-    lazySrc() {
-      return require(`~/assets/img/header-bg.jpg?lqip`);
-    },
     src() {
-      return require(`~/assets/img/header-bg.jpg?resize&size=1785&placeholder`)
-        .src;
-    },
-    srcSet() {
-      return require(`~/assets/img/header-bg.jpg?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&sizes[]=4686&format=webp`)
-        .srcSet;
+      return require(`~/assets/img/header-bg.jpg?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&sizes[]=4686&placeholder&format=webp`);
     },
   },
 };

images.js

@@ -1,8 +1,43 @@
+const { readdir } = require('fs').promises;
+const { resolve } = require('path');
 const sharp = require('sharp');
 
+/**
+ * https://stackoverflow.com/questions/5827612/node-js-fs-readdir-recursive-directory-search
+ * @param {String} dir
+ */
+async function* getFiles(dir) {
+  const dirents = await readdir(dir, { withFileTypes: true });
+  for (const dirent of dirents) {
+    const res = resolve(dir, dirent.name);
+    if (dirent.isDirectory()) {
+      yield* getFiles(res);
+    } else {
+      yield res;
+    }
+  }
+}
+
 const file = 'assets/img/header-bg.jpg';
 sharp(file)
   .resize(4686)
   .toFile(`assets/img/header-bg-1.jpg`, (err, info) => {
     console.log(err, info);
   });
+
+sharp(file)
+  .resize({ width: 1200, height: 600 })
+  .toFile(`static/cover.jpg`, (err, info) => {
+    console.log(err, info);
+  });
+
+(async () => {
+  const folder = 'assets/img/portfolio';
+  // get list of urls to crawl from content files
+  for await (const filename of getFiles(folder)) {
+    const buffer = await sharp(filename)
+      .resize({ width: 4686, height: 2636 })
+      .toBuffer();
+    sharp(buffer).toFile(filename);
+  }
+})();

nuxt.config.js

@@ -1,15 +1,31 @@
 import pkg from './package';
 
-const STORYBLOK_TOKEN =
-  process.env.STORYBLOK_TOKEN || 'kycw6YWwjgilZCDf6Xb6kAtt';
+const BASE_URL = (
+  process.env.BASE_URL ||
+  process.env.DEPLOY_URL ||
+  process.env.URL ||
+  process.env.VERCEL_URL ||
+  `http${process.env.PORT === 433 ? 's' : ''}://${process.env.HOST}:${
+    process.env.PORT
+  }`
+).replace(/(^http[s]?)?(?::\/\/)?(.*)/, function (
+  _,
+  protocol = 'http',
+  domain,
+) {
+  return `${protocol}://${domain}`;
+});
 
 const env = {
   HOST: process.env.HOST,
   PORT: process.env.PORT,
+  BASE_URL,
   VERSION: pkg.version,
-  COMMIT: process.env.npm_package_gitHead || process.env.TRAVIS_COMMIT,
+  COMMIT:
+    process.env.npm_package_gitHead ||
+    process.env.TRAVIS_COMMIT ||
+    process.env.VERCEL_GITHUB_COMMIT_SHA,
   DATE_GENERATED: new Date().toISOString(),
-  STORYBLOK_TOKEN,
 };
 
 export default {
@@ -74,6 +90,18 @@ export default {
     noscript: [{ innerHTML: 'This website requires JavaScript.' }],
   },
 
+  pwa: {
+    meta: {
+      ogHost: env.BASE_URL,
+      ogImage: {
+        path: '/cover.jpg',
+        width: 1200,
+        height: 600,
+        type: 'image/jpg',
+      },
+    },
+  },
+
   /*
    ** Customize the progress-bar color
    */
@@ -106,13 +134,12 @@ export default {
     // 'bootstrap-vue/nuxt',
     '@nuxtjs/axios',
     '@nuxtjs/pwa',
-    '@nuxtjs/dotenv',
+    // '@nuxtjs/dotenv',
     '@nuxtjs/markdownit',
     'nuxt-fontawesome',
     'nuxt-i18n',
     // 'nuxt-webfontloader',
     // 'nuxt-purgecss',
-    // 'storyblok-nuxt',
 
     // always declare the sitemap module at end of array
     '@nuxtjs/sitemap',
@@ -159,10 +186,6 @@ export default {
     mode: 'postcss',
   },
 
-  // storyblok: {
-  //   accessToken: STORYBLOK_TOKEN,
-  // },
-
   sitemap: {
     hostname: 'https://daim.dev',
   },
@@ -176,6 +199,14 @@ export default {
 
   webfontloader: {},
 
+  dotenv: {
+    systemvars: true,
+  },
+
+  eslint: {
+    cache: true,
+  },
+
   /*
    ** Build configuration
    */

package.json

@@ -18,13 +18,12 @@
     "dev": "nuxt",
     "build": "nuxt build --modern",
     "build:analyze": "nuxt build --analyze",
-    "build:export": "npm run build && npm run generate",
-    "now-build": "npm run build:export",
+    "now-build": "npm run generate",
     "start": "cross-env NODE_ENV=production nuxt start",
     "serve:lhci": "npm run start",
     "storyblok:export": "storyblok-component-export && npm run lint:fix",
     "storyblok:migrate": "storyblok-migrate --content-migrations --component-migrations",
-    "generate": "cross-env HOST=localhost PORT=3001 nuxt export --modern",
+    "generate": "nuxt generate --modern",
     "lint": "eslint --ext .js,.vue --ignore-path .gitignore . && npm run lint:md",
     "lint:fix": "eslint --ext .js,.vue --ignore-path .gitignore . --fix && npm run lint:md -- -o",
     "lint:md": "remark . -r .remarkrc.js -f",

pages/portfolio.vue

@@ -25,14 +25,14 @@
           <v-img
             v-if="image"
             alt=""
-            :lazy-src="lazySrc(image)"
+            :lazy-src="src(image).placeholder"
             :src="src(image).src"
-            :srcset="srcSet(image).srcSet"
+            :srcset="src(image).srcSet"
             :aspect-ratio="16 / 9"
-            contain
             :style="{
               backgroundColor: backgroundColor(image)[0],
             }"
+            sizes="(max-width: 600px) 100vw, 50vw"
             class="flex-grow-0"
           ></v-img>
           <v-card-title class="text-break">
@@ -143,28 +143,13 @@ export default {
     ],
   }),
   methods: {
-    assetsPath: require.context(
-      '~/assets/img/portfolio',
-      false,
-      /\.(png|jpe?g|svg).*$/,
-    ),
     backgroundColor: require.context(
       '~/assets/img/portfolio?lqip-colors',
       false,
       /\.(png|jpe?g|svg).*$/,
     ),
-    lazySrc: require.context(
-      `~/assets/img/portfolio?lqip`,
-      false,
-      /\.(png|jpe?g|svg).*$/,
-    ),
     src: require.context(
-      `~/assets/img/portfolio?resize&size=1785&placeholder`,
-      false,
-      /\.(png|jpe?g|svg).*$/,
-    ),
-    srcSet: require.context(
-      `~/assets/img/portfolio?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&sizes[]=4686&format=webp`,
+      `~/assets/img/portfolio?resize&sizes[]=320&sizes[]=600&sizes[]=900&sizes[]=1785&placeholder&format=webp`,
       false,
       /\.(png|jpe?g|svg).*$/,
     ),