chore: use next image component (#455)

* chore: use next image component

* fix: rename images

* fix: move file

* 🤔

* 🤣 fun stats

---------

Co-authored-by: Thibault Le Ouay <[e-mail]>

apps/web/src/components/content/article.tsx

···
+import Image from "next/image";
 import Link from "next/link";
 import type { Post } from "contentlayer/generated";
 
···
       <div className="mx-auto grid w-full max-w-prose gap-3">
         <h1 className="font-cal mb-5 text-3xl">{post.title}</h1>
         <div className="border-border relative h-64 w-full overflow-hidden rounded-lg border">
-          {/* <Image
+          <Image
             src={post.image}
             fill={true}
             alt={post.title}
             className="object-cover"
-          /> */}
-          {/* HOTFIX: plain `img` */}
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={post.image}
-            alt={post.title}
-            className="h-full w-full object-cover"
           />
         </div>
         <div className="flex items-center gap-3">

apps/web/src/components/content/changelog.tsx

···
+import Image from "next/image";
 import type { Changelog } from "contentlayer/generated";
 
 import { Mdx } from "@/components/content/mdx";
···
         </p>
         <h1 className="font-cal mb-5 text-3xl">{post.title}</h1>
         <div className="border-border relative h-64 w-full overflow-hidden rounded-lg border">
-          {/* <Image
+          <Image
             src={post.image}
             fill={true}
             alt={post.title}
             className="object-cover"
-          /> */}
-          {/* HOTFIX: plain `img` */}
-          {/* eslint-disable-next-line @next/next/no-img-element */}
-          <img
-            src={post.image}
-            alt={post.title}
-            className="h-full w-full object-cover"
           />
         </div>
       </div>

apps/web/src/components/content/timeline.tsx

···
+import Image from "next/image";
 import Link from "next/link";
 
 import { formatDate } from "@/lib/utils";
···
       </time>
       <div className="relative order-1 h-64 w-full md:order-2 md:col-span-4">
         <Link href={href}>
-          {/* same reason as blog post - missing image on prod */}
-          {/* <Image
-          src={imageSrc}
-          fill={true}
-          alt={title}
-          className="border-border rounded-md border object-cover"
-        /> */}
-          <img
+          <Image
             src={imageSrc}
+            fill={true}
             alt={title}
-            className="border-border h-64 w-full rounded-md border object-cover"
+            className="border-border rounded-md border object-cover"
           />
         </Link>
       </div>

apps/web/src/components/marketing/stats.tsx

···
         <div className="text-center">
           <h3 className="font-cal text-3xl">
             {/* {numberFormatter(totalActiveMonitors)} */}
-            900+
+            1500+
           </h3>
           <p className="text-muted-foreground font-light">Active monitors</p>
         </div>

apps/web/src/content/posts/migration-planetscale-to-turso.mdx

···
 ---
 title: Why we migrated from PlanetScale to Turso.
+image: /assets/posts/example-latency.png
 description:
   Discover the reasons behind our decision to use Turso as our main database.
 author:
   name: Thibault Le Ouay Ducasse
   url: https://twitter.com/thibaultleouay
 publishedAt: 2023-08-20
-image: /assets/posts/migration-planetscale-to-turso/latency.png
 ---
 
 ## What are we building ? 🏗️

apps/web/src/content/posts/the-first-48-hours.mdx

···
 ---
 title: 48 hours of public OpenStatus
+image: /assets/posts/github-trending-list.png
 description: The numbers, limits we faced and consequences we have taken.
 author:
   name: Maximilian Kaske
   url: https://twitter.com/mxkaske
 publishedAt: 2023-08-02
-image: /assets/posts/the-first-48-hours/github-trending.png
 ---
 
 ## 48 hours of Rollercoaster 🎢