From 41ad6fa8c894697de0acb7dc9cfe0644708987fc Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 2 Nov 2023 16:58:06 -0400 Subject: [PATCH 1/8] Start work for external link --- app/scripts/components/common/card.tsx | 11 +++++++---- app/scripts/components/home/featured-stories.tsx | 1 + app/scripts/components/stories/hub/index.tsx | 9 +++++---- mock/stories/life-of-water.stories.mdx | 2 ++ 4 files changed, 15 insertions(+), 8 deletions(-) diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index 85e69af2e..653ab10f9 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -288,6 +288,7 @@ interface CardComponentProps { title: ReactNode; linkLabel: string; linkTo: string; + href: string; className?: string; cardType?: CardType; description?: ReactNode; @@ -309,6 +310,7 @@ function CardComponent(props: CardComponentProps) { description, linkLabel, linkTo, + href, date, overline, imgSrc, @@ -319,16 +321,17 @@ function CardComponent(props: CardComponentProps) { onCardClickCapture } = props; + const linkProps = href? { href } : { + as: Link, + to: linkTo + }; return ( diff --git a/app/scripts/components/home/featured-stories.tsx b/app/scripts/components/home/featured-stories.tsx index 268389109..455c234eb 100644 --- a/app/scripts/components/home/featured-stories.tsx +++ b/app/scripts/components/home/featured-stories.tsx @@ -79,6 +79,7 @@ function FeaturedStories() { cardType='cover' linkLabel='View more' linkTo={getStoryPath(d)} + href={d.external?.url} title={d.name} parentName={getString('stories').one} parentTo={STORIES_PATH} diff --git a/app/scripts/components/stories/hub/index.tsx b/app/scripts/components/stories/hub/index.tsx index 2fb91fbaf..0783d2c9b 100644 --- a/app/scripts/components/stories/hub/index.tsx +++ b/app/scripts/components/stories/hub/index.tsx @@ -161,11 +161,11 @@ function StoriesHub() { @@ -191,8 +191,8 @@ function StoriesHub() { Showing{' '} {' '} @@ -243,6 +243,7 @@ function StoriesHub() { } linkLabel='View more' + href={d.external?.url} linkTo={getStoryPath(d)} title={ From d1f0a2c36d386e0d51aecc540ffb83cd83b715ee Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Fri, 3 Nov 2023 10:53:01 -0400 Subject: [PATCH 2/8] Add example story, Add default data for storiesBanner, fix type --- app/scripts/components/common/card.tsx | 2 +- mock/stories/external-example.stories.mdx | 27 +++++++++++++++++++++++ parcel-resolver-veda/defaults.js | 4 ++++ parcel-resolver-veda/index.d.ts | 11 ++++++++- 4 files changed, 42 insertions(+), 2 deletions(-) create mode 100644 mock/stories/external-example.stories.mdx diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index 653ab10f9..2ff3335e8 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -288,7 +288,7 @@ interface CardComponentProps { title: ReactNode; linkLabel: string; linkTo: string; - href: string; + href?: string; className?: string; cardType?: CardType; description?: ReactNode; diff --git a/mock/stories/external-example.stories.mdx b/mock/stories/external-example.stories.mdx new file mode 100644 index 000000000..204e99571 --- /dev/null +++ b/mock/stories/external-example.stories.mdx @@ -0,0 +1,27 @@ +--- +featured: true +id: 'external-link' +name: External Link Test +description: Story to test external link +media: + src: ::file ./img-placeholder-6.jpg + alt: Generic placeholder by Unsplash + author: + name: Unsplash + url: https://unsplash.com/ +pubDate: 2023-02-09 +taxonomy: + - name: Topics + values: + - Agriculture + - name: Source + values: + - Development Seed +related: + - type: dataset + id: no2 + - type: story + id: air-quality-and-covid-19 +external: + url: 'https://developmentseed.org' +--- diff --git a/parcel-resolver-veda/defaults.js b/parcel-resolver-veda/defaults.js index 9299a7a2e..2e4c70bd3 100644 --- a/parcel-resolver-veda/defaults.js +++ b/parcel-resolver-veda/defaults.js @@ -4,6 +4,10 @@ const defaultStrings = { stories: { one: 'Story', other: 'Stories' + }, + storiesBanner: { + other: + 'Explore the guided narratives below to discover how NASA satellites and other Earth observing resources reveal a changing planet.' } }; diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index 43ea624f0..361d73afe 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -136,6 +136,14 @@ declare module 'veda' { id: string; thematic?: string; } + /** + * External Content + * When the story is a link out to the external content + */ + + export interface ExternalConentData { + url: string; + } export interface DatasetUsage { url: string; @@ -174,6 +182,7 @@ declare module 'veda' { media?: Media; taxonomy: Taxonomy[]; related?: RelatedContentData[]; + external?: ExternalConentData; } // /////////////////////////////////////////////////////////////////////////// @@ -255,7 +264,7 @@ declare module 'veda' { export const getOverride: (key: PageOverrides) => VedaDatum | undefined; export const getString: (variable: string) => { - one: string; + one: string | undefined; other: string; }; From 581e3543d9da72a49c153639732fcb3b04d4376e Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Mon, 6 Nov 2023 10:45:39 -0500 Subject: [PATCH 3/8] Fix types --- app/scripts/components/common/card.tsx | 2 +- app/scripts/components/common/featured-slider-section.tsx | 1 + app/scripts/components/common/related-content.tsx | 6 ++++++ app/scripts/components/data-catalog/index.tsx | 6 ++---- mock/stories/external-example.stories.mdx | 2 +- mock/stories/life-of-water.stories.mdx | 4 +--- parcel-resolver-veda/defaults.js | 4 ++++ 7 files changed, 16 insertions(+), 9 deletions(-) diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index 2ff3335e8..c30ae93d6 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -288,7 +288,7 @@ interface CardComponentProps { title: ReactNode; linkLabel: string; linkTo: string; - href?: string; + href?: string | undefined; className?: string; cardType?: CardType; description?: ReactNode; diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx index 4d790ae2e..2005214d4 100644 --- a/app/scripts/components/common/featured-slider-section.tsx +++ b/app/scripts/components/common/featured-slider-section.tsx @@ -98,6 +98,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) { cardType='featured' linkLabel='View more' linkTo={getItemPath(d)} + href={d.external?.url} title={d.name} overline={ diff --git a/app/scripts/components/common/related-content.tsx b/app/scripts/components/common/related-content.tsx index 4c63f3b71..752988465 100644 --- a/app/scripts/components/common/related-content.tsx +++ b/app/scripts/components/common/related-content.tsx @@ -7,6 +7,7 @@ import { datasets, Media, RelatedContentData, + ExternalConentData, StoryData } from 'veda'; import { utcString2userTzDate } from '$utils/date'; @@ -48,6 +49,7 @@ interface FormatBlock { description: string; date: string; link: string; + external?: ExternalConentData; parentLink: string; media: Media; parent: RelatedContentData['type']; @@ -76,6 +78,7 @@ function formatBlock({ description, date, media, + external, type }): FormatBlock { return { @@ -84,6 +87,7 @@ function formatBlock({ description, date, media, + external, ...formatUrl(id, type), parent: type }; @@ -109,6 +113,7 @@ function formatContents(relatedData: RelatedContentData[]) { id, name, description, + external: (matchingContent as StoryData).external, date: (matchingContent as StoryData).pubDate, media, type @@ -142,6 +147,7 @@ export default function RelatedContent(props: RelatedContentProps) { cardType='cover' linkLabel={`View ${t.parent} ${t.name}`} linkTo={t.link} + href={t.external?.url} title={t.name} date={ t.parent === storyString diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/data-catalog/index.tsx index 56b5e99a2..8f6076c5c 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/data-catalog/index.tsx @@ -156,15 +156,13 @@ function DataCatalog() { diff --git a/mock/stories/external-example.stories.mdx b/mock/stories/external-example.stories.mdx index 204e99571..ea1752558 100644 --- a/mock/stories/external-example.stories.mdx +++ b/mock/stories/external-example.stories.mdx @@ -1,6 +1,6 @@ --- featured: true -id: 'external-link' +id: 'external-test' name: External Link Test description: Story to test external link media: diff --git a/mock/stories/life-of-water.stories.mdx b/mock/stories/life-of-water.stories.mdx index 4ea3898dc..4f268cfc6 100644 --- a/mock/stories/life-of-water.stories.mdx +++ b/mock/stories/life-of-water.stories.mdx @@ -21,9 +21,7 @@ related: - type: dataset id: no2 - type: story - id: air-quality-and-covid-19 -external: - url: 'https://developmentseed.org' + id: external-test --- diff --git a/parcel-resolver-veda/defaults.js b/parcel-resolver-veda/defaults.js index 2e4c70bd3..da6189044 100644 --- a/parcel-resolver-veda/defaults.js +++ b/parcel-resolver-veda/defaults.js @@ -8,6 +8,10 @@ const defaultStrings = { storiesBanner: { other: 'Explore the guided narratives below to discover how NASA satellites and other Earth observing resources reveal a changing planet.' + }, + dataCatalogBanner: { + other: + 'This dashboard explores key indicators to track and compare changes over time.' } }; From f1c2f3b5664b4ea7e66ede5090786491d1d15e86 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Wed, 8 Nov 2023 14:04:04 -0500 Subject: [PATCH 4/8] Revert type change back, Add style to external flag --- app/scripts/components/common/card.tsx | 39 +++++++++--- .../common/featured-slider-section.tsx | 7 ++- .../components/common/related-content.tsx | 61 +++++++++++-------- app/scripts/components/data-catalog/index.tsx | 4 +- .../components/home/featured-stories.tsx | 3 +- .../components/home/value-propostion.tsx | 4 +- app/scripts/components/stories/hub/index.tsx | 14 +++-- .../components/stories/single/index.tsx | 5 +- ....mdx => external-link-example.stories.mdx} | 4 +- .../stories/internal-link-example.stories.mdx | 27 ++++++++ mock/stories/life-of-water.stories.mdx | 2 +- parcel-resolver-veda/defaults.js | 26 ++++---- parcel-resolver-veda/index.d.ts | 13 ++-- 13 files changed, 134 insertions(+), 75 deletions(-) rename mock/stories/{external-example.stories.mdx => external-link-example.stories.mdx} (93%) create mode 100644 mock/stories/internal-link-example.stories.mdx diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index c30ae93d6..69a463dd3 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -2,6 +2,7 @@ import React, { MouseEventHandler, ReactNode } from 'react'; import styled, { css } from 'styled-components'; import { Link } from 'react-router-dom'; import { format } from 'date-fns'; +import { CollecticonExpandTopRight } from '@devseed-ui/collecticons'; import { VerticalDivider } from '@devseed-ui/toolbar'; import { @@ -198,11 +199,11 @@ export const CardMeta = styled.div` } } - > ${/* sc-selector */VerticalDivider}:last-child { + > ${/* sc-selector */ VerticalDivider}:last-child { display: none; } - > ${/* sc-selector */VerticalDivider}:first-child { + > ${/* sc-selector */ VerticalDivider}:first-child { display: none; } `; @@ -284,11 +285,30 @@ const CardFigure = styled(Figure)` } `; +const ExternalLinkMark = styled.div` + position: absolute; + top: 0; + right: 0; + padding: ${variableGlsp(0.25)}; + background-color: ${themeVal('color.primary')}; + color: ${themeVal('color.surface')}; + z-index: 100000; +`; + +export function ExternalLinkFlag() { + return ( + +
External Link
+ + + ); +} + interface CardComponentProps { title: ReactNode; linkLabel: string; linkTo: string; - href?: string | undefined; + isExternalLink?: boolean; className?: string; cardType?: CardType; description?: ReactNode; @@ -310,7 +330,7 @@ function CardComponent(props: CardComponentProps) { description, linkLabel, linkTo, - href, + isExternalLink, date, overline, imgSrc, @@ -321,10 +341,10 @@ function CardComponent(props: CardComponentProps) { onCardClickCapture } = props; - const linkProps = href? { href } : { - as: Link, - to: linkTo - }; + const linkProps = isExternalLink + ? { href: linkTo } + : { as: Link, to: linkTo }; + return ( {title} - {parentName && parentTo && ( + {isExternalLink && } + {!isExternalLink && parentName && parentTo && ( {parentName} diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx index 2005214d4..6ddad2d87 100644 --- a/app/scripts/components/common/featured-slider-section.tsx +++ b/app/scripts/components/common/featured-slider-section.tsx @@ -83,7 +83,8 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) { return featuredItems.map((d) => { const date = new Date(d[dateProperty ?? '']); const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; - + const linkToUse = d.asLink?.url ?? getItemPath(d); + const isExternalLink = linkToUse.match(/^https?:\/\//); return ( diff --git a/app/scripts/components/common/related-content.tsx b/app/scripts/components/common/related-content.tsx index 752988465..e2ee9f954 100644 --- a/app/scripts/components/common/related-content.tsx +++ b/app/scripts/components/common/related-content.tsx @@ -7,7 +7,7 @@ import { datasets, Media, RelatedContentData, - ExternalConentData, + LinkContentData, StoryData } from 'veda'; import { utcString2userTzDate } from '$utils/date'; @@ -17,7 +17,10 @@ import { STORIES_PATH, DATASETS_PATH } from '$utils/routes'; -import { Card, CardList } from '$components/common/card'; +import { + Card, + CardList +} from '$components/common/card'; import { FoldHeader, FoldTitle } from '$components/common/fold'; import { variableGlsp } from '$styles/variable-utils'; import { ContentBlock } from '$styles/content-block'; @@ -49,7 +52,7 @@ interface FormatBlock { description: string; date: string; link: string; - external?: ExternalConentData; + asLink?: LinkContentData; parentLink: string; media: Media; parent: RelatedContentData['type']; @@ -78,7 +81,7 @@ function formatBlock({ description, date, media, - external, + asLink, type }): FormatBlock { return { @@ -87,7 +90,7 @@ function formatBlock({ description, date, media, - external, + asLink, ...formatUrl(id, type), parent: type }; @@ -113,7 +116,7 @@ function formatContents(relatedData: RelatedContentData[]) { id, name, description, - external: (matchingContent as StoryData).external, + asLink: (matchingContent as StoryData).asLink, date: (matchingContent as StoryData).pubDate, media, type @@ -141,27 +144,31 @@ export default function RelatedContent(props: RelatedContentProps) { Related Content - {relatedContents.map((t) => ( -
  • - -
    • - ))} + {relatedContents.map((t) => { + const linkToUse = t.asLink?.url ?? t.link; + const isExternalLink = !!linkToUse.match(/^https?:\/\//); + return ( +
  • + +
    • + ); + })}     diff --git a/app/scripts/components/data-catalog/index.tsx b/app/scripts/components/data-catalog/index.tsx index 8f6076c5c..660cbabae 100644 --- a/app/scripts/components/data-catalog/index.tsx +++ b/app/scripts/components/data-catalog/index.tsx @@ -156,13 +156,13 @@ function DataCatalog() { diff --git a/app/scripts/components/home/featured-stories.tsx b/app/scripts/components/home/featured-stories.tsx index 455c234eb..94400ea95 100644 --- a/app/scripts/components/home/featured-stories.tsx +++ b/app/scripts/components/home/featured-stories.tsx @@ -78,8 +78,7 @@ function FeaturedStories() {

    Science communication platform

    - Share your {getString('stories').other.toLocaleLowerCase()} with others through the VEDA Dashboard. - Submit a{' '} + Share your {getString('stories').other.toLocaleLowerCase()} with + others through the VEDA Dashboard. Submit a{' '} { diff --git a/app/scripts/components/stories/hub/index.tsx b/app/scripts/components/stories/hub/index.tsx index 0783d2c9b..0fbcd6d59 100644 --- a/app/scripts/components/stories/hub/index.tsx +++ b/app/scripts/components/stories/hub/index.tsx @@ -161,11 +161,11 @@ function StoriesHub() { @@ -191,8 +191,8 @@ function StoriesHub() { Showing{' '} {' '} @@ -210,6 +210,8 @@ function StoriesHub() { {displayStories.map((d) => { const pubDate = new Date(d.pubDate); const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; + const linkToUse = d.asLink?.url ?? getStoryPath(d); + const isExternalLink = linkToUse.match(/^https?:\/\//); return (

  • } linkLabel='View more' - href={d.external?.url} - linkTo={getStoryPath(d)} + linkTo={linkToUse} + isExternalLink={isExternalLink} title={ ( - + )} /> diff --git a/mock/stories/external-example.stories.mdx b/mock/stories/external-link-example.stories.mdx similarity index 93% rename from mock/stories/external-example.stories.mdx rename to mock/stories/external-link-example.stories.mdx index ea1752558..184932fd7 100644 --- a/mock/stories/external-example.stories.mdx +++ b/mock/stories/external-link-example.stories.mdx @@ -1,6 +1,6 @@ --- featured: true -id: 'external-test' +id: 'external-link-test' name: External Link Test description: Story to test external link media: @@ -22,6 +22,6 @@ related: id: no2 - type: story id: air-quality-and-covid-19 -external: +asLink: url: 'https://developmentseed.org' --- diff --git a/mock/stories/internal-link-example.stories.mdx b/mock/stories/internal-link-example.stories.mdx new file mode 100644 index 000000000..c84035afd --- /dev/null +++ b/mock/stories/internal-link-example.stories.mdx @@ -0,0 +1,27 @@ +--- +featured: true +id: 'internal-link-test' +name: Internal Link Test +description: Story to test internal link. Link to cata catalog. +media: + src: ::file ./img-placeholder-6.jpg + alt: Generic placeholder by Unsplash + author: + name: Unsplash + url: https://unsplash.com/ +pubDate: 2023-02-09 +taxonomy: + - name: Topics + values: + - Agriculture + - name: Source + values: + - Development Seed +related: + - type: dataset + id: no2 + - type: story + id: air-quality-and-covid-19 +asLink: + url: '/data-catalog' +--- diff --git a/mock/stories/life-of-water.stories.mdx b/mock/stories/life-of-water.stories.mdx index 4f268cfc6..db7827c6c 100644 --- a/mock/stories/life-of-water.stories.mdx +++ b/mock/stories/life-of-water.stories.mdx @@ -21,7 +21,7 @@ related: - type: dataset id: no2 - type: story - id: external-test + id: external-link-test --- diff --git a/parcel-resolver-veda/defaults.js b/parcel-resolver-veda/defaults.js index da6189044..ca4366aef 100644 --- a/parcel-resolver-veda/defaults.js +++ b/parcel-resolver-veda/defaults.js @@ -1,19 +1,15 @@ const { defaults, mapValues } = require('lodash'); -const defaultStrings = { +const defaultStrings = ensureOneOther({ stories: { one: 'Story', other: 'Stories' }, - storiesBanner: { - other: - 'Explore the guided narratives below to discover how NASA satellites and other Earth observing resources reveal a changing planet.' - }, - dataCatalogBanner: { - other: - 'This dashboard explores key indicators to track and compare changes over time.' - } -}; + storiesBanner: + 'Explore the guided narratives below to discover how NASA satellites and other Earth observing resources reveal a changing planet.', + dataCatalogBanner: + 'This dashboard explores key indicators to track and compare changes over time.' +}); /** * Combine the default strings with the user-provided strings, while converting @@ -21,8 +17,12 @@ const defaultStrings = { * @param {object} strings */ module.exports.withDefaultStrings = (strings) => { - const objectifiedStrings = mapValues(strings, (value) => - typeof value === 'string' ? { one: value, other: value } : value - ); + const objectifiedStrings = ensureOneOther(strings); return defaults({}, objectifiedStrings, defaultStrings); }; + +function ensureOneOther(objectWithStrings) { + return mapValues(objectWithStrings, (value) => + typeof value === 'string' ? { one: value, other: value } : value + ); +} diff --git a/parcel-resolver-veda/index.d.ts b/parcel-resolver-veda/index.d.ts index 361d73afe..3c2682969 100644 --- a/parcel-resolver-veda/index.d.ts +++ b/parcel-resolver-veda/index.d.ts @@ -65,7 +65,7 @@ declare module 'veda' { analysis?: { metrics: string[]; exclude: boolean; - } + }; } // A normalized compare layer is the result after the compare definition is @@ -137,11 +137,11 @@ declare module 'veda' { thematic?: string; } /** - * External Content - * When the story is a link out to the external content + * Link Content + * When the story is a link out to the external/internal content */ - export interface ExternalConentData { + export interface LinkContentData { url: string; } @@ -182,7 +182,7 @@ declare module 'veda' { media?: Media; taxonomy: Taxonomy[]; related?: RelatedContentData[]; - external?: ExternalConentData; + asLink?: LinkContentData; } // /////////////////////////////////////////////////////////////////////////// @@ -264,10 +264,9 @@ declare module 'veda' { export const getOverride: (key: PageOverrides) => VedaDatum | undefined; export const getString: (variable: string) => { - one: string | undefined; + one: string; other: string; }; - /** * List of custom user defined pages. */ From 99a1ae7b395652bbf6aa5a2ca9f627aa7f6b615f Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Wed, 8 Nov 2023 14:16:54 -0500 Subject: [PATCH 5/8] Move external link logic to card level, type fix --- app/scripts/components/common/card.tsx | 3 +-- .../components/common/featured-slider-section.tsx | 6 ++---- app/scripts/components/common/related-content.tsx | 6 ++---- app/scripts/components/data-catalog/index.tsx | 8 ++------ app/scripts/components/stories/hub/index.tsx | 9 +++------ 5 files changed, 10 insertions(+), 22 deletions(-) diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index 69a463dd3..cb41c4787 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -308,7 +308,6 @@ interface CardComponentProps { title: ReactNode; linkLabel: string; linkTo: string; - isExternalLink?: boolean; className?: string; cardType?: CardType; description?: ReactNode; @@ -330,7 +329,6 @@ function CardComponent(props: CardComponentProps) { description, linkLabel, linkTo, - isExternalLink, date, overline, imgSrc, @@ -341,6 +339,7 @@ function CardComponent(props: CardComponentProps) { onCardClickCapture } = props; + const isExternalLink = linkTo.match(/^https?:\/\//); const linkProps = isExternalLink ? { href: linkTo } : { as: Link, to: linkTo }; diff --git a/app/scripts/components/common/featured-slider-section.tsx b/app/scripts/components/common/featured-slider-section.tsx index 6ddad2d87..6674f7c00 100644 --- a/app/scripts/components/common/featured-slider-section.tsx +++ b/app/scripts/components/common/featured-slider-section.tsx @@ -83,8 +83,7 @@ function FeaturedSliderSection(props: FeaturedSliderSectionProps) { return featuredItems.map((d) => { const date = new Date(d[dateProperty ?? '']); const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; - const linkToUse = d.asLink?.url ?? getItemPath(d); - const isExternalLink = linkToUse.match(/^https?:\/\//); + return ( diff --git a/app/scripts/components/common/related-content.tsx b/app/scripts/components/common/related-content.tsx index e2ee9f954..be6ab8de2 100644 --- a/app/scripts/components/common/related-content.tsx +++ b/app/scripts/components/common/related-content.tsx @@ -145,15 +145,13 @@ export default function RelatedContent(props: RelatedContentProps) { {relatedContents.map((t) => { - const linkToUse = t.asLink?.url ?? t.link; - const isExternalLink = !!linkToUse.match(/^https?:\/\//); + return (
  • diff --git a/app/scripts/components/stories/hub/index.tsx b/app/scripts/components/stories/hub/index.tsx index 0fbcd6d59..c5cbd5376 100644 --- a/app/scripts/components/stories/hub/index.tsx +++ b/app/scripts/components/stories/hub/index.tsx @@ -161,11 +161,11 @@ function StoriesHub() { @@ -210,8 +210,6 @@ function StoriesHub() { {displayStories.map((d) => { const pubDate = new Date(d.pubDate); const topics = getTaxonomy(d, TAXONOMY_TOPICS)?.values; - const linkToUse = d.asLink?.url ?? getStoryPath(d); - const isExternalLink = linkToUse.match(/^https?:\/\//); return (
  • } linkLabel='View more' - linkTo={linkToUse} - isExternalLink={isExternalLink} + linkTo={d.asLink?.url ?? getStoryPath(d)} title={ Date: Wed, 8 Nov 2023 14:41:51 -0500 Subject: [PATCH 6/8] Style External link --- app/scripts/components/common/card.tsx | 23 +++++++-- .../components/common/related-content.tsx | 48 ++++++++----------- 2 files changed, 39 insertions(+), 32 deletions(-) diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index cb41c4787..fb06b3371 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -286,20 +286,33 @@ const CardFigure = styled(Figure)` `; const ExternalLinkMark = styled.div` + display: flex; + align-items: center; position: absolute; - top: 0; - right: 0; - padding: ${variableGlsp(0.25)}; + top: ${variableGlsp(0.25)}; + right: ${variableGlsp(0.25)}; + padding: ${variableGlsp(0.125)} ${variableGlsp(0.25)}; background-color: ${themeVal('color.primary')}; color: ${themeVal('color.surface')}; + text-transform: none; + border-radius: calc( + ${multiply(themeVal('shape.rounded'), 2)} - ${variableGlsp(0.125)} + ); z-index: 100000; `; +const FlagText = styled.div` + display: inline; + font-weight: bold; + font-size: 0.825rem; + margin-right: ${variableGlsp(0.25)}; +`; + export function ExternalLinkFlag() { return ( -
    External Link
    - + External Link +     ); } diff --git a/app/scripts/components/common/related-content.tsx b/app/scripts/components/common/related-content.tsx index be6ab8de2..9a256bf48 100644 --- a/app/scripts/components/common/related-content.tsx +++ b/app/scripts/components/common/related-content.tsx @@ -17,10 +17,7 @@ import { STORIES_PATH, DATASETS_PATH } from '$utils/routes'; -import { - Card, - CardList -} from '$components/common/card'; +import { Card, CardList } from '$components/common/card'; import { FoldHeader, FoldTitle } from '$components/common/fold'; import { variableGlsp } from '$styles/variable-utils'; import { ContentBlock } from '$styles/content-block'; @@ -144,29 +141,26 @@ export default function RelatedContent(props: RelatedContentProps) { Related Content - {relatedContents.map((t) => { - - return ( -
  • - -
    • - ); - })} + {relatedContents.map((t) => ( +
  • + +
    • + ))} From bdcd56e6aac75c97458cbc95fc8d02b88f7168a7 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Wed, 8 Nov 2023 15:32:12 -0500 Subject: [PATCH 7/8] Adjust excessive zindex --- app/scripts/components/common/card.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/components/common/card.tsx b/app/scripts/components/common/card.tsx index fb06b3371..0d64daab9 100644 --- a/app/scripts/components/common/card.tsx +++ b/app/scripts/components/common/card.tsx @@ -298,7 +298,7 @@ const ExternalLinkMark = styled.div` border-radius: calc( ${multiply(themeVal('shape.rounded'), 2)} - ${variableGlsp(0.125)} ); - z-index: 100000; + z-index: 1; `; const FlagText = styled.div` From da4527b6d59110576b13ae12fdc9f15b97ad39f5 Mon Sep 17 00:00:00 2001 From: Hanbyul Jo Date: Thu, 9 Nov 2023 13:33:49 -0500 Subject: [PATCH 8/8] Throw error if aslink story is accessed on the single level --- app/scripts/components/stories/single/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/scripts/components/stories/single/index.tsx b/app/scripts/components/stories/single/index.tsx index 00f848c34..dae97c658 100644 --- a/app/scripts/components/stories/single/index.tsx +++ b/app/scripts/components/stories/single/index.tsx @@ -15,7 +15,7 @@ const MdxContent = lazy(() => import('$components/common/mdx-content')); function StoriesSingle() { const story = useStory(); - if (!story) throw resourceNotFound(); + if (!story || story.data.asLink) throw resourceNotFound(); const { media, related } = story.data;