OCT-1604 Open Graph image uses relative path instead of absolute (#181)

golemfoundation · Apr 29, 2024 · 916cc1d · 916cc1d
2 parents 4482024 + afb256a
commit 916cc1d
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 7 deletions.
diff --git a/client/.env.template b/client/.env.template
@@ -1,16 +1,17 @@
 SECRET_WORDS=test test test test test test test test test test test junk
 VITE_ALCHEMY_ID=
-VITE_CRYPTO_VALUES_ENDPOINT=https://crypto-server.octant.world/
+VITE_ARE_CURRENT_EPOCHS_PROJECTS_HIDDEN_OUTSIDE_ALLOCATION_WINDOW=false
+VITE_CLIENT_ENDPOINT=http://localhost:5173/
+VITE_CRYPTO_VALUES_ENDPOINT=
 VITE_DEPOSITS_ADDRESS=
 VITE_EPOCHS_ADDRESS=
 VITE_GLM_ADDRESS=
 VITE_IPFS_GATEWAYS=https://turquoise-accused-gayal-88.mypinata.cloud/ipfs/,https://octant.infura-ipfs.io/ipfs/
+VITE_JSON_RPC_ENDPOINT=http://www.test.com/
 VITE_NETWORK=Sepolia
 VITE_PROPOSALS_ADDRESS=
-VITE_SERVER_ENDPOINT=http://127.0.0.1:5000
+VITE_SERVER_ENDPOINT=http://127.0.0.1:5000/
 VITE_SUBGRAPH_ADDRESS=https://octant.world/subgraphs/name/octant
 VITE_VAULT_ADDRESS=
 VITE_WALLET_CONNECT_PROJECT_ID=588213fd06714cc7e36ecbc5f2fdfd21
-VITE_WEBSOCKET_ENDPOINT=http://127.0.0.1:5000
-VITE_JSON_RPC_ENDPOINT=http://www.test.com
-VITE_ARE_CURRENT_EPOCHS_PROJECTS_HIDDEN_OUTSIDE_ALLOCATION_WINDOW=false
+VITE_WEBSOCKET_ENDPOINT=http://127.0.0.1:5000/
diff --git a/client/src/env.ts b/client/src/env.ts
@@ -6,6 +6,7 @@ export const envViteKeys: EnvViteKeys = {
   alchemyId: 'VITE_ALCHEMY_ID',
   areCurrentEpochsProjectsHiddenOutsideAllocationWindow:
     'VITE_ARE_CURRENT_EPOCHS_PROJECTS_HIDDEN_OUTSIDE_ALLOCATION_WINDOW',
+  clientEndpoint: 'VITE_CLIENT_ENDPOINT',
   contractDepositsAddress: 'VITE_DEPOSITS_ADDRESS',
   contractEpochsAddress: 'VITE_EPOCHS_ADDRESS',
   contractGlmAddress: 'VITE_GLM_ADDRESS',
@@ -30,6 +31,8 @@ const env: Env = {
     envViteKeys.areCurrentEpochsProjectsHiddenOutsideAllocationWindow
   ],
   // @ts-expect-error TS does not understand the way vite imports envs.
+  clientEndpoint: import.meta.env[envViteKeys.clientEndpoint],
+  // @ts-expect-error TS does not understand the way vite imports envs.
   contractDepositsAddress: import.meta.env[envViteKeys.contractDepositsAddress],
   // @ts-expect-error TS does not understand the way vite imports envs.
   contractEpochsAddress: import.meta.env[envViteKeys.contractEpochsAddress],

diff --git a/client/src/types/env.ts b/client/src/types/env.ts
@@ -1,6 +1,7 @@
 export type EnvViteKeys = {
   alchemyId: 'VITE_ALCHEMY_ID';
   areCurrentEpochsProjectsHiddenOutsideAllocationWindow: 'VITE_ARE_CURRENT_EPOCHS_PROJECTS_HIDDEN_OUTSIDE_ALLOCATION_WINDOW';
+  clientEndpoint: 'VITE_CLIENT_ENDPOINT';
   contractDepositsAddress: 'VITE_DEPOSITS_ADDRESS';
   contractEpochsAddress: 'VITE_EPOCHS_ADDRESS';
   contractGlmAddress: 'VITE_GLM_ADDRESS';
@@ -20,6 +21,7 @@ export type EnvViteKeys = {
 export type Env = {
   alchemyId: string;
   areCurrentEpochsProjectsHiddenOutsideAllocationWindow: string;
+  clientEndpoint: string;
   contractDepositsAddress: string;
   contractEpochsAddress: string;
   contractGlmAddress: string;

diff --git a/client/vite.config.js b/client/vite.config.js
@@ -3,7 +3,7 @@ import { sentryVitePlugin } from '@sentry/vite-plugin';
 import react from '@vitejs/plugin-react';
 import i18n from 'i18next';
 import { visualizer } from 'rollup-plugin-visualizer';
-import { defineConfig, splitVendorChunkPlugin } from 'vite';
+import { defineConfig, splitVendorChunkPlugin, loadEnv } from 'vite';
 import viteCompression from 'vite-plugin-compression';
 import htmlPlugin from 'vite-plugin-html-config';
 
@@ -29,6 +29,8 @@ i18n.init({
 
 // https://vitejs.dev/config/
 export default defineConfig(({ mode }) => {
+  process.env = {...process.env, ...loadEnv(mode, process.cwd())};
+
   const isProduction = mode === 'production';
   const isStaging = mode === 'staging';
   const localIdentName = isProduction ? '[hash:base64:5]' : '[name]__[local]--[hash:base64:5]';
@@ -42,7 +44,8 @@ export default defineConfig(({ mode }) => {
       metas: [
         { content: i18n.t('meta.description'), name: 'og:description' },
         { content: i18n.t('meta.description'), name: 'description' },
-        { content: `${base}images/og-image.png`, name: 'og:image' },
+        // importing env.ts is not possible here.
+        { content: `${process.env.VITE_CLIENT_ENDPOINT}images/og-image.png`, name: 'og:image' },
       ],
     }),
   ];