Merge pull request #32 from gabrielcaiana/perf

Perf

components/ Author/Author.vue

@@ -4,12 +4,11 @@
       :to="`/articles/author/${author.name}`"
       class="flex transition-shadow duration-150 ease-in-out shadow-sm hover:shadow-md xxlmax:flex-col"
     >
-      <img
+      <nuxt-img
         v-if="author.image"
-        loading="lazy"
-        class="h-32 xxlmin:w-1/2 xxlmax:w-full object-cover rounded-md"
         :src="author.image"
         :alt="author.name"
+        class="h-32 xxlmin:w-1/2 xxlmax:w-full object-cover rounded-md"
       />
       <div class="flex flex-col m-4">
         <p class="font-general-medium text-white">{{ author.name }}</p>

components/ Author/__snapshots__/Author.spec.js.snap

@@ -7,10 +7,9 @@ exports[`Author create Snapshot 1`] = `
   <a
     class="flex transition-shadow duration-150 ease-in-out shadow-sm hover:shadow-md xxlmax:flex-col"
   >
-    <img
+    <nuxt-img
       alt="Gabriel Caiana"
       class="h-32 xxlmin:w-1/2 xxlmax:w-full object-cover rounded-md"
-      loading="lazy"
       src="images/me.jpg"
     />
      

components/Header/Header.spec.js

@@ -1,19 +1,18 @@
 import { mount, RouterLinkStub } from '@vue/test-utils'
 import Header from '~/components/Header/Header.vue'
-import HamburguerMenu from "~/components/HamburguerMenu/HamburguerMenu.vue"
-import MenuMobile from "~/components/MenuMobile/MenuMobile.vue"
+import HamburguerMenu from '~/components/HamburguerMenu/HamburguerMenu.vue'
+import MenuMobile from '~/components/MenuMobile/MenuMobile.vue'
 
 describe('Header', () => {
-
-  let wrapper;
-
+  let wrapper
+
   beforeAll(() => {
     wrapper = mount(Header, {
       stubs: {
         NuxtLink: RouterLinkStub,
         HamburguerMenu,
-        MenuMobile
-      }
+        MenuMobile,
+      },
     })
   })
 

components/Header/Header.vue

@@ -2,7 +2,7 @@
   <header class="flex justify-center items-center py-24 px-8">
     <div class="flex justify-between items-center w-[864px] m-auto">
       <nuxt-link to="/">
-        <img width="170" src="/images/logo.svg" alt="Gabriel Caiana" />
+        <nuxt-img width="170" src="/images/logo.svg" alt="Gabriel Caiana" />
       </nuxt-link>
       <ul
         v-if="isMobile.width > 901"

components/Person/Person.vue

@@ -7,12 +7,7 @@
       rel="noopener"
       href="https://www.linkedin.com/in/gabrielcaiana/"
     >
-      <img
-        loading="lazy"
-        class="rounded-md"
-        :src="avatar"
-        alt="Gabriel Caiana"
-      />
+      <nuxt-img :src="avatar" alt="Gabriel Caiana" class="rounded-md" />
     </a>
   </div>
 </template>

components/ProjectCard/ProjectCard.vue

@@ -6,9 +6,8 @@
     <article
       class="relative w-auto h-64 bg-cover bg-center group overflow-hidden shadow-lg hover:shadow-2xl rounded-t-lg transition duration-300 ease-in-out"
     >
-      <img
+      <nuxt-img
         class="h-full object-cover"
-        loading="lazy"
         :src="card.cover"
         :alt="card.name"
       />

components/SocialMedia/SocialMedia.vue

@@ -5,7 +5,13 @@
       :key="index"
       class="cursor-pointer"
     >
-      <a :href="icon.url" target="_blank" rel="noopener">
+      <a
+        :href="icon.url"
+        :title="icon.name"
+        :aria-label="icon.name"
+        target="_blank"
+        rel="noopener"
+      >
         <component :is="`${icon.name}`" />
       </a>
     </li>
@@ -34,7 +40,7 @@ export default {
   props: {
     socialMedia: {
       type: Array,
-      required: true,
+      default: () => [],
     },
   },
 }

nuxt.config.ts

@@ -57,6 +57,7 @@ export default {
     '@nuxt/typescript-build',
     '@nuxt/postcss8',
     '@/modules/ngrok',
+    '@nuxt/image',
   ],
 
   modules: [
@@ -67,13 +68,9 @@ export default {
     '@nuxtjs/google-analytics',
     '@nuxtjs/proxy',
     '@nuxtjs/pwa',
-    '@nuxtjs/gtm',
+    '@nuxtjs/robots',
   ],
 
-  gtm: {
-    id: process.env.GOOGLE_TAG_MANAGER_ID,
-  },
-
   googleAnalytics: {
     id: process.env.GOOGLE_ANALYTICS_ID,
   },
@@ -105,9 +102,6 @@ export default {
       appId: process.env.APP_ID,
       apiKey: process.env.API_KEY,
     },
-    gtm: {
-      id: process.env.GOOGLE_TAG_MANAGER_ID,
-    },
   },
 
   privateRuntimeConfig: {
@@ -142,6 +136,11 @@ export default {
     },
   },
 
+  robots: {
+    UserAgent: '*',
+    Disallow: '/',
+  },
+
   build: {
     postcss: {
       plugins: {

package.json

@@ -18,8 +18,8 @@
     "@nuxt/content": "^1.14.0",
     "@nuxtjs/axios": "^5.13.6",
     "@nuxtjs/dotenv": "^1.4.1",
-    "@nuxtjs/gtm": "^2.4.0",
     "@nuxtjs/proxy": "^2.1.0",
+    "@nuxtjs/robots": "^2.5.0",
     "@nuxtjs/sitemap": "^2.4.0",
     "core-js": "^3.15.1",
     "nuxt": "^2.15.7",
@@ -30,6 +30,7 @@
   "devDependencies": {
     "@commitlint/cli": "^17.1.2",
     "@commitlint/config-conventional": "^17.1.0",
+    "@nuxt/image": "^0.7.1",
     "@nuxt/postcss8": "^1.1.3",
     "@nuxt/types": "^2.15.8",
     "@nuxt/typescript-build": "^2.1.0",

pages/Career.vue

@@ -7,8 +7,7 @@
         :key="index"
         class="lg:flex lg:flex-row mb-8 md:mb-4 sm:flex md:flex-col md:items-start"
       >
-        <img
-          loading="lazy"
+        <nuxt-img
           class="w-24 h-24 rounded-lg mb-8 cursor-pointer"
           :src="job.image"
           :alt="job.name"

pages/articles/_slug.vue

@@ -8,12 +8,7 @@
       class="text-white font-body font-general-regular mx-0 mb-6"
       v-text="article.description"
     ></p>
-    <img
-      class="rounded-md"
-      loading="lazy"
-      :src="article.img"
-      :alt="article.alt"
-    />
+    <nuxt-img class="rounded-md" :src="article.img" :alt="article.alt" />
 
     <nuxt-content class="text-white" :document="article" />
 

pages/articles/author/_author.vue

@@ -8,7 +8,7 @@
         <NuxtLink
           :to="{ name: 'articles-slug', params: { slug: article.slug } }"
         >
-          <img loading="lazy" :src="article.img" :alt="article.alt" />
+          <nuxt-img :src="article.img" :alt="article.alt" />
           <div>
             <h2>{{ article.title }}</h2>
             <p>{{ article.description }}</p>

plugins/algolia.ts

@@ -8,56 +8,62 @@ export default function ({ $config }: any, inject: any) {
   }
 
   inject('algoliaApi', {
-      getJobs,
-      getProjects,
-      getAbout
-  });
+    getJobs,
+    getProjects,
+    getAbout,
+  })
 
-  async function getJobs () {
+  async function getJobs() {
     try {
-        const response = await fetch(`https://${appId}-dsn.algolia.net/1/indexes/jobs/`,  {
-        headers,
-      })
+      const response = await fetch(
+        `https://${appId}-dsn.algolia.net/1/indexes/jobs/`,
+        {
+          headers,
+        }
+      )
 
