fix: search page and update translations

bin/build.ts

@@ -3,6 +3,7 @@ import { resolve } from 'node:path';
 import { build as buildVite } from 'vite';
 import { createServer as createViteServer } from 'vite';
 
+import { downloadTranslations } from '../src/helpers/downloadTranslationsHelper';
 import { generateImageFormats } from '../src/helpers/generateImageFormats';
 
 const BASE_URL = process.env.BASE_URL || '/';
@@ -41,7 +42,7 @@ const build = async (): Promise<void> => {
   const designSystemRootDir = resolve(process.cwd(), 'node_modules/@eleven-labs/design-system/dist');
   cpSync(ASSETS_DIR, resolve(PUBLIC_DIR, 'imgs'), { recursive: true });
   cpSync(resolve(designSystemRootDir, 'imgs'), resolve(PUBLIC_DIR, 'imgs'), { recursive: true });
-  await writeJsonDataFilesAndFeedFile();
+  await Promise.all([writeJsonDataFilesAndFeedFile(), downloadTranslations()]);
   if (WITH_GENERATE_IMAGE_FORMATS) {
     await generateImageFormats();
   }

src/containers/PostCardListContainer/PostCardListContainer.tsx

@@ -7,17 +7,19 @@ import { usePostCardListContainer } from './usePostCardListContainer';
 
 export interface PostCardListContainerProps {
   allPosts: PostListPageData['posts'];
+  withPagination?: boolean;
   currentPage?: number;
   getPaginatedLink?: (page: number) => ComponentPropsWithoutRef<'a'>;
   isLoading?: boolean;
 }
 
 export const PostCardListContainer: React.FC<PostCardListContainerProps> = ({
   allPosts,
+  withPagination = true,
   currentPage = 1,
   getPaginatedLink,
   isLoading = false,
 }) => {
-  const postCardList = usePostCardListContainer({ allPosts, currentPage, getPaginatedLink, isLoading });
+  const postCardList = usePostCardListContainer({ allPosts, withPagination, currentPage, getPaginatedLink, isLoading });
   return <PostCardList {...postCardList} />;
 };

src/containers/PostCardListContainer/usePostCardListContainer.ts

@@ -7,14 +7,15 @@ import { PostCardListContainerProps } from './PostCardListContainer';
 
 export const usePostCardListContainer = ({
   allPosts,
+  withPagination = true,
   currentPage = 1,
   getPaginatedLink,
   isLoading = false,
 }: PostCardListContainerProps): Omit<PostCardListProps, 'title'> => {
   const numberOfPosts = allPosts.length;
   const totalPages = Math.ceil(numberOfPosts / NUMBER_OF_ITEMS_PER_PAGE);
   const offset = (currentPage - 1) * NUMBER_OF_ITEMS_PER_PAGE;
-  const posts = allPosts.slice(offset, offset + NUMBER_OF_ITEMS_PER_PAGE);
+  const posts = withPagination ? allPosts.slice(offset, offset + NUMBER_OF_ITEMS_PER_PAGE) : allPosts;
   const postsForCardList = usePostsForCardList({
     isLoading,
     numberOfItems: NUMBER_OF_ITEMS_PER_PAGE,
@@ -25,7 +26,7 @@ export const usePostCardListContainer = ({
   return {
     posts: postsForCardList,
     pagination:
-      numberOfPosts > NUMBER_OF_ITEMS_PER_PAGE && getPaginatedLink
+      withPagination && numberOfPosts > NUMBER_OF_ITEMS_PER_PAGE && getPaginatedLink
         ? {
             currentPage,
             totalPages,

src/containers/SearchPageContainer/useSearchPageContentContainer.tsx

@@ -64,7 +64,7 @@ export const useSearchPageContentContainer = (): SearchPageContentProps => {
             description: <TransWithHtml i18nKey="common.search_not_found.description" />,
           }
         : undefined,
-    postCardList: <PostCardListContainer allPosts={postsBySearch} isLoading={isLoading} />,
+    postCardList: <PostCardListContainer withPagination={false} allPosts={postsBySearch} isLoading={isLoading} />,
     isLoading,
   };
 };

src/translations/en.translations.json

@@ -138,12 +138,18 @@
       "tutorial": {
         "title": "All our tutorials about mobile and web development",
         "description": "Discover all our web development tutorials. Let our astronauts guide you step-by-step in creating whole solutions or new features : create an Android player in Kotlin, set up a GraphQL server by retrieving data via REST APIs or even set up a CI/CI with GitLab for a Vue.js application. Good reading!",
-        "post_list_title": "Read all our tutorials in mobile and web development"
+        "post_list_title": "Read all our tutorials in mobile and web development",
+        "seo": {
+          "title": "Web and mobile development tutorials"
+        }
       },
       "all": {
         "title": "All our articles about mobile and web development",
         "description": "<p>Discover articles from our astronauts, granting you direct access to their expertise in web development through several formats: projects feedbacks, tutorials and tool tests, advices on methodologies, introduction to frameworks... Chose your topic amongst Agility, Architecture, Data, DevOps, Javascript, or PHP!</p>\n<p>Good reading.</p>",
-        "post_list_title": "Read all our articles"
+        "post_list_title": "Read all our articles",
+        "seo": {
+          "title": "Articles and tutorials about web development"
+        }
       }
     },
     "article": {

src/translations/fr.translations.json

@@ -103,7 +103,7 @@
         "description": "<strong>PHP est un langage de programmation orienté backend</strong> qui permet de développer des applications dynamiques et interactives. C'est un langage populaire, utilisé par un grand nombre d'applications web très utilisées par le grand public. Dans cette catégorie, retrouvez tous les articles, retours d’expérience et tutoriels de nos astronautes autour de <strong>PHP, Symfony, Laravel, Angular, des outils incontournables pour améliorer votre productivité mais aussi nos retours sur les grands événements de la communauté ! Bonne lecture.</strong>",
         "expertise": {
           "title": "Quelle est l’utilité de PHP ?",
-          "description": "Avec son écosystème riche, sa très forte communauté, et ses nombreux frameworks incontournables comme Symfony,&nbsp;<strong>PHP permet de développer tous types d’applications backend</strong>. Son utilisation accélère le processus de développement : sa structure prédéfinie et ses composants permettent aux développeurs de se concentrer davantage sur la logique métier. PHP offre la flexibilité nécessaire pour <strong>créer des applications web interactives, des sites e-commerce, des blogs, des marketplaces, des sites médias ou encore des back-offices personnalisés.</strong> PHP est donc une solution de qualité pour <a href=\"https://eleven-labs.com/studio/\">développer vos projets web sur mesure</a>.",
+          "description": "Avec son écosystème riche, sa très forte communauté, et ses nombreux frameworks incontournables comme Symfony, <strong>PHP permet de développer tous types d’applications backend</strong>. Son utilisation accélère le processus de développement : sa structure prédéfinie et ses composants permettent aux développeurs de se concentrer davantage sur la logique métier. PHP offre la flexibilité nécessaire pour <strong>créer des applications web interactives, des sites e-commerce, des blogs, des marketplaces, des sites médias ou encore des back-offices personnalisés.</strong> PHP est donc une solution de qualité pour <a href=\"https://eleven-labs.com/studio/\">développer vos projets web sur mesure</a>.",
           "link_label": "Découvrir notre expertise PHP Symfony",
           "link_url": "https://eleven-labs.com/dev-web/php-symfony/"
         },
@@ -138,12 +138,18 @@
       "tutorial": {
         "title": "Tous nos tutoriels autour du développement web et mobile",
         "description": "Découvrez tous nos tutoriels en développement web. Nos astronautes vous guident pas-à-pas pour créer des solutions complètes ou de nouvelles fonctionnalités : créer un player android en Kotlin, mettre en place un serveur GraphQL en récupérant les données via des APIs REST ou encore mettre en place un CI/CI avec GitLab-ci pour une application Vue.js. <br />Bonne lecture !",
-        "post_list_title": "Découvrir tous nos tutoriels en développement web et mobile"
+        "post_list_title": "Découvrir tous nos tutoriels en développement web et mobile",
+        "seo": {
+          "title": "Tutoriels en développement web et mobile"
+        }
       },
       "all": {
         "title": "Tous nos articles autour du développement web et mobile",
         "description": "Découvrez les articles de nos astronautes qui mettent leur expertise en développement web à votre disposition sous plusieurs formats : <strong>retours d'expérience de projets, tutoriel et tests d'outils, conseil en méthodologies, initiation aux frameworks... Agilité, Architecture, Data, DevOps, Javascript, PHP...</strong> les sujets sont nombreux ! <br />Bonne lecture.",
-        "post_list_title": "Consulter l'ensemble de nos articles"
+        "post_list_title": "Consulter l'ensemble de nos articles",
+        "seo": {
+          "title": "Articles et tutoriels autour du développement web"
+        }
       }
     },
     "article": {