ChangelogPage() — ui Function Reference

Architecture documentation for the ChangelogPage() function in page.tsx from the ui codebase.

Function tsx DocumentationAtlas Changelog

Entity Profile

DocumentationAtlas→ Changelog→ ChangelogPage() — ui Function Reference

Dependency Diagram

graph TD
  f50a52af_9af8_e2f7_e9dd_1370cecee9c9["ChangelogPage()"]
  fe6468c5_e582_2fe3_ca5f_ec4dde592aeb["page.tsx"]
  f50a52af_9af8_e2f7_e9dd_1370cecee9c9 -->|defined in| fe6468c5_e582_2fe3_ca5f_ec4dde592aeb
  style f50a52af_9af8_e2f7_e9dd_1370cecee9c9 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(app)/docs/changelog/page.tsx lines 35–144

export default function ChangelogPage() {
  const pages = getChangelogPages()
  const latestPages = pages.slice(0, 5)
  const olderPages = pages.slice(5)

  return (
    <div
      data-slot="docs"
      className="flex scroll-mt-24 items-stretch pb-8 text-[1.05rem] sm:text-[15px] xl:w-full"
    >
      <div className="flex min-w-0 flex-1 flex-col">
        <div className="h-(--top-spacing) shrink-0" />
        <div className="mx-auto flex w-full max-w-[40rem] min-w-0 flex-1 flex-col gap-6 px-4 py-6 text-neutral-800 md:px-0 lg:py-8 dark:text-neutral-300">
          <div className="flex flex-col gap-2">
            <div className="flex items-center justify-between">
              <h1 className="scroll-m-24 text-4xl font-semibold tracking-tight sm:text-3xl">
                Changelog
              </h1>
              <Button variant="secondary" size="sm" asChild>
                <a href="/rss.xml" target="_blank" rel="noopener noreferrer">
                  <IconRss />
                  RSS
                </a>
              </Button>
            </div>
            <p className="text-muted-foreground text-[1.05rem] sm:text-base sm:text-balance md:max-w-[80%]">
              Latest updates and announcements.
            </p>
          </div>
          <div className="w-full flex-1 pb-16 sm:pb-0">
            {latestPages.map((page) => {
              const data = page.data as ChangelogPageData
              const MDX = page.data.body

              return (
                <article key={page.url} className="mb-12 border-b pb-12">
                  <h2 className="font-heading text-xl font-semibold tracking-tight">
                    {data.title}
                  </h2>
                  <div className="prose-changelog mt-6 *:first:mt-0">
                    <MDX components={mdxComponents} />
                  </div>
                </article>
              )
            })}
            {olderPages.length > 0 && (
              <div id="more-updates" className="mb-24 scroll-mt-24">
                <h2 className="font-heading mb-6 text-xl font-semibold tracking-tight">
                  More Updates
                </h2>
                <div className="grid auto-rows-fr gap-3 sm:grid-cols-2">
                  {olderPages.map((page) => {
                    const data = page.data as ChangelogPageData
                    const [date, ...titleParts] = data.title.split(" - ")
                    const title = titleParts.join(" - ")
                    return (
                      <Link
                        key={page.url}
                        href={page.url}
                        className="bg-surface text-surface-foreground hover:bg-surface/80 flex w-full flex-col rounded-xl px-4 py-3 transition-colors"
                      >
                        <span className="text-muted-foreground text-xs">
                          {date}
                        </span>
                        <span className="text-sm font-medium">{title}</span>
                      </Link>
                    )
                  })}
                </div>
              </div>
            )}
          </div>
        </div>
      </div>
      <div className="sticky top-[calc(var(--header-height)+1px)] z-30 ml-auto hidden h-[90svh] w-72 flex-col gap-4 overflow-hidden overscroll-none pb-8 lg:flex">
        <div className="h-(--top-spacing) shrink-0"></div>
        <div className="no-scrollbar flex flex-col gap-8 overflow-y-auto px-8">
          <div className="flex flex-col gap-2 p-4 pt-0 text-sm">
            <p className="text-muted-foreground bg-background sticky top-0 h-6 text-xs font-medium">
              On This Page
            </p>