-      if(response.ok && response.status === 200) {
+      if (response.ok && response.status === 200) {
         const jobs = await response.json()
         return jobs.hits
-      } 
-
-    } catch(error) {
-      console.log(error)
+      }
+    } catch (error) {
+      console.error(error)
     }
-  };
+  }
 
-  async function getProjects () {
+  async function getProjects() {
     try {
-        const response = await fetch(`https://${appId}-dsn.algolia.net/1/indexes/projects/`,  {
-        headers,
-      })
+      const response = await fetch(
+        `https://${appId}-dsn.algolia.net/1/indexes/projects/`,
+        {
+          headers,
+        }
+      )
 
-      if(response.ok && response.status === 200) {
+      if (response.ok && response.status === 200) {
         const projects = await response.json()
         return projects.hits
-      } 
-
-    } catch(error) {
-      console.log(error)
+      }
+    } catch (error) {
+      console.error(error)
     }
-  };
+  }
 
-  async function getAbout () {
+  async function getAbout() {
     try {
-        const response = await fetch(`https://${appId}-dsn.algolia.net/1/indexes/about/`,  {
-        headers,
-      })
+      const response = await fetch(
+        `https://${appId}-dsn.algolia.net/1/indexes/about/`,
+        {
+          headers,
+        }
+      )
 
-      if(response.ok && response.status === 200) {
+      if (response.ok && response.status === 200) {
         const about = await response.json()
         return about.hits[0]
-      } 
-
-    } catch(error) {
-      console.log(error)
+      }
+    } catch (error) {
+      console.error(error)
     }
   }
 }

tsconfig.json

@@ -15,7 +15,7 @@
       "~/*": ["./*"],
       "@/*": ["./*"]
     },
-    "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node"]
+    "types": ["@nuxt/types", "@nuxtjs/axios", "@types/node", "@nuxt/image"]
   },
   "exclude": ["node_modules", ".nuxt", "dist"]
 }