feat: move to react-helmet

golemfoundation · Apr 26, 2024 · 7147970 · 7147970
1 parent 5aa8d44
commit 7147970
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 21 deletions.
diff --git a/client/package.json b/client/package.json
@@ -54,6 +54,7 @@
     "minidenticons": "^4.2.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-helmet": "^6.1.0",
     "react-i18next": "^14.0.1",
     "react-infinite-scroller": "^1.2.6",
     "react-router-dom": "^6.21.3",
@@ -109,8 +110,7 @@
     "ts-jest": "^29.1.2",
     "typescript": "^5.3.3",
     "vite": "^4.5.2",
-    "vite-plugin-compression": "^0.5.1",
-    "vite-plugin-html-config": "^1.0.11"
+    "vite-plugin-compression": "^0.5.1"
   },
   "resolutions": {
     "**/cypress": "12.17.3"

diff --git a/client/src/App.tsx b/client/src/App.tsx
@@ -1,5 +1,6 @@
 import React, { ReactElement, useState, Fragment } from 'react';
 
+import Head from 'components/Head';
 import AppLoader from 'components/shared/AppLoader';
 import ModalOnboarding from 'components/shared/ModalOnboarding/ModalOnboarding';
 import useAppConnectManager from 'hooks/helpers/useAppConnectManager';
@@ -32,6 +33,7 @@ const App = (): ReactElement => {
 
   return (
     <Fragment>
+      <Head />
       <RootRoutes isSyncingInProgress={isSyncingInProgress || isFetchingCypressHelpers} />
       {!isSyncingInProgress && !isProjectAdminMode && <ModalOnboarding />}
     </Fragment>

diff --git a/client/src/components/Head/Head.tsx b/client/src/components/Head/Head.tsx
@@ -0,0 +1,17 @@
+import React, { ReactElement } from 'react';
+import { Helmet } from 'react-helmet';
+import { useTranslation } from 'react-i18next';
+
+const Head = (): ReactElement => {
+  const { t } = useTranslation('translation', { keyPrefix: 'meta' });
+
+  return (
+    <Helmet>
+      <meta content={t('description')} name="description" />
+      <meta content={t('description')} name="og:description" />
+      <meta content={`${window.location.hostname}/images/og-image.png`} name="og:image:" />
+    </Helmet>
+  );
+};
+
+export default Head;
diff --git a/client/src/components/Head/index.tsx b/client/src/components/Head/index.tsx
@@ -0,0 +1,2 @@
+// eslint-disable-next-line no-restricted-exports
+export { default } from './Head';
diff --git a/client/vite.config.js b/client/vite.config.js
@@ -5,7 +5,6 @@ import i18n from 'i18next';
 import { visualizer } from 'rollup-plugin-visualizer';
 import { defineConfig, splitVendorChunkPlugin } from 'vite';
 import viteCompression from 'vite-plugin-compression';
-import htmlPlugin from 'vite-plugin-html-config';
 
 import translationEN from './src/locales/en/translation.json';
 
@@ -34,18 +33,7 @@ export default defineConfig(({ mode }) => {
   const localIdentName = isProduction ? '[hash:base64:5]' : '[name]__[local]--[hash:base64:5]';
   const base = '/';
 
-  const plugins = [
-    react(),
-    splitVendorChunkPlugin(),
-    viteCompression(),
-    htmlPlugin({
-      metas: [
-        { content: i18n.t('meta.description'), name: 'og:description' },
-        { content: i18n.t('meta.description'), name: 'description' },
-        { content: new URL('/images/og-image.png', import.meta.url).href, name: 'og:image' },
-      ],
-    }),
-  ];
+  const plugins = [react(), splitVendorChunkPlugin(), viteCompression()];
   if (isStaging) {
     plugins.push(
       visualizer({

diff --git a/client/yarn.lock b/client/yarn.lock
@@ -10994,7 +10994,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.8, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -11193,6 +11193,21 @@ react-fast-compare@^2.0.1:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fast-compare@^3.1.1:
+  version "3.2.2"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.2.tgz#929a97a532304ce9fee4bcae44234f1ce2c21d49"
+  integrity sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==
+
+react-helmet@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
+  integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
+  dependencies:
+    object-assign "^4.1.1"
+    prop-types "^15.7.2"
+    react-fast-compare "^3.1.1"
+    react-side-effect "^2.1.0"
+
 react-i18next@^14.0.1:
   version "14.0.1"
   resolved "https://registry.yarnpkg.com/react-i18next/-/react-i18next-14.0.1.tgz#75351b25be076ad7391360b5a111b59ca87e0b63"
@@ -11252,6 +11267,11 @@ [email protected]:
   dependencies:
     "@remix-run/router" "1.14.2"
 
+react-side-effect@^2.1.0:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.2.tgz#dc6345b9e8f9906dc2eeb68700b615e0b4fe752a"
+  integrity sha512-PVjOcvVOyIILrYoyGEpDN3vmYNLdy1CajSFNt4TDsVQC5KpTijDvWVoR+/7Rz2xT978D8/ZtFceXxzsPwZEDvw==
+
 react-slider@^2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-2.0.6.tgz#8c7ff0301211f7c3ff32aa0163b33bdab6258559"
@@ -12988,11 +13008,6 @@ vite-plugin-compression@^0.5.1:
     debug "^4.3.3"
     fs-extra "^10.0.0"
 
-vite-plugin-html-config@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/vite-plugin-html-config/-/vite-plugin-html-config-1.0.11.tgz#7018fb41d17ced527d79f76361e9a9cf587f80bc"
-  integrity sha512-hUybhgI+/LQQ5q6xoMMsTvI4PBuQD/Wv6Z1vtDPVWjanS8weCIexXuLLYNGD/93f0v8W2hpNfXpmxgpZMahJ0g==
-
 vite@^4.5.2:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/vite/-/vite-4.5.2.tgz#d6ea8610e099851dad8c7371599969e0f8b97e82"
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		// eslint-disable-next-line no-restricted-exports
		export { default } from './Head';