fix: url relative and absolute (#1115)

eleven-labs · Apr 17, 2024 · 00f4090 · 00f4090
1 parent 8396511
commit 00f4090
Show file tree

Hide file tree

Showing 13 changed files with 57 additions and 40 deletions.
diff --git a/src/config/website/common.ts b/src/config/website/common.ts
@@ -1,6 +1,4 @@
-export const blogUrl = 'https://blog.eleven-labs.com';
 export const websiteUrl = 'https://eleven-labs.com';
-export const newsletterFormUrl = 'http://eepurl.com/cOuOIf';
 
 export const contactUrl = 'https://eleven-labs.com/contact/';
 

diff --git a/src/config/website/socialNetworks.ts b/src/config/website/socialNetworks.ts
@@ -1,5 +1,7 @@
 import { IconNameType } from '@eleven-labs/design-system';
 
+import { generateUrl } from '@/helpers/assetHelper';
+
 export const socialNetworks: {
   label: string;
   iconName: Extract<IconNameType, 'rss' | 'facebook' | 'twitter' | 'linkedin' | 'welcometothejungle'>;
@@ -8,7 +10,7 @@ export const socialNetworks: {
   {
     label: 'RSS',
     iconName: 'rss',
-    url: 'https://blog.eleven-labs.com/feed.xml',
+    url: generateUrl('/feed.xml'),
   },
   {
     label: 'Facebook',

diff --git a/src/containers/AuthorPageContainer/useAuthorPageContainer.tsx b/src/containers/AuthorPageContainer/useAuthorPageContainer.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoaderData, useParams } from 'react-router-dom';
 
-import { blogUrl } from '@/config/website';
 import { DEFAULT_LANGUAGE, PATHS } from '@/constants';
 import { PostCardListContainer, PostCardListContainerProps } from '@/containers/PostCardListContainer';
 import { generatePath } from '@/helpers/routerHelper';
@@ -20,10 +19,10 @@ export const useAuthorPageContainer = (): AuthorPageProps | undefined => {
   useTitle(t('pages.author.seo.title', { authorName: authorPageData?.author.name }));
   useLink({
     rel: 'canonical',
-    href: `${blogUrl}${generatePath(PATHS.AUTHOR, {
+    href: generatePath(PATHS.AUTHOR, {
       lang: DEFAULT_LANGUAGE,
       authorUsername: authorPageData?.author?.username,
-    })}`,
+    }),
   });
 
   const getPaginatedLink: PostCardListContainerProps['getPaginatedLink'] = (page: number) => ({

diff --git a/src/containers/CategoryPageContainer/useCategoryPageContainer.tsx b/src/containers/CategoryPageContainer/useCategoryPageContainer.tsx
@@ -4,7 +4,6 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoaderData, useParams } from 'react-router-dom';
 
-import { blogUrl } from '@/config/website';
 import { DEFAULT_LANGUAGE, MARKDOWN_CONTENT_TYPES, PATHS } from '@/constants';
 import { PostCardListContainer, PostCardListContainerProps } from '@/containers/PostCardListContainer';
 import { TransWithHtml } from '@/containers/TransWithHtml';
@@ -24,10 +23,10 @@ export const useCategoryPageContainer = (): CategoryPageProps => {
   useMeta({ name: 'description', content: t(`pages.category.${categoryName}.seo.description`) });
   useLink({
     rel: 'canonical',
-    href: `${blogUrl}${generatePath(categoryName ? PATHS.CATEGORY : PATHS.ROOT, {
+    href: generatePath(categoryName ? PATHS.CATEGORY : PATHS.ROOT, {
       lang: DEFAULT_LANGUAGE,
       categoryName: categoryName,
-    })}`,
+    }),
   });
 
   const getPaginatedLink: PostCardListContainerProps['getPaginatedLink'] = (page: number) => ({

diff --git a/src/containers/HomePageContainer/useHomePageContainer.tsx b/src/containers/HomePageContainer/useHomePageContainer.tsx
@@ -4,7 +4,7 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { useLoaderData } from 'react-router-dom';
 
-import { blogUrl, websiteUrl } from '@/config/website';
+import { websiteUrl } from '@/config/website';
 import { DEFAULT_LANGUAGE, IMAGE_FORMATS, LANGUAGES, MARKDOWN_CONTENT_TYPES, PATHS } from '@/constants';
 import { TransWithHtml } from '@/containers/TransWithHtml';
 import { generatePath } from '@/helpers/routerHelper';
@@ -42,9 +42,9 @@ export const useHomePageContainer = (): HomePageProps => {
   useTitle(t('pages.home.seo.title'));
   useLink({
     rel: 'canonical',
-    href: `${blogUrl}${generatePath(PATHS.ROOT, {
+    href: generatePath(PATHS.ROOT, {
       lang: DEFAULT_LANGUAGE,
-    })}`,
+    }),
   });
 
   return {

diff --git a/src/containers/LayoutTemplateContainer/useLayoutTemplateContainer.tsx b/src/containers/LayoutTemplateContainer/useLayoutTemplateContainer.tsx
@@ -5,9 +5,9 @@ import { useTranslation } from 'react-i18next';
 import { matchPath, useLoaderData, useLocation } from 'react-router-dom';
 
 import { themeColor } from '@/config/website';
-import { GOOGLE_SITE_VERIFICATION } from '@/constants';
+import { BASE_URL, GOOGLE_SITE_VERIFICATION } from '@/constants';
 import { PATHS } from '@/constants';
-import { getPathFile } from '@/helpers/assetHelper';
+import { generateUrl } from '@/helpers/assetHelper';
 import { getUrl } from '@/helpers/getUrlHelper';
 import { LayoutTemplateData } from '@/types';
 
@@ -51,14 +51,14 @@ export const useLayoutTemplateContainer = (): Omit<LayoutTemplateProps, 'childre
       '@context': 'https://schema.org',
       '@type': 'WebSite',
       name: 'Blog Eleven Labs',
-      url: 'https://blog.eleven-labs.com/',
+      url: BASE_URL,
       ...(isHomePage
         ? {
             potentialAction: {
               '@type': 'SearchAction',
               target: {
                 '@type': 'EntryPoint',
-                urlTemplate: `https://blog.eleven-labs.com/${i18n.language}/search/?search={search_term_string}`,
+                urlTemplate: generateUrl(`${i18n.language}/search/?search={search_term_string}`),
               },
               'query-input': 'required name=search_term_string',
             },
@@ -67,14 +67,14 @@ export const useLayoutTemplateContainer = (): Omit<LayoutTemplateProps, 'childre
     }),
   });
 
-  useLink({ rel: 'apple-touch-icon', sizes: '120x120', href: getPathFile('/imgs/icons/apple-icon-120x120.png') });
-  useLink({ rel: 'apple-touch-icon', sizes: '152x152', href: getPathFile('/imgs/icons/apple-icon-152x152.png') });
-  useLink({ rel: 'apple-touch-icon', sizes: '180x180', href: getPathFile('/imgs/icons/apple-icon-180x180.png') });
+  useLink({ rel: 'apple-touch-icon', sizes: '120x120', href: generateUrl('/imgs/icons/apple-icon-120x120.png') });
+  useLink({ rel: 'apple-touch-icon', sizes: '152x152', href: generateUrl('/imgs/icons/apple-icon-152x152.png') });
+  useLink({ rel: 'apple-touch-icon', sizes: '180x180', href: generateUrl('/imgs/icons/apple-icon-180x180.png') });
 
   useLink({ rel: 'preconnect', href: 'https://fonts.googleapis.com' });
   useLink({ rel: 'preconnect', href: 'https://fonts.gstatic.com' });
   useLink({ rel: 'stylesheet', href: 'https://fonts.googleapis.com/css2?family=Work+Sans:wght@100..900&display=swap' });
-  useLink({ rel: 'alternate', type: 'application/rss+xml', href: getPathFile('/feed.xml') });
+  useLink({ rel: 'alternate', type: 'application/rss+xml', href: generateUrl('/feed.xml') });
 
   return {
     header: (

diff --git a/src/containers/SearchPageContainer/useSearchPageContentContainer.tsx b/src/containers/SearchPageContainer/useSearchPageContentContainer.tsx
@@ -3,7 +3,6 @@ import { useLink, useTitleTemplate } from 'hoofd';
 import React, { useEffect, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
-import { blogUrl } from '@/config/website';
 import { DEFAULT_LANGUAGE, IS_SSR, PATHS } from '@/constants';
 import { PostCardListContainer, PostCardListContainerProps } from '@/containers/PostCardListContainer';
 import { TransWithHtml } from '@/containers/TransWithHtml';
@@ -21,7 +20,7 @@ export const useSearchPageContentContainer = (): SearchPageContentProps => {
   useTitle(t('pages.search.seo.title', { search }));
   useLink({
     rel: 'canonical',
-    href: `${blogUrl}${generatePath(PATHS.SEARCH, { lang: DEFAULT_LANGUAGE })}`,
+    href: generatePath(PATHS.SEARCH, { lang: DEFAULT_LANGUAGE }),
   });
 
   const [postsBySearch, setPostsBySearch] = useState<PostCardListContainerProps['allPosts']>([]);

diff --git a/src/helpers/assetHelper.test.ts b/src/helpers/assetHelper.test.ts
@@ -1,11 +1,27 @@
-import { BASE_URL } from '@/constants';
-
-import { getPathFile } from './assetHelper';
+import { generateUrl, getPathFile } from './assetHelper';
 
 describe('getPathFile', () => {
+  vi.mock('@/constants', () => ({
+    BASE_URL: '/',
+  }));
   it('returns the correct path file', () => {
     const path = '/example/path/picture.png';
     const result = getPathFile(path);
-    expect(result).toBe(`${BASE_URL}example/path/picture.png`);
+    expect(result).toBe('/example/path/picture.png');
+  });
+});
+
+describe('generateUrl', () => {
+  vi.mock('@/constants', async () => {
+    const actual = await vi.importActual<typeof import('@/constants')>('@/constants');
+    return {
+      ...actual,
+      HOST_URL: 'https://blog.eleven-labs.com',
+    };
+  });
+  it('returns the correct url', () => {
+    const path = '/example/path/picture.png';
+    const result = generateUrl(path);
+    expect(result).toBe(`https://blog.eleven-labs.com/example/path/picture.png`);
   });
 });
diff --git a/src/helpers/assetHelper.ts b/src/helpers/assetHelper.ts
@@ -4,6 +4,7 @@ import {
   BASE_URL,
   DEFAULT_EXTENSION_FOR_IMAGES,
   DEVICES,
+  HOST_URL,
   IMAGE_CONTENT_TYPES,
   IMAGE_POSITIONS,
   SIZES_BY_IMAGE_FORMAT,
@@ -26,6 +27,8 @@ const extname = (path: string): string => path.split('.').pop() || '';
 
 export const getPathFile = (path: string): string => `${BASE_URL}${path.slice(1)}`;
 
+export const generateUrl = (path: string): string => `${HOST_URL}${path}`;
+
 export const getCoverPath = ({
   path = '/imgs/default-cover.jpg',
   format,

diff --git a/src/helpers/prerenderHelper/generateFeedFile.ts b/src/helpers/prerenderHelper/generateFeedFile.ts
@@ -3,8 +3,8 @@ import { writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import sanitizeHtml from 'sanitize-html';
 
-import { blogUrl } from '@/config/website';
-import { MARKDOWN_CONTENT_TYPES, PATHS } from '@/constants';
+import { BASE_URL, MARKDOWN_CONTENT_TYPES, PATHS } from '@/constants';
+import { generateUrl } from '@/helpers/assetHelper';
 import { getPosts } from '@/helpers/markdownContentManagerHelper';
 import { generatePath } from '@/helpers/routerHelper';
 
@@ -14,10 +14,10 @@ export const generateFeedFile = (options: { rootDir: string }): void => {
   const feed = new Feed({
     title: 'Blog Eleven Labs',
     description: `L'actualité tech`,
-    id: blogUrl,
-    link: blogUrl,
-    image: `${blogUrl}/imgs/logo.png`,
-    favicon: `${blogUrl}/favicon.ico`,
+    id: BASE_URL,
+    link: BASE_URL,
+    image: generateUrl('/imgs/logo.png'),
+    favicon: generateUrl('/favicon.ico'),
     copyright: `All rights reserved ${new Date().getFullYear()}, Blog Eleven Labs`,
     generator: 'awesome',
     author: {
@@ -27,7 +27,7 @@ export const generateFeedFile = (options: { rootDir: string }): void => {
   });
 
   for (const { lang, slug, ...post } of sortedPosts.slice(0, 15)) {
-    const url = `${blogUrl}${generatePath(PATHS.POST, { lang, slug })}`;
+    const url = generatePath(PATHS.POST, { lang, slug });
     feed.addItem({
       title: post.title,
       id: url,

diff --git a/src/helpers/prerenderHelper/generateSitemap.ts b/src/helpers/prerenderHelper/generateSitemap.ts
@@ -2,8 +2,8 @@ import { writeFileSync } from 'node:fs';
 import { resolve } from 'node:path';
 import * as xml2js from 'xml2js';
 
-import { blogUrl } from '@/config/website';
 import { DEFAULT_LANGUAGE } from '@/constants';
+import { generateUrl } from '@/helpers/assetHelper';
 
 export const getSitemap = (
   sitemapEntries: { links: { lang: string; url: string }[]; changefreq?: string; priority?: number }[]
@@ -19,14 +19,14 @@ export const getSitemap = (
       url: sitemapEntries.map(({ links, priority, changefreq }) => {
         const defaultLink = links.find((link) => link.lang === DEFAULT_LANGUAGE) ?? links[0];
         return {
-          loc: `${blogUrl}${defaultLink.url}`,
+          loc: generateUrl(defaultLink.url),
           ...(changefreq ? { changefreq } : {}),
           priority: priority?.toFixed(1) ?? 0.3,
           ...(links.length > 1
             ? {
                 'xhtml:link': links.map((link) => ({
                   $: {
-                    href: `${blogUrl}${link.url}`,
+                    href: generateUrl(link.url),
                     hreflang: link.lang,
                     rel: 'alternate',
                   },

diff --git a/src/hooks/useSeoPost.ts b/src/hooks/useSeoPost.ts
@@ -2,6 +2,7 @@ import { useMeta, useScript } from 'hoofd';
 import { useTranslation } from 'react-i18next';
 
 import { PATHS } from '@/constants';
+import { generateUrl } from '@/helpers/assetHelper';
 import { generatePath } from '@/helpers/routerHelper';
 import { useTitle } from '@/hooks/useTitle';
 import { PostPageData } from '@/types';
@@ -32,7 +33,7 @@ export const useSeoPost = (post: PostPageData): void => {
         name: 'Eleven Labs',
         logo: {
           '@type': 'ImageObject',
-          url: 'https://blog.eleven-labs.com/imgs/logo.png',
+          url: generateUrl('/imgs/logo.png'),
         },
       },
     }),

diff --git a/src/templates/HtmlTemplate/HtmlTemplate.tsx b/src/templates/HtmlTemplate/HtmlTemplate.tsx
@@ -2,7 +2,7 @@ import { ResourceStore } from 'i18next';
 import * as React from 'react';
 
 import { GTM_ID } from '@/constants';
-import { getPathFile } from '@/helpers/assetHelper';
+import { generateUrl } from '@/helpers/assetHelper';
 
 export interface HtmlTemplateProps {
   lang: string;
@@ -52,8 +52,8 @@ export const HtmlTemplate: React.FC<HtmlTemplateProps> = ({
       {metas?.map((meta, index) => (
         <meta key={index} {...meta} />
       ))}
-      <link rel="shortcut icon" type="image/x-icon" href={getPathFile('/favicon.ico')} />
-      <link rel="manifest" href={getPathFile('/web-app-manifest.json')} />
+      <link rel="shortcut icon" type="image/x-icon" href={generateUrl('/favicon.ico')} />
+      <link rel="manifest" href={generateUrl('/web-app-manifest.json')} />
       <link rel="preconnect" href="https://fonts.googleapis.com" />
       <link rel="preconnect" href="https://fonts.gstatic.com" crossOrigin="anonymous" />
       <link