From 55c1a1ef862bc825795c182b5d6eb8a48948a9d7 Mon Sep 17 00:00:00 2001 From: Thi Van Le Date: Mon, 7 Feb 2022 16:54:33 +0200 Subject: [PATCH 1/5] fix: replace blog post list with blog post cards --- .eslintrc.js | 1 + src/components/pages/home/learn/learn.jsx | 101 +++++++++++------- .../shared/blog-post-card/blog-post-card.jsx | 85 ++++++++++----- 3 files changed, 122 insertions(+), 65 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 99550ac2d..ffd8d4ed0 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -20,6 +20,7 @@ module.exports = { 'no-shadow': 'off', 'react/no-array-index-key': 'off', 'react/jsx-props-no-spreading': 'off', + 'react/function-component-definition': 'off', 'react/no-danger': 'off', 'react/jsx-sort-props': [ 'error', diff --git a/src/components/pages/home/learn/learn.jsx b/src/components/pages/home/learn/learn.jsx index 3992c2e6f..c479539f7 100644 --- a/src/components/pages/home/learn/learn.jsx +++ b/src/components/pages/home/learn/learn.jsx @@ -1,49 +1,68 @@ -import React from 'react'; +import { useStaticQuery, graphql } from 'gatsby'; +import React, { Fragment } from 'react'; +import BlogPostCard from 'components/shared/blog-post-card'; import Container from 'components/shared/container'; import Heading from 'components/shared/heading'; -import List from 'components/shared/list'; -const title = 'Latest News & Blogs'; +const title = 'Learn about Cilium & eBPF'; -const featuredBlogs = { - title: 'Featured Blogs', - items: [ - { - linkUrl: 'https://isovalent.com/blog/post/2021-09-aws-eks-anywhere-chooses-cilium', - linkTarget: '_blank', - linkText: 'AWS picks Cilium for Networking & Security on EKS Anywhere', - }, - { - linkUrl: 'https://cilium.io/blog/2021/08/03/best-of-echo', - linkText: 'eBPF and Cilium Office Hours - Highlights from Season 1', - }, - { - linkUrl: 'https://cilium.io/blog/2021/05/20/cilium-110', - linkText: - 'Cilium 1.10: WireGuard, BGP Support, Egress IP Gateway, New Cilium CLI, XDP Load Balancer, Alibaba Cloud Integration and more', - }, - { - linkUrl: 'https://cilium.io/blog/2021/05/11/cni-benchmark', - linkText: 'CNI Benchmark: Understanding Cilium Network Performance', - }, - { - linkUrl: 'https://cilium.io/blog/2021/04/19/openshift-certification', - linkText: 'Introducing the Cilium Certified OpenShift Plug-in', - }, - ], - buttonUrl: '/blog', - buttonText: 'Read more', +const Learn = () => { + const { + allMdx: { posts }, + } = useStaticQuery(graphql` + query blogQuery { + allMdx(sort: { order: DESC, fields: frontmatter___date }, limit: 5) { + posts: nodes { + frontmatter { + path + externalUrl + title + date(locale: "en", formatString: "MMM DD, yyyy") + ogImageUrl + ogImage { + childImageSharp { + gatsbyImageData(width: 512) + } + } + ogSummary + } + } + } + } + `); + + return ( +
+ + {title} +
+ {posts.map(({ frontmatter }, index) => ( + + {index === 0 ? ( + <> + + + + ) : ( + + )} + + ))} +
+ +
+ ); }; -const Learn = () => ( -
- - {title} -
- -
- -
-); export default Learn; diff --git a/src/components/shared/blog-post-card/blog-post-card.jsx b/src/components/shared/blog-post-card/blog-post-card.jsx index ce6fee161..7211f23d1 100644 --- a/src/components/shared/blog-post-card/blog-post-card.jsx +++ b/src/components/shared/blog-post-card/blog-post-card.jsx @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import { GatsbyImage, getImage } from 'gatsby-plugin-image'; import PropTypes from 'prop-types'; import React from 'react'; @@ -7,29 +8,45 @@ import ExternalLinkIcon from 'icons/external-link.inline.svg'; import CiliumLogo from './images/cilium-logo.inline.svg'; +const coverStyles = { + lg: 'max-w-[512px]', + md: 'sm:min-h-[168px] sm:max-h-[168px]', + sm: 'sm:min-h-[107px] sm:max-h-[107px] sm:max-w-[198px]', +}; + function BlogPostCard({ path, ogImage, ogImageUrl, date, title, + titleSize, ogSummary: summary, categories, externalUrl, + coverSize, + className, + isLandscapeView, }) { const url = externalUrl !== '' ? externalUrl : null; const coverUrl = ogImageUrl !== '' ? ogImageUrl : null; - + const coverClassNames = classNames(coverStyles[coverSize], isLandscapeView && 'self-center'); return ( {ogImage && ( )} {!ogImage && !coverUrl && ( -
+
)} -
+
{date} -

+

{title}

-

{summary}

-
- {categories?.map((category) => ( - - {category} - - ))} - {url && ( -
- External - -
- )} -
+ {!isLandscapeView &&

{summary}

} + {!isLandscapeView && ( +
+ {categories?.map((category) => ( + + {category} + + ))} + {url && ( +
+ External + +
+ )} +
+ )}
); @@ -87,8 +116,12 @@ BlogPostCard.propTypes = { externalUrl: PropTypes.string, date: PropTypes.string.isRequired, title: PropTypes.string.isRequired, + titleSize: PropTypes.oneOf(['lg', 'md']), ogSummary: PropTypes.string, categories: PropTypes.arrayOf(PropTypes.string), + coverSize: PropTypes.oneOf(['lg', 'md', 'sm']), + className: PropTypes.string, + isLandscapeView: PropTypes.bool, }; BlogPostCard.defaultProps = { @@ -96,8 +129,12 @@ BlogPostCard.defaultProps = { path: null, ogImageUrl: null, externalUrl: null, + titleSize: 'md', ogSummary: null, categories: null, + coverSize: 'md', + className: null, + isLandscapeView: false, }; export default BlogPostCard; From 5417d877aca315e9d05e0bc5576a451376a961a8 Mon Sep 17 00:00:00 2001 From: Thi Van Le Date: Mon, 7 Feb 2022 17:18:35 +0200 Subject: [PATCH 2/5] fix: adjust size of blog post card --- src/components/pages/home/learn/learn.jsx | 9 ++-- .../shared/blog-post-card/blog-post-card.jsx | 44 +++++++++++++------ 2 files changed, 35 insertions(+), 18 deletions(-) diff --git a/src/components/pages/home/learn/learn.jsx b/src/components/pages/home/learn/learn.jsx index c479539f7..3c16d65fb 100644 --- a/src/components/pages/home/learn/learn.jsx +++ b/src/components/pages/home/learn/learn.jsx @@ -36,26 +36,25 @@ const Learn = () => {
{title} -
+
{posts.map(({ frontmatter }, index) => ( {index === 0 ? ( <> ) : ( - + )} ))} diff --git a/src/components/shared/blog-post-card/blog-post-card.jsx b/src/components/shared/blog-post-card/blog-post-card.jsx index 7211f23d1..409d745ed 100644 --- a/src/components/shared/blog-post-card/blog-post-card.jsx +++ b/src/components/shared/blog-post-card/blog-post-card.jsx @@ -9,9 +9,16 @@ import ExternalLinkIcon from 'icons/external-link.inline.svg'; import CiliumLogo from './images/cilium-logo.inline.svg'; const coverStyles = { - lg: 'max-w-[512px]', - md: 'sm:min-h-[168px] sm:max-h-[168px]', - sm: 'sm:min-h-[107px] sm:max-h-[107px] sm:max-w-[198px]', + base: 'shrink-0', + lg: 'sm:max-w-[512px]', + md: 'min-h-[168px] sm:max-h-[168px] sm:max-w-[320px]', + sm: 'min-h-[107px] sm:max-h-[107px] sm:max-w-[198px]', +}; + +const titleStyles = { + lg: 'text-2xl lg:text-3xl font-semibold', + md: 'md:text-lg font-bold', + sm: 'md:text-lg font-bold', }; function BlogPostCard({ @@ -20,17 +27,20 @@ function BlogPostCard({ ogImageUrl, date, title, - titleSize, ogSummary: summary, categories, externalUrl, - coverSize, + size, className, isLandscapeView, }) { const url = externalUrl !== '' ? externalUrl : null; const coverUrl = ogImageUrl !== '' ? ogImageUrl : null; - const coverClassNames = classNames(coverStyles[coverSize], isLandscapeView && 'self-center'); + const coverClassNames = classNames( + coverStyles.base, + coverStyles[size], + isLandscapeView && 'self-center' + ); return ( {ogImage && ( {title} - {!isLandscapeView &&

{summary}

} + {!isLandscapeView && ( +

+ {summary} +

+ )} {!isLandscapeView && (
{categories?.map((category) => ( @@ -116,10 +136,9 @@ BlogPostCard.propTypes = { externalUrl: PropTypes.string, date: PropTypes.string.isRequired, title: PropTypes.string.isRequired, - titleSize: PropTypes.oneOf(['lg', 'md']), ogSummary: PropTypes.string, categories: PropTypes.arrayOf(PropTypes.string), - coverSize: PropTypes.oneOf(['lg', 'md', 'sm']), + size: PropTypes.oneOf(['lg', 'md', 'sm']), className: PropTypes.string, isLandscapeView: PropTypes.bool, }; @@ -129,10 +148,9 @@ BlogPostCard.defaultProps = { path: null, ogImageUrl: null, externalUrl: null, - titleSize: 'md', ogSummary: null, categories: null, - coverSize: 'md', + size: 'md', className: null, isLandscapeView: false, }; From 3cef70729db24a367cd334bfcfe054b2a507e323 Mon Sep 17 00:00:00 2001 From: Thi Van Le Date: Mon, 7 Feb 2022 18:42:55 +0200 Subject: [PATCH 3/5] refactor: portrait blog post card rendering --- src/components/pages/home/learn/learn.jsx | 23 ++++++++---------- src/hooks/use-window-size.js | 29 +++++++++++++++++++++++ 2 files changed, 39 insertions(+), 13 deletions(-) create mode 100644 src/hooks/use-window-size.js diff --git a/src/components/pages/home/learn/learn.jsx b/src/components/pages/home/learn/learn.jsx index 3c16d65fb..d333857cf 100644 --- a/src/components/pages/home/learn/learn.jsx +++ b/src/components/pages/home/learn/learn.jsx @@ -4,10 +4,14 @@ import React, { Fragment } from 'react'; import BlogPostCard from 'components/shared/blog-post-card'; import Container from 'components/shared/container'; import Heading from 'components/shared/heading'; +import useWindowSize from 'hooks/use-window-size'; +const TABLET_WIDTH = 1024; const title = 'Learn about Cilium & eBPF'; const Learn = () => { + const { width } = useWindowSize(); + const isDesktop = width >= TABLET_WIDTH; const { allMdx: { posts }, } = useStaticQuery(graphql` @@ -40,19 +44,12 @@ const Learn = () => { {posts.map(({ frontmatter }, index) => ( {index === 0 ? ( - <> - - - + ) : ( )} diff --git a/src/hooks/use-window-size.js b/src/hooks/use-window-size.js new file mode 100644 index 000000000..6c3af3034 --- /dev/null +++ b/src/hooks/use-window-size.js @@ -0,0 +1,29 @@ +import { useState, useEffect } from 'react'; +// Hook +function useWindowSize() { + // Initialize state with undefined width/height so server and client renders match + // Learn more here: https://joshwcomeau.com/react/the-perils-of-rehydration/ + const [windowSize, setWindowSize] = useState({ + width: undefined, + height: undefined, + }); + useEffect(() => { + // Handler to call on window resize + function handleResize() { + // Set window width/height to state + setWindowSize({ + width: window.innerWidth, + height: window.innerHeight, + }); + } + // Add event listener + window.addEventListener('resize', handleResize); + // Call handler right away so state gets updated with initial window size + handleResize(); + // Remove event listener on cleanup + return () => window.removeEventListener('resize', handleResize); + }, []); // Empty array ensures that effect is only run on mount + return windowSize; +} + +export default useWindowSize; From c1dced9038f2d358adf19baf4703881fde4c4201 Mon Sep 17 00:00:00 2001 From: Thi Van Le Date: Wed, 9 Feb 2022 11:02:05 +0200 Subject: [PATCH 4/5] fix: make tap highlight color transparent --- src/styles/global.css | 1 + 1 file changed, 1 insertion(+) diff --git a/src/styles/global.css b/src/styles/global.css index e66ebcd54..c3c5543d2 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -1,6 +1,7 @@ @layer base { body { @apply text-base text-black antialiased; + -webkit-tap-highlight-color: transparent; } .highlight-words { From 01a71c8f741305f901cced6290f062db174ea3d0 Mon Sep 17 00:00:00 2001 From: Thi Van Le Date: Wed, 9 Feb 2022 11:03:41 +0200 Subject: [PATCH 5/5] refactor: blog post card --- .../shared/blog-post-card/blog-post-card.jsx | 134 ++++++++++-------- 1 file changed, 74 insertions(+), 60 deletions(-) diff --git a/src/components/shared/blog-post-card/blog-post-card.jsx b/src/components/shared/blog-post-card/blog-post-card.jsx index 409d745ed..55fe472a8 100644 --- a/src/components/shared/blog-post-card/blog-post-card.jsx +++ b/src/components/shared/blog-post-card/blog-post-card.jsx @@ -21,7 +21,42 @@ const titleStyles = { sm: 'md:text-lg font-bold', }; -function BlogPostCard({ +const BlogCover = ({ ogImage, title, coverUrl, coverClassNames }) => { + let content = null; + if (ogImage) { + content = ( + + ); + } else if (coverUrl) { + content = ( + {title} + ); + } else if (!ogImage && !coverUrl) { + content = ( +
+ +
+ ); + } + return content; +}; + +const BlogPostCard = ({ path, ogImage, ogImageUrl, @@ -33,7 +68,7 @@ function BlogPostCard({ size, className, isLandscapeView, -}) { +}) => { const url = externalUrl !== '' ? externalUrl : null; const coverUrl = ogImageUrl !== '' ? ogImageUrl : null; const coverClassNames = classNames( @@ -55,34 +90,13 @@ function BlogPostCard({ target={url ? '_blank' : ''} rel={url ? 'noopener noreferrer' : ''} > - {ogImage && ( - - )} - {coverUrl && ( - {title} - )} - {!ogImage && !coverUrl && ( -
- -
- )} - -
+ +
{date}

{!isLandscapeView && ( -

- {summary} -

+ <> +

+ {summary} +

+
+ {categories?.map((category) => ( + + {category} + + ))} + {url && ( +
+ External + +
+ )} +
+ )} - {!isLandscapeView && ( -
- {categories?.map((category) => ( - - {category} - - ))} - {url && ( -
- External - -
- )} -
- )} -

+ ); -} +}; BlogPostCard.propTypes = { path: PropTypes.string, @@ -138,7 +152,7 @@ BlogPostCard.propTypes = { title: PropTypes.string.isRequired, ogSummary: PropTypes.string, categories: PropTypes.arrayOf(PropTypes.string), - size: PropTypes.oneOf(['lg', 'md', 'sm']), + size: PropTypes.oneOf(Object.keys(titleStyles)), className: PropTypes.string, isLandscapeView: PropTypes.bool, }; @@ -150,7 +164,7 @@ BlogPostCard.defaultProps = { externalUrl: null, ogSummary: null, categories: null, - size: 'md', + size: Object.keys(titleStyles)[1], className: null, isLandscapeView: false, };