feat(changelog): publish curated product updates

Author: waleedlatif1

.github/PULL_REQUEST_TEMPLATE.md

@@ -3,6 +3,9 @@ Brief description of what this PR does and why.
 
 Fixes #(issue)
 
+## Product update (if relevant)
+Who benefits, and what can they do now? Note rollout or plan restrictions, link the relevant Sim integration or docs guide, and include a real product demo or changelog production brief when available.
+
 ## Type of Change
 - [ ] Bug fix
 - [ ] New feature  

apps/sim/AGENTS.md

@@ -21,7 +21,7 @@ For a common task, start from its skill (`.agents/skills/<name>/SKILL.md`):
 
 <!-- BEGIN:nextjs-agent-rules -->
 
-# This is NOT the Next.js you know
+## This is NOT the Next.js you know
 
 This version has breaking changes — APIs, conventions, and file structure may all differ from your training data. Read the relevant guide in `node_modules/next/dist/docs/` (resolved from this file's directory; in monorepos the `next` package may not be visible from the repo root) before writing any code. Heed deprecation notices.
 

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

@@ -0,0 +1,36 @@
+import type { Metadata } from 'next'
+import { notFound } from 'next/navigation'
+import { CHANGELOG_SECTION, getAllEntryMeta, getEntryBySlug } from '@/lib/changelog'
+import { buildPostGraphJsonLd, buildPostMetadata } from '@/lib/content/seo'
+import { ChangelogArticle, ChangelogLayout } from '@/app/(landing)/changelog/components'
+import { JsonLd } from '@/app/(landing)/components/json-ld'
+
+export const dynamicParams = false
+export const revalidate = 3600
+
+interface ChangelogEntryPageProps {
+  params: Promise<{ slug: string }>
+}
+
+export async function generateStaticParams() {
+  return (await getAllEntryMeta()).map((entry) => ({ slug: entry.slug }))
+}
+
+export async function generateMetadata({ params }: ChangelogEntryPageProps): Promise<Metadata> {
+  const { slug } = await params
+  const entry = await getEntryBySlug(slug)
+  return entry ? buildPostMetadata(entry) : {}
+}
+
+export default async function ChangelogEntryPage({ params }: ChangelogEntryPageProps) {
+  const { slug } = await params
+  const entry = await getEntryBySlug(slug)
+  if (!entry) notFound()
+
+  return (
+    <ChangelogLayout>
+      <JsonLd data={buildPostGraphJsonLd(entry, CHANGELOG_SECTION)} />
+      <ChangelogArticle entry={entry} />
+    </ChangelogLayout>
+  )
+}

apps/sim/app/(landing)/changelog/archive/page.tsx

@@ -0,0 +1,45 @@
+import { CHANGELOG_SECTION, getAllEntryMeta } from '@/lib/changelog'
+import { buildCollectionPageJsonLd } from '@/lib/content/seo'
+import { buildLandingMetadata } from '@/lib/landing/seo'
+import {
+  ChangelogGrid,
+  ChangelogHeader,
+  ChangelogLayout,
+} from '@/app/(landing)/changelog/components'
+import { BackLink } from '@/app/(landing)/components/back-link'
+import { JsonLd } from '@/app/(landing)/components/json-ld'
+
+export const revalidate = 3600
+export const metadata = buildLandingMetadata({
+  title: 'Changelog Archive | Sim',
+  description: 'Browse product updates from Sim and find the full technical release history.',
+  path: '/changelog/archive',
+})
+
+export default async function ChangelogArchivePage() {
+  const entries = await getAllEntryMeta()
+  return (
+    <ChangelogLayout>
+      <JsonLd
+        data={buildCollectionPageJsonLd(
+          { ...CHANGELOG_SECTION, name: 'Changelog Archive', basePath: '/changelog/archive' },
+          entries
+        )}
+      />
+      <ChangelogHeader
+        title='All updates'
+        lead='New capabilities, improvements, and fixes in Sim, with the details in one place.'
+        actions={<BackLink href='/changelog' label='Back to changelog' />}
+      />
+      <ChangelogGrid entries={entries} />
+      <a
+        href='https://github.com/simstudioai/sim/releases'
+        target='_blank'
+        rel='noopener noreferrer'
+        className='text-[var(--text-secondary)] text-small underline underline-offset-4'
+      >
+        Earlier releases and full technical history on GitHub
+      </a>
+    </ChangelogLayout>
+  )
+}

apps/sim/app/(landing)/changelog/changelog.tsx

@@ -1,50 +1,39 @@
-import { createLogger } from '@sim/logger'
-import { getErrorMessage } from '@sim/utils/errors'
-import { ChangelogActions, ChangelogTimeline } from '@/app/(landing)/changelog/components'
-import type { ChangelogEntry, GitHubRelease } from '@/app/(landing)/changelog/types'
-import { mapReleases, releasesEndpoint } from '@/app/(landing)/changelog/utils'
-import { ProseHero, ProseShell } from '@/app/(landing)/components/prose-page'
-
-const logger = createLogger('Changelog')
-
-/**
- * Changelog page - reuses the shared prose primitives ({@link ProseShell} +
- * {@link ProseHero}) so its headline and column match Terms and Privacy, then
- * renders the GitHub-release timeline. The first page of releases is
- * fetched here on the server at build/revalidate time; the {@link ChangelogTimeline}
- * client leaf paginates the rest. Re-authored from the prior dark changelog onto
- * the platform light tokens.
- */
-
-const LEAD =
-  'Every new feature, improvement, and fix in Sim, the open-source AI workspace, with release notes straight from GitHub.'
-
-async function getInitialEntries(): Promise<ChangelogEntry[]> {
-  try {
-    // boundary-raw-fetch: external GitHub Releases API (cross-origin), not a same-origin contract
-    const res = await fetch(releasesEndpoint(1), {
-      headers: { Accept: 'application/vnd.github+json' },
-      next: { revalidate: 3600 },
-    })
-    const releases = (await res.json()) as GitHubRelease[]
-    return mapReleases(releases ?? [])
-  } catch (error) {
-    logger.warn('Failed to load initial changelog releases from GitHub', {
-      error: getErrorMessage(error),
-    })
-    return []
-  }
-}
+import Link from 'next/link'
+import { CHANGELOG_SECTION, getAllEntryMeta, LATEST_ENTRY_LIMIT } from '@/lib/changelog'
+import { buildCollectionPageJsonLd } from '@/lib/content/seo'
+import {
+  ChangelogActions,
+  ChangelogGrid,
+  ChangelogHeader,
+  ChangelogLayout,
+} from '@/app/(landing)/changelog/components'
+import { JsonLd } from '@/app/(landing)/components/json-ld'
 
 export default async function Changelog() {
-  const entries = await getInitialEntries()
-
+  const metadata = await getAllEntryMeta()
+  const visible = metadata.slice(0, LATEST_ENTRY_LIMIT)
   return (
-    <ProseShell>
-      <ProseHero title='Changelog' lead={LEAD} actions={<ChangelogActions />} />
-      <section id='releases' aria-label='Release history'>
-        <ChangelogTimeline initialEntries={entries} />
-      </section>
-    </ProseShell>
+    <ChangelogLayout>
+      <JsonLd data={buildCollectionPageJsonLd(CHANGELOG_SECTION, visible)} />
+      <ChangelogHeader
+        title='Changelog'
+        lead={CHANGELOG_SECTION.description}
+        actions={<ChangelogActions />}
+      />
+      <ChangelogGrid entries={visible} featureLatest />
+      <div className='flex flex-wrap gap-6 border-[var(--border)] border-t pt-6 text-[var(--text-secondary)] text-sm'>
+        <Link href='/changelog/archive' className='underline underline-offset-4'>
+          All updates
+        </Link>
+        <a
+          href='https://github.com/simstudioai/sim/releases'
+          target='_blank'
+          rel='noopener noreferrer'
+          className='underline underline-offset-4'
+        >
+          Earlier releases on GitHub
+        </a>
+      </div>
+    </ChangelogLayout>
   )
 }

apps/sim/app/(landing)/changelog/components/changelog-actions/changelog-actions.tsx

@@ -9,20 +9,18 @@ import { GithubOutlineIcon } from '@/components/icons'
  * beneath the changelog headline. A small client leaf because `ChipLink` is a
  * Client Component and its `leftIcon` is a component reference that cannot cross
  * the server→client boundary as a prop (same pattern as the platform pill CTA).
- * GitHub is the primary filled chip; Docs and RSS are the default pills.
  */
 export function ChangelogActions() {
   return (
     <div className='flex flex-wrap items-center gap-1'>
       <ChipLink
-        variant='primary'
         shape='round'
         href='https://github.com/simstudioai/sim/releases'
         target='_blank'
         rel='noopener noreferrer'
         leftIcon={GithubOutlineIcon}
       >
-        View on GitHub
+        Technical releases
       </ChipLink>
       <ChipLink
         shape='round'

apps/sim/app/(landing)/changelog/components/changelog-article/changelog-article.tsx

@@ -0,0 +1,70 @@
+import { cn } from '@sim/emcn'
+import type { ContentPost } from '@/lib/content/schema'
+import { BackLink } from '@/app/(landing)/components/back-link'
+import { formatPostDate } from '@/app/(landing)/components/content-utils'
+import { HOME_TYPE, LANDING_TYPE } from '@/app/(landing)/components/landing-layout'
+
+interface ChangelogArticleProps {
+  entry: ContentPost
+  backHref?: string
+  archiveHref?: string
+}
+
+/** A focused reading column contains the update's product recordings and release details. */
+export function ChangelogArticle({
+  entry,
+  backHref = '/changelog',
+  archiveHref = '/changelog/archive',
+}: ChangelogArticleProps) {
+  const updated =
+    entry.updated && entry.updated.slice(0, 10) !== entry.date.slice(0, 10)
+      ? entry.updated
+      : undefined
+  return (
+    <article id={entry.slug} className='mx-auto w-full max-w-[900px]'>
+      <header className='flex flex-col items-start gap-6'>
+        <BackLink href={backHref} label='Back to changelog' />
+        <div className='flex flex-wrap items-center gap-x-4 gap-y-2 text-[var(--text-secondary)] text-sm'>
+          {entry.draft ? <span>Draft</span> : null}
+          <time dateTime={entry.date}>{formatPostDate(entry.date)}</time>
+          {entry.release ? <span>{entry.release.versions.join(' · ')}</span> : null}
+          {updated ? <time dateTime={entry.updated}>Updated {formatPostDate(updated)}</time> : null}
+        </div>
+        <h1 className={cn('text-balance text-[var(--text-primary)]', LANDING_TYPE.proof)}>
+          {entry.title}
+        </h1>
+        <p className={cn('text-pretty text-[var(--text-secondary)]', LANDING_TYPE.lead)}>
+          {entry.description}
+        </p>
+      </header>
+      <section
+        id='update-details'
+        aria-labelledby='update-details-heading'
+        className='mt-10 border-[var(--border)] border-t pt-4'
+      >
+        <h2 id='update-details-heading' className='sr-only'>
+          In this update
+        </h2>
+        <entry.Content />
+      </section>
+      <footer
+        className={cn(
+          'mt-10 flex flex-wrap gap-6 border-[var(--border)] border-t pt-6 text-[var(--text-secondary)]',
+          HOME_TYPE.meta
+        )}
+      >
+        {entry.release?.url ? (
+          <a
+            href={entry.release.url}
+            target='_blank'
+            rel='noopener noreferrer'
+            className='underline underline-offset-4'
+          >
+            Technical release notes
+          </a>
+        ) : null}
+        <BackLink href={archiveHref} label='All updates' />
+      </footer>
+    </article>
+  )
+}

apps/sim/app/(landing)/changelog/components/changelog-article/index.ts

@@ -0,0 +1 @@
+export { ChangelogArticle } from './changelog-article'

apps/sim/app/(landing)/changelog/components/changelog-grid/changelog-grid.tsx

@@ -0,0 +1,38 @@
+import type { ContentMeta } from '@/lib/content/schema'
+import { ChangelogCard } from '@/app/(landing)/changelog/components/changelog-grid/components/changelog-card'
+
+interface ChangelogGridProps {
+  entries: ContentMeta[]
+  featureLatest?: boolean
+  basePath?: string
+}
+
+/** A featured story and two-column reading grid, using the customer-story composition. */
+export function ChangelogGrid({ entries, featureLatest = false, basePath }: ChangelogGridProps) {
+  return (
+    <section
+      id='updates'
+      aria-labelledby='updates-heading'
+      className='grid grid-cols-2 gap-x-8 gap-y-12 max-md:grid-cols-1'
+    >
+      <h2 id='updates-heading' className='sr-only'>
+        Product updates
+      </h2>
+      {entries.length > 0 ? (
+        entries.map((entry, index) => (
+          <ChangelogCard
+            key={entry.slug}
+            entry={entry}
+            featured={featureLatest && index === 0}
+            priority={index === 0}
+            basePath={basePath}
+          />
+        ))
+      ) : (
+        <p className='col-span-full py-12 text-[var(--text-secondary)] text-md'>
+          Product updates will appear here as they are published.
+        </p>
+      )}
+    </section>
+  )
+}

apps/sim/app/(landing)/changelog/components/changelog-grid/components/changelog-card/changelog-card.tsx

@@ -0,0 +1,77 @@
+import { cn } from '@sim/emcn'
+import { ArrowRight } from '@sim/emcn/icons'
+import Image from 'next/image'
+import Link from 'next/link'
+import { CHANGELOG_SECTION } from '@/lib/changelog/constants'
+import type { ContentMeta } from '@/lib/content/schema'
+import { formatPostDate } from '@/app/(landing)/components/content-utils'
+import { HOME_TYPE, LANDING_STAGE_RADIUS } from '@/app/(landing)/components/landing-layout'
+
+interface ChangelogCardProps {
+  entry: ContentMeta
+  featured: boolean
+  priority: boolean
+  basePath?: string
+}
+
+const IMAGE_SIZES =
+  '(min-width: 1728px) 671px, (min-width: 1280px) calc((100vw - 80px) * 5 / 12 - 16px), (min-width: 1024px) calc((100vw - 72px) * 5 / 12 - 16px), (min-width: 768px) calc(50vw - 48px), calc(100vw - 56px)'
+
+export function ChangelogCard({
+  entry,
+  featured,
+  priority,
+  basePath = CHANGELOG_SECTION.basePath,
+}: ChangelogCardProps) {
+  return (
+    <Link
+      id={entry.slug}
+      href={`${basePath}/${entry.slug}`}
+      aria-labelledby={`${entry.slug}-heading`}
+      className={cn(
+        'group min-w-0 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-4',
+        LANDING_STAGE_RADIUS,
+        featured
+          ? 'col-span-2 grid grid-cols-2 items-center gap-10 max-md:col-span-1 max-md:grid-cols-1 max-md:gap-5'
+          : 'flex flex-col gap-5'
+      )}
+    >
+      <div
+        className={cn(
+          'relative aspect-video overflow-hidden border border-[var(--border)] bg-[var(--surface-2)]',
+          LANDING_STAGE_RADIUS
+        )}
+      >
+        <Image
+          src={entry.ogImage}
+          alt={entry.ogAlt ?? entry.title}
+          fill
+          sizes={IMAGE_SIZES}
+          priority={priority}
+          className='object-cover'
+        />
+      </div>
+      <div className='flex min-w-0 flex-col items-start gap-4'>
+        <time dateTime={entry.date} className='text-[var(--text-secondary)] text-sm'>
+          {formatPostDate(entry.date)}
+        </time>
+        <h3
+          id={`${entry.slug}-heading`}
+          className={cn('text-balance text-[var(--text-primary)]', HOME_TYPE.h3)}
+        >
+          {entry.title}
+        </h3>
+        <p className={cn('text-pretty text-[var(--text-secondary)]', HOME_TYPE.body)}>
+          {entry.description}
+        </p>
+        <span className='inline-flex items-center gap-2 text-[var(--text-primary)] text-sm'>
+          Read update
+          <ArrowRight
+            aria-hidden='true'
+            className='size-4 text-[var(--text-icon)] transition-transform duration-200 group-hover:translate-x-0.5 motion-reduce:transition-none'
+          />
+        </span>
+      </div>
+    </Link>
+  )
+}