Merge pull request BloomBooks#558 from BloomBooks/BL13299_CreateToRes…

…ources

Change "create" to "resources" in urls (BL-13299)

public/sitemap.xml

@@ -11,7 +11,7 @@
   <loc>https://bloomlibrary.org/downloads</loc>
 </url>
 <url>
-  <loc>https://bloomlibrary.org/create</loc>
+  <loc>https://bloomlibrary.org/resources</loc>
 </url>
 
 </urlset>

src/components/Admin/StaffPanel.tsx

@@ -141,7 +141,7 @@ const StaffPanel: React.FunctionComponent<IProps> = observer((props) => {
     // very susceptible to breaking. The same control that has classes
     // MuiFormControl-root and MuiInputBase-root when you go to the detail
     // url directly has MuiFormControl-root-436 and MuiInputBase-root-464
-    // when you inject "create/" into the url. Since this css only applies
+    // when you inject "resources/" into the url. Since this css only applies
     // to this React local TextField component, just use the tag names.
     // Also since the inner 'css' in the emotion 'css={css`style string`}'
     // is just a function, I was able to pull out the common styles into a string

src/components/BookCardGroup.tsx

@@ -364,7 +364,7 @@ const BookCardGroupInner: React.FunctionComponent<IProps> = (props) => {
     );
 
     let group;
-    // this is used in the "Create" screen
+    // this is used on the "Resources" screen
     if (
         props.collection.layout ===
         "layout: description-followed-by-row-of-books"

src/components/BookDetail/ArtifactVisibilityPanel/ArtifactAndChoice.tsx

@@ -201,7 +201,7 @@ export const ArtifactAndChoice: React.FunctionComponent<{
             className={classes.artifactAndChoice}
             // Using makeStyles to set the margin-left doesn't work. It gets overridden by the
             // default .MuiFormControl-root. So we hack it here. Except somehow that Mui class
-            // changes when we are under the Create tab, so we have to use our own class.
+            // changes when we are under the Resources tab, so we have to use our own class.
             css={css`
                 .choice-control {
                     margin-left: 50px;

src/components/BookDetail/BookOwnerControlsBox.tsx

@@ -195,7 +195,7 @@ export const BookOwnerControlsBox: React.FunctionComponent<{
                                     values={{
                                         downloadLink: (
                                             <BlorgLink
-                                                href="page/create/downloads"
+                                                href="/downloads"
                                                 css={css`
                                                     color: ${commonUI.colors
                                                         .bloomBlue};

src/components/BookDetail/DownloadToBloomButton.tsx

@@ -15,7 +15,7 @@ import { useTheme } from "@material-ui/core";
 import { useLocation } from "react-router-dom";
 import { getTranslateIcon, TranslateButton } from "./TranslateButton";
 import { GetTemplateButton } from "./GetTemplateButton";
-import { isInCreateSectionOfSite } from "../pages/ThemeForLocation";
+import { isInResourcesSectionOfSite } from "../pages/ThemeForLocation";
 
 interface ITranslateButtonProps {
     book: Book;
@@ -37,7 +37,7 @@ export const DownloadToBloomButton: React.FunctionComponent<ITranslateButtonProp
     // Ideally, this would be defined at some higher level and I could just use it here.
     // But since it uses a hook, that greatly limits our ability to extract it.
     // It didn't seem worth adding a whole new context provider.
-    const inCreate = isInCreateSectionOfSite(useLocation().pathname);
+    const inResources = isInResourcesSectionOfSite(useLocation().pathname);
 
     // This set of three properties controls how the translate version is different
     // from the template version. If it gets any more complicated, we should create
@@ -59,11 +59,11 @@ export const DownloadToBloomButton: React.FunctionComponent<ITranslateButtonProp
     // with a layout that isn't broken.
     const startButton = isTemplate
         ? undefined
-        : getTranslateIcon(theme, inCreate);
+        : getTranslateIcon(theme, inResources);
 
     // Main content of the two versions of the button.
     const content = isTemplate ? (
-        <GetTemplateButton inCreate={inCreate} />
+        <GetTemplateButton inResources={inResources} />
     ) : (
         <TranslateButton />
     );

src/components/BookDetail/DownloadsGroup.tsx

@@ -283,7 +283,7 @@ export const DownloadsGroup: React.FunctionComponent<{
                 </ul>
                 {showBloomPUBButton && enableBloomPub && (
                     <BlorgLink
-                        href="https://bloomlibrary.org/page/create/bloom-reader"
+                        href="/bloom-reader"
                         color="secondary" // bloomBlue
                         css={css`
                             display: flex;

src/components/BookDetail/GetBloomReaderButton.tsx

@@ -22,7 +22,7 @@ export const GetBloomReaderButton: React.FunctionComponent<IProps> = (
             variant="outlined"
             color="secondary"
             startIcon={<PlayStoreIcon />}
-            href="https://bloomlibrary.org/page/create/bloom-reader"
+            href="/bloom-reader"
             size="large"
             css={css`
                 width: ${props.fullWidth

src/components/BookDetail/GetTemplateButton.tsx

@@ -12,10 +12,10 @@ import { commonUI } from "../../theme";
 
 // This the parts of DownloadToBloomButton that are unique to templates (as opposed to books to translate).
 export const GetTemplateButton: React.FunctionComponent<{
-    inCreate: boolean;
+    inResources: boolean;
 }> = (props) => {
     const theme = useTheme();
-    const iconColor = props.inCreate
+    const iconColor = props.inResources
         ? theme.palette.primary.main
         : commonUI.colors.bloomBlue;
     return (

src/components/BookDetail/HarvestProgressNotice.tsx

@@ -57,7 +57,7 @@ export const HarvesterProgressNotice: React.FunctionComponent<{
             <BookNotice
                 css={css`
                     background-color: ${commonUI.colors
-                        .creationArea} !important;
+                        .resourcesArea} !important;
                     * {
                         color: white !important;
                     }

src/components/BookDetail/TranslateButton.tsx

@@ -57,11 +57,11 @@ export const TranslateButton: React.FunctionComponent = (props) => {
     );
 };
 
-export function getTranslateIcon(theme: Theme, inCreate: boolean) {
+export function getTranslateIcon(theme: Theme, inResources: boolean) {
     return (
         <TranslationIcon
             fill={
-                inCreate
+                inResources
                     ? theme.palette.primary.main
                     : commonUI.colors.bloomBlue
             }

src/components/ButtonRow.tsx

@@ -55,7 +55,7 @@ export const ButtonRow: React.FunctionComponent<{
                     span {
                         font-weight: 600;
                         color: ${commonUI.colors
-                            .createAreaTextOnWhite} !important;
+                            .resourcesAreaTextOnWhite} !important;
                     }
                 `}
                 key={key}

src/components/Footer.tsx

@@ -178,14 +178,14 @@ export const Footer: React.FunctionComponent = () => {
                     }
                 `}
             >
-                <BlorgLink href="/page/support">
+                <BlorgLink href="/support">
                     <FormattedMessage
                         id="footer.support"
                         defaultMessage="Support"
                     />
                 </BlorgLink>
                 {separator}
-                <BlorgLink href="/page/create/downloads">
+                <BlorgLink href="/downloads">
                     <FormattedMessage
                         id="downloads"
                         defaultMessage="Downloads"

src/components/Routes.tsx

@@ -77,6 +77,21 @@ export const Routes: React.FunctionComponent<{}> = (props) => {
         <ErrorBoundary url={location.pathname}>
             <ThemeForLocation browserTabTitle={location.pathname}>
                 <Switch>
+                    {/* The "resources" section used to be "create", and all the urls were different.
+                        These first four routes ensure that old links will go to the right place. */}
+                    <Redirect
+                        from={"/:before/create/:after"}
+                        to="/:before/resources/:after"
+                    />
+                    <Redirect exact from={"/create"} to="/resources" />
+                    <Redirect from={"/create/:after"} to="/resources/:after" />
+                    <Redirect
+                        from={"/:before/create"}
+                        to="/:before/resources"
+                    />
+
+                    <Redirect from={"/about"} to="/page/resources/about" />
+
                     <Route
                         path="/test-embedding/:code*"
                         render={({ match }) => {
@@ -143,7 +158,8 @@ export const Routes: React.FunctionComponent<{}> = (props) => {
                         }}
                     ></Route>
                     {/* We no longer use this route, but it's here in case we need to redirect user bookmarks.
-                        Note, the original links were /create/release-notes/{channel} but this handles any suffix. */}
+                        Note, the original links were /create/release-notes/{channel} but this handles any suffix.
+                        ("create" later became "resources") */}
                     <Route
                         path="*/release-notes"
                         component={() => {
@@ -274,36 +290,34 @@ export const Routes: React.FunctionComponent<{}> = (props) => {
                             "/installers", // Alias from legacy blorg
                         ]}
                     >
-                        <Redirect to="/page/create/downloads" />
+                        <Redirect to="/page/resources/downloads" />
                     </Route>
                     <Route exact path={["/bloom-reader"]}>
-                        <Redirect to="/page/create/page/bloom-reader" />
+                        <Redirect to="/page/resources/bloom-reader" />
                     </Route>
                     <Route exact path={["/bloompub-viewer"]}>
-                        <Redirect to="/page/create/page/bloompub-viewer" />
+                        <Redirect to="/page/resources/bloompub-viewer" />
                     </Route>
                     {/* Alias from legacy blorg */}
                     <Redirect from={"/browse/detail/:id"} to="/book/:id" />
                     {/* Alias from legacy blorg */}
                     <Redirect from={"/readBook/:id"} to="/player/:id" />
                     {/* We have published this artofreading link in various places (like the WeSay page) */}
                     <Route path={["/artofreading"]}>
-                        <Redirect to="/page/create/page/art-of-reading" />
+                        <Redirect to="/page/resources/art-of-reading" />
                     </Route>
                     {/* Alias from legacy blorg */}
-                    <Redirect from={"/about"} to="/page/create/about" />
-                    {/* Alias from legacy blorg */}
                     <Redirect
                         from={"/bloom-reader-privacy-policy"}
-                        to="/page/create/bloom-reader-privacy-policy"
+                        to="/page/resources/bloom-reader-privacy-policy"
                     />
                     {/* Alias from legacy blorg */}
                     <Route path="/sponsorship">
-                        <ContentfulPage urlKey="sponsorship" />
+                        <Redirect to="/page/resources/sponsorship" />
                     </Route>
 
                     {/* Aliases from BloomDesktop */}
-                    <Redirect from="/support" to="/page/support" />
+                    <Redirect from="/support" to="/page/resources/support" />
                     <Redirect from="/terms" to="/page/termsOfUse" />
                     {/* Note, because of the special handling required here for hashes
                     (the router doesn't match paths based on hash),
@@ -332,7 +346,7 @@ export const Routes: React.FunctionComponent<{}> = (props) => {
                                     );
                                 case "#/artofreading":
                                     return (
-                                        <Redirect to="/page/create/page/art-of-reading" />
+                                        <Redirect to="/page/resources/art-of-reading" />
                                     );
                                 default:
                                     return (

src/components/SearchBox.tsx

@@ -69,7 +69,7 @@ export const SearchBox: React.FunctionComponent<{
     const [searchString, setSearchString] = useState(initialSearchString);
     // This is a bit subtle. SearchString needs to be state to get modified
     // as the user types. But another thing that can happen is that our location
-    // changes as we follow links or switch from read to create. If something
+    // changes as we follow links or switch from read to resources. If something
     // brings in a new URL that has a different search specification, we
     // want the search box to update to match. Except when the user is actually
     // editing in the box, the box and the URL should be the same.
@@ -173,9 +173,9 @@ export const SearchBox: React.FunctionComponent<{
         // pathParts.push(":search:" + encodeURIComponent(enteredSearch));
         // const newUrl = "/" + pathParts.join("/");
 
-        // special case that when in create or grid mode, we don't want to leave it.
+        // special case that when in resources or grid or bulk mode, we want to stay in it.
         const prefix =
-            ["/create", "/grid", "/bulk"].find((x) =>
+            ["/resources", "/grid", "/bulk"].find((x) =>
                 history.location.pathname.startsWith(x)
             ) || "";
         let newUrl: string = "";

src/components/SearchDeeper.tsx

@@ -5,9 +5,8 @@ import { jsx } from "@emotion/core";
 
 import React, { useEffect, useState } from "react";
 import { useLocation, useHistory } from "react-router-dom";
-import { Button, SvgIcon } from "@material-ui/core";
+import { Button, SvgIcon, useTheme } from "@material-ui/core";
 import { ReactComponent as SearchingDeeper } from "../assets/SearchingDeeper.svg";
-import { commonUI } from "../theme";
 import { useIntl } from "react-intl";
 import { isFacetedSearchString } from "../connection/LibraryQueryHooks";
 
@@ -20,6 +19,8 @@ export const SearchDeeper: React.FunctionComponent<{}> = (props) => {
     const location = useLocation();
     const history = useHistory();
     const l10n = useIntl();
+    const theme = useTheme();
+    const buttonColor = theme.palette.primary.main;
 
     const [shallowSearchResults, setShallowSearchResults] = useState(false);
     useEffect(() => {
@@ -38,8 +39,8 @@ export const SearchDeeper: React.FunctionComponent<{}> = (props) => {
 
     function HandleDeeperSearch(): void {
         const newPath = location.pathname.replace(
-            /^\/:search:/,
-            "/:search:deeper:"
+            /^(\/resources)??\/:search:/,
+            "$1/:search:deeper:"
         );
         history.push(newPath);
     }
@@ -52,7 +53,7 @@ export const SearchDeeper: React.FunctionComponent<{}> = (props) => {
                     margin-left: 20px;
                     margin-bottom: 12px;
                     color: white;
-                    background-color: ${commonUI.colors.bloomRed};
+                    background-color: ${buttonColor};
                     width: 160px;
                 `}
                 onClick={() => HandleDeeperSearch()}

src/components/banners/StandardBannerLayout.tsx

@@ -60,7 +60,7 @@ export const StandardBannerLayout: React.FunctionComponent<{
                     overflow: hidden;
                 `}
             >
-                {["root.read", "create"].includes(
+                {["root.read", "resources"].includes(
                     props.collection?.urlKey!
                 ) || <Breadcrumbs />}
 
@@ -97,7 +97,7 @@ export const StandardBannerLayout: React.FunctionComponent<{
                 </div>
 
                 {props.collection?.urlKey !== "new-arrivals" &&
-                    props.collection?.urlKey !== "create" &&
+                    props.collection?.urlKey !== "resources" &&
                     (props.bookCount || (
                         <BookCount collection={props.collection} />
                     ))}

src/components/header/Header.tsx

@@ -14,13 +14,15 @@ import { useHistory, useLocation } from "react-router-dom";
 import { useIntl } from "react-intl";
 import { BlorgLink } from "../BlorgLink";
 import {
-    isInCreateSectionOfSite,
+    isInResourcesSectionOfSite,
     isOnAboutPage,
 } from "../pages/ThemeForLocation";
 
 export const Header: React.FunctionComponent<{}> = (props) => {
     const location = useLocation();
-    const isCreateTabSelected = isInCreateSectionOfSite(location.pathname);
+    const isResourcesTabSelected = isInResourcesSectionOfSite(
+        location.pathname
+    );
     const isAboutTabSelected = isOnAboutPage(location.pathname);
     const routerHistory = useHistory();
     const showSearchBelow = !useMediaQuery("(min-width:1200px)");
@@ -39,8 +41,8 @@ export const Header: React.FunctionComponent<{}> = (props) => {
 
     const minTabWidth = showTabsNarrower ? "min-width:110px" : "";
 
-    const backgroundColor = isCreateTabSelected
-        ? commonUI.colors.creationArea
+    const backgroundColor = isResourcesTabSelected
+        ? commonUI.colors.resourcesArea
         : commonUI.colors.bloomRed;
     // 14pt bold is the minimum size for white text on bloom-red to be considered accessible
     const tabStyle = css`
@@ -52,15 +54,15 @@ export const Header: React.FunctionComponent<{}> = (props) => {
     `;
     const topLevelTabs = (
         <Tabs
-            value={isAboutTabSelected ? 2 : isCreateTabSelected ? 1 : 0}
+            value={isAboutTabSelected ? 2 : isResourcesTabSelected ? 1 : 0}
             onChange={(_, value) => {
                 switch (value) {
                     case 0:
                     default:
                         routerHistory.push("/read");
                         break;
                     case 1:
-                        routerHistory.push("/create");
+                        routerHistory.push("/resources");
                         break;
                     case 2:
                         routerHistory.push("/about");

src/components/markdown/FeatureMatrix/FeatureGroup.tsx

@@ -21,7 +21,7 @@ export const FeatureGroup: React.FunctionComponent<IFeatureGroupProps> = (
                     scope="row"
                     css={css`
                         color: white !important;
-                        background-color: ${commonUI.colors.creationArea};
+                        background-color: ${commonUI.colors.resourcesArea};
                     `}
                 >
                     <span

src/components/markdown/FeatureMatrix/FeatureMatrix.tsx

@@ -17,7 +17,7 @@ import { useResponsiveChoice } from "../../../responsiveUtilities";
 import { IFeatureMatrixProps } from "./FeatureMatrixCodeSplit";
 
 const backgroundColor = "white";
-const headerColor = commonUI.colors.createAreaTextOnWhite;
+const headerColor = commonUI.colors.resourcesAreaTextOnWhite;
 
 export const FeatureMatrix: React.FunctionComponent<IFeatureMatrixProps> = (
     props

src/components/markdown/InstallerDownload.tsx

@@ -35,8 +35,8 @@ export const InstallerDownload: React.FunctionComponent<{
                         css={css`
                             padding: 16px !important;
                             background-color: ${commonUI.colors
-                                .creationArea} !important;
-                            /* .MuiButton-label { ENHANCE: how to get this working with the Creation Theme?*/
+                                .resourcesArea} !important;
+                            /* .MuiButton-label { ENHANCE: how to get this working with the Resources Theme?*/
                             span {
                                 color: white;
                                 font-size: 24px;