fix: use proper datetime to fix server-side/client-siode mismatch (#5479)

Author: ovflowd

layouts/BlogIndexLayout.tsx

@@ -4,7 +4,6 @@ import BaseLayout from './BaseLayout';
 import Pagination from '../components/Pagination';
 import LocalizedLink from '../components/LocalizedLink';
 import { useBlogData } from '../hooks/useBlogData';
-import { getTimeComponent } from '../util/getTimeComponent';
 import type { FC, PropsWithChildren } from 'react';
 import type { BlogPost } from '../types';
 
@@ -40,7 +39,14 @@ const BlogIndexLayout: FC<PropsWithChildren> = ({ children }) => {
         <ul className="blog-index">
           {posts.map((post: BlogPost) => (
             <li key={post.slug}>
-              {getTimeComponent(post.date.toString(), '%d %b')}
+              <time dateTime={post.date}>
+                {new Date(post.date).toLocaleString('en-GB', {
+                  timeZone: 'UTC',
+                  month: 'short',
+                  day: '2-digit',
+                })}
+              </time>
+
               <LocalizedLink href={post.slug}>{post.title}</LocalizedLink>
             </li>
           ))}

layouts/BlogPostLayout.tsx

@@ -1,7 +1,6 @@
 import { FormattedMessage } from 'react-intl';
 import BaseLayout from './BaseLayout';
 import { useLayoutContext } from '../hooks/useLayoutContext';
-import { getTimeComponent } from '../util/getTimeComponent';
 import type { FC, PropsWithChildren } from 'react';
 import type { LegacyBlogFrontMatter } from '../types';
 
@@ -21,7 +20,15 @@ const BlogPostLayout: FC<PropsWithChildren> = ({ children }) => {
                 id="layouts.blogPost.author.byLine"
                 values={{ author: author || null }}
               />
-              {getTimeComponent(date)}
+
+              <time dateTime={date}>
+                {new Date(date).toLocaleString('en-GB', {
+                  timeZone: 'UTC',
+                  month: 'short',
+                  day: '2-digit',
+                  year: 'numeric',
+                })}
+              </time>
             </span>
           </div>
 

layouts/CategoryIndexLayout.tsx

@@ -3,7 +3,6 @@ import BaseLayout from './BaseLayout';
 import LocalizedLink from '../components/LocalizedLink';
 import { useLayoutContext } from '../hooks/useLayoutContext';
 import { useBlogData } from '../hooks/useBlogData';
-import { getTimeComponent } from '../util/getTimeComponent';
 import type { FC, PropsWithChildren } from 'react';
 import type { BlogPost } from '../types';
 
@@ -24,7 +23,14 @@ const CategoryIndexLayout: FC<PropsWithChildren> = ({ children }) => {
         <ul className="blog-index">
           {posts.map((post: BlogPost) => (
             <li key={post.slug}>
-              {getTimeComponent(post.date.toString(), '%d %b %y')}
+              <time dateTime={post.date}>
+                {new Date(post.date).toLocaleString('en-GB', {
+                  timeZone: 'UTC',
+                  month: 'short',
+                  day: '2-digit',
+                })}
+              </time>
+
               <LocalizedLink href={post.slug}>{post.title}</LocalizedLink>
             </li>
           ))}

next-data/generateBlogPostsData.mjs

@@ -35,7 +35,7 @@ const getFrontMatter = (filename, source) => {
   } = graymatter(source).data;
 
   // we add the year to the pagination set
-  blogMetadata.pagination.add(new Date(date).getFullYear());
+  blogMetadata.pagination.add(new Date(date).getUTCFullYear());
 
   // we add the category to the categories set
   blogMetadata.categories.add(category);

package-lock.json

@@ -60,7 +60,6 @@
     "remark-gfm": "^3.0.1",
     "semver": "^7.5.3",
     "sharp": "^0.32.1",
-    "strftime": "^0.10.2",
     "turbo": "^1.10.7",
     "typescript": "^5.1.6"
   },

package.json

@@ -28,5 +28,5 @@ export default memo(
   // that comes from `getStaticProps`. This means that the `props` should never change.
   // At least the `props.content` should never. We should not calculate based on `children`
   // As this component should never have a dynamic children
-  (prev, next) => JSON.stringify(prev.content) === JSON.stringify(next.content)
+  (prev, next) => JSON.stringify(prev) === JSON.stringify(next)
 );