From 79f7688703fe42ce87c92567f5bc92b6691eaa20 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Mon, 14 Feb 2022 16:56:29 +0100
Subject: chore: load recent posts on homepage during build

This way, even whithout JS, user can see the latest posts.
---
 src/components/Widgets/RecentPosts/RecentPosts.tsx | 21 +++++++--------------
 src/content                                        |  2 +-
 src/i18n/en.json                                   |  4 ----
 src/i18n/fr.json                                   |  4 ----
 src/pages/index.tsx                                | 20 +++++++++++++++++++-
 5 files changed, 27 insertions(+), 24 deletions(-)

diff --git a/src/components/Widgets/RecentPosts/RecentPosts.tsx b/src/components/Widgets/RecentPosts/RecentPosts.tsx
index b7957b7..1a58574 100644
--- a/src/components/Widgets/RecentPosts/RecentPosts.tsx
+++ b/src/components/Widgets/RecentPosts/RecentPosts.tsx
@@ -1,6 +1,7 @@
 import Spinner from '@components/Spinner/Spinner';
 import { getPublishedPosts } from '@services/graphql/queries';
 import { ArticlePreview } from '@ts/types/articles';
+import { PostsList } from '@ts/types/blog';
 import { settings } from '@utils/config';
 import { getFormattedDate } from '@utils/helpers/format';
 import Image from 'next/image';
@@ -10,10 +11,12 @@ import { useIntl } from 'react-intl';
 import useSWR from 'swr';
 import styles from './RecentPosts.module.scss';
 
-const RecentPosts = () => {
+const RecentPosts = ({ posts }: { posts: PostsList }) => {
   const intl = useIntl();
-  const { data, error } = useSWR('/recent-posts', () =>
-    getPublishedPosts({ first: 3 })
+  const { data, error } = useSWR<PostsList>(
+    '/recent-posts',
+    () => getPublishedPosts({ first: 3 }),
+    { fallbackData: posts }
   );
   const router = useRouter();
   const locale = router.locale ? router.locale : settings.locales.defaultLocale;
@@ -67,17 +70,7 @@ const RecentPosts = () => {
     return data.posts.map((post) => getPost(post));
   };
 
-  return (
-    <ul className={styles.list}>
-      <noscript>
-        {intl.formatMessage({
-          defaultMessage: 'Javascript is required to load the latest posts.',
-          description: 'RecentPosts: noscript tag',
-        })}
-      </noscript>
-      {getPostsItems()}
-    </ul>
-  );
+  return <ul className={styles.list}>{getPostsItems()}</ul>;
 };
 
 export default RecentPosts;
diff --git a/src/content b/src/content
index 4ef6506..2f04957 160000
--- a/src/content
+++ b/src/content
@@ -1 +1 @@
-Subproject commit 4ef65066368e293376a9b39476010a843e8e38e3
+Subproject commit 2f0495748958a61d3fcbbea841102c73f7997709
diff --git a/src/i18n/en.json b/src/i18n/en.json
index 56f448f..f6a8e61 100644
--- a/src/i18n/en.json
+++ b/src/i18n/en.json
@@ -219,10 +219,6 @@
     "defaultMessage": "Load more?",
     "description": "BlogPage: load more text"
   },
-  "Mg1owa": {
-    "defaultMessage": "Javascript is required to load the latest posts.",
-    "description": "RecentPosts: noscript tag"
-  },
   "Mj2BQf": {
     "defaultMessage": "{name}'s CV",
     "description": "CVPage: page title"
diff --git a/src/i18n/fr.json b/src/i18n/fr.json
index 6cfd591..95426d4 100644
--- a/src/i18n/fr.json
+++ b/src/i18n/fr.json
@@ -219,10 +219,6 @@
     "defaultMessage": "En afficher plus ?",
     "description": "BlogPage: load more text"
   },
-  "Mg1owa": {
-    "defaultMessage": "Javascript est nécessaire pour charger les derniers articles.",
-    "description": "RecentPosts: noscript tag"
-  },
   "Mj2BQf": {
     "defaultMessage": "CV d'{name}",
     "description": "CVPage: page title"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 0fe1a4f..55bc14c 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,9 +2,12 @@ import FeedIcon from '@assets/images/icon-feed.svg';
 import { ButtonLink } from '@components/Buttons';
 import { ContactIcon } from '@components/Icons';
 import Layout from '@components/Layouts/Layout';
+import { RecentPosts } from '@components/Widgets';
 import HomePageContent from '@content/pages/homepage.mdx';
+import { getPublishedPosts } from '@services/graphql/queries';
 import styles from '@styles/pages/Home.module.scss';
 import { NextPageWithLayout } from '@ts/types/app';
+import { PostsList } from '@ts/types/blog';
 import { settings } from '@utils/config';
 import { loadTranslation } from '@utils/helpers/i18n';
 import { GetStaticProps, GetStaticPropsContext } from 'next';
@@ -13,7 +16,15 @@ import type { ReactElement } from 'react';
 import { useIntl } from 'react-intl';
 import { Graph, WebPage } from 'schema-dts';
 
-const Home: NextPageWithLayout = () => {
+type HomePageProps = {
+  recentPosts: PostsList;
+};
+
+const Home: NextPageWithLayout<HomePageProps> = ({
+  recentPosts,
+}: {
+  recentPosts: PostsList;
+}) => {
   const intl = useIntl();
 
   const CodingLinks = () => {
@@ -110,11 +121,16 @@ const Home: NextPageWithLayout = () => {
     );
   };
 
+  const getRecentPosts = () => {
+    return <RecentPosts posts={recentPosts} />;
+  };
+
   const components = {
     CodingLinks: CodingLinks,
     ColdarkRepos: ColdarkRepos,
     LibreLinks: LibreLinks,
     MoreLinks: MoreLinks,
+    RecentPosts: getRecentPosts,
   };
 
   const pageTitle = intl.formatMessage(
@@ -183,9 +199,11 @@ export const getStaticProps: GetStaticProps = async (
 ) => {
   const { locale } = context;
   const translation = await loadTranslation(locale);
+  const recentPosts = await getPublishedPosts({ first: 3 });
 
   return {
     props: {
+      recentPosts,
       translation,
     },
   };
-- 
cgit v1.2.3