From 00f0c684788126b6f447d7b599c7add582fe49c2 Mon Sep 17 00:00:00 2001
From: vishwas babar <116264015+vishwas-babar@users.noreply.github.com>
Date: Tue, 29 Jul 2025 22:28:49 +0530
Subject: [PATCH] fix: Display year for releases from previous years on website
 (#13276) (#13291)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

### 🐛 Bug Fix

**Fixes #13276 - Website does not show year of releases**

### 📝 Description

Fixed the Twenty website to properly display release years for previous
year releases and standardized date formatting.

**Key Changes:**
- Show year for releases from previous years
- Abbreviate month names for consistent layout (e.g., "April" → "Apr")
- Added fallback to prevent runtime errors when no releases exist

### 🔧 Files Changed

- **`formatDisplayDate.ts` (new)** - Utility function for consistent
date formatting
- **`Release.tsx`** - Use utility function and improve CSS layout
- **`page.tsx`** - Add fallback for undefined `latestGithubRelease`

### 🧪 Example Output

| Before | After |
|--------|-------|
| `April 25th 2024` (missing year) | `Apr 25th 2024` |
| `April 25th 2025` | `Apr 25th` |
| Runtime error | Graceful fallback |

### � Screenshots

**Before & After:**
<img width="1055" height="778" alt="image"
src="https://github.com/user-attachments/assets/68f227ec-2b1f-486b-89a6-8c3d8058ba36"
/>

<img width="1055" height="778" alt="image"
src="https://github.com/user-attachments/assets/74ed84b3-3a65-4090-b371-a48c25740bbd"
/>


---

**Related Issue:** Closes #13276

---------

Co-authored-by: Félix Malfait <felix@twenty.com>
---
 .../src/app/(public)/releases/page.tsx             |  2 +-
 .../src/app/_components/releases/Release.tsx       |  9 ++++++---
 .../src/shared-utils/formatDisplayDate.ts          | 14 ++++++++++++++
 3 files changed, 21 insertions(+), 4 deletions(-)
 create mode 100644 packages/twenty-website/src/shared-utils/formatDisplayDate.ts

diff --git a/packages/twenty-website/src/app/(public)/releases/page.tsx b/packages/twenty-website/src/app/(public)/releases/page.tsx
index 804afba2df..7f5740eba6 100644
--- a/packages/twenty-website/src/app/(public)/releases/page.tsx
+++ b/packages/twenty-website/src/app/(public)/releases/page.tsx
@@ -32,7 +32,7 @@ const Home = async () => {
 
   const visibleReleasesNotes = getVisibleReleases(
     releaseNotes,
-    latestGithubRelease.tagName,
+    latestGithubRelease?.tagName || 'v0.0.0',
   );
 
   const mdxReleasesContent = await getMdxReleasesContent(releaseNotes);
diff --git a/packages/twenty-website/src/app/_components/releases/Release.tsx b/packages/twenty-website/src/app/_components/releases/Release.tsx
index 9c901d1df5..b049546e9a 100644
--- a/packages/twenty-website/src/app/_components/releases/Release.tsx
+++ b/packages/twenty-website/src/app/_components/releases/Release.tsx
@@ -8,6 +8,7 @@ import { ReleaseNote } from '@/app/(public)/releases/api/route';
 import { ArticleContent } from '@/app/_components/ui/layout/articles/ArticleContent';
 import MotionContainer from '@/app/_components/ui/layout/LoaderAnimation';
 import { Theme } from '@/app/_components/ui/theme/theme';
+import { formatGithubPublishedAtDisplayDate } from '@/shared-utils/formatDisplayDate';
 
 const StyledContainer = styled.div`
   width: 810px;
@@ -24,6 +25,7 @@ const StyledContainer = styled.div`
 const StyledVersion = styled.div`
   text-align: center;
   width: 148px;
+  min-width: 148px;
   font-size: 24px;
   display: flex;
   flex-flow: column;
@@ -33,6 +35,7 @@ const StyledVersion = styled.div`
 
   @media (max-width: 810px) {
     width: 100%;
+    min-width: unset;
     font-size: 20px;
     flex-flow: row;
     justify-content: space-between;
@@ -50,6 +53,8 @@ const StyledDate = styled.span`
   color: ${Theme.text.color.secondary};
   font-weight: 400;
   font-size: ${Theme.font.size.sm};
+  white-space: nowrap;
+  margin-top: 4px;
 `;
 
 const gabarito = Gabarito({
@@ -75,9 +80,7 @@ export const Release = ({
         <StyledVersion>
           <StyledRelease>{release.release}</StyledRelease>
           <StyledDate>
-            {githubPublishedAt.endsWith(new Date().getFullYear().toString())
-              ? githubPublishedAt.slice(0, -5)
-              : githubPublishedAt}
+            {formatGithubPublishedAtDisplayDate(githubPublishedAt)}
           </StyledDate>
         </StyledVersion>
         <ArticleContent>{mdxReleaseContent}</ArticleContent>
diff --git a/packages/twenty-website/src/shared-utils/formatDisplayDate.ts b/packages/twenty-website/src/shared-utils/formatDisplayDate.ts
new file mode 100644
index 0000000000..420a951b3b
--- /dev/null
+++ b/packages/twenty-website/src/shared-utils/formatDisplayDate.ts
@@ -0,0 +1,14 @@
+export const formatGithubPublishedAtDisplayDate = (
+  dateString: string,
+): string => {
+  const date = new Date(dateString);
+  const currentYear = new Date().getFullYear();
+
+  const formatter = new Intl.DateTimeFormat('en-US', {
+    month: 'short',
+    day: 'numeric',
+    ...(date.getFullYear() !== currentYear && { year: 'numeric' }),
+  });
+
+  return formatter.format(date);
+};