diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index 1df8d84..f12f06e 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -3,17 +3,23 @@ import type { ArticleBlockType } from '@root/types'; import { createSignal, createEffect, For } from 'solid-js'; import { search, selectedTags } from '@stores/searchStore'; -import { ArticleItem } from '../ArticleItem'; +import { ArticleItem } from '@components/ArticleItem'; import * as utils from '@utils/articles'; import './ArticlesList.scss'; +import SearchInput from '../SearchInput'; +import TagsList from '../TagsList'; type ArticlesListProps = { - data: ArticleBlockType; + data: { + articles: ArticleBlockType; + tags: string[]; + }; emptyPlaceholder?: string | undefined; }; const ArticlesList: Component = (props) => { - const [articles, setArticles] = createSignal(props.data); + // eslint-disable-next-line solid/reactivity + const [articles, setArticles] = createSignal(props.data.articles); /** * Sort articles by year in descending order @@ -25,9 +31,10 @@ const ArticlesList: Component = (props) => { }; const isEmpty = () => Object.keys(articles()).length === 0; + const getLength = () => Object.values(articles()).flat().length; createEffect(() => { - let filtered = props.data; + let filtered = props.data.articles; /** * Find articles by title @@ -47,29 +54,39 @@ const ArticlesList: Component = (props) => { return; } - filtered = utils.findArticlesBySearch(search(), props.data); - setArticles(filtered); + /** + * Set filtered variable as default value + */ + if (!search() && selectedTags().length === 0) { + filtered = props.data.articles; + setArticles(filtered); + } }); return ( -
- {isEmpty() && ( -
-

{props.emptyPlaceholder || 'No articles found...'}

-
- )} - { - return ( -
-

{year}

- } /> -
- ); - }} - /> -
+ <> + + +
+ {isEmpty() ? ( +
+

{props.emptyPlaceholder || 'No articles found...'}

+
+ ) : ( + { + return ( +
+

{year}

+ } /> +
+ ); + }} + /> + )} +
+ ); }; diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index 8c67fcd..c953f40 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -3,7 +3,7 @@ import './Header.scss'; import { SITE_METADATA } from '@root/config'; import ThemeSwitcher from '@components/ThemeSwticher'; import { Icon } from 'astro-icon'; -import { NavToggle } from './NavToggle/NavToggle.tsx'; +import NavToggle from './NavToggle'; const { name, nav, contacts } = SITE_METADATA; const { pathname } = Astro.canonicalURL; @@ -40,6 +40,6 @@ const { pathname } = Astro.canonicalURL; - + diff --git a/src/components/Header/NavToggle/NavToggle.tsx b/src/components/Header/NavToggle/NavToggle.tsx index 24ab898..e858b7f 100644 --- a/src/components/Header/NavToggle/NavToggle.tsx +++ b/src/components/Header/NavToggle/NavToggle.tsx @@ -1,7 +1,9 @@ -import './NavToggle.scss'; -import { Component, createSignal, createEffect } from 'solid-js'; +import type { Component } from 'solid-js'; -export const NavToggle: Component = () => { +import { createSignal, createEffect } from 'solid-js'; +import './NavToggle.scss'; + +const NavToggle: Component = () => { const [isNavShown, setIsNavShown] = createSignal(false); const toggleNav = () => setIsNavShown(!isNavShown()); @@ -25,3 +27,5 @@ export const NavToggle: Component = () => { ); }; + +export default NavToggle; diff --git a/src/components/Header/NavToggle/index.ts b/src/components/Header/NavToggle/index.ts new file mode 100644 index 0000000..57d70d5 --- /dev/null +++ b/src/components/Header/NavToggle/index.ts @@ -0,0 +1 @@ +export { default } from './NavToggle'; diff --git a/src/components/SearchInput/SearchInput.tsx b/src/components/SearchInput/SearchInput.tsx index 80f465f..d9ef696 100644 --- a/src/components/SearchInput/SearchInput.tsx +++ b/src/components/SearchInput/SearchInput.tsx @@ -1,4 +1,4 @@ -import type { Component, JSX } from 'solid-js'; +import { Component, JSX } from 'solid-js'; import { createEffect } from 'solid-js'; import { search, setSearch } from '@stores/searchStore'; @@ -6,7 +6,7 @@ import * as utils from '@utils/history'; import './SearchInput.scss'; type SearchInputProps = { - length: number; + count: number; placeholder?: string | undefined; }; @@ -58,7 +58,7 @@ const SearchInput: Component = (props) => { - {props.length} + {props.count} ); }; diff --git a/src/components/Splash/SplashHeading.scss b/src/components/Splash/SplashHeading.scss index af4faee..16bbb5b 100644 --- a/src/components/Splash/SplashHeading.scss +++ b/src/components/Splash/SplashHeading.scss @@ -19,3 +19,10 @@ line-height: 1.5; } } + +@media screen and (max-width: 560px) { + .splash-heading hgroup h1 { + font-size: var(--font-size-4xl); + margin-bottom: 0.85rem; + } +} diff --git a/src/pages/articles.astro b/src/pages/articles.astro index 6134b8d..8735f7d 100644 --- a/src/pages/articles.astro +++ b/src/pages/articles.astro @@ -3,9 +3,7 @@ import type { ArticleType } from '@root/types'; import PageLayout from '@layouts/default.astro'; import ArticlesList from '@components/ArticlesList'; -import SearchInput from '@components/SearchInput'; -import TagsList from '@components/TagsList'; -import { transformArticles, filterArticlesByYear } from '@utils/articles'; +import { transformArticles, formatToArticleBlocks } from '@utils/articles'; const articles = await Astro.glob('../../content/articles/**/*.md'); const tags = new Set(articles.map((article) => article.frontmatter.tags).flat()); @@ -16,8 +14,13 @@ const tags = new Set(articles.map((article) => article.frontmatter.tags).flat()) description='Технические статьи, туториалы и различные справочные материалы которые связаны с IT тематикой находятся здесь.' >
- - - +
diff --git a/src/store.ts b/src/store.ts deleted file mode 100644 index a096cc1..0000000 --- a/src/store.ts +++ /dev/null @@ -1,3 +0,0 @@ -import { createSignal } from 'solid-js'; - -export const [search, setSearch] = createSignal(''); diff --git a/src/styles/global.scss b/src/styles/global.scss index 31d1ed6..1e14a15 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -85,7 +85,7 @@ /* Sizes */ --content-width: 760px; - --content-padding: 15px; + --content-padding: 24px; /* Elements */ --background-body-color: var(--color-white); diff --git a/src/utils/articles.ts b/src/utils/articles.ts index c96bfb4..f63124b 100644 --- a/src/utils/articles.ts +++ b/src/utils/articles.ts @@ -14,32 +14,46 @@ export const sortArtcilesByDate = (articles: ArticleType[]): ArticleType[] => { return articles.sort((a, b) => new Date(b.published_at).valueOf() - new Date(a.published_at).valueOf()); }; -export const filterArticlesByYear = (articles: ArticleType[]): { [year: number]: ArticleType[] } => { - const filtered = {}; +/** + * This function will distribute the array of articles by years. + */ +export const formatToArticleBlocks = (articles: ArticleType[]): ArticleBlockType => { + const blocks = {}; for (const article of articles) { const year = new Date(article.published_at).getFullYear(); - if (!filtered[year]) filtered[year] = []; - - filtered[year].push(article); + if (!blocks[year]) blocks[year] = []; + blocks[year].push(article); } - return filtered; + return blocks; }; export const findArticlesBySearch = (search: string, articles: ArticleBlockType): ArticleBlockType => { - const filtered = Object.values(articles) - .flat() - .filter((article) => article.title.toLocaleLowerCase().includes(search.toLocaleLowerCase())); + const matched: Array = []; - return filterArticlesByYear(filtered); + for (const year in articles) { + for (const article of articles[year]) { + const match = article.title.toLocaleLowerCase().includes(search.toLocaleLowerCase()); + if (match) matched.push(article); + } + } + + return formatToArticleBlocks(matched); }; export const findArticlesByTags = (tags: string[], articles: ArticleBlockType): ArticleBlockType => { - const filtered = Object.values(articles) - .flat() - .filter((article) => article.tags.map((tag) => tag.toLocaleLowerCase()).some((t) => tags.includes(t))); + const matched: Array = []; - return filterArticlesByYear(filtered); + for (const year in articles) { + for (const article of articles[year]) { + const entries = article.tags.map((tag) => tag.toLocaleLowerCase()); + const match = entries.some((tag) => tags.includes(tag)); + + if (match) matched.push(article); + } + } + + return formatToArticleBlocks(matched); };