From 480e4058e2bd5a0affa3ba42f4dbe0af6ebb743b Mon Sep 17 00:00:00 2001 From: Ferran Buireu Date: Wed, 20 Dec 2023 13:41:38 +0100 Subject: [PATCH] feat: add intersection observer + latest articles --- src/content/articles/markdown-style-guide.md | 57 ++++++++++--------- src/content/articles/using-mdx.mdx | 8 +-- .../testimonialAuthor/testimonialAuthor.css | 18 +++--- .../testimonialDescription.css | 16 +++--- .../testimonialImage/testimonialImage.css | 8 +-- .../testimonialQuote/testimonialQuote.css | 56 +++++++++--------- .../testimonialQuote/testimonialQuote.tsx | 10 ++-- .../molecules/testimonial/testimonial.css | 52 ++++++++--------- .../testimonialsNavigation.css | 26 ++++----- tsconfig.paths.json | 36 +++--------- 10 files changed, 133 insertions(+), 154 deletions(-) diff --git a/src/content/articles/markdown-style-guide.md b/src/content/articles/markdown-style-guide.md index 01478cc4..b2b14eb4 100644 --- a/src/content/articles/markdown-style-guide.md +++ b/src/content/articles/markdown-style-guide.md @@ -81,6 +81,7 @@ within a `footer` or `cite` element, and optionally with in-line changes such as > Don't communicate by sharing memory, share memory by communicating.
— Rob Pike[^1] [^1]: + The above quote is excerpted from Rob Pike's [talk](https://www.youtube.com/watch?v=PAAkCSZUG1c) during Gopherfest, November 18, 2015. @@ -97,7 +98,7 @@ November 18, 2015. #### Output | Italics | Bold | Code | -|-----------|----------|--------| +| --------- | -------- | ------ | | _italics_ | **bold** | `code` | ## Code Blocks @@ -128,13 +129,13 @@ Output ```html - - - Example HTML5 Document - - -

Test

- + + + Example HTML5 Document + + +

Test

