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

@@ -23,6 +23,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",
@@ -1227,6 +1228,8 @@
 
     "@tailwindcss/postcss": ["@tailwindcss/[email protected]", "", { "dependencies": { "@alloc/quick-lru": "^5.2.0", "@tailwindcss/node": "4.1.13", "@tailwindcss/oxide": "4.1.13", "postcss": "^8.4.41", "tailwindcss": "4.1.13" } }, "sha512-HLgx6YSFKJT7rJqh9oJs/TkBFhxuMOfUKSBEPYwV+t78POOBsdQ7crhZLzwcH3T0UyUuOzU/GK5pk5eKr3wCiQ=="],
 
+    "@tailwindcss/typography": ["@tailwindcss/[email protected]", "", { "dependencies": { "postcss-selector-parser": "6.0.10" }, "peerDependencies": { "tailwindcss": ">=3.0.0 || insiders || >=4.0.0-alpha.20 || >=4.0.0-beta.1" } }, "sha512-w31dd8HOx3k9vPtcQh5QHP9GwKcgbMp87j58qi6xgiBnFFtKEAgCWnDw4qUT8aHwkCp8bKvb/KGKWWHedP0AAg=="],
+
     "@tanstack/query-core": ["@tanstack/[email protected]", "", {}, "sha512-4E0RP/0GJCxSNiRF2kAqE/LQkTJVlL/QNU7gIJSptaseV9HP6kOuA+N11y4bZKZxa3QopK3ZuewwutHx6DqDXQ=="],
 
     "@tanstack/query-devtools": ["@tanstack/[email protected]", "", {}, "sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ=="],
@@ -2613,7 +2616,7 @@
 
     "postcss-nested": ["[email protected]", "", { "dependencies": { "postcss-selector-parser": "^6.1.1" }, "peerDependencies": { "postcss": "^8.2.14" } }, "sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ=="],
 
-    "postcss-selector-parser": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
+    "postcss-selector-parser": ["postcss-selector-parser@6.0.10", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w=="],
 
     "postcss-value-parser": ["[email protected]", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],
 
@@ -3479,6 +3482,8 @@
 
     "fumadocs-ui/@radix-ui/react-slot": ["@radix-ui/[email protected]", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "fumadocs-ui/postcss-selector-parser": ["[email protected]", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
+
     "gaxios/https-proxy-agent": ["[email protected]", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],
 
     "gaxios/node-fetch": ["[email protected]", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],

package.json

@@ -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",