Skip to content

Commit

Permalink
fix: add latest articles props
Browse files Browse the repository at this point in the history
  • Loading branch information
@fbuireu
fbuireu committed Feb 9, 2024
1 parent d2fdeee commit f5db1ef
Show file tree
Hide file tree
Showing 5 changed files with 112 additions and 117 deletions.
Binary file modified .yarn/install-state.gz
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,16 +44,16 @@
"@astrojs/sitemap": "^3.0.5",
"@fontsource-variable/nunito-sans": "^5.0.9",
"@fontsource/baskervville": "^5.0.18",
"@types/node": "^20.11.16",
"@types/node": "^20.11.17",
"@types/react": "^18.2.55",
"@types/react-dom": "^18.2.19",
"astro": "^4.3.5",
"gsap": "^3.12.5",
"markdown-it": "^14.0.0",
"million": "^3.0.2",
"million": "^3.0.3",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-globe.gl": "^2.27.1",
"react-globe.gl": "^2.27.2",
"react-router-dom": "^6.22.0",
"swiper": "^11.0.6",
"three": "^0.161.0",
Expand Down
171 changes: 81 additions & 90 deletions src/ui/components/molecules/aboutLatestArticlesSlider/AboutLatestArticlesSlider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,111 +3,102 @@ import { Swiper, SwiperSlide } from 'swiper/react';
import { A11y, Keyboard, Navigation, Virtual } from 'swiper/modules';
import { type SwiperOptions } from 'swiper/types';
import { AboutLatestArticlesSliderNavigation } from '@components/molecules/aboutLatestArticlesSlider/components/aboutLatestArticlesSliderNavigation';
import { getCollection } from 'astro:content';
import { createExcerpt } from '@shared/utils/createExcerpt';
import { DEFAULT_DATE_OPTIONS } from 'src/consts.ts';
import MarkdownIt from 'markdown-it';
import { slugify } from '@shared/utils/slugify';
import './about-latest-articles-slider.css';
import type { CollectionEntry } from 'astro:content';

interface AboutLatestArticlesSLiderProps {
articles: CollectionEntry<'articles'>[];
}

const enum ArticleType {
DEFAULT = 'default',
NO_IMAGE = 'no_image',
DEFAULT = 'default',
NO_IMAGE = 'no_image',
}

