From 07de16fa1ce3fee9ff9bd0fffc40ccb2fe0934d9 Mon Sep 17 00:00:00 2001
From: Maximilian Kaske <56969857+mxkaske@users.noreply.github.com>
Date: Wed, 8 Nov 2023 21:28:18 +0100
Subject: [PATCH] chore: use next image component (#455)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* chore: use next image component

* fix: rename images

* fix: move file

* 🤔

* 🤣 fun stats

---------

Co-authored-by: Thibault Le Ouay <thibaultleouay@gmail.Com>
---
 .../latency.png => example-latency.png}            | Bin
 ...ithub-trending.png => github-trending-list.png} | Bin
 apps/web/src/components/content/article.tsx        |  10 ++--------
 apps/web/src/components/content/changelog.tsx      |  10 ++--------
 apps/web/src/components/content/timeline.tsx       |  13 ++++---------
 apps/web/src/components/marketing/stats.tsx        |   2 +-
 .../posts/migration-planetscale-to-turso.mdx       |   2 +-
 apps/web/src/content/posts/the-first-48-hours.mdx  |   2 +-
 8 files changed, 11 insertions(+), 28 deletions(-)
 rename apps/web/public/assets/posts/{migration-planetscale-to-turso/latency.png => example-latency.png} (100%)
 rename apps/web/public/assets/posts/{the-first-48-hours/github-trending.png => github-trending-list.png} (100%)

diff --git a/apps/web/public/assets/posts/migration-planetscale-to-turso/latency.png b/apps/web/public/assets/posts/example-latency.png
similarity index 100%
rename from apps/web/public/assets/posts/migration-planetscale-to-turso/latency.png
rename to apps/web/public/assets/posts/example-latency.png
diff --git a/apps/web/public/assets/posts/the-first-48-hours/github-trending.png b/apps/web/public/assets/posts/github-trending-list.png
similarity index 100%
rename from apps/web/public/assets/posts/the-first-48-hours/github-trending.png
rename to apps/web/public/assets/posts/github-trending-list.png
diff --git a/apps/web/src/components/content/article.tsx b/apps/web/src/components/content/article.tsx
index 199ddefb..94859e19 100644
--- a/apps/web/src/components/content/article.tsx
+++ b/apps/web/src/components/content/article.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import type { Post } from "contentlayer/generated";
 
@@ -19,18 +20,11 @@ export function Article({ post }: { post: Post }) {
       <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">
diff --git a/apps/web/src/components/content/changelog.tsx b/apps/web/src/components/content/changelog.tsx
index 0fb041ca..f83ebc18 100644
--- a/apps/web/src/components/content/changelog.tsx
+++ b/apps/web/src/components/content/changelog.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import type { Changelog } from "contentlayer/generated";
 
 import { Mdx } from "@/components/content/mdx";
@@ -12,18 +13,11 @@ export function Changelog({ post }: { post: Changelog }) {
         </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>
diff --git a/apps/web/src/components/content/timeline.tsx b/apps/web/src/components/content/timeline.tsx
index 19d06191..e96b0e81 100644
--- a/apps/web/src/components/content/timeline.tsx
+++ b/apps/web/src/components/content/timeline.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 
 import { formatDate } from "@/lib/utils";
@@ -45,17 +46,11 @@ function Article({
       </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>
diff --git a/apps/web/src/components/marketing/stats.tsx b/apps/web/src/components/marketing/stats.tsx
index 7f05c4d3..4d75c0ad 100644
--- a/apps/web/src/components/marketing/stats.tsx
+++ b/apps/web/src/components/marketing/stats.tsx
@@ -36,7 +36,7 @@ export async function Stats() {
         <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>
diff --git a/apps/web/src/content/posts/migration-planetscale-to-turso.mdx b/apps/web/src/content/posts/migration-planetscale-to-turso.mdx
index 83753d37..ce7137d6 100644
--- a/apps/web/src/content/posts/migration-planetscale-to-turso.mdx
+++ b/apps/web/src/content/posts/migration-planetscale-to-turso.mdx
@@ -1,12 +1,12 @@
 ---
 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 ? 🏗️
diff --git a/apps/web/src/content/posts/the-first-48-hours.mdx b/apps/web/src/content/posts/the-first-48-hours.mdx
index bd4a2952..b1e0bee4 100644
--- a/apps/web/src/content/posts/the-first-48-hours.mdx
+++ b/apps/web/src/content/posts/the-first-48-hours.mdx
@@ -1,11 +1,11 @@
 ---
 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 🎢
-- 
2.51.2