style: apply prettier formatting

app/api/revalidate/route.ts

@@ -25,7 +25,7 @@ export async function POST(request: NextRequest) {
   if (!secret) {
     return NextResponse.json(
       { error: "Webhook not configured" },
-      { status: 500 }
+      { status: 500 },
     );
   }
 

app/blog/page.tsx

@@ -13,12 +13,12 @@ async function ArticleList({ page }: { page: Promise<string | undefined> }) {
 
   const totalPages = Math.max(
     1,
-    Math.ceil(articles.length / ARTICLES_PER_PAGE)
+    Math.ceil(articles.length / ARTICLES_PER_PAGE),
   );
   const currentPage = Math.min(Math.max(1, Number(pageParam) || 1), totalPages);
   const paginatedArticles = articles.slice(
     (currentPage - 1) * ARTICLES_PER_PAGE,
-    currentPage * ARTICLES_PER_PAGE
+    currentPage * ARTICLES_PER_PAGE,
   );
 
   return (

app/components/BlogCard.tsx

@@ -14,11 +14,11 @@ export default function BlogCard({ article, compact }: BlogCardProps) {
       href={`/blog/${id}`}
       className={clsx(
         "group flex items-center justify-between border-b border-black/10 transition-colors hover:border-black/30",
-        compact ? "py-3" : "py-5"
+        compact ? "py-3" : "py-5",
       )}
     >
       <div className="min-w-0 flex-1">
-        <h3 className="font-serif text-lg font-bold transition-transform group-hover:translate-x-1">
+        <h3 className="font-serif text-base font-bold transition-transform group-hover:translate-x-1 md:text-lg">
           {title}
         </h3>
         <p className="pt-1 text-sm text-zinc-400">

app/components/BlogPreview.tsx

@@ -16,7 +16,7 @@ export default async function BlogPreview() {
         <Image
           src={dancingStar}
           alt="Little star dancing with light rays"
-          className="absolute -top-12 -right-32 animate-grow-and-shrink"
+          className="absolute -top-12 -right-32 animate-grow-and-shrink max-md:hidden"
         />
         <SectionTitle className="from-brand-orange to-brand-gold p-6">
           Nos derniers articles

app/components/ContactUs.tsx

@@ -21,7 +21,7 @@ export default function ContactUs({
         isLight
           ? "border-black text-black hover:bg-black/10"
           : "border-white text-white hover:bg-white/20",
-        className
+        className,
       )}
     >
       Nous contacter

app/components/Cover.tsx

@@ -38,7 +38,7 @@ export default function Cover() {
           </div>
         </div>
         <div className="flex flex-[4_4_0%] justify-center">
-          <div className="w-5/6 sm:max-md:h-72 max-sm:h-64 md:pb-32">
+          <div className="h-64 w-5/6 sm:h-72 md:h-auto md:pb-32">
             <Animation src="animations/laughing-smile.riv" />
           </div>
         </div>

app/components/CoverBackground.tsx

@@ -18,15 +18,15 @@ export default function CoverBackground({ children }: CoverBackgroundProps) {
       }}
     >
       <div
-        className="absolute inset-y-0 right-0 -left-32 -z-10"
+        className="absolute inset-y-0 right-0 left-0 -z-10 md:-left-32"
         style={{
           background:
             "linear-gradient(90deg, #f9fafb1a 1%, transparent 1%) 1px 0, transparent",
           backgroundSize: "200px 1px",
         }}
       />
       <div
-        className="absolute right-0 bottom-0 -top-32 -left-[126px] -z-10"
+        className="absolute right-0 bottom-0 top-0 left-0 -z-10 md:-top-32 md:-left-[126px]"
         style={{
           opacity: 0.1,
           background:

app/components/Menu.client.tsx

@@ -31,15 +31,15 @@ export default function Menu({ variant = "dark" }: MenuProps) {
           ? "fixed inset-0 z-50 bg-opacity-95 backdrop-blur-sm backdrop-filter"
           : "inset-x-0 z-10",
         mobileOpen && (isLight ? "bg-white" : "bg-[#08143f]"),
-        !mobileOpen && (isLight ? "relative" : "absolute")
+        !mobileOpen && (isLight ? "relative" : "absolute"),
       )}
       onClick={mobileOpen ? () => setMobileOpen(false) : () => {}}
     >
       <div className="max-w-screen-2xl px-4 pt-6 lg:px-24 xl:px-32">
         <div
           className={clsx(
             "flex flex-col",
-            isLight ? "text-black" : "text-white"
+            isLight ? "text-black" : "text-white",
           )}
         >
           <div className="flex items-center justify-between">

app/components/NotionRenderer.tsx

@@ -118,9 +118,9 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
     case "heading_2":
     case "heading_3": {
       const config = {
-        heading_1: { tag: "h2" as const, size: "text-2xl" },
-        heading_2: { tag: "h3" as const, size: "text-xl" },
-        heading_3: { tag: "h4" as const, size: "text-lg" },
+        heading_1: { tag: "h2" as const, size: "text-xl md:text-2xl" },
+        heading_2: { tag: "h3" as const, size: "text-lg md:text-xl" },
+        heading_3: { tag: "h4" as const, size: "text-base md:text-lg" },
       }[block.type];
       const richText = getBlockRichText(block);
       if (!richText) return null;
@@ -140,7 +140,7 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
               {block.code.language}
             </span>
           )}
-          <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-4">
+          <pre className="overflow-x-auto rounded-lg bg-zinc-900 p-2 md:p-4">
             <code className="text-sm text-zinc-100">
               {extractPlainText(block.code.rich_text)}
             </code>
@@ -185,7 +185,7 @@ function BlockRenderer({ block }: { block: NotionBlock }) {
                 ? extractPlainText(block.image.caption)
                 : ""
             }
-            className="rounded-lg"
+            className="max-w-full rounded-lg"
           />
           {block.image.caption.length > 0 && (
             <figcaption className="pt-2 text-center text-sm text-zinc-500">

app/components/Pagination.tsx

@@ -23,7 +23,7 @@ function getPageNumbers(currentPage: number, totalPages: number): PageItem[] {
       totalPages - 3,
       totalPages - 2,
       totalPages - 1,
-      totalPages
+      totalPages,
     );
   } else {
     pages.push(
@@ -32,7 +32,7 @@ function getPageNumbers(currentPage: number, totalPages: number): PageItem[] {
       currentPage,
       currentPage + 1,
       "ellipsis",
-      totalPages
+      totalPages,
     );
   }
 
@@ -81,12 +81,12 @@ export default function Pagination({
               "grid h-10 w-10 place-items-center rounded-2xl border text-sm font-medium",
               page === currentPage
                 ? "border-black bg-black text-white"
-                : "border-black bg-transparent text-black hover:bg-black/10"
+                : "border-black bg-transparent text-black hover:bg-black/10",
             )}
           >
             {page}
           </Link>
-        )
+        ),
       )}
 
       {currentPage < totalPages ? (

app/components/Portfolio.tsx

@@ -19,7 +19,7 @@ export default function Portfolio() {
         <Image
           src={dancingStar}
           alt="Little star dancing with light rays"
-          className="absolute -top-12 -left-32 animate-grow-and-shrink"
+          className="absolute -top-12 -left-32 animate-grow-and-shrink max-md:hidden"
         />
         <SectionTitle className="from-brand-orange to-brand-gold p-6">
           Nos dernières victoires

app/components/Stack.tsx

@@ -57,8 +57,8 @@ export default function Stack() {
         De Rails à l'IA, on maîtrise la stack qu'il vous
         faut.
       </p>
-      <div className="my-16 grid grid-cols-1 gap-8 md:max-xl:mx-8 xl:grid-cols-[13fr_7fr]">
-        <div className="px-10 pt-10 md:rounded-3xl md:border-[1px] md:border-black xl:col-start-1 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
+      <div className="my-16 grid grid-cols-1 gap-8 md:mx-8 md:grid-cols-[13fr_7fr] xl:mx-0">
+        <div className="px-4 pt-10 md:rounded-3xl md:border-[1px] md:border-black md:px-10 xl:col-start-1 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
           <div>
             <h3 className="pb-3 font-serif text-2xl font-bold">
               Notre arsenal favori
@@ -120,7 +120,7 @@ export default function Stack() {
             </StackGroup>
           </div>
         </div>
-        <div className="p-10 md:rounded-3xl md:border-[1px] md:border-black xl:col-start-2 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
+        <div className="p-4 md:rounded-3xl md:border-[1px] md:border-black md:p-10 xl:col-start-2 xl:row-span-4 xl:grid xl:[grid-template-rows:subgrid]">
           <div>
             <h3 className="pb-3 font-serif text-2xl font-bold">
               Intelligence Artificielle

app/components/Team.tsx

@@ -85,26 +85,26 @@ export default function Team() {
               src={patioNicolas}
               alt="Picture of Nicolas from above in a the patio with a laptop looking surprised"
               placeholder="blur"
-              className="border-8 border-white object-cover drop-shadow-lg"
-              width={470}
+              className="w-full border-8 border-white object-cover drop-shadow-lg"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
           <div className="flex">
             <Image
               src={officeMehdiNicolas}
               alt="Picture of Mehdi and Nicolas looking at code on a laptop screen in an office"
               placeholder="blur"
-              className="border-8 border-white object-cover"
-              width={470}
+              className="w-full border-8 border-white object-cover"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
           <div className="flex">
             <Image
               src={patioAlexisLili}
               alt="Picture of Alexis and Lili with a laptop smiling in the patio"
               placeholder="blur"
-              className="border-8 border-white object-cover"
-              width={470}
+              className="w-full border-8 border-white object-cover"
+              sizes="(max-width: 768px) 50vw, 470px"
             />
           </div>
         </div>

app/components/Values.tsx

@@ -40,7 +40,7 @@ export default function Values() {
         <Image
           src={underline}
           alt="Handrawing of a strike through to mimic an underline"
-          className="absolute -bottom-4"
+          className="absolute -bottom-4 max-md:hidden"
         />
         <h3 className="pb-6 font-serif text-4xl font-bold text-[#0074dd]">
           Nos plus-values

components/Disclosure.client.tsx

@@ -20,7 +20,7 @@ export default function CustomDisclosure({
     <Disclosure {...props}>
       {({ open }) => (
         <div className="mb-6 rounded-md border-[1px] border-black text-zinc-900">
-          <Disclosure.Button className="flex w-full justify-between rounded-md px-4 py-2 text-2xl font-bold">
+          <Disclosure.Button className="flex w-full justify-between rounded-md px-3 py-2 text-lg font-bold md:px-4 md:text-2xl">
             <span className="text-left">{title}</span>
             <ChevronUpIcon
               className={`${open ? "" : "rotate-180 transform"} h-8 w-8`}

components/SectionTitle.tsx

@@ -13,7 +13,7 @@ export default function SectionTitle({
     <h2
       className={clsx(
         "bg-gradient-to-r bg-clip-text font-serif text-4xl font-bold text-transparent lg:text-5xl",
-        className
+        className,
       )}
     >
       {children}

lib/notion.ts

@@ -65,10 +65,10 @@ export function extractPlainText(richText: RichTextItemResponse[]): string {
 }
 
 function extractPageMeta(
-  page: PageObjectResponse
+  page: PageObjectResponse,
 ): Omit<ArticleMeta, "author"> | null {
   const titleProp = Object.values(page.properties).find(
-    (prop) => prop.type === "title"
+    (prop) => prop.type === "title",
   );
   if (!titleProp || titleProp.type !== "title") return null;
 
@@ -107,7 +107,7 @@ const MAX_BLOCK_DEPTH = 5;
 
 async function fetchAllBlocks(
   blockId: string,
-  depth = 0
+  depth = 0,
 ): Promise<NotionBlock[]> {
   if (depth >= MAX_BLOCK_DEPTH) return [];
 
@@ -127,11 +127,13 @@ async function fetchAllBlocks(
         if (block.has_children) {
           block.children = await fetchAllBlocks(block.id, depth + 1);
         }
-      })
+      }),
     );
     blocks.push(...typed);
 
-    cursor = response.has_more ? response.next_cursor ?? undefined : undefined;
+    cursor = response.has_more
+      ? (response.next_cursor ?? undefined)
+      : undefined;
   } while (cursor);
 
   return blocks;
@@ -153,7 +155,7 @@ export async function fetchArticles(): Promise<ArticleMeta[]> {
     });
 
     const pages = response.results.filter(
-      (r): r is PageObjectResponse => "properties" in r
+      (r): r is PageObjectResponse => "properties" in r,
     );
 
     const articles = await Promise.all(
@@ -162,7 +164,7 @@ export async function fetchArticles(): Promise<ArticleMeta[]> {
         if (!meta) return null;
         const author = await resolveAuthor(p);
         return { ...meta, author } satisfies ArticleMeta;
-      })
+      }),
     );
 
     return articles.filter((a): a is ArticleMeta => a !== null);
@@ -173,7 +175,7 @@ export async function fetchArticles(): Promise<ArticleMeta[]> {
 }
 
 export async function fetchArticleById(
-  id: string
+  id: string,
 ): Promise<ArticleFull | null> {
   "use cache";
   cacheLife("max");