fix(hero): image max width (#553)

* fix(hero): image max width

* chore(lighthouse): use nuxt start

* fix: spelling

* fix(resume): href blank use rel noopener

* fix(hero): up scale image to 4686

* refactor(hero): use image rather than parallax

* refactor(hero): make gradient a prop

* perf: import icons as needed

* perf: extract css

* fix(home): add missing hero component import

* fix(lighthouse): unused javascript off

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

.eslintrc.js

@@ -4,6 +4,9 @@ module.exports = {
     browser: true,
     node: true,
   },
+  parserOptions: {
+    parser: 'babel-eslint',
+  },
   extends: [
     '@nuxtjs',
     'prettier',

components/feature.vue

@@ -8,7 +8,7 @@
       <span class="h3 text-break text-no-wrap text-truncate">
         <font-awesome-icon
           v-if="blok.icon"
-          :icon="blok.icon | split"
+          :icon="blok.icon"
           class="grey--text"
         />
         {{ blok.name || blok.heading }}
@@ -52,13 +52,6 @@
 <script>
 import { mdiOpenInNew } from '@mdi/js';
 export default {
-  filters: {
-    split(value, sep = ' ') {
-      if (!value) return '';
-      value = value.toString();
-      return value.split(sep);
-    },
-  },
   props: { blok: { type: Object, required: true } },
   data() {
     return {

components/hero.vue

@@ -1,38 +1,67 @@
 <template>
-  <header>
-    <v-parallax
-      :lazy-src="require(`~/assets/img/header-bg.jpg?lqip`)"
-      :src="
-        require('~/assets/img/header-bg.jpg?resize&size=1785&placeholder').src
-      "
-      :src-set="
-        require(`~/assets/img/header-bg.jpg?resize&max=1785&min=320&steps=6`)
-          .srcSet
-      "
-      :style="{
-        backgroundColor: require('~/assets/img/header-bg.jpg?lqip-colors')[0],
-      }"
-      size="100vw"
-    >
-      <v-row align="center" justify="center">
-        <v-col class="text-center" cols="12">
-          <h1 v-if="heading" class="mb-4 text-light text-shadow">
-            {{ heading }}
-          </h1>
-          <h2 v-if="subheading" class="subheading text-light text-shadow">
-            {{ subheading }}
-          </h2>
-        </v-col>
-      </v-row>
-    </v-parallax>
-  </header>
+  <v-container class="pa-0" style="max-width: 1785px;">
+    <v-row no-gutters align="center" justify="center">
+      <v-col cols="12" align-self="center">
+        <v-card :color="color" flat dark tile>
+          <v-img
+            :lazy-src="lazySrc"
+            :src="src"
+            :src-set="srcSet"
+            :height="height"
+            width="1785"
+            sizes="(max-width: 1785px) 100vw, 1785px"
+            :gradient="gradient"
+            alt=""
+          >
+            <v-container
+              class="fill-height align-items-end justify-start"
+              fluid
+            >
+              <v-row align="center" justify="center">
+                <v-col class="text-center" cols="12">
+                  <h1 v-if="heading" class="mb-4 text-shadow">
+                    {{ heading }}
+                  </h1>
+                  <h2 v-if="subheading" class="subheading text-shadow">
+                    {{ subheading }}
+                  </h2>
+                </v-col>
+              </v-row>
+            </v-container>
+          </v-img>
+        </v-card>
+      </v-col>
+    </v-row>
+  </v-container>
 </template>
 
 <script>
 export default {
   props: {
-    heading: { type: String, required: false, default: null },
-    subheading: { type: String, required: false, default: null },
+    heading: { type: String, default: null },
+    subheading: { type: String, default: null },
+    gradient: {
+      type: String,
+      default: 'rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)',
+    },
+    height: { type: [Number, String], default: 500 },
+    color: {
+      type: String,
+      default: require(`~/assets/img/header-bg.jpg?lqip-colors`)[0],
+    },
+  },
+  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;
+    },
   },
 };
 </script>

images.js

@@ -0,0 +1,8 @@
+const sharp = require('sharp');
+
+const file = 'assets/img/header-bg.jpg';
+sharp(file)
+  .resize(4686)
+  .toFile(`assets/img/header-bg-1.jpg`, (err, info) => {
+    console.log(err, info);
+  });

layouts/default.vue

@@ -44,7 +44,7 @@
           :src="require('~/assets/img/logo.svg?inline')"
           class="navbar-brand"
           height="24"
-          contain
+          width="60"
           alt="Daim"
         />
       </v-toolbar-title>

lighthouserc.json

@@ -12,7 +12,8 @@
       "assertions": {
         "color-contrast": "off",
         "unused-css-rules": "off",
-        "uses-http2": "off"
+        "uses-http2": "off",
+        "unused-javascript": "off"
       }
     },
     "upload": {

nuxt.config.js

@@ -87,7 +87,7 @@ export default {
   /*
    ** Plugins to load before mounting the App
    */
-  plugins: ['~/plugins/components.js'],
+  plugins: [],
 
   /*
    ** Nuxt.js dev-modules
@@ -124,19 +124,6 @@ export default {
    */
   axios: {},
 
-  fontawesome: {
-    imports: [
-      {
-        set: '@fortawesome/free-solid-svg-icons',
-        icons: ['fas'],
-      },
-      {
-        set: '@fortawesome/free-brands-svg-icons',
-        icons: ['fab'],
-      },
-    ],
-  },
-
   i18n: {
     baseUrl: 'https://daim.dev',
     seo: false,
@@ -160,6 +147,14 @@ export default {
     mozjpeg: {
       quality: 50,
     },
+    responsive: {
+      adapter: require('responsive-loader/sharp'),
+      sharp: {
+        format: {
+          webp: true,
+        },
+      },
+    },
   },
 
   purgeCSS: {
@@ -192,7 +187,7 @@ export default {
       chunk: ({ isDev }) =>
         isDev ? '[name].js' : 'chunks/[id].[contenthash].js',
     },
-    // extractCSS: true,
+    extractCSS: true,
     /*
      ** You can extend webpack config here
      */