fixup! feat: add HomeIntroBlock, CategoryIntroBlock and CategoryEndin…

…gBlock

.env

@@ -7,3 +7,4 @@ VITE_ALGOLIA_INDEX=blog_eleven_v2_dev
 VITE_ALGOLIA_API_KEY=0ff075bf3ef8942ec3c6481f9aa05ae5
 VITE_GTM_ID=GTM-NB8NF97
 VITE_GOOGLE_SITE_VERIFICATION=google-site-verification
+BASE_URL=/feat/apply-new-design/

src/components/Blocks/HomeIntroBlock/HomeIntroBlock.scss

@@ -1,11 +1,17 @@
+@use '@eleven-labs/design-system/scss/abstracts' as *;
+
 .home-intro-block {
   background-color: var(--color-white);
-  background-image: url('/imgs/home-intro-block.png');
-  background-repeat: no-repeat;
-  background-position: bottom right;
+
+  @include create-media-queries('md') {
+    background-image: url('/imgs/home-intro-block.png');
+    background-repeat: no-repeat;
+    background-position: top right;
+    background-size: auto 100%;
+  }
 
   &__container {
-    width: 724px;
+    max-width: 724px;
   }
 
   &__description {

src/components/Blocks/HomeIntroBlock/HomeIntroBlock.tsx

@@ -10,14 +10,23 @@ export interface HomeIntroBlockProps {
   elevenLabsLink: { label: string } & React.ComponentPropsWithoutRef<'a'>;
 }
 
+//pl={{ xs: 'xs', md: 'xxl-2' }}
+
 export const HomeIntroBlock: React.FC<HomeIntroBlockProps> = ({
   intro,
   title,
   description,
   elevenLabsLink: { label: elevelLabsLinkLabel, ...elevenLabsLink },
 }) => (
   <Box py="xl" className="home-intro-block">
-    <Flex alignItems="baseline" flexDirection="column" gap="l" ml="xxl-2" className="home-intro-block__container">
+    <Flex
+      alignItems="baseline"
+      flexDirection="column"
+      gap="l"
+      p="l"
+      ml={{ xs: '0', md: 'xxl' }}
+      className="home-intro-block__container"
+    >
       <Text size="m" fontWeight="bold" color="amaranth" textTransform="uppercase">
         {intro}
       </Text>

src/constants.ts

@@ -25,7 +25,6 @@ export const NUMBER_OF_ITEMS_PER_PAGE = 8;
 export const PATHS = {
   ROOT: '/',
   HOME: '/:lang/',
-  PAGINATED_HOME: '/:lang/page/:page/',
   POST: '/:lang/:slug/:step?/',
   AUTHOR: '/:lang/authors/:authorUsername/',
   CATEGORY: '/:lang/categories/:categoryName/',

src/containers/CategoryPageContainer/useCategoryPageContainer.tsx

@@ -27,7 +27,7 @@ export const useCategoryPageContainer = (): CategoryPageProps => {
   return {
     categoryIntroBlock: {
       homeLink: {
-        label: 'Accueil',
+        label: t('pages.category.home_link_label'),
         href: '#',
       },
       name: t(`categories.${categoryName}`),

src/helpers/loaderDataHelper.ts

@@ -51,7 +51,9 @@ export const loadPostListPageData = async (options: LoaderFunctionArgs): Promise
         : post?.categories?.includes(options.params.categoryName as CategoryEnum)
     );
     if (postsByCategoryName.length === 0) {
-      throw new Error('No articles associated with this category');
+      throw new Error(
+        `No articles associated with the category "${options.params.categoryName}" for the language "${options.params.lang}"`
+      );
     }
     return {
       posts: postsByCategoryName,

src/helpers/prerenderHelper/getSitemapEntries.test.ts

@@ -50,14 +50,6 @@ describe('getSitemapEntries', () => {
           { lang: 'en', url: '/en/authors/author-1/' },
         ],
       },
-      {
-        priority: 0,
-        links: [
-          { lang: 'fr', url: '/fr/search/' },
-          { lang: 'en', url: '/en/search/' },
-        ],
-      },
-      { priority: 0, links: [{ lang: 'fr', url: '/404' }] },
     ];
 
     const sitemapEntries = getSitemapEntries();

src/helpers/prerenderHelper/getSitemapEntries.ts

@@ -61,7 +61,7 @@ export const getSitemapEntries = (): SitemapEntry[] => {
     links: [
       {
         lang: DEFAULT_LANGUAGE,
-        url: generatePath(PATHS.ROOT),
+        url: generatePath(PATHS.ROOT, {}),
       },
       ...Object.values(LanguageEnum).map((lang) => ({
         lang,
@@ -70,24 +70,16 @@ export const getSitemapEntries = (): SitemapEntry[] => {
     ],
   };
 
-  const searchEntry: SitemapEntry = {
-    priority: 0,
-    links: Object.values(LanguageEnum).map((lang) => ({
-      lang,
-      url: generatePath(PATHS.SEARCH, { lang }),
-    })),
-  };
-
   const categoryEntries: SitemapEntry[] = CATEGORIES.filter((categoryName) =>
     posts.some((post) => post?.categories?.includes(categoryName))
-  ).map(createCategorySitemapEntry);
+  ).map((categoryName) => createCategorySitemapEntry(categoryName));
 
   const hasTutorial = posts.some((post) => post.contentType === ContentTypeEnum.TUTORIAL);
   if (hasTutorial) {
     categoryEntries.push(createCategorySitemapEntry(ContentTypeEnum.TUTORIAL));
   }
 
-  const postEntries: SitemapEntry[] = posts.map(createPostSitemapEntry);
+  const postEntries: SitemapEntry[] = posts.map((post) => createPostSitemapEntry(post));
   const tutorialStepEntries: SitemapEntry[] = posts.reduce((sitemapEntries, post) => {
     if (post.contentType === ContentTypeEnum.TUTORIAL) {
       const steps = post.steps.slice(1);
@@ -100,23 +92,7 @@ export const getSitemapEntries = (): SitemapEntry[] => {
     .filter((author) => posts.some((post) => post.authors.includes(author.username)))
     .map((author) => createAuthorSitemapEntry(author, posts));
 
-  const notFoundEntry: SitemapEntry = {
-    priority: 0,
-    links: [
-      {
-        lang: DEFAULT_LANGUAGE,
-        url: '/404',
-      },
-    ],
-  };
-
-  return [
-    rootEntry,
-    searchEntry,
-    ...categoryEntries,
-    ...postEntries,
-    ...tutorialStepEntries,
-    ...authorEntries,
-    notFoundEntry,
-  ].sort((a, b) => b?.priority - a?.priority);
+  return [rootEntry, ...categoryEntries, ...postEntries, ...tutorialStepEntries, ...authorEntries].sort(
+    (a, b) => b?.priority - a?.priority
+  );
 };

src/helpers/prerenderHelper/index.ts

@@ -1,5 +1,8 @@
 import { resolve } from 'node:path';
 
+import { DEFAULT_LANGUAGE, LanguageEnum, PATHS } from '@/constants';
+import { generatePath } from '@/helpers/routerHelper';
+
 import { generateFeedFile } from './generateFeedFile';
 import { generateHtmlFiles } from './generateHtmlFiles';
 import { generateSitemap } from './generateSitemap';
@@ -13,9 +16,20 @@ export const generateFiles = async (options: { rootDir: string; baseUrl: string
     .flat()
     .map((param) => ({
       lang: param.lang,
-      url: param.url.replace(/^\//, options.baseUrl || '/'),
+      url: param.url,
     }));
 
+  urls.push(
+    ...Object.values(LanguageEnum).map((lang) => ({
+      lang,
+      url: generatePath(PATHS.SEARCH, { lang }),
+    })),
+    {
+      lang: DEFAULT_LANGUAGE,
+      url: generatePath('/404', {}),
+    }
+  );
+
   await Promise.all([
     generateHtmlFiles({
       rootDir: __dirname,

src/helpers/routerHelper.ts

@@ -1,6 +1,8 @@
 import { generatePath as generatePathBase } from 'react-router-dom';
 
-export const generatePath: typeof generatePathBase = (...args): string => {
-  const path = generatePathBase(...args);
-  return !path.endsWith('/') ? path.concat('/') : path;
+import { BASE_URL } from '@/constants';
+
+export const generatePath: typeof generatePathBase = (originalPath, params): string => {
+  const path = generatePathBase(originalPath, params);
+  return `${BASE_URL}${(!path.endsWith('/') ? path.concat('/') : path).slice(1)}`;
 };

src/translations/en.translations.json

@@ -73,6 +73,7 @@
       "learn_more_link_label": "Learn more about Eleven Labs"
     },
     "category": {
+      "home_link_label": "Home",
       "javascript": {
         "title": "Title",
         "description": "Description",

src/translations/fr.translations.json

@@ -73,6 +73,7 @@
       "learn_more_link_label": "En savoir plus sur Eleven Labs"
     },
     "category": {
+      "home_link_label": "Accueil",
       "javascript": {
         "title": "Nos articles et retours d’expérience <br />en développement Javascript",
         "description": "Javascript est un langage de programmation dynamique complet et doté d’une incroyable flexibilité ! Ce n’est pas pour rien que ce langage est aujourd'hui le plus utilisé par les développeurs à travers le monde. Dans cette catégorie, retrouvez tous les articles, retours d’expérience et tutoriels de nos astronautes autour de React.js, Node.js, Nest.js, Next.js, Vue.js, Svelte.js mais également des outils à utiliser pour faciliter votre delivery, du Design System et bien plus encore ! Bonne lecture.",