From 316b3205ab5fb9240d31b649637ace992694ef7a Mon Sep 17 00:00:00 2001 From: Stefan Forstenlechner Date: Sun, 17 Apr 2022 16:00:23 +0200 Subject: [PATCH] Make it possible to change title and favicon Cannot change title and favicon on build, to allow to change the variables with --env-file when creating a docker container --- picture-gallery-client/public/index.html | 6 +++--- picture-gallery-client/src/env.ts | 19 +++++++++++++++++++ picture-gallery-client/src/index.tsx | 3 +++ 3 files changed, 25 insertions(+), 3 deletions(-) diff --git a/picture-gallery-client/public/index.html b/picture-gallery-client/public/index.html index 62bacfd..36d1bc7 100644 --- a/picture-gallery-client/public/index.html +++ b/picture-gallery-client/public/index.html @@ -2,12 +2,12 @@ - + - React App + Simple Picture Gallery diff --git a/picture-gallery-client/src/env.ts b/picture-gallery-client/src/env.ts index 6e44107..4de3358 100644 --- a/picture-gallery-client/src/env.ts +++ b/picture-gallery-client/src/env.ts @@ -8,8 +8,27 @@ declare global { type EnvType = { REACT_APP_TITLE: string; REACT_APP_APPBAR_COLOR: string; + REACT_APP_FAVICON_HREF: string | undefined; }; const env: EnvType = { ...process.env, ...window.env }; +function getTitleElement() { + return document.getElementById("appTitle")!; +} + +function getFaviconElement() { + return document.getElementById("favicon") as HTMLAnchorElement; +} + +export const setGalleryTitleAndFavicon = () => { + if (env.REACT_APP_FAVICON_HREF !== undefined) { + const favicon = getFaviconElement(); + favicon.href = env.REACT_APP_FAVICON_HREF; + } + + const title = getTitleElement(); + title.textContent = env.REACT_APP_TITLE; +}; + export default env; diff --git a/picture-gallery-client/src/index.tsx b/picture-gallery-client/src/index.tsx index 2d645eb..bc7a182 100644 --- a/picture-gallery-client/src/index.tsx +++ b/picture-gallery-client/src/index.tsx @@ -4,6 +4,9 @@ import "./index.css"; import { BrowserRouter } from "react-router-dom"; import reportWebVitals from "./reportWebVitals"; import ImageGalleryLayout from "./ImageGalleryLayout"; +import { setGalleryTitleAndFavicon } from "./env"; + +setGalleryTitleAndFavicon(); const root = ReactDOM.createRoot( document.getElementById("root") as HTMLElement