stefan
/
simple-picture-gallery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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
This commit is contained in:
Stefan Forstenlechner 2022-04-17 16:00:23 +02:00
parent 0b910e1ac5
commit 316b3205ab
3 changed files with 25 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
picture-gallery-client/public/index.html
View File

@ -2,12 +2,12 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> <link rel="icon" id="favicon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" /> <meta name="theme-color" content="#000000" />
<meta <meta
name="description" name="description"
content="Web site created using create-react-app" content="Simple Picture Gallery"
/> />
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <!--
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL. work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>React App</title> <title id="appTitle">Simple Picture Gallery</title>
</head> </head>
<body> <body>
<noscript>You need to enable JavaScript to run this app.</noscript> <noscript>You need to enable JavaScript to run this app.</noscript>

19
picture-gallery-client/src/env.ts
View File

@ -8,8 +8,27 @@ declare global {
type EnvType = { type EnvType = {
REACT_APP_TITLE: string; REACT_APP_TITLE: string;
REACT_APP_APPBAR_COLOR: string; REACT_APP_APPBAR_COLOR: string;
REACT_APP_FAVICON_HREF: string | undefined;
}; };
const env: EnvType = { ...process.env, ...window.env }; 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; export default env;

3
picture-gallery-client/src/index.tsx
View File

@ -4,6 +4,9 @@ import "./index.css";
import { BrowserRouter } from "react-router-dom"; import { BrowserRouter } from "react-router-dom";
import reportWebVitals from "./reportWebVitals"; import reportWebVitals from "./reportWebVitals";
import ImageGalleryLayout from "./ImageGalleryLayout"; import ImageGalleryLayout from "./ImageGalleryLayout";
import { setGalleryTitleAndFavicon } from "./env";
setGalleryTitleAndFavicon();
const root = ReactDOM.createRoot( const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement document.getElementById("root") as HTMLElement