feat: updated changelog and addressed duplicate fns

Author: adithyaakrishna

apps/sim/app/(landing)/blog/[slug]/article-sidebar.tsx

@@ -1,6 +1,7 @@
 import Image from 'next/image'
 import Link from 'next/link'
 import type { Author, BlogMeta } from '@/lib/blog/schema'
+import { formatDate } from '@/lib/core/utils/formatting'
 import { TableOfContents } from '@/app/(landing)/blog/[slug]/table-of-contents'
 import { getTagColor } from '@/app/(landing)/blog/tag-colors'
 
@@ -11,14 +12,6 @@ interface ArticleSidebarProps {
   related: BlogMeta[]
 }
 
-function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
-
 export function ArticleSidebar({ author, authors, headings, related }: ArticleSidebarProps) {
   const displayAuthors = authors.length > 0 ? authors : [author]
 
@@ -91,7 +84,9 @@ export function ArticleSidebar({ author, authors, headings, related }: ArticleSi
                   <h4 className='mb-1 text-[13px] font-[500] leading-tight text-[#ECECEC] transition-colors group-hover:text-[#FFCC02]'>
                     {p.title}
                   </h4>
-                  <div className='font-season text-[10px] text-[#666]'>{formatDate(p.date)}</div>
+                  <div className='font-season text-[10px] text-[#666]'>
+                    {formatDate(new Date(p.date))}
+                  </div>
                 </Link>
               )
             })}

apps/sim/app/(landing)/blog/og/route.tsx

@@ -3,6 +3,7 @@ import path from 'path'
 import { ImageResponse } from 'next/og'
 import type { NextRequest } from 'next/server'
 import { getPostBySlug } from '@/lib/blog/registry'
