todo list to readme

README.md

@@ -5,6 +5,14 @@
 
 Personal website created with Astro.
 
+### Todo
+
+- [ ] HTML layout
+- [ ] Adaptive & Responsive layout
+- [ ] Dark/Light Theme
+- [ ] Multilang web-site
+- [ ] Form handling via Netlify Forms
+
 ## License
 
 This project is open source and available under the [MIT License](LICENSE).

src/components/ArticlesList/ArticlesList.tsx

@@ -1,5 +1,5 @@
 import './ArticlesList.scss';
-import { Component, createSignal } from 'solid-js';
+import { Component, createSignal, Show } from 'solid-js';
 import { PageHeading } from '@components/PageHeading';
 import { IArticle } from '@root/interfaces';
 import * as utils from '@root/utils/articles';
@@ -15,6 +15,10 @@ export const ArticlesList: Component<ArticlesListProps> = ({ data, tags }) => {
     utils.filterArticlesByYear(data)
   );
 
+  const [selectedTags, setSelectedTags] = createSignal<string[]>([]);
+
+  const [filteredArticles, setFilteredArticles] = createSignal<IArticle[]>([]);
+
   return (
     <section class='articles container'>
       <PageHeading
@@ -37,23 +41,56 @@ export const ArticlesList: Component<ArticlesListProps> = ({ data, tags }) => {
         <nav>
           <ul>
             {tags.map((tag) => (
-              <li data-tag={tag.toLocaleLowerCase()}>{tag}</li>
+              <li
+                style={
+                  selectedTags().includes(tag) &&
+                  'border-color: var(--border-color-hover);'
+                }
+                onClick={() => {
+                  if (selectedTags().includes(tag)) {
+                    setSelectedTags(
+                      selectedTags().filter(
+                        (selectedTag) => selectedTag !== tag
+                      )
+                    );
+                    setFilteredArticles(
+                      filteredArticles().filter((a) => !a.tags.includes(tag))
+                    );
+                    return;
+                  }
+                  setSelectedTags([...selectedTags(), tag]);
+                  data.forEach((article) => {
+                    if (article.tags.includes(tag)) {
+                      setFilteredArticles([...filteredArticles(), article]);
+                    }
+                  });
+                }}
+                data-tag={tag.toLocaleLowerCase()}>
+                {tag}
+              </li>
             ))}
           </ul>
         </nav>
       </div>
       <div class='articles-list'>
-        {Object.keys(articles())
+        <Show when={filteredArticles().length === 0}>
-          .map(Number)
+          {Object.keys(articles())
-          .sort((a, b) => b - a)
+            .map(Number)
-          .map((year) => (
+            .sort((a, b) => b - a)
-            <div class='articles-list__wrapper'>
+            .map((year) => (
-              <h2>{year}</h2>
+              <div class='articles-list__wrapper'>
-              {utils.sortArtcilesByDate(articles()[year]).map((article) => (
+                <h2>{year}</h2>
-                <ArticleItem data={article} />
+                {utils.sortArtcilesByDate(articles()[year]).map((article) => (
-              ))}
+                  <ArticleItem data={article} />
-            </div>
+                ))}
+              </div>
+            ))}
+        </Show>
+        <Show when={filteredArticles().length !== 0}>
+          {utils.sortArtcilesByDate(filteredArticles()).map((article) => (
+            <ArticleItem data={article} />
           ))}
+        </Show>
       </div>
     </section>
   );

src/pages/articles.astro

@@ -8,7 +8,6 @@ const articles = await Astro.glob<IArticle>('../../content/articles/**/*.md');
 const tags = new Set(
   articles.map((article) => article.frontmatter.tags).flat()
 );
-console.log(tags);
 ---
 
 <Page title='Статьи | Sergey Yarkov'>