diff --git a/public/sitemap.xml b/public/sitemap.xml index e8055ca8..814b38c5 100644 --- a/public/sitemap.xml +++ b/public/sitemap.xml @@ -11,7 +11,7 @@ https://bloomlibrary.org/downloads - https://bloomlibrary.org/create + https://bloomlibrary.org/resources diff --git a/src/components/Admin/StaffPanel.tsx b/src/components/Admin/StaffPanel.tsx index 4b1a70e4..878a38eb 100644 --- a/src/components/Admin/StaffPanel.tsx +++ b/src/components/Admin/StaffPanel.tsx @@ -141,7 +141,7 @@ const StaffPanel: React.FunctionComponent = 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 diff --git a/src/components/BookCardGroup.tsx b/src/components/BookCardGroup.tsx index c3635482..e8102b43 100644 --- a/src/components/BookCardGroup.tsx +++ b/src/components/BookCardGroup.tsx @@ -364,7 +364,7 @@ const BookCardGroupInner: React.FunctionComponent = (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" diff --git a/src/components/BookDetail/ArtifactVisibilityPanel/ArtifactAndChoice.tsx b/src/components/BookDetail/ArtifactVisibilityPanel/ArtifactAndChoice.tsx index 6d49a692..b6ac2a0f 100644 --- a/src/components/BookDetail/ArtifactVisibilityPanel/ArtifactAndChoice.tsx +++ b/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; diff --git a/src/components/BookDetail/BookOwnerControlsBox.tsx b/src/components/BookDetail/BookOwnerControlsBox.tsx index e7c6047a..6324b55c 100644 --- a/src/components/BookDetail/BookOwnerControlsBox.tsx +++ b/src/components/BookDetail/BookOwnerControlsBox.tsx @@ -195,7 +195,7 @@ export const BookOwnerControlsBox: React.FunctionComponent<{ values={{ downloadLink: ( + ) : ( ); diff --git a/src/components/BookDetail/DownloadsGroup.tsx b/src/components/BookDetail/DownloadsGroup.tsx index 41455ee5..8d863d38 100644 --- a/src/components/BookDetail/DownloadsGroup.tsx +++ b/src/components/BookDetail/DownloadsGroup.tsx @@ -283,7 +283,7 @@ export const DownloadsGroup: React.FunctionComponent<{ {showBloomPUBButton && enableBloomPub && ( = ( variant="outlined" color="secondary" startIcon={} - href="https://bloomlibrary.org/page/create/bloom-reader" + href="/bloom-reader" size="large" css={css` width: ${props.fullWidth diff --git a/src/components/BookDetail/GetTemplateButton.tsx b/src/components/BookDetail/GetTemplateButton.tsx index 7fd0f150..5f94a55b 100644 --- a/src/components/BookDetail/GetTemplateButton.tsx +++ b/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 ( diff --git a/src/components/BookDetail/HarvestProgressNotice.tsx b/src/components/BookDetail/HarvestProgressNotice.tsx index 49fc8c1e..f7fccefd 100644 --- a/src/components/BookDetail/HarvestProgressNotice.tsx +++ b/src/components/BookDetail/HarvestProgressNotice.tsx @@ -57,7 +57,7 @@ export const HarvesterProgressNotice: React.FunctionComponent<{ { ); }; -export function getTranslateIcon(theme: Theme, inCreate: boolean) { +export function getTranslateIcon(theme: Theme, inResources: boolean) { return ( { } `} > - + {separator} - + = (props) => { + {/* 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. */} + + + + + + + { @@ -143,7 +158,8 @@ export const Routes: React.FunctionComponent<{}> = (props) => { }} > {/* 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") */} { @@ -274,13 +290,13 @@ export const Routes: React.FunctionComponent<{}> = (props) => { "/installers", // Alias from legacy blorg ]} > - + - + - + {/* Alias from legacy blorg */} @@ -288,22 +304,20 @@ export const Routes: React.FunctionComponent<{}> = (props) => { {/* We have published this artofreading link in various places (like the WeSay page) */} - + {/* Alias from legacy blorg */} - - {/* Alias from legacy blorg */} {/* Alias from legacy blorg */} - + {/* Aliases from BloomDesktop */} - + {/* 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 ( - + ); default: return ( diff --git a/src/components/SearchBox.tsx b/src/components/SearchBox.tsx index d6ee4181..3347ca03 100644 --- a/src/components/SearchBox.tsx +++ b/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 = ""; diff --git a/src/components/SearchDeeper.tsx b/src/components/SearchDeeper.tsx index f2de0cc6..2f6b258c 100644 --- a/src/components/SearchDeeper.tsx +++ b/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()} diff --git a/src/components/banners/StandardBannerLayout.tsx b/src/components/banners/StandardBannerLayout.tsx index 2e1f37be..cf4f9649 100644 --- a/src/components/banners/StandardBannerLayout.tsx +++ b/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! ) || } @@ -97,7 +97,7 @@ export const StandardBannerLayout: React.FunctionComponent<{ {props.collection?.urlKey !== "new-arrivals" && - props.collection?.urlKey !== "create" && + props.collection?.urlKey !== "resources" && (props.bookCount || ( ))} diff --git a/src/components/header/Header.tsx b/src/components/header/Header.tsx index e237b413..8b7480b9 100644 --- a/src/components/header/Header.tsx +++ b/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,7 +54,7 @@ export const Header: React.FunctionComponent<{}> = (props) => { `; const topLevelTabs = ( { switch (value) { case 0: @@ -60,7 +62,7 @@ export const Header: React.FunctionComponent<{}> = (props) => { routerHistory.push("/read"); break; case 1: - routerHistory.push("/create"); + routerHistory.push("/resources"); break; case 2: routerHistory.push("/about"); diff --git a/src/components/markdown/FeatureMatrix/FeatureGroup.tsx b/src/components/markdown/FeatureMatrix/FeatureGroup.tsx index e741154f..2b456bea 100644 --- a/src/components/markdown/FeatureMatrix/FeatureGroup.tsx +++ b/src/components/markdown/FeatureMatrix/FeatureGroup.tsx @@ -21,7 +21,7 @@ export const FeatureGroup: React.FunctionComponent = ( scope="row" css={css` color: white !important; - background-color: ${commonUI.colors.creationArea}; + background-color: ${commonUI.colors.resourcesArea}; `} > = ( props diff --git a/src/components/markdown/InstallerDownload.tsx b/src/components/markdown/InstallerDownload.tsx index a126ba54..ee7bc7e8 100644 --- a/src/components/markdown/InstallerDownload.tsx +++ b/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; diff --git a/src/components/markdown/Testimonial.tsx b/src/components/markdown/Testimonial.tsx index 3c87b59d..a13e40d1 100644 --- a/src/components/markdown/Testimonial.tsx +++ b/src/components/markdown/Testimonial.tsx @@ -19,7 +19,7 @@ export const Testimonial: React.FunctionComponent<{
) : ( ); }; diff --git a/src/components/pages/ContentfulPage.tsx b/src/components/pages/ContentfulPage.tsx index cbab8f76..2b226327 100644 --- a/src/components/pages/ContentfulPage.tsx +++ b/src/components/pages/ContentfulPage.tsx @@ -50,7 +50,7 @@ export const ContentfulPage: React.FunctionComponent<{ urlKey: string }> = ( css={css` ${page.css} img { - // Before changing this see the image at https://bloomlibrary.org/page/create/creators-Chetana in a phone-size screen. + // Before changing this see the image at https://bloomlibrary.org/page/resources/creators-Chetana in a phone-size screen. max-width: 100%; } `} diff --git a/src/components/pages/ThemeForLocation.tsx b/src/components/pages/ThemeForLocation.tsx index 0cd88221..561020ff 100644 --- a/src/components/pages/ThemeForLocation.tsx +++ b/src/components/pages/ThemeForLocation.tsx @@ -1,6 +1,6 @@ import React from "react"; import { useSetBrowserTabTitle } from "../Routes"; -import { CreationThemeProvider } from "../../theme"; +import { ResourcesThemeProvider } from "../../theme"; import { useLocation } from "react-router-dom"; export const ThemeForLocation: React.FunctionComponent<{ @@ -8,27 +8,28 @@ export const ThemeForLocation: React.FunctionComponent<{ }> = (props) => { useSetBrowserTabTitle(props.browserTabTitle); - if (isInCreateSectionOfSite(useLocation().pathname)) { - return {props.children}; + if (isInResourcesSectionOfSite(useLocation().pathname)) { + return ( + {props.children} + ); } else { return {props.children}; } }; -// Use the pathname portion of the url to determine if we are in the create section of the site. +// Use the pathname portion of the url to determine if we are in the resources section of the site. // Example urls: -// - /create -// - /create/book/abc123/create -// - /page/create/page/about -// - /page/create/creators-Chetana +// - /resources +// - /resources/book/abc123/resources +// - /page/resources/creators-Chetana // We don't want to match something like -// - /create-seeds -export function isInCreateSectionOfSite(urlPathname: string): boolean { +// - /resources-for-the-blind +export function isInResourcesSectionOfSite(urlPathname: string): boolean { if (!urlPathname) return false; - if (urlPathname === "/create") return true; + if (urlPathname === "/resources") return true; - return urlPathname.includes("/create/"); + return urlPathname.includes("/resources/"); } export function isOnAboutPage(urlPathname: string): boolean { diff --git a/src/theme.tsx b/src/theme.tsx index 2b23c69d..db7adada 100644 --- a/src/theme.tsx +++ b/src/theme.tsx @@ -11,8 +11,8 @@ export const commonUI = { bloomBlue: "#1a818f", bloomBlueTransparent: "#1a818f38", dialogTopBottomGray: "#F1F3F4", - creationArea: "#509E2F", // this is the SIL Intl green - createAreaTextOnWhite: "#226B04", // a bit darker for contrast + resourcesArea: "#509E2F", // this is the SIL Intl green + resourcesAreaTextOnWhite: "#226B04", // a bit darker for contrast minContrastGray: "#767676", // lightest grey that is accessible on white background" disabledIconGray: "#DDD", }, @@ -97,16 +97,16 @@ const theme = createTheme({ export default theme; -const creationPalette = { - primary: { main: commonUI.colors.creationArea, light: "white" }, +const resourcesPalette = { + primary: { main: commonUI.colors.resourcesArea, light: "white" }, // currently we're using the same color for "secondary" as for "primary", so that glow on cards is green. // eventually when materialui supports more names for the pallette, we can sort this out so that we just define the glow color - secondary: { main: commonUI.colors.creationArea }, + secondary: { main: commonUI.colors.resourcesArea }, }; -const creationTheme = createTheme({ ...theme, palette: creationPalette }); -export function CreationThemeProvider(props: any) { +const resourcesTheme = createTheme({ ...theme, palette: resourcesPalette }); +export function ResourcesThemeProvider(props: any) { return ( - + {props.children} );