fix: search page and update translations (#1088)

.github/workflows/checks-and-tests.yml

@@ -84,7 +84,7 @@ jobs:
         uses: ./.github/actions/restore-npm-cache
 
       - name: Build Application
-        run: WITH_GENERATE_IMAGE_FORMATS=false npm run build
+        run: WITH_DOWNLOAD_TRANSLATIONS_AND_GENERATE_IMAGE_FORMATS=false npm run build
 
   build-storybook:
     runs-on: ubuntu-latest

.github/workflows/continuous-integration-and-deployment.yml

@@ -43,6 +43,7 @@ jobs:
         env:
           NODE_ENV: production
           BASE_URL: ${{ env.BASE_URL }}
+          LOCO_API_KEY: ${{ secrets.LOCO_API_KEY }}
           VITE_HOST_URL: ${{ env.ENV_URL }}
           VITE_ALGOLIA_APP_ID: ${{ secrets.ALGOLIA_APP_ID }}
           VITE_ALGOLIA_API_KEY: ${{ secrets.ALGOLIA_API_SEARCH_KEY }}

bin/build.ts

@@ -3,11 +3,13 @@ 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 || '/';
 const MODE = process.env.NODE_ENV || 'production';
-const WITH_GENERATE_IMAGE_FORMATS = process.env.WITH_GENERATE_IMAGE_FORMATS !== 'false';
+const WITH_DOWNLOAD_TRANSLATIONS_AND_GENERATE_IMAGE_FORMATS =
+  process.env.WITH_DOWNLOAD_TRANSLATIONS_AND_GENERATE_IMAGE_FORMATS !== 'false';
 const ROOT_DIR = process.cwd();
 const ASSETS_DIR = resolve(ROOT_DIR, '_assets');
 const OUT_DIR = resolve(ROOT_DIR, 'dist');
@@ -38,38 +40,43 @@ const writeJsonDataFilesAndFeedFile = async (): Promise<void> => {
 };
 
 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();
-  if (WITH_GENERATE_IMAGE_FORMATS) {
-    await generateImageFormats();
-  }
+  try {
+    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();
+    if (WITH_DOWNLOAD_TRANSLATIONS_AND_GENERATE_IMAGE_FORMATS) {
+      await Promise.all([generateImageFormats(), downloadTranslations()]);
+    }
+
+    if (args.ssr) {
+      await buildVite({
+        base: BASE_URL,
+        build: {
+          emptyOutDir: false,
+          ssr: true,
+          outDir: OUT_DIR,
+          rollupOptions: {
+            input: 'src/server.ts',
+          },
+        },
+        mode: MODE,
+      });
+    }
 
-  if (args.ssr) {
     await buildVite({
       base: BASE_URL,
       build: {
         emptyOutDir: false,
-        ssr: true,
-        outDir: OUT_DIR,
-        rollupOptions: {
-          input: 'src/server.ts',
-        },
+        manifest: true,
+        outDir: OUT_PUBLIC_DIR,
       },
       mode: MODE,
     });
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
   }
-
-  await buildVite({
-    base: BASE_URL,
-    build: {
-      emptyOutDir: false,
-      manifest: true,
-      outDir: OUT_PUBLIC_DIR,
-    },
-    mode: MODE,
-  });
 };
 
 build();

bin/downloadTranslations.ts

@@ -1,17 +1,10 @@
-import { createServer as createViteServer } from 'vite';
+import { downloadTranslations } from '../src/helpers/downloadTranslationsHelper';
 
 (async (): Promise<void> => {
-  const vite = await createViteServer({
-    server: { middlewareMode: true },
-    appType: 'custom',
-  });
-
   try {
-    const { downloadTranslations } = await vite.ssrLoadModule('/src/helpers/downloadTranslationsHelper.ts');
     downloadTranslations();
-  } catch (e) {
-    console.error(e);
-  } finally {
-    vite.close();
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
   }
 })();

bin/indexationAlgolia.ts

@@ -9,5 +9,6 @@ import { indexationAlglolia } from '@/helpers/indexationAlgoliaHelper';
     });
   } catch (error) {
     console.error(error);
+    process.exit(1);
   }
 })();

bin/prerender.ts

@@ -16,8 +16,9 @@ const prerender = async (): Promise<void> => {
       rootDir: resolve(process.cwd(), 'dist'),
       baseUrl,
     });
-  } catch (e) {
-    console.error(e);
+  } catch (error) {
+    console.error(error);
+    process.exit(1);
   } finally {
     vite.close();
   }

src/containers/CategoryPageContainer/useCategoryPageContainer.tsx

@@ -1,5 +1,5 @@
 import { CategoryPageProps } from '@eleven-labs/design-system';
