add future image

next.config.js

@@ -8,6 +8,12 @@ const nextConfig = nextTranslate({
   poweredByHeader: false,
   images: {
     domains: ['webmention.io', 'i.gr-assets.com'],
+    formats: ['image/avif', 'image/webp'],
+  },
+  experimental: {
+    images: {
+      allowFutureImage: true,
+    },
   },
   async redirects() {
     return [

public/rss/feed.xml

@@ -4,7 +4,7 @@
         <title>The David Dias | Front-End Developer, podcaster &amp; content creator</title>
         <link>https://thedaviddias.dev</link>
         <description>Hey, I'm David Dias! Front-End Developer based in Toronto/Canada. I love talking about code, technology, expatriation and life.</description>
-        <lastBuildDate>Fri, 12 Aug 2022 16:54:46 GMT</lastBuildDate>
+        <lastBuildDate>Fri, 12 Aug 2022 19:28:59 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>en</language>

public/rss/fr/feed.xml

@@ -4,7 +4,7 @@
         <title>The David Dias | Développeur Front-End, podcasteur &amp; créateur de contenu</title>
         <link>https://thedaviddias.dev</link>
         <description>Salut toi! Je m'appele David Dias. Je suis développeur Front-End, podcasteur, créateur de contenu numérique passioné pour résoudre les problèmes digitaux et humains! J'aime rencontré de nouvelles personnes, bâtir des communautées et parler de tech, d'expatriation et de web.</description>
-        <lastBuildDate>Fri, 12 Aug 2022 16:54:46 GMT</lastBuildDate>
+        <lastBuildDate>Fri, 12 Aug 2022 19:28:59 GMT</lastBuildDate>
         <docs>https://validator.w3.org/feed/docs/rss2.html</docs>
         <generator>https://github.com/jpmonette/feed</generator>
         <language>fr</language>

src/components/Author/Author.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from 'next/future/image'
 import useTranslation from 'next-translate/useTranslation'
 import { FC } from 'react'
 
@@ -21,12 +21,13 @@ export const Author: FC<AuthorProps> = ({ name, routes }) => {
           <div className="flex items-center">
             <div>
               <Image
-                className="inline-block rounded-full"
+                className="inline-block rounded-full h-auto max-w-xl"
                 src="/images/david-dias-round.png"
                 width={40}
                 height={40}
                 alt="Profile avatar of David Dias"
                 aria-hidden="true"
+                priority={true}
               />
             </div>
             <div className="ml-3 text-left">

src/components/SteamCard/SteamCard.tsx

@@ -24,6 +24,7 @@ export const SteamCard = () => {
 
   const count = data?.count
   const recently = data?.recently
+  const playtime = recently?.playtime_2weeks as number
 
   if (error) return <></>
   if (!data) return <div>Loading...</div>
@@ -34,7 +35,7 @@ export const SteamCard = () => {
       <MetricsCard
         header={`Most played game duration: ${recently?.name}`}
         side="(last 2 weeks)"
-        stat={prettyMilliseconds(recently?.playtime_2weeks || 1 * 60000)}
+        stat={prettyMilliseconds(playtime * 60000)}
       />
     </div>
   )

src/components/ToolCard/ToolCard.tsx

@@ -1,4 +1,4 @@
-import Image from 'next/image'
+import Image from 'next/future/image'
 import useTranslation from 'next-translate/useTranslation'
 import { FC } from 'react'
 

src/components/Webmentions/Webmentions.tsx

@@ -1,5 +1,5 @@
 import { formatDistance } from 'date-fns'
-import Image from 'next/image'
+import Image from 'next/future/image'
 import useTranslation from 'next-translate/useTranslation'
 import { FC, useState } from 'react'
 
@@ -29,7 +29,7 @@ export const Webmentions: FC<WebMentionsProps> = ({ mentions }) => {
 
       {mentions?.length ? (
         <>
-          <ul className="flex">
+          <ul className="flex relative">
             {mentions?.map((mention, i) => (
               <li className={`flex flex-col ${i > 0 && '-ml-8'}`} key={i}>
                 <CustomLink href={mention.data.url} className="mr-2" icon={false}>
@@ -38,7 +38,7 @@ export const Webmentions: FC<WebMentionsProps> = ({ mentions }) => {
                     alt={mention.data.author.name}
                     width={53}
                     height={53}
-                    className="rounded-full border w-4 h-4 absolute top-1 left-0 object-cover"
+                    className="rounded-full border"
                   />
                 </CustomLink>
               </li>
@@ -71,7 +71,7 @@ export const Webmentions: FC<WebMentionsProps> = ({ mentions }) => {
                       alt={mention.data.author.name}
                       width={45}
                       height={45}
-                      className="rounded-full border w-4 h-4 absolute top-1 left-0 object-cover"
+                      className="rounded-full border"
                     />
                   </CustomLink>
                   <div className="col-span-7">

src/pages/_document.tsx

@@ -1,5 +1,4 @@
 import Document, { Head, Html, Main, NextScript } from 'next/document'
-import Script from 'next/script'
 
 export default class MyDocument extends Document {
   render() {

src/pages/index.tsx

@@ -1,6 +1,6 @@
 import type { GetStaticProps, NextPage } from 'next'
 import dynamic from 'next/dynamic'
-import Image from 'next/image'
+import Image from 'next/future/image'
 import { NextSeo } from 'next-seo'
 import useTranslation from 'next-translate/useTranslation'
 
@@ -80,11 +80,12 @@ const Home: NextPage<HomeProps> = ({ articles, notes, ghProjects }) => {
           </div>
           <div className="hidden lg:block">
             <Image
-              className="rounded-full"
+              className="rounded-full w-60 h-60"
               src="/images/david-dias-round.jpg"
               width={250}
               height={250}
               alt="Photo of David Dias"
+              priority={true}
             />
           </div>
         </section>