diff --git a/app/scripts/components/common/layout-root.tsx b/app/scripts/components/common/layout-root.tsx index 8d7b88312..0a693cedc 100644 --- a/app/scripts/components/common/layout-root.tsx +++ b/app/scripts/components/common/layout-root.tsx @@ -43,7 +43,7 @@ function LayoutRoot(props: { children?: ReactNode }) { useGoogleTagManager(); - const { title, thumbnail, description, hideFooter, localNavProps } = + const { title, thumbnail, description, hideFooter } = useContext(LayoutRootContext); const truncatedTitle = @@ -57,7 +57,7 @@ function LayoutRoot(props: { children?: ReactNode }) { description={description || appDescription} thumbnail={thumbnail} /> - + {children} diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js index 7a3dbf843..94b7a2a39 100644 --- a/app/scripts/components/common/nav-wrapper.js +++ b/app/scripts/components/common/nav-wrapper.js @@ -1,11 +1,9 @@ import React from 'react'; -import T from 'prop-types'; import styled, { css } from 'styled-components'; import { themeVal } from '@devseed-ui/theme-provider'; import PageHeader from './page-header'; import { useSlidingStickyHeaderProps } from './layout-root'; -import PageLocalNav from '$components/common/page-local-nav'; import { HEADER_WRAPPER_ID, @@ -29,9 +27,7 @@ const NavWrapper = styled.div` `} `; -function PageNavWrapper({ localNavProps }) { - const renderLocalNav = !!localNavProps; - +function PageNavWrapper() { const { isHeaderHidden, headerHeight } = useSlidingStickyHeaderProps(); return ( @@ -41,13 +37,8 @@ function PageNavWrapper({ localNavProps }) { headerHeight={headerHeight} > - {renderLocalNav && } ); } -PageNavWrapper.propTypes = { - localNavProps: T.object -}; - export default PageNavWrapper; diff --git a/app/scripts/components/common/page-local-nav.js b/app/scripts/components/common/page-local-nav.js deleted file mode 100644 index 3151d9d8f..000000000 --- a/app/scripts/components/common/page-local-nav.js +++ /dev/null @@ -1,269 +0,0 @@ -import React from 'react'; -import T from 'prop-types'; -import styled from 'styled-components'; -import { Link, NavLink, useMatch } from 'react-router-dom'; - -import { - glsp, - themeVal, - media, - listReset, - truncated -} from '@devseed-ui/theme-provider'; -import { - CollecticonChevronDownSmall, - CollecticonChevronUpSmall -} from '@devseed-ui/collecticons'; -import { reveal } from '@devseed-ui/animation'; -import { Overline } from '@devseed-ui/typography'; -import { DropMenu, DropMenuItem } from '@devseed-ui/dropdown'; - -import DropdownScrollable from './dropdown-scrollable'; - -import { variableGlsp } from '$styles/variable-utils'; -import { getDatasetPath, getDatasetExplorePath } from '$utils/routes'; - -const PageLocalNavSelf = styled.nav` - position: sticky; - top: 0; - z-index: 100; - display: flex; - flex-flow: row nowrap; - align-items: stretch; - justify-content: space-between; - gap: ${variableGlsp()}; - padding: ${variableGlsp(0.5, 1)}; - background: ${themeVal('color.primary')}; - box-shadow: 0 -1px 0 0 ${themeVal('color.surface-200a')}; - color: ${themeVal('color.surface')}; - animation: ${reveal} 0.32s ease 0s 1; -`; - -const LocalBreadcrumb = styled.ol` - ${listReset()} - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: ${glsp(0.5)}; - min-width: 0; - - ${media.largeUp` - gap: ${glsp()}; - `} - - > *:last-child { - min-width: 0; - } -`; - -const NavBlock = styled.div` - display: flex; - align-items: center; - flex-flow: row nowrap; - flex-basis: 12rem; - - ${media.smallUp` - flex-grow: 1; - `} - - .shadow-left { - background: linear-gradient( - to left, - ${themeVal('color.primary')}00 0%, - ${themeVal('color.primary')} 100% - ); - } - - .shadow-right { - background: linear-gradient( - to right, - ${themeVal('color.primary')}00 0%, - ${themeVal('color.primary')} 100% - ); - } - - .scroll-area > div { - ${media.smallUp` - display: flex; - justify-content: flex-end; - `} - } -`; - -const LocalMenu = styled.ul` - ${listReset()} - display: flex; - flex-flow: row nowrap; - align-items: center; - gap: ${glsp()}; - - a, - a:visited { - color: inherit; - text-decoration: none; - } -`; - -const LocalMenuLink = styled(NavLink)` - appearance: none; - position: relative; - display: flex; - gap: ${glsp(0.25)}; - align-items: center; - padding: ${glsp(0.5, 0)}; - border: 0; - background: none; - cursor: pointer; - color: currentColor; - font-weight: bold; - text-decoration: none; - text-align: left; - transition: all 0.32s ease 0s; - - &:hover { - opacity: 0.64; - } - - /* Menu link line decoration */ - - &::after { - content: ''; - position: absolute; - bottom: 0; - left: 0; - height: 0.125rem; - width: 0; - background: currentColor; - } - - &.active::after { - width: 100%; - } - - svg { - flex-shrink: 0; - } -`; - -const SectionParentLink = styled(Overline).attrs({ - as: Link -})` - color: currentColor; - opacity: 0.64; - - &, - &:visited { - color: inherit; - text-decoration: none; - } -`; - -const SectionLink = styled(LocalMenuLink)` - max-width: 100%; - - > span { - ${truncated} - } -`; - -const pagePath = '/datasets/:dataId/:page'; - -function PageLocalNav(props) { - const { localMenuCmp, parentName, parentLabel, parentTo, items, currentId } = - props; - - // Keep the url structure on dataset pages - const datasetPageMatch = useMatch(pagePath); - const currentPage = datasetPageMatch ? datasetPageMatch.params.page : ''; - - const currentItem = items.find((o) => o.id === currentId); - return ( - - -
  • - - {parentName} - -
    • -
  • - {items.length > 1 ? ( - ( - - {currentItem.name}{' '} - {active ? ( - - ) : ( - - )} - - )} - > - - {items.map((t) => ( -
  • - - {t.name} - -
    • - ))} - - - ) : ( - - {currentItem.name} - - )} - -     - {localMenuCmp} -     - ); -} - -export default PageLocalNav; - -PageLocalNav.propTypes = { - localMenuCmp: T.node, - parentName: T.string, - parentLabel: T.string, - parentTo: T.string, - items: T.array, - currentId: T.string -}; - -export function DatasetsLocalMenu(props) { - const { dataset } = props; - - return ( - - -
  • - - Overview - -
    • -
  • - - Exploration - -
    • -     -     - ); -} - -DatasetsLocalMenu.propTypes = { - dataset: T.object -}; diff --git a/app/scripts/components/datasets/s-explore/index.tsx b/app/scripts/components/datasets/s-explore/index.tsx index 376c7bb89..a717a5ed1 100644 --- a/app/scripts/components/datasets/s-explore/index.tsx +++ b/app/scripts/components/datasets/s-explore/index.tsx @@ -22,7 +22,6 @@ import TileLinkButton from './tile-link'; import DatasetLayers from './dataset-layers'; import { PanelDateWidget } from './panel-date-widget'; import { resourceNotFound } from '$components/uhoh'; -import { DatasetsLocalMenu } from '$components/common/page-local-nav'; import { LayoutProps } from '$components/common/layout-root'; import MapboxMap, { MapboxMapRef } from '$components/common/mapbox'; import PageHero from '$components/common/page-hero'; @@ -43,9 +42,8 @@ import { PANEL_REVEAL_DURATION } from '$styles/panel'; -import { allDatasetsProps, useDataset } from '$utils/veda-data'; +import { useDataset } from '$utils/veda-data'; import { useMediaQuery } from '$utils/use-media-query'; -import { DATASETS_PATH } from '$utils/routes'; import { useEffectPrevious } from '$utils/use-effect-previous'; import { userTzDate2utcString, utcString2userTzDate } from '$utils/date'; import { AsyncDatasetLayer, useDatasetAsyncLayers } from '$context/layer-data'; @@ -574,14 +572,6 @@ function DatasetsExplore() { title={`${dataset.data.name} Exploration`} description={dataset.data.description} thumbnail={dataset.data.media?.src} - localNavProps={{ - parentName: 'Dataset', - parentLabel: 'Datasets', - parentTo: DATASETS_PATH, - items: allDatasetsProps, - currentId: dataset.data.id, - localMenuCmp: - }} hideFooter /> diff --git a/app/scripts/components/datasets/s-overview/index.tsx b/app/scripts/components/datasets/s-overview/index.tsx index eaaa26239..efc249e60 100644 --- a/app/scripts/components/datasets/s-overview/index.tsx +++ b/app/scripts/components/datasets/s-overview/index.tsx @@ -6,13 +6,11 @@ import { CollecticonCompass } from '@devseed-ui/collecticons'; import { resourceNotFound } from '$components/uhoh'; import { LayoutProps } from '$components/common/layout-root'; import { PageActions, PageMainContent } from '$styles/page'; -import { DatasetsLocalMenu } from '$components/common/page-local-nav'; import PageHero from '$components/common/page-hero'; import RelatedContent from '$components/common/related-content'; import { NotebookConnectButton } from '$components/common/notebook-connect'; import { - allDatasetsProps, TAXONOMY_GRADE, TAXONOMY_UNCERTAINTY, useDataset @@ -38,17 +36,6 @@ function DatasetsOverview() { title={`${dataset.data.name} Overview`} description={dataset.data.description} thumbnail={dataset.data.media?.src} - localNavProps={{ - parentName: 'Dataset', - parentLabel: 'Datasets', - parentTo: DATASETS_PATH, - items: allDatasetsProps, - currentId: dataset.data.id, - localMenuCmp: - dataset?.data.disableExplore !== true ? ( - - ) : null - }} /> @@ -57,7 +44,7 @@ function DatasetsOverview() { description={dataset.data.description} renderBetaBlock={() => ( - {dataset?.data.disableExplore !== true && ( + {dataset.data.disableExplore !== true && ( - )} - + + + Showing{' '} + {' '} + out of {allStories.length}. + + {isFiltering && ( + + )} + - {displayStories.length ? ( - - {displayStories.map((d) => { - const pubDate = new Date(d.pubDate); - const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; - return ( -
  • - - { - onAction(Actions.TAXONOMY, { - key: TAXONOMY_SOURCE, - value: id - }); - browseControlsHeaderRef.current?.scrollIntoView(); - }} - /> - - {!isNaN(pubDate.getTime()) && ( - { - e.preventDefault(); - onAction(Actions.SORT_FIELD, 'pubDate'); + {displayStories.length ? ( + + {displayStories.map((d) => { + const pubDate = new Date(d.pubDate); + const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; + return ( +
  • + + { + onAction(Actions.TAXONOMY, { + key: TAXONOMY_SOURCE, + value: id + }); browseControlsHeaderRef.current?.scrollIntoView(); }} - > - - - )} - - } - linkLabel='View more' - linkTo={d.asLink?.url ?? getStoryPath(d)} - title={ - - {d.name} - - } - description={ - - {d.description} - - } - imgSrc={d.media?.src} - imgAlt={d.media?.alt} - footerContent={ - <> - {topics?.length ? ( - -
    Topics
    - {topics.map((t) => ( -
    - { - browseControlsHeaderRef.current?.scrollIntoView(); - }} - > - + + {!isNaN(pubDate.getTime()) && ( + { + e.preventDefault(); + onAction(Actions.SORT_FIELD, 'pubDate'); + browseControlsHeaderRef.current?.scrollIntoView(); + }} + > + + + )} + + } + linkLabel='View more' + linkTo={d.asLink?.url ?? getStoryPath(d)} + title={ + + {d.name} + + } + description={ + + {d.description} + + } + imgSrc={d.media?.src} + imgAlt={d.media?.alt} + footerContent={ + <> + {topics?.length ? ( + +
    Topics
    + {topics.map((t) => ( +
    + { + browseControlsHeaderRef.current?.scrollIntoView(); + }} > - {t.name} - - -
    - ))} -     - ) : null} - - } - /> -
    • - ); - })} -     - ) : ( - - There are no {getString('stories').other.toLocaleLowerCase()} to - show with the selected filters. - - )} - + + {t.name} + + + + ))} + + ) : null} + + } + /> + + ); + })} + + ) : ( + + There are no {getString('stories').other.toLocaleLowerCase()} to + show with the selected filters. + + )} + +     ); } diff --git a/app/scripts/components/stories/single/index.tsx b/app/scripts/components/stories/single/index.tsx index dae97c658..36f1a4704 100644 --- a/app/scripts/components/stories/single/index.tsx +++ b/app/scripts/components/stories/single/index.tsx @@ -1,5 +1,4 @@ import React, { lazy } from 'react'; -import { getString } from 'veda'; import { resourceNotFound } from '$components/uhoh'; import { LayoutProps } from '$components/common/layout-root'; @@ -7,7 +6,7 @@ import PageHero from '$components/common/page-hero'; import { PageMainContent } from '$styles/page'; import RelatedContent from '$components/common/related-content'; import { STORIES_PATH } from '$utils/routes'; -import { useStory, allStoriesProps } from '$utils/veda-data'; +import { useStory } from '$utils/veda-data'; import { ContentTaxonomy } from '$components/common/content-taxonomy'; const MdxContent = lazy(() => import('$components/common/mdx-content')); @@ -25,13 +24,6 @@ function StoriesSingle() { title={story.data.name} description={story.data.description} thumbnail={media?.src} - localNavProps={{ - parentName: getString('stories').one, - parentLabel: getString('stories').other, - parentTo: STORIES_PATH, - items: allStoriesProps, - currentId: story.data.id - }} /> diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index 3c2682969..cb0d44833 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -254,6 +254,8 @@ declare module 'veda' { | 'developmentContent' | 'aboutContent' | 'homeContent' + | 'storiesHubContent' + | 'storiesHubHero' | 'sandbox-override' | 'pageFooter' | 'headerBrand'