-import { useLink } from 'hoofd';
+import { useLink, useMeta } from 'hoofd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoaderData, useParams } from 'react-router-dom';
@@ -21,6 +21,7 @@ export const useCategoryPageContainer = (): CategoryPageProps => {
   const newsletterCard = useNewsletterCard();
   const breadcrumb = useBreadcrumb({ categoryName: categoryName as string });
   useTitle(t(`pages.category.${categoryName}.seo.title`, { categoryName }));
+  useMeta({ name: 'description', content: t(`pages.category.${categoryName}.seo.description`) });
   useLink({
     rel: 'canonical',
     href: `${blogUrl}${generatePath(categoryName ? PATHS.CATEGORY : PATHS.ROOT, {

src/containers/HomePageContainer/useHomePageContainer.tsx

@@ -1,5 +1,5 @@
 import { HomePageProps } from '@eleven-labs/design-system';
-import { useLink } from 'hoofd';
+import { useLink, useMeta } from 'hoofd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoaderData } from 'react-router-dom';
@@ -15,6 +15,7 @@ import { PostListPageData } from '@/types';
 
 export const useHomePageContainer = (): HomePageProps => {
   const { t, i18n } = useTranslation();
+  useMeta({ name: 'description', content: t(`pages.home.seo.description`) });
   const postListPageData = useLoaderData() as PostListPageData;
   const newsletterCard = useNewsletterCard();
   const lastArticlesForCardList = usePostsForCardList({

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/helpers/downloadTranslationsHelper.ts

@@ -10,9 +10,14 @@ const getTranslations = (lang: (typeof LANGUAGES_AVAILABLE)[number]): Promise<st
     [LanguageEnum.EN]: 'en-GB',
   };
 
-  return fetch(`https://localise.biz/api/export/locale/${locales[lang]}.json?key=${process.env.LOCO_API_KEY}`).then(
-    (response) => response.json()
-  );
+  return fetch(`https://localise.biz/api/export/locale/${locales[lang]}.json?key=${process.env.LOCO_API_KEY}`)
+    .then((response) => response.json())
+    .then((response) => {
+      if (response.error) {
+        throw new Error(response.error);
+      }
+      return response;
+    });
 };
 
 export const downloadTranslations = async (): Promise<void> => {

src/translations/en.translations.json

@@ -62,7 +62,8 @@
   "pages": {
     "home": {
       "seo": {
-        "title": "Web development blog: feedbacks, articles and tutorials from our experts"
+        "title": "Web development blog: feedbacks, articles and tutorials from our experts",
+        "description": "In this blog, discover all the articles and tutorials from our experts about web and mobile development, IS and web architecture, agility and Product Management."
       },
       "intro-block": {
         "intro": "Explore new knowledge",
@@ -83,7 +84,8 @@
     "category": {
       "javascript": {
         "seo": {
-          "title": "Javascript programming: tutorials and articles about the last trends"
+          "title": "Javascript programming: tutorials and articles about the last trends",
+          "description": "All our blog articles, REX and tutorials about Javascript development: React.js, Node.js, Nest.js, Next.js, Vue.js, Svelte.js"
         },
         "title": "Our articles and feedbacks about Javascript programming",
         "description": "<strong>Javascript is a dynamic programming language famous for its flexiblity!</strong> No wonder it's the most popular language among developers worldwide. In this category, find all our experts' articles, feedbacks and tutorials revolving around <strong>React.js, Node.js, Nest.js, Next.js, Vue.js, Svelte.js, and many tools to use in order to facilitate your delivery or set up a Design System, and much more! Good reading!</strong>",
@@ -97,7 +99,8 @@
       },
       "php": {
         "seo": {
-          "title": "PHP programming: articles, tutorials and feedbacks"
+          "title": "PHP programming: articles, tutorials and feedbacks",
+          "description": "All our tutorials, tool explanations, REX participation in community events and blog articles on various technologies in PHP web development."
         },
         "title": "Our articles and feedbacks about PHP programming",
         "description": "<strong>PHP is a backend-oriented programming language</strong> that allows the development of dynamic and interactive applications. It is a popular language, used by a large number of web applications widely used by the general public. In this category, find all the articles, feedbacks and tutorials from our astronauts about <strong>PHP, Symfony, Laravel, Angular, the essential tools to improve your productivity, and our reports on major community events!</strong> Good reading!",
@@ -107,7 +110,16 @@
           "link_label": "Learn more about our PHP Symfony expertise",
           "link_url": "https://eleven-labs.com/dev-web/php-symfony/"
         },
-        "post_list_title": "All our articles about the PHP programming language and its latest trends"
+        "post_list_title": "All our articles about the PHP programming language and its latest trends",
+        "agile": {
+          "description": "Agile web project methodologies: find all the articles, feedback and tutorials from our experts on Scrum methodology, the profession of Scrum Master and Product Manager."
+        },
+        "architecture": {
+          "description": "Architecture of information systems (IS) : articles, REX, advice and tutorials about Data architecture, DevOps tools and practices, Platform Engineering and web architecture."
+        },
+        "tutorial": {
+          "description": "Discover all our web and mobile development tutorials: Rest APIs, microservice, GitLab-CI, GraphQL server and others!"
+        }
       },
       "agile": {
         "seo": {
@@ -138,12 +150,19 @@
       "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",
+          "description": "Discover all our articles, feedbacks and tutorials about PHP and Javascript languages, web architecture and agility."
+        }
       }
     },
     "article": {