-
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add slider for latest articles
- Loading branch information
Showing
15 changed files
with
452 additions
and
283 deletions.
There are no files selected for viewing
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| interface LeftArrowProps{ | ||
| fill?: string | ||
| } | ||
|
|
||
| export const LeftArrow = ({fill='currentColor'}:LeftArrowProps) => { | ||
| return ( | ||
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 25 25"> | ||
| <g id="Left"> | ||
| <polygon | ||
| points="24 12.001 2.914 12.001 8.208 6.706 7.501 5.999 1 12.501 7.5 19.001 8.207 18.294 2.914 13.001 24 13.001 24 12.001" | ||
| style={{fill}} | ||
| stroke="#232326" | ||
| strokeWidth="0.25" | ||
| /> | ||
| </g> | ||
| </svg> | ||
| ); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./LeftArrow.tsx"; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
109 changes: 109 additions & 0 deletions
109
src/ui/components/molecules/latestArticles/LatestArticlesSlider.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,109 @@ | ||
| import type { CollectionEntry } from "astro:content"; | ||
| import { createExcerpt } from "@shared/utils/createExcerpt"; | ||
| import { slugify } from "@shared/utils/slugify"; | ||
| import MarkdownIt from "markdown-it"; | ||
| import { DEFAULT_DATE_FORMAT } from "src/consts.ts"; | ||
| import { A11y, Keyboard, Navigation, Virtual } from "swiper/modules"; | ||
| import { Swiper, SwiperSlide } from "swiper/react"; | ||
| import type { SwiperOptions } from "swiper/types"; | ||
| import "./latest-articles-slider.css"; | ||
| import { LatestArticlesSliderNavigation } from './components/latestArticlesSliderNavigation'; | ||
|
|
||
| interface LatestArticlesSLiderProps { | ||
| articles: CollectionEntry<"articles">[]; | ||
| } | ||
|
|
||
| enum ArticleType { | ||
| DEFAULT = "default", | ||
| NO_IMAGE = "no_image", | ||
| } | ||
|
|
||
| const SLIDER_CONFIG: SwiperOptions = { | ||
| modules: [Navigation, Keyboard, Virtual, A11y], | ||
| loop: true, | ||
| slidesPerView: 4, | ||
| autoplay: { | ||
| delay: 3000, | ||
| pauseOnMouseEnter: true, | ||
| }, | ||
| pagination: { | ||
| clickable: true, | ||
| }, | ||
| keyboard: { | ||
| enabled: true, | ||
| }, | ||
| breakpoints: { | ||
| 1024: { | ||
| slidesPerView: 4, | ||
| spaceBetween: 32, | ||
| }, | ||
| 720: { | ||
| slidesPerView: 2, | ||
| spaceBetween: 32, | ||
| }, | ||
| 320: { | ||
| slidesPerView: 1, | ||
| }, | ||
| }, | ||
| containerModifierClass: "latest-articles-", | ||
| }; | ||
| const parser: MarkdownIt = MarkdownIt("default", {}); | ||
|
|
||
| export const LatestArticlesSlider = ({ articles }: LatestArticlesSLiderProps) => { | ||
| return ( | ||
| <div className="latest-articles__slider common-wrapper"> | ||
| <Swiper onResize={(e)=> console.log(e)} {...SLIDER_CONFIG}> | ||
| <ul className="latest__articles__list flex row-wrap justify-space-between"> | ||
| {articles.map(({ slug, data: article, ...content }) => { | ||
| const { excerpt } = createExcerpt({ | ||
| parser, | ||
| content: content.body, | ||
| }); | ||
| const variant: ArticleType = article.featuredImage ? ArticleType.DEFAULT : ArticleType.NO_IMAGE; | ||
| const publishedDate = article.publishDate.toLocaleDateString("en", DEFAULT_DATE_FORMAT); | ||
| const href = `/articles/${slug}`; | ||
|
|
||
| return ( | ||
| <li key={slug} className="latest__article__item__wrapper article__item clickable"> | ||
| <SwiperSlide key={slug}> | ||
| <a className="latest__article__link-card" href={href} aria-label={article.title} /> | ||
| <article | ||
| className={`latest__article__item ${ | ||
| variant === ArticleType.DEFAULT ? '--default-variant' : '--no-image-variant' | ||
| }`} | ||
| > | ||
| {article.featuredImage && ( | ||
| <img | ||
| className="latest__article__item__featured-image" | ||
| src={article.featuredImage} | ||
| alt={article.title} | ||
| loading="lazy" | ||
| decoding="async" | ||
| /> | ||
| )} | ||
| <time className="latest__article__item__publish-date" dateTime={publishedDate}> | ||
| {publishedDate} | ||
| </time> | ||
| <h3 className="latest__article__title font-serif inner-section-title">{article.title}</h3> | ||
| <p className="latest__article__author"> | ||
| by <a href={`/tags/${slugify(article.author)}`}>{article.author}</a> | ||
| </p> | ||
| <p className="latest__article__excerpt">{excerpt}</p> | ||
| <ul className="latest__article__tags__list flex"> | ||
| {article.tags?.map((tag: string) => ( | ||
| <a className="latest__article__tag__item" href={`/tags/${slugify(tag)}`} key={tag}> | ||
| #{tag} | ||
| </a> | ||
| ))} | ||
| </ul> | ||
| </article> | ||
| </SwiperSlide> | ||
| </li> | ||
| ); | ||
| })} | ||
| </ul> | ||
| <LatestArticlesSliderNavigation /> | ||
| </Swiper> | ||
| </div> | ||
| ); | ||
| }; |
26 changes: 26 additions & 0 deletions
26
...testArticles/components/latestArticlesSliderNavigation/LatestArticlesSliderNavigation.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import "./latest-articles-slider-navigation.css"; | ||
| import { useSwiper } from "swiper/react"; | ||
| import { LeftArrow } from '@assets/images/svg-components/leftArrow'; | ||
|
|
||
| export const LatestArticlesSliderNavigation = () => { | ||
| const swiper = useSwiper(); | ||
|
|
||
| return ( | ||
| <div className="latest-articles__slider__navigation flex row-nowrap"> | ||
| <button | ||
| className="latest-articles__slider__navigation__button --left clickable" | ||
| type="button" | ||
| onClick={() => swiper.slidePrev()} | ||
| > | ||
| <LeftArrow fill="#ffffff"/> | ||
| </button> | ||
| <button | ||
| className="latest-articles__slider__navigation__button --right clickable" | ||
| type="button" | ||
| onClick={() => swiper.slideNext()} | ||
| > | ||
| <LeftArrow fill="#ffffff"/> | ||
| </button> | ||
| </div> | ||
| ); | ||
| }; |
1 change: 1 addition & 0 deletions
1
...ui/components/molecules/latestArticles/components/latestArticlesSliderNavigation/index.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./LatestArticlesSliderNavigation.tsx"; |
29 changes: 29 additions & 0 deletions
29
...tArticles/components/latestArticlesSliderNavigation/latest-articles-slider-navigation.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| @layer latest-articles.slider.navigation { | ||
| .latest-articles__slider__navigation { | ||
| gap: 0 1rem; | ||
| position: absolute; | ||
| right: 0; | ||
| z-index: 10; | ||
|
|
||
| img { | ||
| width: 3rem; | ||
| } | ||
|
|
||
| @media (min-width: 1024px) { | ||
| display: none; | ||
| } | ||
| } | ||
|
|
||
| .latest-articles__slider__navigation__button { | ||
| height: 3rem; | ||
| width: 3rem; | ||
|
|
||
| svg{ | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
| &.--right { | ||
| rotate: 0.5turn; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from "./LatestArticlesSlider.tsx"; |
104 changes: 104 additions & 0 deletions
104
src/ui/components/molecules/latestArticles/latest-articles-slider.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,104 @@ | ||
| @layer latest-articles.slider { | ||
| .latest-articles__title { | ||
| color: var(--white); | ||
| padding: 2rem 0; | ||
|
|
||
| .latest-articles__title__link { | ||
| color: var(--primary-main); | ||
| display: inline-block; | ||
| } | ||
| } | ||
|
|
||
| .latest__articles__list { | ||
| align-items: stretch; | ||
| gap: 0 2rem; | ||
| padding: 2rem 0 4rem; | ||
| position: relative; | ||
| } | ||
|
|
||
| .latest__article__item__wrapper { | ||
| backface-visibility: hidden; | ||
| -webkit-font-smoothing: subpixel-antialiased; | ||
| max-width: calc(100% / 4 - 2rem); | ||
| position: relative; | ||
| transform: translateZ(0); | ||
| transition: 0.2s scale; | ||
| width: 100%; | ||
| will-change: transform; | ||
| } | ||
|
|
||
| .latest__article__link-card { | ||
| inset: 0; | ||
| position: absolute; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .latest__article__item { | ||
| display: grid; | ||
| gap: 0.5rem 0; | ||
| height: 100%; | ||
|
|
||
| &.--no-image-variant { | ||
| grid: | ||
| 'Publish-Date' auto | ||
| 'Title' 1fr | ||
| 'Author' auto | ||
| 'Excerpt' auto | ||
| 'Tags' auto | ||
| / 1fr; | ||
| } | ||
|
|
||
| &.--default-variant { | ||
| grid: | ||
| 'Publish-Date' auto | ||
| 'Featured-Image' 1fr | ||
| 'Title' auto | ||
| 'Author' auto | ||
| 'Excerpt' auto | ||
| 'Tags' auto | ||
| / 1fr; | ||
| } | ||
| } | ||
|
|
||
| .latest__article__title { | ||
| align-self: center; | ||
| color: var(--white); | ||
| grid-area: Title; | ||
| letter-spacing: normal; | ||
| } | ||
|
|
||
| .latest__article__item__publish-date { | ||
| grid-area: Publish-Date; | ||
| } | ||
|
|
||
| .latest__article__author { | ||
| color: var(--white); | ||
| grid-area: Author; | ||
|
|
||
| a { | ||
| color: var(--primary-main); | ||
| position: relative; | ||
| z-index: 10; | ||
| } | ||
| } | ||
|
|
||
| .latest__article__excerpt { | ||
| color: var(--white); | ||
| grid-area: Excerpt; | ||
| } | ||
|
|
||
| .latest__article__item__featured-image { | ||
| grid-area: Featured-Image; | ||
| object-fit: cover; | ||
| z-index: -1; | ||
| } | ||
|
|
||
| .latest__article__tags__list { | ||
| color: var(--white); | ||
| font-size: 1.1rem; | ||
| gap: 0 1rem; | ||
| grid-area: Tags; | ||
| position: relative; | ||
| z-index: 10; | ||
| } | ||
| } |
Oops, something went wrong.