+ ``` @@ -161,40 +162,40 @@ Output #### Syntax ```markdown -- List item -- Another item -- And another item +- List item +- Another item +- And another item ``` #### Output -- List item -- Another item -- And another item +- List item +- Another item +- And another item ### Nested list #### Syntax ```markdown -- Fruit - - Apple - - Orange - - Banana -- Dairy - - Milk - - Cheese +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese ``` #### Output -- Fruit - - Apple - - Orange - - Banana -- Dairy - - Milk - - Cheese +- Fruit + - Apple + - Orange + - Banana +- Dairy + - Milk + - Cheese ## Other Elements — abbr, sub, sup, kbd, mark diff --git a/src/content/articles/using-mdx.mdx b/src/content/articles/using-mdx.mdx index 62e220c5..70206593 100644 --- a/src/content/articles/using-mdx.mdx +++ b/src/content/articles/using-mdx.mdx @@ -23,10 +23,6 @@ If you have existing content authored in MDX, this integration will hopefully ma Here is how you import and use a UI component inside of MDX. When you open this page in the browser, you should see the clickable button below. - - - - import HeaderLink from '../../ui/components/atoms/headerLink/HeaderLink.astro'; @@ -38,5 +34,5 @@ import HeaderLink from '../../ui/components/atoms/headerLink/HeaderLink.astro'; - [MDX Syntax Documentation](https://mdxjs.com/docs/what-is-mdx) - [Astro Usage Documentation](https://docs.astro.build/en/guides/markdown-content/#markdown-and-mdx-pages) - **Note:** [Client Directives](https://docs.astro.build/en/reference/directives-reference/#client-directives) are -still required to create interactive components. Otherwise, all components in your MDX will render as static HTML -(no JavaScript) by default. + still required to create interactive components. Otherwise, all components in your MDX will render as static HTML + (no JavaScript) by default. diff --git a/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.css b/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.css index 6e558a82..da033970 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.css +++ b/src/ui/components/molecules/testimonial/components/testimonialAuthor/testimonialAuthor.css @@ -1,11 +1,11 @@ @layer testimonials.testimonial.author { - .testimonial__author { - font-size: 1.25rem; - grid-area: Testimonial-Author; - isolation: isolate; - text-transform: uppercase; - transition-duration: 450ms; - transition-property: translate; - transition-timing-function: ease-in; - } + .testimonial__author { + font-size: 1.25rem; + grid-area: Testimonial-Author; + isolation: isolate; + text-transform: uppercase; + transition-duration: 450ms; + transition-property: translate; + transition-timing-function: ease-in; + } } diff --git a/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.css b/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.css index 085507db..c03f0d2e 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.css +++ b/src/ui/components/molecules/testimonial/components/testimonialDescription/testimonialDescription.css @@ -1,10 +1,10 @@ @layer testimonials.testimonial.description { - .testimonial__description { - color: var(--neutral-light-2); - grid-area: Testimonial-Description; - isolation: isolate; - transition-duration: 350ms; - transition-property: translate; - transition-timing-function: ease-in; - } + .testimonial__description { + color: var(--neutral-light-2); + grid-area: Testimonial-Description; + isolation: isolate; + transition-duration: 350ms; + transition-property: translate; + transition-timing-function: ease-in; + } } diff --git a/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.css b/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.css index 02e9bca7..4602f56a 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.css +++ b/src/ui/components/molecules/testimonial/components/testimonialImage/testimonialImage.css @@ -1,6 +1,6 @@ @layer testimonials.testimonial.image { - .testimonial__image { - grid-area: Testimonial-Image; - isolation: isolate; - } + .testimonial__image { + grid-area: Testimonial-Image; + isolation: isolate; + } } diff --git a/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.css b/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.css index 934c9e0c..f3a8b034 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.css +++ b/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.css @@ -1,35 +1,35 @@ @layer testimonials.testimonial.quote { - .testimonial__quote__wrapper { - display: grid; - gap: 1rem 0; - grid: - 'Testimonial-Quotation Testimonial-Quotation' min-content - 'Testimonial-Quote Testimonial-Quote' min-content - / 1fr; - grid-area: Testimonial-Quote; - isolation: isolate; - padding-inline-end: 1rem; - } + .testimonial__quote__wrapper { + display: grid; + gap: 1rem 0; + grid: + 'Testimonial-Quotation Testimonial-Quotation' min-content + 'Testimonial-Quote Testimonial-Quote' min-content + / 1fr; + grid-area: Testimonial-Quote; + isolation: isolate; + padding-inline-end: 1rem; + } - .testimonial__quote { - grid-area: Testimonial-Quote; - transition-duration: 350ms; - transition-property: translate; - transition-timing-function: ease-in; + .testimonial__quote { + grid-area: Testimonial-Quote; + transition-duration: 350ms; + transition-property: translate; + transition-timing-function: ease-in; - @supports (text-wrap: pretty) { - text-wrap: pretty; - } + @supports (text-wrap: pretty) { + text-wrap: pretty; + } - @supports not (text-wrap: pretty) { - text-wrap: balance; + @supports not (text-wrap: pretty) { + text-wrap: balance; + } } - } - .testimonial__quote-symbol { - grid-area: Testimonial-Quotation; - height: 4rem; - transition: opacity 200ms linear 400ms; - width: 4rem; - } + .testimonial__quote-symbol { + grid-area: Testimonial-Quotation; + height: 4rem; + transition: opacity 200ms linear 400ms; + width: 4rem; + } } diff --git a/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.tsx b/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.tsx index 905f4a3c..876b2a8d 100644 --- a/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.tsx +++ b/src/ui/components/molecules/testimonial/components/testimonialQuote/testimonialQuote.tsx @@ -3,12 +3,12 @@ import 'src/ui/components/molecules/testimonial/components/testimonialQuote/test import doubleQuote from '@assets/images/svg/double-quote.svg'; export interface TestimonialQuoteProps { - children: ReactNode; + children: ReactNode; } export const TestimonialQuote: FC = ({ children }) => ( -
- {'Quote'} -
{children}
-
+
+ {'Quote'} +
{children}
+
); diff --git a/src/ui/components/molecules/testimonial/testimonial.css b/src/ui/components/molecules/testimonial/testimonial.css index 2f2c718e..6e8ff655 100644 --- a/src/ui/components/molecules/testimonial/testimonial.css +++ b/src/ui/components/molecules/testimonial/testimonial.css @@ -1,32 +1,32 @@ @layer testimonials.testimonial { - .testimonial__content { - background-color: var(--white); - cursor: grab; - display: grid; - gap: 0 1rem; - grid: - 'Testimonial-Image Testimonial-Image . . ' 1rem - 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content - 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem) - 'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem - 'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content - / calc(100% / 4) calc(100% / 4) 1fr 1fr; - width: 100%; + .testimonial__content { + background-color: var(--white); + cursor: grab; + display: grid; + gap: 0 1rem; + grid: + 'Testimonial-Image Testimonial-Image . . ' 1rem + 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' min-content + 'Testimonial-Image Testimonial-Image Testimonial-Quote Testimonial-Quote' calc(100% - 7rem) + 'Testimonial-Image Testimonial-Image Testimonial-Author Testimonial-Author' 1.5rem + 'Testimonial-Image Testimonial-Image Testimonial-Description Testimonial-Description' min-content + / calc(100% / 4) calc(100% / 4) 1fr 1fr; + width: 100%; - &:not(.--is-active) { - opacity: 0.25; + &:not(.--is-active) { + opacity: 0.25; + } } - } - .swiper-slide-prev { - .testimonial__content { - grid: - '. . Testimonial-Image Testimonial-Image ' 1rem - 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content - 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem) - 'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem - 'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content - / 1fr 1fr calc(100% / 4) calc(100% / 4); + .swiper-slide-prev { + .testimonial__content { + grid: + '. . Testimonial-Image Testimonial-Image ' 1rem + 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' min-content + 'Testimonial-Quote Testimonial-Quote Testimonial-Image Testimonial-Image' calc(100% - 7rem) + 'Testimonial-Author Testimonial-Author Testimonial-Image Testimonial-Image' 1.5rem + 'Testimonial-Description Testimonial-Description Testimonial-Image Testimonial-Image' min-content + / 1fr 1fr calc(100% / 4) calc(100% / 4); + } } - } } diff --git a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css index c141b396..d03ac7be 100644 --- a/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css +++ b/src/ui/components/molecules/testimonialsSlider/components/testimonialsNavigation/testimonialsNavigation.css @@ -1,20 +1,20 @@ @layer testimonials.navigation { - .testimonials__navigation { - gap: 0 1rem; - position: absolute; - right: 0; - z-index: 10; + .testimonials__navigation { + gap: 0 1rem; + position: absolute; + right: 0; + z-index: 10; - img { - width: 3rem; + img { + width: 3rem; + } } - } - .testimonials__navigation__button { - cursor: pointer; + .testimonials__navigation__button { + cursor: pointer; - &.--right { - rotate: 180deg; + &.--right { + rotate: 180deg; + } } - } } diff --git a/tsconfig.paths.json b/tsconfig.paths.json index 3579345c..5418527c 100644 --- a/tsconfig.paths.json +++ b/tsconfig.paths.json @@ -2,33 +2,15 @@ "compilerOptions": { "baseUrl": ".", "paths": { - "@ui/*": [ - "./src/ui/*" - ], - "@components/*": [ - "./src/ui/components/*" - ], - "@utils/*": [ - "./src/utils/*" - ], - "@assets/*": [ - "./src/ui/assets/*" - ], - "@styles/*": [ - "./src/ui/styles/*" - ], - "@articles/*": [ - "./src/content//*" - ], - "@i18n/*": [ - "./src/i18n/*" - ], - "@mocks/*": [ - "./src/mocks/*" - ], - "@types/*": [ - "./src/types/*" - ] + "@ui/*": ["./src/ui/*"], + "@components/*": ["./src/ui/components/*"], + "@utils/*": ["./src/utils/*"], + "@assets/*": ["./src/ui/assets/*"], + "@styles/*": ["./src/ui/styles/*"], + "@articles/*": ["./src/content//*"], + "@i18n/*": ["./src/i18n/*"], + "@mocks/*": ["./src/mocks/*"], + "@types/*": ["./src/types/*"] } } }