chore: Extract product name from translation strings (#4646)

app/components/Branding.tsx

@@ -13,7 +13,7 @@ function Branding({ href = env.URL }: Props) {
   return (
     <Link href={href}>
       <OutlineIcon size={20} />
-      &nbsp;Outline
+      &nbsp;{env.APP_NAME}
     </Link>
   );
 }

app/components/LanguagePrompt.tsx

@@ -6,6 +6,7 @@ import { languages, languageOptions } from "@shared/i18n";
 import ButtonLink from "~/components/ButtonLink";
 import Flex from "~/components/Flex";
 import NoticeTip from "~/components/NoticeTip";
+import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { detectLanguage } from "~/utils/language";
@@ -57,6 +58,7 @@ export default function LanguagePrompt() {
 
   const option = find(languageOptions, (o) => o.value === language);
   const optionLabel = option ? option.label : "";
+  const appName = env.APP_NAME;
 
   return (
     <NoticeTip>
@@ -64,7 +66,7 @@ export default function LanguagePrompt() {
         <LanguageIcon />
         <span>
           <Trans>
-            Outline is available in your language{" "}
+            {{ appName }} is available in your language{" "}
             {{
               optionLabel,
             }}

app/components/Layout.tsx

@@ -7,6 +7,7 @@ import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
 import SkipNavLink from "~/components/SkipNavLink";
+import env from "~/env";
 import useKeyDown from "~/hooks/useKeyDown";
 import { MenuProvider } from "~/hooks/useMenuContext";
 import useStores from "~/hooks/useStores";
@@ -36,7 +37,7 @@ const Layout: React.FC<Props> = ({
   return (
     <Container column auto>
       <Helmet>
-        <title>{title ? title : "Outline"}</title>
+        <title>{title ? title : env.APP_NAME}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       </Helmet>
 

app/components/PageTitle.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Helmet } from "react-helmet";
 import { cdnPath } from "@shared/utils/urls";
+import env from "~/env";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -16,14 +17,15 @@ const PageTitle = ({ title, favicon }: Props) => {
   return (
     <Helmet>
       <title>
-        {team?.name ? `${title} - ${team.name}` : `${title} - Outline`}
+        {team?.name ? `${title} - ${team.name}` : `${title} - ${env.APP_NAME}}`}
       </title>
       {favicon ? (
-        <link rel="shortcut icon" href={favicon} />
+        <link rel="shortcut icon" href={favicon} key={favicon} />
       ) : (
         <link
           rel="shortcut icon"
           type="image/png"
+          key="favicon"
           href={cdnPath("/images/favicon-32.png")}
           sizes="32x32"
         />