From 390c99b54b0580b53f64a27ea0cef0ef77b7dcea Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Sun, 9 Feb 2025 17:07:09 +0000 Subject: [PATCH 1/2] feat: blog page layout --- .../app/[lang]/news/[slug]/index.module.scss | 79 ++++++++++++++++++- website/src/app/[lang]/news/[slug]/page.tsx | 36 +++++++-- .../src/components/page-latest-news/index.tsx | 2 +- website/src/styles/_layout.scss | 4 + 4 files changed, 110 insertions(+), 11 deletions(-) diff --git a/website/src/app/[lang]/news/[slug]/index.module.scss b/website/src/app/[lang]/news/[slug]/index.module.scss index 8f52baf..3c42cc6 100644 --- a/website/src/app/[lang]/news/[slug]/index.module.scss +++ b/website/src/app/[lang]/news/[slug]/index.module.scss @@ -1,19 +1,90 @@ @use '@styles/text-styles'; +@use '@styles/breakpoints'; +@use '@styles/layout'; .post { - h1 { - @include text-styles.header-1; + /* Text styles */ + &, + p { + @include text-styles.text-base; + } + + p:not(form p) { + margin: 0; + margin-block-end: var(--spacing-4); + } + + a:not([target='_blank']) { + @include text-styles.text-link; + } + + li:not(:last-of-type) { + & p { + margin: 0; + } + margin-block-end: var(--spacing-2); } h2 { @include text-styles.header-2; + margin: 0; + margin-block-end: var(--spacing-4); + + @include breakpoints.small-screen { + @include text-styles.header-2__mobile; + } + + @include breakpoints.medium-screen { + @include text-styles.header-2__mobile; + } } - p { - @include text-styles.text-base; + h3 { + @include text-styles.header-3; + margin: 0; + margin-block-end: var(--spacing-3); } a { @include text-styles.text-link; } + + &__layout { + padding: var(--spacing-6) var(--spacing-16) var(--spacing-24); + + @include breakpoints.medium-screen { + padding: var(--spacing-6) var(--spacing-12) var(--spacing-12); + } + + @include breakpoints.small-screen { + padding: var(--spacing-6) var(--spacing-6) var(--spacing-8) + var(--spacing-6); + } + } + + &__row { + display: flex; + justify-content: space-between; + @include layout.content-max-width; + column-gap: var(--spacing-12); + } + + &__content { + width: 100%; + @include layout.max-width-xl; + } + + &__aside { + flex-basis: 100%; + max-width: var(--spacing-56); + @include breakpoints.large-screen { + order: -1; + } + @include breakpoints.medium-screen { + display: none; + } + @include breakpoints.small-screen { + display: none; + } + } } diff --git a/website/src/app/[lang]/news/[slug]/page.tsx b/website/src/app/[lang]/news/[slug]/page.tsx index 935297f..9b557b7 100644 --- a/website/src/app/[lang]/news/[slug]/page.tsx +++ b/website/src/app/[lang]/news/[slug]/page.tsx @@ -1,11 +1,15 @@ +import PageHeader from '@components/page-header'; import styles from './index.module.scss'; +import PageLatestNews from '@components/page-latest-news'; +import SupportBanner from '@components/support-banner'; import { documentToReactComponents } from '@contentful/rich-text-react-renderer'; import { getClient } from '@graphql/client'; import { GetPostDocument, type GetPostQuery, } from '@graphql/queries/post/index.generated'; +import type { AvailableLocale } from '@i18n/locales'; import type { NewsPagePropsWithLocale } from '@shared/types/page-with-locale-params'; import { getIntlDateStrings } from '@shared/utils/intl-date'; import { renderNode } from '@shared/utils/rich-text'; @@ -44,6 +48,13 @@ export async function generateMetadata({ }; } +const blogPostLoale: Record = { + en: 'Blog post', + es: 'Entrada de blog', + fr: 'Article de blog', + de: 'Blogbeitrag', +}; + const Page: NextPage = async ({ params }) => { const { lang, slug } = await params; @@ -83,13 +94,26 @@ const Page: NextPage = async ({ params }) => { // biome-ignore lint/security/noDangerouslySetInnerHtml: this is a safe usage dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} /> -
-

{post?.title}

-

- Published: -

- {documentToReactComponents(post?.body?.json, { renderNode })} + + +
+
+
+ {documentToReactComponents(post?.body?.json, { renderNode })} +
+
+ +
+
+ + ); }; diff --git a/website/src/components/page-latest-news/index.tsx b/website/src/components/page-latest-news/index.tsx index c1e4819..775731a 100644 --- a/website/src/components/page-latest-news/index.tsx +++ b/website/src/components/page-latest-news/index.tsx @@ -39,7 +39,7 @@ const BlogPostCards: React.FC = ({ }); return ( - +

Blog

{title}

diff --git a/website/src/styles/_layout.scss b/website/src/styles/_layout.scss index 21d2fe3..e350e0d 100644 --- a/website/src/styles/_layout.scss +++ b/website/src/styles/_layout.scss @@ -3,6 +3,10 @@ $content-max-width-7xl: 1280px; $content-max-width-2xl: 672px; $content-max-width-xl: 672px; +@mixin max-width-xl { + max-width: $content-max-width-2xl; +} + .large-content-wrapper { max-width: 1400px; margin: 0 auto; From bc8bd5041315293a033bae766c56be37a84f62b1 Mon Sep 17 00:00:00 2001 From: Pedro Martin Date: Sun, 9 Feb 2025 17:22:39 +0000 Subject: [PATCH 2/2] feat: add see all link to latest news section --- website/src/app/[lang]/news/[slug]/page.tsx | 2 +- .../src/components/page-header/index.module.scss | 3 +-- .../components/page-latest-news/index.module.scss | 5 +++++ website/src/components/page-latest-news/index.tsx | 6 ++++++ website/src/styles/_text-styles.scss | 13 +++++++++++++ 5 files changed, 26 insertions(+), 3 deletions(-) diff --git a/website/src/app/[lang]/news/[slug]/page.tsx b/website/src/app/[lang]/news/[slug]/page.tsx index 9b557b7..6dfc022 100644 --- a/website/src/app/[lang]/news/[slug]/page.tsx +++ b/website/src/app/[lang]/news/[slug]/page.tsx @@ -113,7 +113,7 @@ const Page: NextPage = async ({ params }) => {
- + ); }; diff --git a/website/src/components/page-header/index.module.scss b/website/src/components/page-header/index.module.scss index a7596aa..a604218 100644 --- a/website/src/components/page-header/index.module.scss +++ b/website/src/components/page-header/index.module.scss @@ -70,12 +70,11 @@ $mobile-curve: "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fil &::before { background-image: url($desktop-curve); background-repeat: no-repeat; - background-size: contain; + background-size: contain !important; content: ' '; display: block; inset: 0; left: -1px; - bottom: -1px; position: absolute; } diff --git a/website/src/components/page-latest-news/index.module.scss b/website/src/components/page-latest-news/index.module.scss index 58e9866..10fc19e 100644 --- a/website/src/components/page-latest-news/index.module.scss +++ b/website/src/components/page-latest-news/index.module.scss @@ -5,6 +5,7 @@ list-style-type: none; padding: 0; margin: 0; + margin-block-end: var(--spacing-4); } li:not(:last-of-type) { @@ -57,4 +58,8 @@ @include text-styles.header-4; } + + & &__see-all:is(a) { + @include text-styles.text-link; + } } diff --git a/website/src/components/page-latest-news/index.tsx b/website/src/components/page-latest-news/index.tsx index 775731a..c39b3dc 100644 --- a/website/src/components/page-latest-news/index.tsx +++ b/website/src/components/page-latest-news/index.tsx @@ -92,6 +92,12 @@ const PageLatestNews: React.FC = async ({ lang }) => { ))} + + See all + ); }; diff --git a/website/src/styles/_text-styles.scss b/website/src/styles/_text-styles.scss index cc6aaa1..4bd8df3 100644 --- a/website/src/styles/_text-styles.scss +++ b/website/src/styles/_text-styles.scss @@ -73,6 +73,19 @@ text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; + + &:hover { + color: var(--foreground-interactive-hover); + } + + &:hover, + focus { + color: var(--foreground-interactive-hover); + } + + &:active { + color: var(--foreground-interactive-press_active); + } } @mixin text-small {