chore(blog): improve image quality and fix list item alignment; fix(hero): refactor title rendering to resolve console error; bump version to 2.0.3

app/[locale]/blog/[slug]/page.tsx

@@ -88,6 +88,7 @@ export default async function BlogPost({ params }: BlogPostProps) {
               alt={post.frontmatter.title}
               fill
               priority
+              quality={90}
               className="object-cover"
               sizes="100vw"
               style={{

components/PayloadRichText.tsx

@@ -42,7 +42,7 @@ const jsxConverters: JSXConverters = {
   // Use div instead of p for paragraphs to allow nested block elements (like the lists above)
   paragraph: ({ node, nodesToJSX }: any) => {
     return (
-      <div className="mb-6 leading-relaxed text-text-secondary">
+      <div className="mb-4 md:mb-6 leading-relaxed text-text-secondary last:mb-0">
         {nodesToJSX({ nodes: node.children })}
       </div>
     );
@@ -77,7 +77,7 @@ const jsxConverters: JSXConverters = {
     const children = nodesToJSX({ nodes: node.children });
     if (node?.listType === 'number') {
       return (
-        <ol className="list-decimal pl-6 my-6 space-y-2 text-text-secondary marker:text-primary marker:font-bold">
+        <ol className="list-decimal pl-4 space-y-2 text-text-secondary marker:text-primary marker:font-bold prose-p:mb-0">
           {children}
         </ol>
       );
@@ -86,7 +86,7 @@ const jsxConverters: JSXConverters = {
       return <ul className="list-none pl-0 my-6 space-y-2 text-text-secondary">{children}</ul>;
     }
     return (
-      <ul className="list-disc pl-6 my-6 space-y-2 text-text-secondary marker:text-primary">
+      <ul className="list-disc pl-4 space-y-2 text-text-secondary marker:text-primary prose-p:mb-0">
         {children}
       </ul>
     );

components/home/Hero.tsx

@@ -23,19 +23,27 @@ export default function Hero({ data }: { data?: any }) {
               className="text-center md:text-left mb-6 md:mb-8 md:max-w-none text-white text-4xl sm:text-5xl md:text-7xl font-extrabold [text-shadow:_-2px_-2px_0_#002b49,_2px_-2px_0_#002b49,_-2px_2px_0_#002b49,_2px_2px_0_#002b49,_-2px_0_0_#002b49,_2px_0_0_#002b49,_0_-2px_0_#002b49,_0_2px_0_#002b49]"
             >
               {data?.title ? (
-                <span
-                  dangerouslySetInnerHTML={{
-                    __html: data.title
-                      .replace(
-                        /<green>/g,
-                        '<span class="relative inline-block"><span class="relative z-10 text-accent italic inline-block">',
-                      )
-                      .replace(
-                        /<\/green>/g,
-                        '</span><div class="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both" style="animation-delay: 500ms;"><Scribble variant="circle" /></div></span>',
-                      ),
-                  }}
-                />
+                <>
+                  {data.title.split(/(<green>.*?<\/green>)/g).map((part: string, i: number) => {
+                    if (part.startsWith('<green>') && part.endsWith('</green>')) {
+                      const content = part.replace(/<\/?green>/g, '');
+                      return (
+                        <span key={i} className="relative inline-block">
+                          <span className="relative z-10 text-accent italic inline-block">
+                            {content}
+                          </span>
+                          <div
+                            className="w-[140%] h-[140%] -top-[20%] -left-[20%] text-accent/30 hidden md:block absolute -z-10 animate-in fade-in zoom-in-0 duration-1000 ease-out fill-mode-both"
+                            style={{ animationDelay: '500ms' }}
+                          >
+                            <Scribble variant="circle" />
+                          </div>
+                        </span>
+                      );
+                    }
+                    return <span key={i}>{part}</span>;
+                  })}
+                </>
               ) : (
                 t.rich('title', {
                   green: (chunks) => (

lib/blog.ts

@@ -116,7 +116,7 @@ export async function getPostBySlug(slug: string, locale: string): Promise<PostD
         category: doc.category || '',
         featuredImage:
           typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-            ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+            ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
             : null,
         focalX:
           typeof doc.featuredImage === 'object' && doc.featuredImage !== null
@@ -162,7 +162,7 @@ export async function getAllPosts(locale: string): Promise<PostData[]> {
           category: doc.category || '',
           featuredImage:
             typeof doc.featuredImage === 'object' && doc.featuredImage !== null
-              ? doc.featuredImage.sizes?.card?.url || doc.featuredImage.url
+              ? doc.featuredImage.url || doc.featuredImage.sizes?.card?.url
               : null,
           focalX:
             typeof doc.featuredImage === 'object' && doc.featuredImage !== null

package.json

@@ -139,7 +139,7 @@
     "prepare": "husky",
     "preinstall": "npx only-allow pnpm"
   },
-  "version": "2.0.2",
+  "version": "2.0.3",
   "pnpm": {
     "onlyBuiltDependencies": [
       "@parcel/watcher",