Openstatus www.openstatus.dev

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 <thibaultleouay@gmail.Com>

authored by

Maximilian Kaske
Thibault Le Ouay
and committed by
GitHub
07de16fa 51ef5cd1

+11 -28
apps/web/public/assets/posts/migration-planetscale-to-turso/latency.png apps/web/public/assets/posts/example-latency.png
+2 -8
apps/web/src/components/content/article.tsx
··· 1 + import Image from "next/image"; 1 2 import Link from "next/link"; 2 3 import type { Post } from "contentlayer/generated"; 3 4 ··· 19 20 <div className="mx-auto grid w-full max-w-prose gap-3"> 20 21 <h1 className="font-cal mb-5 text-3xl">{post.title}</h1> 21 22 <div className="border-border relative h-64 w-full overflow-hidden rounded-lg border"> 22 - {/* <Image 23 + <Image 23 24 src={post.image} 24 25 fill={true} 25 26 alt={post.title} 26 27 className="object-cover" 27 - /> */} 28 - {/* HOTFIX: plain `img` */} 29 - {/* eslint-disable-next-line @next/next/no-img-element */} 30 - <img 31 - src={post.image} 32 - alt={post.title} 33 - className="h-full w-full object-cover" 34 28 /> 35 29 </div> 36 30 <div className="flex items-center gap-3">
+2 -8
apps/web/src/components/content/changelog.tsx
··· 1 + import Image from "next/image"; 1 2 import type { Changelog } from "contentlayer/generated"; 2 3 3 4 import { Mdx } from "@/components/content/mdx"; ··· 12 13 </p> 13 14 <h1 className="font-cal mb-5 text-3xl">{post.title}</h1> 14 15 <div className="border-border relative h-64 w-full overflow-hidden rounded-lg border"> 15 - {/* <Image 16 + <Image 16 17 src={post.image} 17 18 fill={true} 18 19 alt={post.title} 19 20 className="object-cover" 20 - /> */} 21 - {/* HOTFIX: plain `img` */} 22 - {/* eslint-disable-next-line @next/next/no-img-element */} 23 - <img 24 - src={post.image} 25 - alt={post.title} 26 - className="h-full w-full object-cover" 27 21 /> 28 22 </div> 29 23 </div>
+4 -9
apps/web/src/components/content/timeline.tsx
··· 1 + import Image from "next/image"; 1 2 import Link from "next/link"; 2 3 3 4 import { formatDate } from "@/lib/utils"; ··· 45 46 </time> 46 47 <div className="relative order-1 h-64 w-full md:order-2 md:col-span-4"> 47 48 <Link href={href}> 48 - {/* same reason as blog post - missing image on prod */} 49 - {/* <Image 50 - src={imageSrc} 51 - fill={true} 52 - alt={title} 53 - className="border-border rounded-md border object-cover" 54 - /> */} 55 - <img 49 + <Image 56 50 src={imageSrc} 51 + fill={true} 57 52 alt={title} 58 - className="border-border h-64 w-full rounded-md border object-cover" 53 + className="border-border rounded-md border object-cover" 59 54 /> 60 55 </Link> 61 56 </div>
+1 -1
apps/web/src/components/marketing/stats.tsx
··· 36 36 <div className="text-center"> 37 37 <h3 className="font-cal text-3xl"> 38 38 {/* {numberFormatter(totalActiveMonitors)} */} 39 - 900+ 39 + 1500+ 40 40 </h3> 41 41 <p className="text-muted-foreground font-light">Active monitors</p> 42 42 </div>
+1 -1
apps/web/src/content/posts/migration-planetscale-to-turso.mdx
··· 1 1 --- 2 2 title: Why we migrated from PlanetScale to Turso. 3 + image: /assets/posts/example-latency.png 3 4 description: 4 5 Discover the reasons behind our decision to use Turso as our main database. 5 6 author: 6 7 name: Thibault Le Ouay Ducasse 7 8 url: https://twitter.com/thibaultleouay 8 9 publishedAt: 2023-08-20 9 - image: /assets/posts/migration-planetscale-to-turso/latency.png 10 10 --- 11 11 12 12 ## What are we building ? 🏗️
+1 -1
apps/web/src/content/posts/the-first-48-hours.mdx
··· 1 1 --- 2 2 title: 48 hours of public OpenStatus 3 + image: /assets/posts/github-trending-list.png 3 4 description: The numbers, limits we faced and consequences we have taken. 4 5 author: 5 6 name: Maximilian Kaske 6 7 url: https://twitter.com/mxkaske 7 8 publishedAt: 2023-08-02 8 - image: /assets/posts/the-first-48-hours/github-trending.png 9 9 --- 10 10 11 11 ## 48 hours of Rollercoaster 🎢