fix: remove lazy loading from LCP images

package.json

@@ -27,7 +27,9 @@
     "react-copy-to-clipboard": "^5.1.1",
     "react-dom": "19.2.7",
     "react-share": "^5.3.0",
+    "rehype-stringify": "^10.0.1",
     "remark-parse": "^11.0.0",
+    "remark-rehype": "^11.1.2",
     "rss": "^1.2.2",
     "schema-dts": "^2.0.0",
     "simple-xml-to-json": "^1.2.7",

src/components/CookingCTA.tsx

@@ -4,9 +4,10 @@ import Link from 'next/link';
 
 type CookingCTAProps = {
   imageUrl?: string;
+  priority?: boolean;
 };
 
-export function CookingCTA({ imageUrl }: CookingCTAProps) {
+export function CookingCTA({ imageUrl, priority = false }: CookingCTAProps) {
   return (
     <section className="my-lg md:my-xl overflow-hidden md:px-0">
       <div className="bg-gradient-to-r from-primary/20 to-accent/20 rounded-xl p-md md:p-xl relative">
@@ -47,7 +48,7 @@ export function CookingCTA({ imageUrl }: CookingCTAProps) {
                     fill
                     sizes="(max-width: 640px) 208px, (max-width: 768px) 256px, 320px"
                     className="object-cover"
-                    priority={false}
+                    priority={priority}
                   />
                 </div>
               </Link>

src/components/Markdown.tsx

@@ -1,20 +1,12 @@
-import { MDXRemote, type MDXRemoteProps } from 'next-mdx-remote-client/rsc';
-
-const components: MDXRemoteProps['components'] = {
-  // break-words evita overflow horizontal com palavras/URLs longas do CMS;
-  // tabelas viram blocos roláveis em vez de alargar a página no mobile
-  wrapper: ({ children }) => (
-    <section className="max-w-article break-words [&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto">
-      {children}
-    </section>
-  ),
+type MarkdownProps = {
+  html: string;
 };
 
-export function Markdown(props: MDXRemoteProps) {
+export function Markdown({ html }: MarkdownProps) {
   return (
-    <MDXRemote
-      {...props}
-      components={{ ...components, ...(props.components || {}) }}
+    <section
+      className="max-w-article break-words [&_table]:block [&_table]:max-w-full [&_table]:overflow-x-auto"
+      dangerouslySetInnerHTML={{ __html: html }}
     />
   );
 }

src/methods/markdownToHtml.ts

@@ -0,0 +1,13 @@
+import { unified } from 'unified';
+import remarkParse from 'remark-parse';
+import remarkRehype from 'remark-rehype';
+import rehypeStringify from 'rehype-stringify';
+
+export async function markdownToHtml(markdown: string): Promise<string> {
+  const result = await unified()
+    .use(remarkParse)
+    .use(remarkRehype)
+    .use(rehypeStringify)
+    .process(markdown ?? '');
+  return String(result);
+}

src/pages/categorias/[slug].tsx

@@ -58,6 +58,7 @@ export default function CategoryPage({ category, recipes, pagination }: Props) {
                       src={category.imagens[0].url}
                       alt={category.nome}
                       fill
+                      priority
                       className="object-cover"
                     />
                   </div>
@@ -83,6 +84,7 @@ export default function CategoryPage({ category, recipes, pagination }: Props) {
             recipes={recipes}
             pagination={pagination ?? undefined}
             variant="compact"
+            firstRecipePriority
           />
         </section>
       </div>

src/pages/conheca-a-lets.tsx

@@ -4,6 +4,7 @@ import type { GetStaticProps } from 'next';
 import { JsonLd } from 'src/components/JsonLd';
 import { Markdown } from 'src/components/Markdown';
 import { RecipesList } from 'src/components/RecipesList';
+import { markdownToHtml } from 'src/methods/markdownToHtml';
 import { getLetsCozinha, getLetsCozinhaLets } from 'src/cms/singleTypes';
 import { getLetsSchema } from 'src/methods/getLetsSchema';
 import { getPageTitle } from 'src/methods/getPageTitle';
@@ -22,13 +23,15 @@ type LetsProfile = {
 
 type Props = {
   letsProfile: LetsProfile;
+  textoCompletoHtml: string;
   favoriteRecipes: Recipe[];
   letsSchema: any;
   asideData: AsideData;
 };
 
 export default function ConhecaALets({
   letsProfile,
+  textoCompletoHtml,
   favoriteRecipes,
   letsSchema,
 }: Props) {
@@ -88,7 +91,7 @@ export default function ConhecaALets({
 
         <section className="max-w-4xl mx-auto">
           <div className="prose prose-lg prose-headings:font-heading prose-headings:text-text-dark prose-p:text-text-light prose-a:text-primary">
-            <Markdown source={letsProfile.texto_completo} />
+            <Markdown html={textoCompletoHtml} />
           </div>
         </section>
 
@@ -138,6 +141,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
   return {
     props: {
       letsProfile,
+      textoCompletoHtml: await markdownToHtml(letsProfile.texto_completo ?? ''),
       favoriteRecipes,
       letsSchema:
         letsSchemaResult.status === 'fulfilled' && letsSchemaResult.value

src/pages/ebooks/[slug].tsx

@@ -7,24 +7,27 @@ import { JsonLd } from 'src/components/JsonLd';
 import { LinkButton } from 'src/components/LinkButton';
 import { Markdown } from 'src/components/Markdown';
 import { getEbook, getAllEbooks, type Ebook } from 'src/cms/ebooks';
+import { markdownToHtml } from 'src/methods/markdownToHtml';
 import { getPageTitle } from 'src/methods/getPageTitle';
 import { getUrl } from 'src/methods/getUrl';
 import { getWebsiteName } from 'src/methods/getWebsiteName';
 import { getAsideData, type AsideData } from 'src/methods/getAsideData';
 
 type Props = {
   ebook: Ebook;
+  descricaoHtml: string;
+  paginaWebsiteHtml: string;
   asideData: AsideData;
 };
 
-function EbookHero({ ebook }: { ebook: Ebook }) {
+function EbookHero({ ebook, descricaoHtml }: { ebook: Ebook; descricaoHtml: string }) {
   const imageSrc = ebook.imagem.formats.medium?.url || ebook.imagem.url;
 
   return (
     <div className="grid lg:grid-cols-2 gap-xl items-center">
       <div className="order-2 lg:order-1">
         <div className="text-text-light text-lg mb-lg leading-relaxed">
-          <Markdown source={ebook.descricao} />
+          <Markdown html={descricaoHtml} />
         </div>
         <div className="space-y-sm">
           {ebook.preco && (
@@ -65,7 +68,7 @@ function EbookHero({ ebook }: { ebook: Ebook }) {
   );
 }
 
-export default function EbookPage({ ebook }: Props) {
+export default function EbookPage({ ebook, descricaoHtml, paginaWebsiteHtml }: Props) {
   const url = getUrl(`/ebooks/${ebook.slug}`);
   const title = getPageTitle(ebook.titulo);
 
@@ -114,12 +117,12 @@ export default function EbookPage({ ebook }: Props) {
         ]}
       >
         <Content.Section variant="content">
-          <EbookHero ebook={ebook} />
+          <EbookHero ebook={ebook} descricaoHtml={descricaoHtml} />
         </Content.Section>
 
         <Content.Section variant="content">
           <article className="prose prose-lg">
-            <Markdown source={ebook.pagina_website} />
+            <Markdown html={paginaWebsiteHtml} />
           </article>
         </Content.Section>
 
@@ -198,7 +201,12 @@ export const getStaticProps: GetStaticProps<Props> = async ({ params }) => {
       : { featuredEbook: null, letsProfile: null, categoriesWithCounts: [], siteDescricao: null };
 
   return {
-    props: { ebook, asideData },
+    props: {
+      ebook,
+      descricaoHtml: await markdownToHtml(ebook.descricao ?? ''),
+      paginaWebsiteHtml: await markdownToHtml(ebook.pagina_website ?? ''),
+      asideData,
+    },
     revalidate: 3600,
   };
 };

src/pages/index.tsx

@@ -163,7 +163,7 @@ export default function Home({
           </section>
         )}
 
-        <CookingCTA imageUrl={letsProfileImageUrl ?? undefined} />
+        <CookingCTA imageUrl={letsProfileImageUrl ?? undefined} priority={!heroEbook} />
 
         {categoriesWithCounts.length > 0 && (
           <section>

src/pages/politica-de-privacidade.tsx

@@ -2,6 +2,7 @@ import Head from 'next/head';
 import type { GetStaticProps } from 'next';
 import { Markdown } from 'src/components/Markdown';
 import { getLetsCozinhaPoliticas } from 'src/cms/singleTypes';
+import { markdownToHtml } from 'src/methods/markdownToHtml';
 import { getPageTitle } from 'src/methods/getPageTitle';
 import { getUrl } from 'src/methods/getUrl';
 import { getAsideData, type AsideData } from 'src/methods/getAsideData';
@@ -22,7 +23,7 @@ export default function PoliticaDePrivacidade({ content }: Props) {
         />
         <link rel="canonical" href={getUrl('/politica-de-privacidade')} />
       </Head>
-      <Markdown source={content} />
+      <Markdown html={content} />
     </>
   );
 }
@@ -44,7 +45,7 @@ export const getStaticProps: GetStaticProps<Props> = async () => {
 
   return {
     props: {
-      content: politicasResult.value.letsCozinhaPoliticas.politica_de_privacidade,
+      content: await markdownToHtml(politicasResult.value.letsCozinhaPoliticas.politica_de_privacidade),
       asideData,
     },
     revalidate: 3600,