const SLIDER_CONFIG: SwiperOptions = {
modules: [Navigation, Keyboard, Virtual, A11y],
loop: true,
slidesPerView: 2,
autoplay: {
delay: 3000,
pauseOnMouseEnter: true,
},
pagination: {
clickable: true,
},
keyboard: {
enabled: true,
modules: [Navigation, Keyboard, Virtual, A11y],
loop: true,
slidesPerView: 2,
autoplay: {
delay: 3000,
pauseOnMouseEnter: true,
},
pagination: {
clickable: true,
},
keyboard: {
enabled: true,
},
breakpoints: {
1024: {
slidesPerView: 2,
spaceBetween: 32,
},
breakpoints: {
1024: {
slidesPerView: 2,
spaceBetween: 32,
},
320: {
slidesPerView: 1,
},
320: {
slidesPerView: 1,
},
containerModifierClass: 'latest-articles-',
},
containerModifierClass: 'latest-articles-',
};
const parser: MarkdownIt = MarkdownIt('default', {});
const articles = await getCollection('articles');
articles.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf()).splice(4);

// todo: isolate and use composition
export const AboutLatestArticlesSlider = () => {
return (
<div className="about__latest-articles__slider">
<Swiper {...SLIDER_CONFIG}>
<ul>
{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_OPTIONS);
const href = `/articles/${slug}`;
export const AboutLatestArticlesSlider = ({ articles }: AboutLatestArticlesSLiderProps) => {
return (
<div className="about__latest-articles__slider">
<Swiper {...SLIDER_CONFIG}>
<ul>
{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_OPTIONS);
const href = `/articles/${slug}`;

return (
<li key={slug} className="about__latest-article__item__wrapper clickable">
<SwiperSlide key={slug}>
<a
className="about__latest-article__link-card"
href={href}
aria-label={article.title}
/>
<article
className={`about__latest-article__item ${
variant === ArticleType.DEFAULT ? '--default-variant' : '--no-image-variant'
}`}
>
{article.featuredImage && (
<img
className="about__latest-article__item__featured-image"
src={article.featuredImage}
alt={article.title}
loading="lazy"
decoding="async"
/>
)}
<time
className="about__latest-article__item__publish-date"
dateTime={publishedDate}
>
{publishedDate}
</time>
<h3 className="about__latest-article__title font-serif">{article.title}</h3>
<p className="about__latest-article__author">
by <a href={`/tags/${slugify(article.author)}`}>{article.author}</a>
</p>
<p className="about__latest-article__excerpt">{excerpt}</p>
<ul className="about__latest-article__item__tags__list">
{article.tags?.map((tag) => (
<a
className="about__latest-article__item__tag"
href={`/tags/${slugify(tag)}`}
key={tag}
>
#{tag}
</a>
))}
</ul>
</article>
</SwiperSlide>
</li>
);
})}
</ul>
<AboutLatestArticlesSliderNavigation />
</Swiper>
</div>
);
return (
<li key={slug} className="about__latest-article__item__wrapper clickable">
<SwiperSlide key={slug}>
<a className="about__latest-article__link-card" href={href} aria-label={article.title} />
<article
className={`about__latest-article__item ${
variant === ArticleType.DEFAULT ? '--default-variant' : '--no-image-variant'
}`}
>
{article.featuredImage && (
<img
className="about__latest-article__item__featured-image"
src={article.featuredImage}
alt={article.title}
loading="lazy"
decoding="async"
/>
)}
<time className="about__latest-article__item__publish-date" dateTime={publishedDate}>
{publishedDate}
</time>
<h3 className="about__latest-article__title font-serif">{article.title}</h3>
<p className="about__latest-article__author">
by <a href={`/tags/${slugify(article.author)}`}>{article.author}</a>
</p>
<p className="about__latest-article__excerpt">{excerpt}</p>
<ul className="about__latest-article__item__tags__list">
{article.tags?.map((tag) => (
<a className="about__latest-article__item__tag" href={`/tags/${slugify(tag)}`} key={tag}>
#{tag}
</a>
))}
</ul>
</article>
</SwiperSlide>
</li>
);
})}
</ul>
<AboutLatestArticlesSliderNavigation />
</Swiper>
</div>
);
};
22 changes: 13 additions & 9 deletions src/ui/components/organisms/AboutLatestArticles/AboutLatestArticles.astro
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,21 @@
---
import { getCollection } from 'astro:content';
import './about-latest-articles.css';
import { AboutLatestArticlesSlider } from '@components/molecules/aboutLatestArticlesSlider';
const articles = await getCollection('articles');
articles.sort((a, b) => new Date(b.data.publishDate).valueOf() - new Date(a.data.publishDate).valueOf()).splice(4);
---

<section class="about-latest-articles__wrapper common-wrapper">
<h3 class="about-latest-articles__title section-title">
Fresh from <a class="clickable" href="/articles">the blog</a>
</h3>
<div class="about-latest-articles__inner">
<div class="about-latest-articles__quote__wrapper">
<h3 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h3>
<h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
</div>
<AboutLatestArticlesSlider client:load />
<h3 class="about-latest-articles__title section-title">
Fresh from <a class="clickable" href="/articles">the blog</a>
</h3>
<div class="about-latest-articles__inner">
<div class="about-latest-articles__quote__wrapper">
<h3 class="about-latest-articles__quote">Lorem ipsum dolir sit Amet. Dolor sit amet.</h3>
<h6 class="about-latest-articles__quote__author">Ferran Buireu</h6>
</div>
<AboutLatestArticlesSlider client:load articles={articles} />
</div>
</section>
30 changes: 15 additions & 15 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1639,12 +1639,12 @@ __metadata:
languageName: node
linkType: hard

