fix(blogs): update sitemap and fix loading strat on blogs to prevent mobile crash (#2067)

* fix(blogs): update sitemap and fix loading strat on blogs to prevent mobile crash

* updated sitemap

Author: waleedlatif1

apps/sim/app/(landing)/studio/[slug]/page.tsx

@@ -61,6 +61,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                 width={450}
                 height={360}
                 className='h-auto w-full'
+                sizes='(max-width: 768px) 100vw, 450px'
                 priority
                 itemProp='image'
               />
@@ -131,7 +132,7 @@ export default async function Page({ params }: { params: Promise<{ slug: string
       {related.length > 0 && (
         <div className='mx-auto max-w-[900px] px-6 pb-24 sm:px-8 md:px-12'>
           <h2 className='mb-4 font-medium text-[24px]'>Related posts</h2>
-          <div className='grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3'>
+          <div className='grid grid-cols-1 gap-4 sm:grid-cols-2 sm:gap-6 lg:grid-cols-3'>
             {related.map((p) => (
               <Link key={p.slug} href={`/studio/${p.slug}`} className='group'>
                 <div className='overflow-hidden rounded-lg border border-gray-200'>
@@ -141,6 +142,8 @@ export default async function Page({ params }: { params: Promise<{ slug: string
                     width={600}
                     height={315}
                     className='h-[160px] w-full object-cover'
+                    sizes='(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw'
+                    loading='lazy'
                   />
                   <div className='p-3'>
                     <div className='mb-1 text-gray-600 text-xs'>

apps/sim/app/(landing)/studio/page.tsx

@@ -63,7 +63,7 @@ export default async function StudioIndex({
       </div> */}
 
       {/* Grid layout for consistent rows */}
-      <div className='grid grid-cols-1 gap-6 md:grid-cols-2 lg:grid-cols-3'>
+      <div className='grid grid-cols-1 gap-4 md:grid-cols-2 md:gap-6 lg:grid-cols-3'>
         {posts.map((p, i) => {
           return (
             <Link key={p.slug} href={`/studio/${p.slug}`} className='group flex flex-col'>
@@ -74,6 +74,8 @@ export default async function StudioIndex({
                   width={800}
                   height={450}
                   className='h-48 w-full object-cover'
+                  sizes='(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw'
+                  loading='lazy'
                 />
                 <div className='flex flex-1 flex-col p-4'>
                   <div className='mb-2 text-gray-600 text-xs'>

apps/sim/app/sitemap.ts

@@ -4,45 +4,56 @@ import { getAllPostMeta } from '@/lib/blog/registry'
 export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
   const baseUrl = 'https://sim.ai'
 
-  const staticPages = [
+  const now = new Date()
+
+  const staticPages: MetadataRoute.Sitemap = [
     {
       url: baseUrl,
-      lastModified: new Date(),
-      changeFrequency: 'daily' as const,
-      priority: 1,
+      lastModified: now,
+      priority: 1.0, // Homepage - highest priority
+    },
+    {
+      url: `${baseUrl}/studio`,
+      lastModified: now,
+      priority: 0.9, // Blog index - high value content
+    },
+    {
+      url: `${baseUrl}/studio/tags`,
+      lastModified: now,
+      priority: 0.7, // Tags page - discovery/navigation
+    },
+    {
+      url: `${baseUrl}/templates`,
+      lastModified: now,
+      priority: 0.8, // Templates - important discovery page
     },
     {
-      url: `${baseUrl}/signup`,
-      lastModified: new Date(),
-      changeFrequency: 'weekly' as const,
-      priority: 0.9,
+      url: `${baseUrl}/changelog`,
+      lastModified: now,
+      priority: 0.8, // Changelog - important for users
     },
     {
-      url: `${baseUrl}/login`,
-      lastModified: new Date(),
-      changeFrequency: 'monthly' as const,
-      priority: 0.8,
+      url: `${baseUrl}/careers`,
+      lastModified: new Date('2024-10-06'),
+      priority: 0.6, // Careers - important but not core content
     },
     {
       url: `${baseUrl}/terms`,
-      lastModified: new Date(),
-      changeFrequency: 'monthly' as const,
-      priority: 0.5,
+      lastModified: new Date('2024-10-14'),
+      priority: 0.5, // Terms - utility page
     },
     {
       url: `${baseUrl}/privacy`,
-      lastModified: new Date(),
-      changeFrequency: 'monthly' as const,
-      priority: 0.5,
+      lastModified: new Date('2024-10-14'),
+      priority: 0.5, // Privacy - utility page
     },
   ]
 
   const posts = await getAllPostMeta()
-  const blogPages = posts.map((p) => ({
+  const blogPages: MetadataRoute.Sitemap = posts.map((p) => ({
     url: p.canonical,
     lastModified: new Date(p.updated ?? p.date),
-    changeFrequency: 'monthly' as const,
-    priority: 0.9 as const,
+    priority: 0.9, // Blog posts - high value content
   }))
 
   return [...staticPages, ...blogPages]

apps/sim/lib/blog/mdx.tsx

@@ -11,6 +11,8 @@ export const mdxComponents: MDXRemoteProps['components'] = {
       width={props.width ? Number(props.width) : 800}
       height={props.height ? Number(props.height) : 450}
       className={clsx('h-auto w-full rounded-lg', props.className)}
+      sizes='(max-width: 768px) 100vw, 800px'
+      loading='lazy'
     />
   ),
   h2: (props: any) => (

apps/sim/tailwind.config.ts

@@ -162,5 +162,5 @@ export default {
       },
     },
   },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 } satisfies Config

bun.lock

@@ -53,6 +53,7 @@
     "@biomejs/biome": "2.0.0-beta.5",
     "@next/env": "15.4.1",
     "@octokit/rest": "^21.0.0",
+    "@tailwindcss/typography": "0.5.19",
     "drizzle-kit": "^0.31.4",
     "husky": "9.1.7",
     "lint-staged": "16.0.0",