From 00f40901921c0a03f7df73feb5854f606e7de635 Mon Sep 17 00:00:00 2001 From: fpasquet Date: Wed, 17 Apr 2024 18:04:16 +0200 Subject: [PATCH] fix: url relative and absolute (#1115) --- src/config/website/common.ts | 2 -- src/config/website/socialNetworks.ts | 4 +++- .../useAuthorPageContainer.tsx | 5 ++-- .../useCategoryPageContainer.tsx | 5 ++-- .../useHomePageContainer.tsx | 6 ++--- .../useLayoutTemplateContainer.tsx | 16 ++++++------- .../useSearchPageContentContainer.tsx | 3 +-- src/helpers/assetHelper.test.ts | 24 +++++++++++++++---- src/helpers/assetHelper.ts | 3 +++ .../prerenderHelper/generateFeedFile.ts | 14 +++++------ .../prerenderHelper/generateSitemap.ts | 6 ++--- src/hooks/useSeoPost.ts | 3 ++- src/templates/HtmlTemplate/HtmlTemplate.tsx | 6 ++--- 13 files changed, 57 insertions(+), 40 deletions(-) diff --git a/src/config/website/common.ts b/src/config/website/common.ts index 4fe0eaac7..a6b429a01 100644 --- 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 index 6d102741a..4ff6b0cf6 100644 --- 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; @@ -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 index 11fe0cd88..0766c8427 100644 --- 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 index c48116c51..9097db110 100644 --- 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 index 11b760d69..5a465938f 100644 --- 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 index 5904cf624..71dc1a124 100644 --- 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 { 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([]); diff --git a/src/helpers/assetHelper.test.ts b/src/helpers/assetHelper.test.ts index a3b86fa86..344e38ee5 100644 --- 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('@/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 index da07e43e7..5e53da742 100644 --- 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 index 7cfbb7bf1..8179b2aac 100644 --- 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 index 65988c493..3732bc949 100644 --- 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 index c02ef53f4..be832ed79 100644 --- 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 index 0c39cdaf2..1aabcd19d 100644 --- 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 = ({ {metas?.map((meta, index) => ( ))} - - + +