"@types/node@npm:^20.11.16":
version: 20.11.16
resolution: "@types/node@npm:20.11.16"
"@types/node@npm:^20.11.17":
version: 20.11.17
resolution: "@types/node@npm:20.11.17"
dependencies:
undici-types: "npm:~5.26.4"
checksum: 4886b90278e9c877a84efd3edd4667cd990e032d77268d2a798b99ebc1901ea336fa7dfbe9eaf4ad6ad1da9ce2ec31baf300038a3905838692362eb19904ebde
checksum: 1f30dae80b416cbf38f133a619ffb0e9fb9e7bc58f82d900bf73816ae5781740c4640892bf5971dd9c12570d5d05241646be3e7540bb4e059322ec6af4e51e15
languageName: node
linkType: hard

Expand Down Expand Up @@ -2549,7 +2549,7 @@ __metadata:
"@testing-library/react-hooks": "npm:^8.0.1"
"@types/eslint": "npm:^8.56.2"
"@types/markdown-it": "npm:^13.0.7"
"@types/node": "npm:^20.11.16"
"@types/node": "npm:^20.11.17"
"@types/react": "npm:^18.2.55"
"@types/react-dom": "npm:^18.2.19"
"@types/three": "npm:^0.161.2"
Expand All @@ -2567,12 +2567,12 @@ __metadata:
husky: "npm:^9.0.10"
lint-staged: "npm:^15.2.2"
markdown-it: "npm:^14.0.0"
million: "npm:^3.0.2"
million: "npm:^3.0.3"
prettier: "npm:3.2.5"
prettier-plugin-astro: "npm:^0.13.0"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
react-globe.gl: "npm:^2.27.1"
react-globe.gl: "npm:^2.27.2"
react-router-dom: "npm:^6.22.0"
stylelint: "npm:^16.2.1"
stylelint-config-recommended: "npm:^14.0.0"
Expand Down Expand Up @@ -7181,9 +7181,9 @@ __metadata:
languageName: node
linkType: hard

"million@npm:^3.0.2":
version: 3.0.2
resolution: "million@npm:3.0.2"
"million@npm:^3.0.3":
version: 3.0.3
resolution: "million@npm:3.0.3"
dependencies:
"@babel/core": "npm:^7.23.7"
"@babel/types": "npm:^7.23.6"
Expand All @@ -7193,7 +7193,7 @@ __metadata:
unplugin: "npm:^1.6.0"
bin:
million: packages/cli/dist/index.js
checksum: 570295e589a790bef3386a9c2354cce7d071e363f6047c57965c279d7c383d9fb514ef2760681a442f4bacb88b4e632943c277d41c93b6be4356010b1a19c245
checksum: 3f222a717cd9b10ef8c3d3fd8560407d0663c34c2abfb480225c6167b2df25b2f1cf500e1cf978b2b27a0d216e16285419835f23115ec6f09e77b3eccfc34ce0
languageName: node
linkType: hard

Expand Down Expand Up @@ -8328,16 +8328,16 @@ __metadata:
languageName: node
linkType: hard

"react-globe.gl@npm:^2.27.1":
version: 2.27.1
resolution: "react-globe.gl@npm:2.27.1"
"react-globe.gl@npm:^2.27.2":
version: 2.27.2
resolution: "react-globe.gl@npm:2.27.2"
dependencies:
globe.gl: "npm:^2.32"
prop-types: "npm:15"
react-kapsule: "npm:2"
peerDependencies:
react: "*"
checksum: 6960574b73d858251b20561cbad58b7e0c8a73871a43f79fdf07614255e74795fff4d5c62c2d88383902d8b0263a4043f34b6c87107b1a1617719b019492c922
checksum: 1386868826a6fcfb2a4622ad277f6e9ebf714496929c4f1a4c423acb02cc19e7d4facf6d8ab50e23828d8b4fc880d5f800f55f7907042ab6fad1a764bad8f452
languageName: node
linkType: hard

Expand Down

0 comments on commit f5db1ef

Please sign in to comment.