+import { formatDate } from '@/lib/core/utils/formatting'
 import { getPrimaryCategory } from '@/app/(landing)/blog/tag-colors'
 
 function getTitleFontSize(title: string): number {
@@ -12,14 +13,6 @@ function getTitleFontSize(title: string): number {
   return 56
 }
 
-function formatDate(iso: string): string {
-  return new Date(iso).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
-
 export async function GET(request: NextRequest) {
   const slug = request.nextUrl.searchParams.get('slug')
 
@@ -209,7 +202,7 @@ export async function GET(request: NextRequest) {
             }}
           />
           <span style={{ fontSize: 14, color: '#666666', fontWeight: 500 }}>
-            {formatDate(post.date)}
+            {formatDate(new Date(post.date))}
           </span>
         </div>
         <span

apps/sim/app/(landing)/blog/post-grid.tsx

@@ -4,6 +4,7 @@ import { motion, useReducedMotion } from 'framer-motion'
 import Image from 'next/image'
 import Link from 'next/link'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/emcn'
+import { formatDate } from '@/lib/core/utils/formatting'
 import { getPrimaryCategory } from '@/app/(landing)/blog/tag-colors'
 
 const EASE_OUT_QUINT = [0.23, 1, 0.32, 1] as const
@@ -57,14 +58,6 @@ interface PostGridProps {
   posts: Post[]
 }
 
-function formatDate(iso: string) {
-  return new Date(iso).toLocaleDateString('en-US', {
-    month: 'short',
-    day: 'numeric',
-    year: 'numeric',
-  })
-}
-
 function PostCard({ post, priority = false }: { post: Post; priority?: boolean }) {
   const category = getPrimaryCategory(post.tags)
   const color = category.color
@@ -126,7 +119,7 @@ function PostCard({ post, priority = false }: { post: Post; priority?: boolean }
                 </span>
               </div>
               <span className='h-1 w-1 bg-[#3d3d3d]' aria-hidden='true' />
-              <time dateTime={post.date}>{formatDate(post.date)}</time>
+              <time dateTime={post.date}>{formatDate(new Date(post.date))}</time>
             </div>
           </div>
         </article>
@@ -197,7 +190,7 @@ function FeaturedLeadCard({ post }: { post: Post }) {
                 </span>
               </div>
               <span className='h-1 w-1 bg-[#3d3d3d]' aria-hidden='true' />
-              <time dateTime={post.date}>{formatDate(post.date)}</time>
+              <time dateTime={post.date}>{formatDate(new Date(post.date))}</time>
             </div>
           </div>
         </div>

apps/sim/app/api/changelog/releases/route.ts

@@ -0,0 +1,50 @@
+import { NextResponse } from 'next/server'
+import { env } from '@/lib/core/config/env'
+
+const GITHUB_API_URL = 'https://api.github.com/repos/simstudioai/sim/releases'
+const PER_PAGE = 10
+
+export async function GET(request: Request) {
+  const { searchParams } = new URL(request.url)
+  const page = Math.max(1, Number(searchParams.get('page') ?? '1'))
+
+  try {
+    const token = env.GITHUB_TOKEN
+    const response = await fetch(`${GITHUB_API_URL}?per_page=${PER_PAGE}&page=${page}`, {
+      headers: {
+        Accept: 'application/vnd.github+json',
+        'X-GitHub-Api-Version': '2022-11-28',
+        'User-Agent': 'Sim/1.0',
+        ...(token ? { Authorization: `Bearer ${token}` } : {}),
+      },
+      next: { revalidate: 3600 },
+    })
+
+    if (!response.ok) {
+      return NextResponse.json(
+        { error: `GitHub API returned ${response.status}` },
+        { status: response.status }
+      )
+    }
+
+    const data = await response.json()
+
+    if (!Array.isArray(data)) {
+      return NextResponse.json({ error: 'Unexpected response from GitHub API' }, { status: 502 })
+    }
+
+    const releases = data
+      .filter((r: any) => !r.prerelease)
+      .map((r: any) => ({
+        tag: r.tag_name,
+        title: r.name || r.tag_name,
+        content: String(r.body || ''),
+        date: r.published_at,
+        url: r.html_url,
+      }))
+
+    return NextResponse.json({ releases })
+  } catch (error) {
+    return NextResponse.json({ error: 'Failed to fetch releases' }, { status: 500 })
+  }
+}

apps/sim/app/changelog/components/changelog-content.tsx

@@ -1,5 +1,5 @@
-import { BookOpen, Github, Rss } from 'lucide-react'
-import Link from 'next/link'
+import { env } from '@/lib/core/config/env'
+import { ChangelogHero } from '@/app/changelog/components/changelog-hero'
 import ChangelogList from '@/app/changelog/components/timeline-list'
 
 export interface ChangelogEntry {
@@ -21,76 +21,51 @@ export default async function ChangelogContent() {
   let entries: ChangelogEntry[] = []
 
   try {
+    const token = env.GITHUB_TOKEN
     const res = await fetch(
       'https://api.github.com/repos/simstudioai/sim/releases?per_page=10&page=1',
       {
-        headers: { Accept: 'application/vnd.github+json' },
+        headers: {
+          Accept: 'application/vnd.github+json',
+          'X-GitHub-Api-Version': '2022-11-28',
+          'User-Agent': 'Sim/1.0',
+          ...(token ? { Authorization: `Bearer ${token}` } : {}),
+        },
         next: { revalidate: 3600 },
       }
     )
-    const releases: any[] = await res.json()
-    entries = (releases || [])
-      .filter((r) => !r.prerelease)
-      .map((r) => ({
-        tag: r.tag_name,
-        title: r.name || r.tag_name,
-        content: String(r.body || ''),
-        date: r.published_at,
-        url: r.html_url,
-        contributors: extractMentions(String(r.body || '')),
-      }))
+
+    if (!res.ok) {
+      entries = []
+    } else {
+      const releases = await res.json()
+      if (Array.isArray(releases)) {
+        entries = releases
+          .filter((r) => !r.prerelease)
+          .map((r) => ({
+            tag: r.tag_name,
+            title: r.name || r.tag_name,
+            content: String(r.body || ''),
+            date: r.published_at,
+            url: r.html_url,
+            contributors: extractMentions(String(r.body || '')),
+          }))
+      }
+    }
   } catch (err) {
     entries = []
   }
 
   return (
-    <div className='min-h-screen'>
-      <div className='relative grid md:grid-cols-2'>
-        {/* Left intro panel */}
-        <div className='relative top-0 overflow-hidden border-[#2A2A2A] border-b px-6 py-16 sm:px-10 md:sticky md:h-dvh md:border-r md:border-b-0 md:px-12 md:py-24'>
-          <div className='relative mx-auto h-full max-w-xl md:flex md:flex-col md:justify-center'>
-            <h1 className='mt-6 font-[500] text-4xl tracking-tight sm:text-5xl'>Changelog</h1>
-            <p className='mt-4 text-[#999] text-sm'>
-              Stay up-to-date with the latest features, improvements, and bug fixes in Sim. All
-              changes are documented here with detailed release notes.
-            </p>
-            <hr className='mt-6 border-[#2A2A2A]' />
-
-            <div className='mt-6 flex flex-wrap items-center gap-3 text-sm'>
-              <Link
-                href='https://github.com/simstudioai/sim/releases'
-                target='_blank'
-                rel='noopener noreferrer'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
-              >
-                <Github className='h-4 w-4' />
-                View on GitHub
-              </Link>
-              <Link
-                href='https://docs.sim.ai'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
-              >
-                <BookOpen className='h-4 w-4' />
-                Documentation
-              </Link>
-              <Link
-                href='/changelog.xml'
-                className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[#ECECEC] text-[13.5px] transition-colors hover:bg-[#2A2A2A]'
-              >
-                <Rss className='h-4 w-4' />
-                RSS Feed
-              </Link>
-            </div>
-          </div>
-        </div>
-
-        {/* Right timeline */}
-        <div className='relative px-4 py-10 sm:px-6 md:px-8 md:py-12'>
-          <div className='relative max-w-2xl pl-8'>
-            <ChangelogList initialEntries={entries} />
-          </div>
-        </div>
-      </div>
+    <div className='flex flex-col'>
+      <ChangelogHero />
+      <main className='mx-auto w-full max-w-5xl px-6 py-12'>
+        <h2 className='mb-8 flex items-center gap-2 font-season text-[11px] uppercase tracking-widest text-[#666]'>
+          <span className='inline-block h-2 w-2 bg-[#FFCC02]' aria-hidden='true' />
+          All Releases
+        </h2>
+        <ChangelogList initialEntries={entries} />
+      </main>
     </div>
   )
 }

apps/sim/app/changelog/components/changelog-hero.tsx

@@ -0,0 +1,97 @@
+'use client'
+
+import { motion, useReducedMotion } from 'framer-motion'
+import { BookOpen, Github, Rss } from 'lucide-react'
+import Link from 'next/link'
+
+const EASE_OUT_QUINT = [0.23, 1, 0.32, 1] as const
+const STAGGER = 0.2
+const DURATION = 0.4
+const Y_OFFSET = 12
+
+const containerVariants = {
+  hidden: {},
+  visible: {
+    transition: { staggerChildren: STAGGER },
+  },
+}
+
+const itemVariants = {
+  hidden: { opacity: 0, y: Y_OFFSET },
+  visible: {
+    opacity: 1,
+    y: 0,
+    transition: { duration: DURATION, ease: EASE_OUT_QUINT },
+  },
+}
+
+export function ChangelogHero() {
+  const shouldReduceMotion = useReducedMotion()
+
+  return (
+    <section className='relative overflow-hidden border-b border-[#2A2A2A] pb-10 pt-14'>
+      <div
+        className='pointer-events-none absolute inset-0 opacity-50'
+        aria-hidden='true'
+        style={{
+          backgroundImage:
+            'radial-gradient(circle at 2px 2px, rgba(255, 255, 255, 0.04) 1px, transparent 0)',
+          backgroundSize: '32px 32px',
+        }}
+      />
+      <motion.div
+        className='relative z-10 mx-auto max-w-5xl px-6'
+        variants={containerVariants}
+        initial={shouldReduceMotion ? 'visible' : 'hidden'}
+        animate='visible'
+      >
+        <div className='flex flex-col items-start'>
+          <motion.div
+            variants={itemVariants}
+            className='mb-6 inline-flex items-center gap-2 font-season text-[11px] uppercase tracking-widest text-[#999]'
+          >
+            <span className='inline-block h-2 w-2 flex-shrink-0 bg-[#FFCC02]' aria-hidden='true' />
+            Sim / Changelog
+          </motion.div>
+          <motion.h1
+            variants={itemVariants}
+            className='mb-3 max-w-3xl text-balance font-[430] text-[40px] leading-[1.1] tracking-[-0.02em] text-[#ECECEC] sm:text-[56px] md:text-[64px]'
+          >
+            What&apos;s new in <span className='text-[#666]'>Sim.</span>
+          </motion.h1>
+          <motion.p
+            variants={itemVariants}
+            className='max-w-2xl text-[18px] leading-relaxed tracking-[0.02em] text-[#999]'
+          >
+            Stay up-to-date with the latest features, improvements, and bug fixes.
+          </motion.p>
+          <motion.div variants={itemVariants} className='mt-8 flex flex-wrap items-center gap-3'>
+            <Link
+              href='https://github.com/simstudioai/sim/releases'
+              target='_blank'
+              rel='noopener noreferrer'
+              className='inline-flex items-center gap-2 rounded-[5px] border border-[#FFFFFF] bg-[#FFFFFF] px-[9px] py-[5px] text-[13.5px] text-black transition-colors hover:border-[#E0E0E0] hover:bg-[#E0E0E0]'
+            >
+              <Github className='h-4 w-4' />
+              View on GitHub
+            </Link>
+            <Link
+              href='https://docs.sim.ai'
+              className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[13.5px] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]'
+            >
+              <BookOpen className='h-4 w-4' />
+              Documentation
+            </Link>
+            <Link
+              href='/changelog.xml'
+              className='inline-flex items-center gap-2 rounded-[5px] border border-[#3d3d3d] px-[9px] py-[5px] text-[13.5px] text-[#ECECEC] transition-colors hover:bg-[#2A2A2A]'
+            >
+              <Rss className='h-4 w-4' />
+              RSS Feed
+            </Link>
+          </motion.div>
+        </div>
+      </motion.div>
+    </section>
+  )
+}