### 🐛 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:
@@ -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);
|
||||
};
|
||||
Reference in New Issue
Block a user