diff --git a/packages/lib-content/package.json b/packages/lib-content/package.json index 167f19fa2d..f3fa32364b 100644 --- a/packages/lib-content/package.json +++ b/packages/lib-content/package.json @@ -30,6 +30,7 @@ "build-storybook": "storybook build" }, "dependencies": { + "@next/third-parties": "~14.2.7", "@zooniverse/async-states": "~0.0.1", "@zooniverse/react-components": "~1.13.0", "dayjs": "~1.11.11", diff --git a/packages/lib-content/src/components/Article/Article.js b/packages/lib-content/src/components/Article/Article.js index 7d87bb23f3..ca4572f31f 100644 --- a/packages/lib-content/src/components/Article/Article.js +++ b/packages/lib-content/src/components/Article/Article.js @@ -1,4 +1,4 @@ -import { Anchor, Box, Heading, Paragraph, ResponsiveContext } from 'grommet' +import { Anchor, Box, Heading, Image, Paragraph, ResponsiveContext } from 'grommet' import { string } from 'prop-types' import { useTranslation } from '../../translations/i18n.js' import styled from 'styled-components' @@ -9,6 +9,10 @@ const StyledParagraph = styled(Paragraph)` line-height: 1.2; ` +const thumbnailSize = { + max: '120px', + min: '120px' +} export default function Article({ date = '', excerpt = '', @@ -33,11 +37,17 @@ export default function Article({ {imageSrc.length && size !== 'small' ? ( + height={thumbnailSize} + width={thumbnailSize} + > + {title} + ) : null} @@ -54,6 +55,7 @@ export default function Highlights() { {t('AboutPage.highlights.pictures.two')} diff --git a/packages/lib-content/src/screens/About/components/OurMission.js b/packages/lib-content/src/screens/About/components/OurMission.js index bbc5d8dbc0..9507ea940b 100644 --- a/packages/lib-content/src/screens/About/components/OurMission.js +++ b/packages/lib-content/src/screens/About/components/OurMission.js @@ -16,6 +16,7 @@ import styled from 'styled-components' import { useContext } from 'react' import Stats from '../../../components/Stats/Stats.js' +import { YouTubeEmbed } from '@next/third-parties/google' const VideoWrapper = styled(Box)` border-radius: 8px; // same as Stat component @@ -37,7 +38,7 @@ const Discovery = ({ href, src, labelString }) => ( - + -