diff --git a/src/components/ArticleItem/ArticleItem.scss b/src/components/ArticleItem/ArticleItem.module.scss similarity index 97% rename from src/components/ArticleItem/ArticleItem.scss rename to src/components/ArticleItem/ArticleItem.module.scss index 5377b6c..04d3d70 100644 --- a/src/components/ArticleItem/ArticleItem.scss +++ b/src/components/ArticleItem/ArticleItem.module.scss @@ -1,4 +1,4 @@ -.article-item { +.ArticleItem { border-radius: var(--border-radius-md); text-decoration: none; & a { diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx index 5e62eff..a434121 100644 --- a/src/components/ArticleItem/ArticleItem.tsx +++ b/src/components/ArticleItem/ArticleItem.tsx @@ -1,4 +1,4 @@ -import './ArticleItem.scss'; +import styles from './ArticleItem.module.scss'; import { Component } from 'solid-js'; import { IArticle } from '@root/interfaces'; import { DateFormatter } from '@utils/date'; @@ -8,7 +8,7 @@ export type ArticleItemProps = { }; export const ArticleItem: Component = ({ data }) => ( -
+

{data.title}

diff --git a/src/components/ArticlesList/ArticlesList.scss b/src/components/ArticlesList/ArticlesList.scss index 7be461a..167205e 100644 --- a/src/components/ArticlesList/ArticlesList.scss +++ b/src/components/ArticlesList/ArticlesList.scss @@ -32,7 +32,8 @@ list-style: none; margin: 0; padding: 0; - & li a { + & li { + cursor: pointer; padding: 3px 10px; border-radius: var(--border-radius-md); border: 1px solid var(--border-color); diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index b1c8539..71b314b 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -1,16 +1,27 @@ import './ArticlesList.scss'; -import { Component } from 'solid-js'; +import { Component, createSignal } from 'solid-js'; +import { PageHeading } from '@components/PageHeading'; +import { IArticle } from '@root/interfaces'; +import * as utils from '@root/utils/articles'; +import { ArticleItem } from '../ArticleItem'; + +export type ArticlesListProps = { + data: IArticle[]; + tags: string[]; +}; + +export const ArticlesList: Component = ({ data, tags }) => { + const [articles, setArticles] = createSignal( + utils.filterArticlesByYear(data) + ); -export const ArticlesList: Component = () => { return (

-
-

Статьи

-

- Технические статьи, туториалы и различные справочные материалы которые - связаны с IT тематикой находятся здесь. -

-
+
{ - 3 + {data.length}
-
-

2022

- - -
-
-

2021

- -
+ {Object.keys(articles()) + .map(Number) + .sort((a, b) => b - a) + .map((year) => ( +
+

{year}

+ {utils.sortArtcilesByDate(articles()[year]).map((article) => ( + + ))} +
+ ))}
); diff --git a/src/components/PageContent/Heading.tsx b/src/components/PageContent/Heading.tsx new file mode 100644 index 0000000..e69de29 diff --git a/src/components/PageContent/PageContent.tsx b/src/components/PageContent/PageContent.tsx new file mode 100644 index 0000000..740a34f --- /dev/null +++ b/src/components/PageContent/PageContent.tsx @@ -0,0 +1,10 @@ +import { Component, JSX } from 'solid-js'; + +export type PageContentComposition = { + Heading?: Component; +}; + +export const PageContent: Component<{ children: JSX.Element }> & + PageContentComposition = (props) => { + return
{props.children}
; +}; diff --git a/src/components/PageHeading/PageHeading.module.scss b/src/components/PageHeading/PageHeading.module.scss new file mode 100644 index 0000000..78e340b --- /dev/null +++ b/src/components/PageHeading/PageHeading.module.scss @@ -0,0 +1,13 @@ +.PageHeading { + font-size: var(--font-size-4xl); + text-align: center; + margin-bottom: 15px; +} + +.PageDescription { + font-size: var(--font-size-lg); + text-align: center; + max-width: 650px; + margin: 0 auto; + margin-bottom: 2.5rem; +} diff --git a/src/components/PageHeading/PageHeading.tsx b/src/components/PageHeading/PageHeading.tsx new file mode 100644 index 0000000..0eff5ea --- /dev/null +++ b/src/components/PageHeading/PageHeading.tsx @@ -0,0 +1,23 @@ +import { Component } from 'solid-js'; +import styles from './PageHeading.module.scss'; + +export type PageHeadingProps = { + heading: string; + description?: string | undefined; +}; + +export const PageHeading: Component = ({ + heading, + description, +}) => { + return ( +
+

+ {heading} +

+ {description &&

{description}

} +
+ ); +}; diff --git a/src/components/PageHeading/index.ts b/src/components/PageHeading/index.ts new file mode 100644 index 0000000..d3cee7e --- /dev/null +++ b/src/components/PageHeading/index.ts @@ -0,0 +1 @@ +export * from './PageHeading'; diff --git a/src/pages/articles.astro b/src/pages/articles.astro index e09dc63..67f4614 100644 --- a/src/pages/articles.astro +++ b/src/pages/articles.astro @@ -1,8 +1,20 @@ --- import Page from '@layouts/Page.astro'; import { ArticlesList } from '@components/ArticlesList'; +import { IArticle } from '@root/interfaces'; +import * as utils from '@utils/index'; + +const articles = await Astro.glob('../../content/articles/**/*.md'); +const tags = new Set( + articles.map((article) => article.frontmatter.tags).flat() +); +console.log(tags); --- - + diff --git a/src/pages/index.astro b/src/pages/index.astro index 0723dd6..d4df2ce 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -2,12 +2,10 @@ import Page from '@layouts/Page.astro'; import { IArticle } from '@root/interfaces'; import { ArticleItem } from '@components/ArticleItem'; +import * as utils from '@utils/index'; const data = await Astro.glob('../../content/articles/**/*.md'); -const recent = data.sort( - (a, b) => - b.frontmatter.published_at.valueOf() - a.frontmatter.published_at.valueOf() -); +const recent = utils.sortArtcilesByDate(utils.transformArticles(data)); --- @@ -60,13 +58,13 @@ const recent = data.sort(
- {recent.map((article) => )} + {recent.slice(0, 5).map((article) => )}