Add Helmet

bjacobel · May 19, 2024 · f24deaa · f24deaa
1 parent a4c6fd0
commit f24deaa
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 8 deletions.
diff --git a/app/src/components/CommonMeta.tsx b/app/src/components/CommonMeta.tsx
@@ -0,0 +1,13 @@
+import { Helmet } from 'react-helmet-async';
+
+import { white } from '../stylesheets/colors.css';
+
+export default () => (
+  <Helmet>
+    <meta name="theme-color" content={white.color} />
+    <meta name="msapplication-navbutton-color" content={white.color} />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content={white.color} />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
+  </Helmet>
+);
diff --git a/app/src/index.tsx b/app/src/index.tsx
@@ -2,6 +2,7 @@
 
 import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
+import { HelmetProvider } from 'react-helmet-async';
 import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 
 import Analytics from './components/Analytics';
@@ -11,6 +12,7 @@ import { IS_PROD } from './constants';
 import { register } from './utils/sw-loader';
 import PWAUpdater from './components/PWAUpdater';
 import ErrorBoundary from './components/errors/ErrorBoundary';
+import CommonMeta from './components/CommonMeta';
 
 sentrySetup();
 const queryClient = new QueryClient();
@@ -20,13 +22,16 @@ const root = createRoot(rootEl!);
 const render = () => {
   root.render(
     <StrictMode>
-      <QueryClientProvider client={queryClient}>
-        <ErrorBoundary>
-          <PWAUpdater />
-          <Analytics />
-          <Routes />
-        </ErrorBoundary>
-      </QueryClientProvider>
+      <HelmetProvider>
+        <QueryClientProvider client={queryClient}>
+          <ErrorBoundary>
+            <PWAUpdater />
+            <CommonMeta />
+            <Analytics />
+            <Routes />
+          </ErrorBoundary>
+        </QueryClientProvider>
+      </HelmetProvider>
     </StrictMode>,
   );
 };

diff --git a/app/src/stylesheets/colors.css.ts b/app/src/stylesheets/colors.css.ts
@@ -5,3 +5,7 @@ export const blue = {
 export const lightgrey = {
   color: '#8d8d8d',
 };
+
+export const white = {
+  color: '#ffffff',
+};
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "core-js": "^3.37.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-helmet-async": "^2.0.5",
     "replacestream": "^4.0.3",
     "workbox-window": "^7.0.0",
     "wouter": "^3.1.0"

diff --git a/yarn.lock b/yarn.lock
@@ -6965,6 +6965,13 @@ interpret@^3.1.1:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
   integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
 
+invariant@^2.2.4:
+  version "2.2.4"
+  resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
+  integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
+  dependencies:
+    loose-envify "^1.0.0"
+
 ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-1.9.1.tgz#bff38543eeb8984825079ff3a2a8e6cbd46781b3"
@@ -8037,7 +8044,7 @@ lodash@^4.17.20, lodash@^4.17.21:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9378,6 +9385,20 @@ react-dom@^18.0.0:
     loose-envify "^1.1.0"
     scheduler "^0.23.2"
 
+react-fast-compare@^3.2.2:
+  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-async@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-2.0.5.tgz#cfc70cd7bb32df7883a8ed55502a1513747223ec"
+  integrity sha512-rYUYHeus+i27MvFE+Jaa4WsyBKGkL6qVgbJvSBoX8mbsWoABJXdEO0bZyi0F6i+4f0NuIb8AvqPMj3iXFHkMwg==
+  dependencies:
+    invariant "^2.2.4"
+    react-fast-compare "^3.2.2"
+    shallowequal "^1.1.0"
+
 react-html-attributes@^1.4.6:
   version "1.4.6"
   resolved "https://registry.yarnpkg.com/react-html-attributes/-/react-html-attributes-1.4.6.tgz#9558b56bb81c60f6cee9ae7d5e97434a59c086ff"
@@ -9877,6 +9898,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"