fix: Display year for releases from previous years on website (#13276) (#13291)

### 🐛 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>
This commit is contained in:
vishwas babar
2025-07-29 22:28:49 +05:30
committed by GitHub
parent c1bf0a1fbf
commit 00f0c68478
3 changed files with 21 additions and 4 deletions
@@ -32,7 +32,7 @@ const Home = async () => {
const visibleReleasesNotes = getVisibleReleases(
releaseNotes,
latestGithubRelease.tagName,
latestGithubRelease?.tagName || 'v0.0.0',
);
const mdxReleasesContent = await getMdxReleasesContent(releaseNotes);
@@ -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>
@@ -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);
};