From 514046c85ef4a82d707928c1f91e93c926408ddb Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Wed, 25 Sep 2024 13:29:12 +0200 Subject: [PATCH 01/12] fix: truncate featured article title and excerpt --- src/components/Blog/FeaturedPost/index.tsx | 4 ++-- src/components/Blog/FeaturedPost/styles.module.css | 5 +++++ src/components/Governance/Delegates/styles.module.css | 2 ++ 3 files changed, 9 insertions(+), 2 deletions(-) diff --git a/src/components/Blog/FeaturedPost/index.tsx b/src/components/Blog/FeaturedPost/index.tsx index 3abfbe9b4..728398d7e 100644 --- a/src/components/Blog/FeaturedPost/index.tsx +++ b/src/components/Blog/FeaturedPost/index.tsx @@ -23,7 +23,7 @@ const FeaturedPost = ({ post }: { post: BlogPostEntry }) => { ) : null} - + {isAsset(coverImage) && coverImage.fields.file?.url ? ( { ) : undefined} - +
diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css index 378a0b04b..0fa0f4dfb 100644 --- a/src/components/Blog/FeaturedPost/styles.module.css +++ b/src/components/Blog/FeaturedPost/styles.module.css @@ -39,6 +39,11 @@ .title, .excerpt { margin-top: 16px; + overflow: hidden; + display: -webkit-box; + line-clamp: 3; + -webkit-line-clamp: 3; + -webkit-box-orient: vertical; } .title a { diff --git a/src/components/Governance/Delegates/styles.module.css b/src/components/Governance/Delegates/styles.module.css index 76b07e898..40c2119ba 100644 --- a/src/components/Governance/Delegates/styles.module.css +++ b/src/components/Governance/Delegates/styles.module.css @@ -25,6 +25,7 @@ .name { overflow: hidden; display: -webkit-box; + line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical; } @@ -32,6 +33,7 @@ .description { overflow: hidden; display: -webkit-box; + line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } From 33b3dff1b811bd73fc0dcc68ac41198b2546d989 Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Wed, 25 Sep 2024 14:15:41 +0200 Subject: [PATCH 02/12] styles: allow more excerpt lines in larger viewports --- src/components/Blog/FeaturedPost/index.tsx | 2 +- src/components/Blog/FeaturedPost/styles.module.css | 10 ++++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/Blog/FeaturedPost/index.tsx b/src/components/Blog/FeaturedPost/index.tsx index 728398d7e..4ea943dba 100644 --- a/src/components/Blog/FeaturedPost/index.tsx +++ b/src/components/Blog/FeaturedPost/index.tsx @@ -58,7 +58,7 @@ const FeaturedPost = ({ post }: { post: BlogPostEntry }) => { {excerpt} - + diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css index 0fa0f4dfb..dd63158b9 100644 --- a/src/components/Blog/FeaturedPost/styles.module.css +++ b/src/components/Blog/FeaturedPost/styles.module.css @@ -19,7 +19,7 @@ .body { display: flex; flex-direction: column; - gap: 8px; + gap: 16px; } .meta { @@ -38,7 +38,6 @@ .title, .excerpt { - margin-top: 16px; overflow: hidden; display: -webkit-box; line-clamp: 3; @@ -60,8 +59,11 @@ .image { height: 100%; } +} - .title { - margin-top: 24px; +@media (min-width: 1630px) { + .excerpt { + line-clamp: 5; + -webkit-line-clamp: 5; } } From b2c1f8ae3587f0d8b7c58b2ce11418774ec0adcf Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Wed, 25 Sep 2024 16:46:13 +0200 Subject: [PATCH 03/12] styles: gradient fill to category label --- src/components/Blog/FeaturedPost/index.tsx | 9 +++------ src/components/Blog/FeaturedPost/styles.module.css | 12 ++++++++++++ 2 files changed, 15 insertions(+), 6 deletions(-) diff --git a/src/components/Blog/FeaturedPost/index.tsx b/src/components/Blog/FeaturedPost/index.tsx index 4ea943dba..f6231bc4b 100644 --- a/src/components/Blog/FeaturedPost/index.tsx +++ b/src/components/Blog/FeaturedPost/index.tsx @@ -6,7 +6,6 @@ import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate' import { calculateReadingTimeInMin } from '@/components/Blog/utils/calculateReadingTime' import { type BlogPostEntry } from '@/components/Blog/Post' import { isAsset } from '@/lib/typeGuards' -import CategoryIcon from '@/public/images/Blog/category-icon.svg' import { AppRoutes } from '@/config/routes' import { containsTag, PRESS_RELEASE_TAG } from '@/lib/containsTag' @@ -40,16 +39,14 @@ const FeaturedPost = ({ post }: { post: BlogPostEntry }) => {
- - - + {category} + {formatBlogDate(date)} + {calculateReadingTimeInMin(content)}
- - {formatBlogDate(date)}
diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css index dd63158b9..92e354729 100644 --- a/src/components/Blog/FeaturedPost/styles.module.css +++ b/src/components/Blog/FeaturedPost/styles.module.css @@ -36,6 +36,18 @@ gap: 8px; } +.metaStart > *::after { + content: '•'; + color: var(--mui-palette-primary-light); + margin-left: 8px; +} + +.category { + background: linear-gradient(90deg, var(--mui-palette-info-main) 0%, var(--mui-palette-primary-main) 100%); + background-clip: text; + color: transparent; +} + .title, .excerpt { overflow: hidden; From e31e5180c0cfbb518f5649b19653d3ec9afad65f Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Wed, 25 Sep 2024 16:58:05 +0200 Subject: [PATCH 04/12] feat: change the blog date to en-US format --- .../Blog/FeaturedPost/styles.module.css | 2 +- .../utils/__test__/formatBlogDate.test.ts | 26 ++++---------- src/components/Blog/utils/formatBlogDate.ts | 34 ++++--------------- 3 files changed, 13 insertions(+), 49 deletions(-) diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css index 92e354729..5466a5932 100644 --- a/src/components/Blog/FeaturedPost/styles.module.css +++ b/src/components/Blog/FeaturedPost/styles.module.css @@ -36,7 +36,7 @@ gap: 8px; } -.metaStart > *::after { +.metaStart > *:not(:last-of-type)::after { content: '•'; color: var(--mui-palette-primary-light); margin-left: 8px; diff --git a/src/components/Blog/utils/__test__/formatBlogDate.test.ts b/src/components/Blog/utils/__test__/formatBlogDate.test.ts index 2cace4bf4..bd9f01b8b 100644 --- a/src/components/Blog/utils/__test__/formatBlogDate.test.ts +++ b/src/components/Blog/utils/__test__/formatBlogDate.test.ts @@ -1,31 +1,17 @@ import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate' describe('formatBlogDate', () => { - it('formats a valid date with a st day suffix', () => { - const inputDate = '2023-12-01T00:00+00:00' - const formattedDate = formatBlogDate(inputDate) - - expect(formattedDate).toBe('1st December, 2023') - }) - - it('formats a valid date with a nd day suffix', () => { - const inputDate = '2023-12-02T00:00+00:00' - const formattedDate = formatBlogDate(inputDate) - - expect(formattedDate).toBe('2nd December, 2023') - }) - - it('formats a valid date with a rd day suffix', () => { - const inputDate = '2023-12-03T00:00+00:00' + it('formats a valid date', () => { + const inputDate = '2023-12-08T00:00+00:00' const formattedDate = formatBlogDate(inputDate) - expect(formattedDate).toBe('3rd December, 2023') + expect(formattedDate).toBe('Dec 8, 2023') }) - it('formats a valid date with a th day suffix', () => { - const inputDate = '2023-12-08T00:00+00:00' + it('returns "Invalid Date" for unexisting date', () => { + const inputDate = '2023-13-03T00:00+00:00' const formattedDate = formatBlogDate(inputDate) - expect(formattedDate).toBe('8th December, 2023') + expect(formattedDate).toBe('Invalid Date') }) }) diff --git a/src/components/Blog/utils/formatBlogDate.ts b/src/components/Blog/utils/formatBlogDate.ts index 12062947d..1b435a529 100644 --- a/src/components/Blog/utils/formatBlogDate.ts +++ b/src/components/Blog/utils/formatBlogDate.ts @@ -1,37 +1,15 @@ -const ordinalSuffixes = { - one: 'st', - two: 'nd', - few: 'rd', - other: 'th', - zero: 'th', - many: undefined, -} - -// Formatters -const ordinalPluralRules = new Intl.PluralRules('en', { type: 'ordinal' }) -const dateFormat = new Intl.DateTimeFormat('en', { day: 'numeric', month: 'long', year: 'numeric' }) - -function appendOrdinalSuffix(day: number) { - const ordinal = ordinalPluralRules.select(day) - const suffix = ordinalSuffixes[ordinal] - - return `${day}${suffix}` -} - /** * Formats a date string. * * @param {string} inputDate - The input date string to be formatted. - * @returns {string} - The formatted date in the "8th December, 2023" style. + * @returns {string} - The formatted date in the "Dec 8, 2023" style. */ export function formatBlogDate(inputDate: string) { const date = new Date(inputDate) - const parts = dateFormat.formatToParts(date) - - const dayName = parts.find((p) => p.type === 'day')?.value - const dayWithSuffix = appendOrdinalSuffix(Number(dayName)) - const month = parts.find((p) => p.type === 'month')?.value - const year = parts.find((p) => p.type === 'year')?.value - return `${dayWithSuffix} ${month}, ${year}` + return date.toLocaleDateString('en-US', { + year: 'numeric', + month: 'short', + day: 'numeric', + }) } From 4b4ee03da1365360ff18cf3c259ef62d74ed340f Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Wed, 25 Sep 2024 17:35:44 +0200 Subject: [PATCH 05/12] feat: create a Meta component for blog posts --- src/components/Blog/Card/index.tsx | 15 +++-------- src/components/Blog/Card/styles.module.css | 7 +---- src/components/Blog/FeaturedPost/index.tsx | 17 +++--------- .../Blog/FeaturedPost/styles.module.css | 26 ------------------- src/components/Blog/Meta/index.tsx | 23 ++++++++++++++++ src/components/Blog/Meta/styles.module.css | 19 ++++++++++++++ .../Blog/utils/calculateReadingTime.ts | 2 +- 7 files changed, 51 insertions(+), 58 deletions(-) create mode 100644 src/components/Blog/Meta/index.tsx create mode 100644 src/components/Blog/Meta/styles.module.css diff --git a/src/components/Blog/Card/index.tsx b/src/components/Blog/Card/index.tsx index 59431e73b..927811ae6 100644 --- a/src/components/Blog/Card/index.tsx +++ b/src/components/Blog/Card/index.tsx @@ -1,16 +1,15 @@ import Image from 'next/image' import Link from 'next/link' import { Box, Typography } from '@mui/material' -import css from './styles.module.css' -import { calculateReadingTimeInMin } from '@/components/Blog/utils/calculateReadingTime' import Tags from '@/components/Blog/Tags' -import CategoryIcon from '@/public/images/Blog/category-icon.svg' import { isAsset } from '@/lib/typeGuards' import { type BlogPostEntry } from '@/components/Blog/Post' +import Meta from '@/components/Blog/Meta' import { AppRoutes } from '@/config/routes' +import css from './styles.module.css' const Card = (props: BlogPostEntry) => { - const { slug, title, content, coverImage, tags, category } = props.fields + const { slug, title, coverImage, tags } = props.fields return (
@@ -27,13 +26,7 @@ const Card = (props: BlogPostEntry) => { ) : undefined}
-
- - - {category} - - {calculateReadingTimeInMin(content)} -
+
{title} diff --git a/src/components/Blog/Card/styles.module.css b/src/components/Blog/Card/styles.module.css index 0cf043aa4..19532bbee 100644 --- a/src/components/Blog/Card/styles.module.css +++ b/src/components/Blog/Card/styles.module.css @@ -36,16 +36,11 @@ flex-grow: 1; } -.meta { - display: flex; - gap: 8px; - align-items: center; -} - .title { margin-top: 16px; overflow: hidden; display: -webkit-box; + line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } diff --git a/src/components/Blog/FeaturedPost/index.tsx b/src/components/Blog/FeaturedPost/index.tsx index f6231bc4b..1d7054405 100644 --- a/src/components/Blog/FeaturedPost/index.tsx +++ b/src/components/Blog/FeaturedPost/index.tsx @@ -2,15 +2,14 @@ import Image from 'next/image' import Tags from '@/components/Blog/Tags' import { Box, Grid, Link, Typography } from '@mui/material' import css from './styles.module.css' -import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate' -import { calculateReadingTimeInMin } from '@/components/Blog/utils/calculateReadingTime' import { type BlogPostEntry } from '@/components/Blog/Post' import { isAsset } from '@/lib/typeGuards' import { AppRoutes } from '@/config/routes' import { containsTag, PRESS_RELEASE_TAG } from '@/lib/containsTag' +import Meta from '@/components/Blog/Meta' const FeaturedPost = ({ post }: { post: BlogPostEntry }) => { - const { slug, coverImage, category, date, title, excerpt, tags, content } = post.fields + const { slug, coverImage, title, excerpt, tags } = post.fields const isPressRelease = containsTag(tags, PRESS_RELEASE_TAG) @@ -37,17 +36,7 @@ const FeaturedPost = ({ post }: { post: BlogPostEntry }) => { -
-
- - {category} - - - {formatBlogDate(date)} - - {calculateReadingTimeInMin(content)} -
-
+ {title} diff --git a/src/components/Blog/FeaturedPost/styles.module.css b/src/components/Blog/FeaturedPost/styles.module.css index 5466a5932..4ab77f35c 100644 --- a/src/components/Blog/FeaturedPost/styles.module.css +++ b/src/components/Blog/FeaturedPost/styles.module.css @@ -22,32 +22,6 @@ gap: 16px; } -.meta { - display: flex; - flex-wrap: wrap; - justify-content: space-between; - align-items: center; -} - -.metaStart { - display: flex; - flex-wrap: nowrap; - align-items: center; - gap: 8px; -} - -.metaStart > *:not(:last-of-type)::after { - content: '•'; - color: var(--mui-palette-primary-light); - margin-left: 8px; -} - -.category { - background: linear-gradient(90deg, var(--mui-palette-info-main) 0%, var(--mui-palette-primary-main) 100%); - background-clip: text; - color: transparent; -} - .title, .excerpt { overflow: hidden; diff --git a/src/components/Blog/Meta/index.tsx b/src/components/Blog/Meta/index.tsx new file mode 100644 index 000000000..80412ea44 --- /dev/null +++ b/src/components/Blog/Meta/index.tsx @@ -0,0 +1,23 @@ +import { Typography } from '@mui/material' +import type { BlogPostEntry } from '@/components/Blog/Post' +import css from './styles.module.css' +import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate' +import { calculateReadingTimeInMin } from '@/components/Blog/utils/calculateReadingTime' + +const Meta = ({ post }: { post: BlogPostEntry }) => { + const { category, date, content } = post.fields + + return ( +
+ + {category} + + + {formatBlogDate(date)} + + {calculateReadingTimeInMin(content)} min read +
+ ) +} + +export default Meta diff --git a/src/components/Blog/Meta/styles.module.css b/src/components/Blog/Meta/styles.module.css new file mode 100644 index 000000000..a1f2f95a0 --- /dev/null +++ b/src/components/Blog/Meta/styles.module.css @@ -0,0 +1,19 @@ +.meta { + display: flex; + flex-wrap: wrap; + justify-content: flex-start; + align-items: center; + gap: 8px; +} + +.meta > *:not(:last-of-type)::after { + content: '•'; + color: var(--mui-palette-primary-light); + margin-left: 8px; +} + +.category { + background: linear-gradient(90deg, var(--mui-palette-info-main) 0%, var(--mui-palette-primary-main) 100%); + background-clip: text; + color: transparent; +} diff --git a/src/components/Blog/utils/calculateReadingTime.ts b/src/components/Blog/utils/calculateReadingTime.ts index 65b16390f..722b8cf0d 100644 --- a/src/components/Blog/utils/calculateReadingTime.ts +++ b/src/components/Blog/utils/calculateReadingTime.ts @@ -15,5 +15,5 @@ export function calculateReadingTimeInMin(content: Document) { const wordCount = words(allText).length - return `${Math.round(wordCount / averageWPM)}min` + return Math.round(wordCount / averageWPM) } From 61391be4f162108c2def9972484e62bbf43bf076 Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Thu, 26 Sep 2024 10:29:51 +0200 Subject: [PATCH 06/12] styles: hover effect on blog article cards --- src/components/Blog/Card/styles.module.css | 26 ++++++++++++++++++---- 1 file changed, 22 insertions(+), 4 deletions(-) diff --git a/src/components/Blog/Card/styles.module.css b/src/components/Blog/Card/styles.module.css index 19532bbee..81a0913e1 100644 --- a/src/components/Blog/Card/styles.module.css +++ b/src/components/Blog/Card/styles.module.css @@ -4,13 +4,26 @@ display: flex; flex-direction: column; border-radius: 8px; - border: 1px solid var(--mui-palette-border-main); - overflow: hidden; + outline: 1px solid var(--mui-palette-border-main); transition-duration: var(--transition-duration); } -.postCard:hover { - border: 1px solid var(--mui-palette-primary-main); +.postCard::before { + content: ''; + position: absolute; + border-radius: 11px; + top: -3px; + left: -3px; + right: -3px; + bottom: -3px; + z-index: -1; + background: linear-gradient(to bottom left, #12ff80, #5fddff); + opacity: 0; +} + +.postCard:hover::before { + opacity: 1; + box-shadow: 10px 10px 25px 0 rgba(18, 255, 128, 0.2); } .link { @@ -27,6 +40,8 @@ object-position: center left; border-bottom: 1px solid var(--mui-palette-border-main); transition-duration: var(--transition-duration); + border-top-left-radius: 8px; + border-top-right-radius: 8px; } .cardBody { @@ -34,6 +49,9 @@ display: flex; flex-direction: column; flex-grow: 1; + background-color: var(--mui-palette-background-default); + border-bottom-left-radius: 8px; + border-bottom-right-radius: 8px; } .title { From 464e7f394fe42ad836333e185d4d2a6c120d7d86 Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Thu, 26 Sep 2024 14:14:38 +0200 Subject: [PATCH 07/12] styles: update Breadcrumbs style --- src/components/Blog/BreadcrumbsNav/index.tsx | 31 +++++++------------ .../Blog/BreadcrumbsNav/styles.module.css | 26 +++++++++------- 2 files changed, 26 insertions(+), 31 deletions(-) diff --git a/src/components/Blog/BreadcrumbsNav/index.tsx b/src/components/Blog/BreadcrumbsNav/index.tsx index 47014b9a5..31e3b2ea6 100644 --- a/src/components/Blog/BreadcrumbsNav/index.tsx +++ b/src/components/Blog/BreadcrumbsNav/index.tsx @@ -1,13 +1,12 @@ +import type { ReactNode } from 'react' +import type { UrlObject } from 'url' import { Breadcrumbs, Typography } from '@mui/material' import Link from 'next/link' -import css from './styles.module.css' -import { type UrlObject } from 'url' -import CategoryIcon from '@/public/images/Blog/category-icon.svg' -import { type ReactNode } from 'react' import { AppRoutes } from '@/config/routes' +import AngleIcon from '@/public/images/angle-icon.svg' +import css from './styles.module.css' -const TYPOGRAPHY_VARIANT = 'caption' -const TYPOGRAPHY_COLOR = 'text.primary' +const TYPOGRAPHY_VARIANT = 'body2' type BreadcrumbsType = { category: string @@ -16,30 +15,24 @@ type BreadcrumbsType = { const createBreadcrumb = (key: string, text: ReactNode, linkProps: string | UrlObject) => ( - - {text} - + {text} ) const BreadcrumbsNav = ({ category, title }: BreadcrumbsType) => { const breadcrumbs = [ createBreadcrumb('1', 'Blog', { pathname: AppRoutes.blog.index }), - createBreadcrumb( - '2', -
- - {category} -
, - { pathname: AppRoutes.blog.index, query: { category } }, - ), - + createBreadcrumb('2', <>{category}, { + pathname: AppRoutes.blog.index, + query: { category }, + }), + {title} , ] return ( - + } className={css.breadcrumbs}> {breadcrumbs} ) diff --git a/src/components/Blog/BreadcrumbsNav/styles.module.css b/src/components/Blog/BreadcrumbsNav/styles.module.css index 688b20cbb..4406e5276 100644 --- a/src/components/Blog/BreadcrumbsNav/styles.module.css +++ b/src/components/Blog/BreadcrumbsNav/styles.module.css @@ -1,23 +1,25 @@ -.breadcrumbs, +.breadcrumbs li { + display: flex; + align-items: center; +} + .breadcrumbs a { - color: var(--mui-palette-text-primary); - margin-bottom: 24px; + transition-duration: var(--transition-duration); } .breadcrumbs a:hover { + color: var(--mui-palette-text-primary); text-decoration: underline; } .breadcrumbs :global .MuiBreadcrumbs-separator { - margin: 0 4px; -} - -.breadcrumbs :global .MuiTypography-root { - line-height: inherit; + width: 8px; + height: 8px; } -.category { - display: flex; - gap: 4px; - align-items: center; +.title { + width: 290px; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; } From 3b4c4fd96ecee7e6c7fd07df764ea8ed4c860177 Mon Sep 17 00:00:00 2001 From: Diogo Soares <32431609+DiogoSoaress@users.noreply.github.com> Date: Wed, 11 Dec 2024 12:45:31 +0100 Subject: [PATCH 08/12] styles: move cover image and excerpt --- src/components/Blog/BreadcrumbsNav/index.tsx | 2 +- src/components/Blog/Post/index.tsx | 46 ++++++-------------- src/components/Blog/styles.module.css | 42 ++++++++---------- 3 files changed, 32 insertions(+), 58 deletions(-) diff --git a/src/components/Blog/BreadcrumbsNav/index.tsx b/src/components/Blog/BreadcrumbsNav/index.tsx index 31e3b2ea6..e82acd875 100644 --- a/src/components/Blog/BreadcrumbsNav/index.tsx +++ b/src/components/Blog/BreadcrumbsNav/index.tsx @@ -22,7 +22,7 @@ const createBreadcrumb = (key: string, text: ReactNode, linkProps: string | UrlO const BreadcrumbsNav = ({ category, title }: BreadcrumbsType) => { const breadcrumbs = [ createBreadcrumb('1', 'Blog', { pathname: AppRoutes.blog.index }), - createBreadcrumb('2', <>{category}, { + createBreadcrumb('2', category, { pathname: AppRoutes.blog.index, query: { category }, }), diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx index 1afc9aae3..f6848ee82 100644 --- a/src/components/Blog/Post/index.tsx +++ b/src/components/Blog/Post/index.tsx @@ -1,9 +1,6 @@ -import Image from 'next/image' -import { Box, Button, Container, Divider, Grid, Typography } from '@mui/material' +import { Box, Button, Container, Grid, Typography } from '@mui/material' import { type Entry } from 'contentful' import type { TypeAuthorSkeleton } from '@/contentful/types' -import { formatBlogDate } from '@/components/Blog/utils/formatBlogDate' -import { calculateReadingTimeInMin } from '@/components/Blog/utils/calculateReadingTime' import { isAsset, isEntryTypeAuthor, isEntryTypePost } from '@/lib/typeGuards' import BlogLayout from '@/components/Blog/Layout' import ProgressBar from '@/components/Blog/ProgressBar' @@ -14,13 +11,13 @@ import RichText from '@/components/common/RichText' import ContentsTable from '@/components/Blog/ContentsTable' import Socials from '@/components/Blog/Socials' import RelatedPosts from '@/components/Blog/RelatedPosts' -import CategoryIcon from '@/public/images/Blog/category-icon.svg' import { type Document as ContentfulDocument } from '@contentful/rich-text-types' import css from '../styles.module.css' import { PRESS_RELEASE_TAG, containsTag } from '@/lib/containsTag' import { COMMS_EMAIL } from '@/config/constants' import { useBlogPost } from '@/hooks/useBlogPost' import type { BlogPostEntry } from '@/config/types' +import Meta from '@/components/Blog/Meta' export type BlogPostProps = { blogPost: BlogPostEntry @@ -42,51 +39,33 @@ const BlogPost = ({ blogPost }: BlogPostProps) => { -
-
-
- - - {category} - -
- {calculateReadingTimeInMin(content)} -
- {formatBlogDate(date)} -
- {title} - - {excerpt} - - - + + + {isAsset(coverImage) && coverImage.fields.file?.url ? ( + {coverImage.fields.title + ) : undefined} - {isAsset(coverImage) && coverImage.fields.file?.url ? ( - {coverImage.fields.title - ) : undefined} -
+ + {excerpt} + +
@@ -117,6 +96,9 @@ const Sidebar = ({
) } diff --git a/src/components/Blog/ContentsTable/styles.module.css b/src/components/Blog/ContentsTable/styles.module.css new file mode 100644 index 000000000..e01caca5f --- /dev/null +++ b/src/components/Blog/ContentsTable/styles.module.css @@ -0,0 +1,30 @@ +.contentsTable { + margin: 0; + border: 1px solid var(--mui-palette-border-light); + border-radius: 8px; + padding: 24px; + margin-bottom: 24px; +} + +.contentsTable ol { + list-style-type: none; + padding-left: 0px; +} + +.contentsTable li { + counter-increment: step-counter; + display: flex; + align-items: flex-start; + gap: 8px; +} + +.contentsTable li::before { + content: counter(step-counter) ' '; + white-space: pre; + color: var(--mui-palette-primary-light); +} + +.contentsTable a:hover { + text-decoration: underline; + color: var(--mui-palette-primary-main); +} diff --git a/src/components/Blog/Post/index.tsx b/src/components/Blog/Post/index.tsx index c3c997233..5826aac61 100644 --- a/src/components/Blog/Post/index.tsx +++ b/src/components/Blog/Post/index.tsx @@ -104,7 +104,9 @@ const Sidebar = ({