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
2026-04-06 03:00:16 -04:00 · 2025-11-19 19:58:26 -08:00
parent e5cb6e3d0f
commit 7c5d625ca5
7 changed files with 49 additions and 25 deletions
--- a/apps/sim/app/(landing)/studio/[slug]/page.tsx
+++ b/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'>
--- a/apps/sim/app/(landing)/studio/page.tsx
+++ b/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'>
--- a/apps/sim/app/sitemap.ts
+++ b/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}/signup`,
-      lastModified: new Date(),
-      changeFrequency: 'weekly' as const,
-      priority: 0.9,
+      url: `${baseUrl}/studio`,
+      lastModified: now,
+      priority: 0.9, // Blog index - high value content
    },
    {
-      url: `${baseUrl}/login`,
-      lastModified: new Date(),
-      changeFrequency: 'monthly' as const,
-      priority: 0.8,
+      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}/changelog`,
+      lastModified: now,
+      priority: 0.8, // Changelog - important for users
+    },
+    {
+      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]
--- a/apps/sim/lib/blog/mdx.tsx
+++ b/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) => (
--- a/apps/sim/tailwind.config.ts
+++ b/apps/sim/tailwind.config.ts
@@ -162,5 +162,5 @@ export default {
      },
    },
  },
-  plugins: [require('tailwindcss-animate')],
+  plugins: [require('tailwindcss-animate'), require('@tailwindcss/typography')],
 } satisfies Config
--- a/bun.lock
+++ b/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/postcss@4.1.13", "", { "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/typography@0.5.19", "", { "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/query-core@5.90.8", "", {}, "sha512-4E0RP/0GJCxSNiRF2kAqE/LQkTJVlL/QNU7gIJSptaseV9HP6kOuA+N11y4bZKZxa3QopK3ZuewwutHx6DqDXQ=="],

    "@tanstack/query-devtools": ["@tanstack/query-devtools@5.90.1", "", {}, "sha512-GtINOPjPUH0OegJExZ70UahT9ykmAhmtNVcmtdnOZbxLwT7R5OmRztR5Ahe3/Cu7LArEmR6/588tAycuaWb1xQ=="],
@@ -2613,7 +2616,7 @@

    "postcss-nested": ["postcss-nested@6.2.0", "", { "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": ["postcss-value-parser@4.2.0", "", {}, "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ=="],

@@ -3479,6 +3482,8 @@

    "fumadocs-ui/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "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": ["postcss-selector-parser@7.1.0", "", { "dependencies": { "cssesc": "^3.0.0", "util-deprecate": "^1.0.2" } }, "sha512-8sLjZwK0R+JlxlYcTuVnyT2v+htpdrjDOKuMcOVdYjt52Lh8hWRYpxBPoKx/Zg+bcjc3wx6fmQevMmUztS/ccA=="],
+
    "gaxios/https-proxy-agent": ["https-proxy-agent@7.0.6", "", { "dependencies": { "agent-base": "^7.1.2", "debug": "4" } }, "sha512-vK9P5/iUfdl95AI+JVyUuIcVtd4ofvtrOr3HNtM2yxC9bnMbEdp3x01OhQNnjb8IJYi38VlTE3mBXwcfvywuSw=="],

    "gaxios/node-fetch": ["node-fetch@2.7.0", "", { "dependencies": { "whatwg-url": "^5.0.0" }, "peerDependencies": { "encoding": "^0.1.0" }, "optionalPeers": ["encoding"] }, "sha512-c4FRfUm/dbcWZ7U+1Wq0AwCyFL+3nt2bEw05wfxSz+DWpWsitgmSgYmy2dQdWyKC1694ELPqMs/YzUSNozLt8A=="],
--- a/package.json
+++ b/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",