improvement(changelog): present updates in a crawlable list

Author: waleedlatif1

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

@@ -2,9 +2,9 @@ import { CHANGELOG_SECTION, getAllEntryMeta } from '@/lib/changelog'
 import { buildCollectionPageJsonLd } from '@/lib/content/seo'
 import { buildLandingMetadata } from '@/lib/landing/seo'
 import {
-  ChangelogGrid,
   ChangelogHeader,
   ChangelogLayout,
+  ChangelogList,
 } from '@/app/(landing)/changelog/components'
 import { BackLink } from '@/app/(landing)/components/back-link'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
@@ -31,7 +31,7 @@ export default async function ChangelogArchivePage() {
         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} />
+      <ChangelogList entries={entries} />
       <a
         href='https://github.com/simstudioai/sim/releases'
         target='_blank'

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

@@ -3,15 +3,16 @@ import { CHANGELOG_SECTION, getAllEntryMeta, LATEST_ENTRY_LIMIT } from '@/lib/ch
 import { buildCollectionPageJsonLd } from '@/lib/content/seo'
 import {
   ChangelogActions,
-  ChangelogGrid,
   ChangelogHeader,
   ChangelogLayout,
+  ChangelogList,
 } from '@/app/(landing)/changelog/components'
 import { JsonLd } from '@/app/(landing)/components/json-ld'
 
 export default async function Changelog() {
   const metadata = await getAllEntryMeta()
   const visible = metadata.slice(0, LATEST_ENTRY_LIMIT)
+  const firstOlderEntry = metadata[LATEST_ENTRY_LIMIT]
   return (
     <ChangelogLayout>
       <JsonLd data={buildCollectionPageJsonLd(CHANGELOG_SECTION, visible)} />
@@ -20,11 +21,16 @@ export default async function Changelog() {
         lead={CHANGELOG_SECTION.description}
         actions={<ChangelogActions />}
       />
-      <ChangelogGrid entries={visible} featureLatest />
+      <ChangelogList entries={visible} />
       <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>
+        {firstOlderEntry ? (
+          <Link
+            href={`/changelog/archive#${firstOlderEntry.slug}`}
+            className='underline underline-offset-4'
+          >
+            Older updates
+          </Link>
+        ) : null}
         <a
           href='https://github.com/simstudioai/sim/releases'
           target='_blank'

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

@@ -21,7 +21,12 @@ export function ChangelogArticle({
       ? entry.updated
       : undefined
   return (
-    <article id={entry.slug} className='mx-auto w-full max-w-[900px]'>
+    <article
+      id={entry.slug}
+      className='mx-auto w-full max-w-[900px]'
+      itemScope
+      itemType='https://schema.org/BlogPosting'
+    >
       <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'>
@@ -30,12 +35,21 @@ export function ChangelogArticle({
           {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)}>
+        <h1
+          itemProp='headline'
+          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)}>
+        <p
+          itemProp='description'
+          className={cn('text-pretty text-[var(--text-secondary)]', LANDING_TYPE.lead)}
+        >
           {entry.description}
         </p>
+        <p className='text-[var(--text-secondary)] text-sm'>
+          By {entry.authors.map((author) => author.name).join(', ')}
+        </p>
       </header>
       <section
         id='update-details'

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

@@ -0,0 +1,31 @@
+import type { ContentMeta } from '@/lib/content/schema'
+import { ChangelogEntry } from '@/app/(landing)/changelog/components/changelog-list/components/changelog-entry'
+
+interface ChangelogListProps {
+  entries: ContentMeta[]
+  basePath?: string
+}
+
+/** Chronological rows share the landing frame, with copy beside media and a stacked mobile layout. */
+export function ChangelogList({ entries, basePath }: ChangelogListProps) {
+  return (
+    <section id='updates' aria-labelledby='updates-heading'>
+      <h2 id='updates-heading' className='sr-only'>
+        Product updates
+      </h2>
+      {entries.length > 0 ? (
+        <ol className='divide-y divide-[var(--border)]'>
+          {entries.map((entry, index) => (
+            <li key={entry.slug} className='py-12 first:pt-0 last:pb-0 max-sm:py-8'>
+              <ChangelogEntry entry={entry} priority={index === 0} basePath={basePath} />
+            </li>
+          ))}
+        </ol>
+      ) : (
+        <p className='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,74 @@
+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 ChangelogEntryProps {
+  entry: ContentMeta
+  priority: boolean
+  basePath?: string
+}
+
+const IMAGE_SIZES =
+  '(min-width: 1728px) 663px, (min-width: 1280px) calc((100vw - 80px) * 5 / 12 - 24px), (min-width: 1024px) calc((100vw - 72px) * 5 / 12 - 24px), (min-width: 768px) calc(100vw - 64px), calc(100vw - 56px)'
+
+export function ChangelogEntry({
+  entry,
+  priority,
+  basePath = CHANGELOG_SECTION.basePath,
+}: ChangelogEntryProps) {
+  return (
+    <article id={entry.slug} aria-labelledby={`${entry.slug}-heading`} className='scroll-mt-28'>
+      <Link
+        href={`${basePath}/${entry.slug}`}
+        aria-labelledby={`${entry.slug}-heading`}
+        className={cn(
+          'group grid min-w-0 grid-cols-2 items-center gap-12 focus-visible:outline focus-visible:outline-2 focus-visible:outline-[var(--text-primary)] focus-visible:outline-offset-8 max-lg:grid-cols-1 max-lg:gap-6',
+          LANDING_STAGE_RADIUS
+        )}
+      >
+        <div className='flex min-w-0 flex-col items-start gap-4'>
+          <div className='flex flex-wrap items-center gap-x-4 gap-y-2 text-[var(--text-secondary)] text-sm'>
+            <time dateTime={entry.date}>{formatPostDate(entry.date)}</time>
+            {entry.draft ? <span>Draft</span> : null}
+          </div>
+          <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>
+        <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-contain'
+          />
+        </div>
+      </Link>
+    </article>
+  )
+}

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

@@ -0,0 +1 @@
+export { ChangelogEntry } from './changelog-entry'