-
Notifications
You must be signed in to change notification settings - Fork 1
/
14cad5d5-2c73bde1efeab0c1dab0.js.map
1 lines (1 loc) · 10.7 KB
/
14cad5d5-2c73bde1efeab0c1dab0.js.map
1
{"version":3,"file":"14cad5d5-2c73bde1efeab0c1dab0.js","mappings":"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","sources":["webpack://record-journey/./src/components/PostCard.tsx"],"sourcesContent":["import { Fragment } from 'react';\nimport { Link } from 'gatsby';\nimport { css } from '@emotion/react';\nimport styled from '@emotion/styled';\nimport { format } from 'date-fns';\nimport { GatsbyImage, getImage } from 'gatsby-plugin-image';\nimport { kebabCase } from 'lodash-es';\nimport { lighten } from 'polished';\n\nimport { colors } from '@/styles/colors.ts';\nimport config from '@/website-config.ts';\n\nimport type { PageContext } from '@/templates/post.tsx';\n\nexport type PostCardProps = {\n post: PageContext;\n isLarge?: boolean;\n isNext?: boolean;\n};\n\nexport default function PostCard({ post, isLarge = false, isNext = false }: PostCardProps) {\n const date = new Date(post.frontmatter.date);\n const datetime = format(date, 'yyyy-MM-dd');\n const displayDatetime = format(date, 'yyyy-MM-dd');\n\n const imageData = post.frontmatter.image;\n const imageSource = getImage(imageData);\n\n return (\n <article\n className={`post-card ${imageData ? '' : 'no-image'} ${isLarge ? 'post-card-large' : ''} ${\n isNext ? 'is-next' : ''\n }`}\n css={[PostCardStyles, isLarge && PostCardLarge]}\n >\n {imageData && (\n <Link className=\"post-card-image-link\" css={PostCardImageLink} to={post.fields.slug}>\n <PostCardImage className=\"post-card-image\">\n {imageSource && (\n <GatsbyImage\n image={imageSource}\n alt={`${post.frontmatter.title} cover image`}\n style={{ height: '100%' }}\n loading={isLarge ? 'eager' : 'lazy'}\n />\n )}\n </PostCardImage>\n </Link>\n )}\n <PostCardContent className=\"post-card-content\">\n {post.frontmatter.tags && config.showAllTags && (\n <PostCardPrimaryTag className=\"post-card-primary-tag\">\n {post.frontmatter.tags.map((tag, idx) => (\n <Fragment key={tag}>\n {idx > 0 && <Fragment>, </Fragment>}\n <Link to={`/tags/${kebabCase(tag)}/`}>{tag}</Link>\n </Fragment>\n ))}\n </PostCardPrimaryTag>\n )}\n {post.frontmatter.tags && !config.showAllTags && (\n <PostCardPrimaryTag className=\"post-card-primary-tag\">\n <Link to={`/tags/${kebabCase(post.frontmatter.tags[0])}/`}>\n {post.frontmatter.tags[0]}\n </Link>\n </PostCardPrimaryTag>\n )}\n <Link className=\"post-card-content-link\" css={PostCardContentLink} to={post.fields.slug}>\n <header>\n <PostCardTitle className=\"post-card-title\">{post.frontmatter.title}</PostCardTitle>\n </header>\n <PostCardExcerpt className=\"post-card-excerpt\">\n <p>{post.frontmatter.excerpt || post.excerpt}</p>\n </PostCardExcerpt>\n </Link>\n <PostCardMeta className=\"post-card-meta\">\n <PostCardBylineContent className=\"post-card-byline-content\">\n <span className=\"post-card-byline-date\">\n <time dateTime={datetime}>{displayDatetime}</time>{' '}\n <span className=\"bull\">•</span> <span>{post.fields.readingTime.text}</span>\n </span>\n </PostCardBylineContent>\n </PostCardMeta>\n </PostCardContent>\n </article>\n );\n}\n\nconst PostCardStyles = css`\n position: relative;\n overflow: hidden;\n display: flex;\n flex: 1 1 301px;\n flex-direction: column;\n min-height: 220px;\n margin: 0 20px 60px;\n background-size: cover;\n\n img {\n transform: scale(1) !important;\n transition:\n opacity 0.3s ease-out 0s,\n transform 0.5s ease 0s !important;\n }\n\n &:hover {\n .post-card-image:after {\n opacity: var(--post-card-after-opacity);\n }\n\n img[data-main-image] {\n transform: scale(1.03) !important;\n }\n }\n\n &.is-next {\n .post-card-image {\n background: #191b1f;\n border: 1px solid var(--image-border-color__dark);\n }\n\n .post-card-primary-tag {\n a {\n color: #90a2aa;\n }\n }\n\n .post-card-excerpt {\n color: #768086;\n }\n\n .post-card-byline-content {\n color: #90a2aa;\n }\n }\n`;\n\nconst PostCardLarge = css`\n p {\n display: block;\n }\n\n @media (min-width: 795px) {\n flex: 1 1 100%;\n flex-direction: row;\n min-height: 280px;\n border-top: 0;\n\n :not(.no-image) .post-card-header {\n margin-top: 0;\n }\n\n .post-card-image-link {\n position: relative;\n flex: 1 1 auto;\n min-height: 380px;\n margin-bottom: 0;\n }\n\n .post-card-image {\n position: absolute;\n width: 100%;\n height: 100%;\n }\n\n .post-card-content {\n flex: 0 1 361px;\n justify-content: center;\n padding: 0 0 0 40px;\n }\n\n .post-card-title {\n margin-top: 0;\n font-size: 3.2rem;\n word-break: keep-all;\n }\n\n .post-card-excerpt p {\n margin-bottom: 1.5em;\n font-size: 1.8rem;\n line-height: 1.5em;\n }\n }\n`;\n\nconst PostCardImageLink = css`\n position: relative;\n overflow: hidden;\n display: block;\n border-radius: 12px;\n`;\n\nconst PostCardImage = styled.div`\n overflow: hidden;\n width: auto;\n height: 200px;\n background-color: var(--background-color);\n background-size: cover;\n border: 1px solid var(--image-border-color);\n border-radius: 12px;\n\n &:after {\n content: '';\n position: absolute;\n top: 0;\n left: 0;\n display: block;\n width: 100%;\n height: 100%;\n opacity: var(--post-card-opacity);\n background-color: var(--post-card-background);\n transition: all 0.3s ease 0s;\n }\n\n img {\n border-radius: 12px;\n }\n`;\n\nconst PostCardContent = styled.div`\n display: flex;\n flex-direction: column;\n flex-grow: 1;\n`;\n\nconst PostCardContentLink = css`\n position: relative;\n display: block;\n color: ${colors.darkgrey};\n\n :hover {\n text-decoration: none;\n }\n`;\n\nconst PostCardPrimaryTag = styled.div`\n margin: 15px 0 0.2em;\n font-size: 1.2rem;\n font-weight: 500;\n color: ${lighten('0.1', colors.midgrey)};\n letter-spacing: 0.2px;\n\n a {\n font-size: 1.2rem;\n color: var(--anchor-secondary-color);\n }\n`;\n\nconst PostCardTitle = styled.h2`\n margin: 0 0 0.4em;\n line-height: 1.15em;\n color: var(--post-card-title);\n word-break: keep-all;\n`;\n\nconst PostCardExcerpt = styled.section`\n font-size: 1.6rem;\n color: var(--post-card-description);\n\n p {\n overflow: hidden;\n display: -webkit-box;\n -webkit-box-orient: vertical;\n width: 100%;\n margin-bottom: 0.4em;\n font-size: 1.4rem;\n text-overflow: ellipsis;\n word-break: keep-all;\n -webkit-line-clamp: 2;\n }\n`;\n\nconst PostCardMeta = styled.footer`\n display: flex;\n align-items: flex-start;\n padding: 0;\n`;\n\nconst PostCardBylineContent = styled.div`\n display: flex;\n flex: 1 1 50%;\n flex-direction: column;\n font-weight: 400;\n line-height: 1.4em;\n color: ${lighten('0.1', colors.midgrey)};\n letter-spacing: 0.2px;\n\n time {\n font-size: 1.3rem;\n }\n\n span {\n margin: 0;\n font-size: 1.3rem;\n }\n\n a {\n font-weight: 600;\n color: var(--post-card-by-line);\n }\n`;\n\nexport const AuthorProfileImage = css`\n display: block;\n width: 100%;\n height: 100%;\n object-fit: cover;\n background: var(--background-color);\n border-radius: 100%;\n\n img {\n border-radius: 100%;\n }\n`;\n"],"names":["PostCard","post","isLarge","isNext","date","Date","frontmatter","datetime","format","displayDatetime","imageData","image","imageSource","getImage","___EmotionJSX","className","css","PostCardStyles","PostCardLarge","Link","PostCardImageLink","to","fields","slug","PostCardImage","GatsbyImage","alt","title","style","height","loading","PostCardContent","tags","config","showAllTags","PostCardPrimaryTag","map","tag","idx","Fragment","key","_kebabCase","PostCardContentLink","PostCardTitle","PostCardExcerpt","excerpt","PostCardMeta","PostCardBylineContent","dateTime","readingTime","text","name","styles","_styled","target","colors","darkgrey","lighten","midgrey","AuthorProfileImage"],"sourceRoot":""}