diff --git a/.gitignore b/.gitignore index c31d27d..6ef6414 100644 --- a/.gitignore +++ b/.gitignore @@ -10,6 +10,8 @@ yarn-debug.log* yarn-error.log* pnpm-debug.log* +.idea + # environment variables .env diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/codeStyles/Project.xml b/.idea/codeStyles/Project.xml new file mode 100644 index 0000000..f986f2f --- /dev/null +++ b/.idea/codeStyles/Project.xml @@ -0,0 +1,58 @@ + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/codeStyles/codeStyleConfig.xml b/.idea/codeStyles/codeStyleConfig.xml new file mode 100644 index 0000000..79ee123 --- /dev/null +++ b/.idea/codeStyles/codeStyleConfig.xml @@ -0,0 +1,5 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..161a707 --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/yarkov.tech.iml b/.idea/yarkov.tech.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/yarkov.tech.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md index 08731e9..71378f6 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ Personal website created with Astro. ### Todo -- [ ] HTML layout +- [x] HTML layout - [ ] Adaptive & Responsive layout - [ ] Dark/Light Theme - [ ] Multilang web-site diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx index 5e62eff..99c3be3 100644 --- a/src/components/ArticleItem/ArticleItem.tsx +++ b/src/components/ArticleItem/ArticleItem.tsx @@ -1,6 +1,6 @@ import './ArticleItem.scss'; import { Component } from 'solid-js'; -import { IArticle } from '@root/interfaces'; +import type { IArticle } from '@root/interfaces'; import { DateFormatter } from '@utils/date'; export type ArticleItemProps = { diff --git a/src/components/ArticlesList/ArticlesList.scss b/src/components/ArticlesList/ArticlesList.scss index 8629351..f388180 100644 --- a/src/components/ArticlesList/ArticlesList.scss +++ b/src/components/ArticlesList/ArticlesList.scss @@ -24,15 +24,6 @@ } &-tags { margin-bottom: 45px; - & nav ul { - display: flex; - flex-wrap: wrap; - column-gap: 5px; - row-gap: 10px; - list-style: none; - margin: 0; - padding: 0; - } } &-list { &__wrapper { diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx index 02cbfca..3d69f3a 100644 --- a/src/components/ArticlesList/ArticlesList.tsx +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -1,9 +1,9 @@ -import './ArticlesList.scss'; -import { Component, createSignal, Show } from 'solid-js'; -import { PageHeading } from '@components/PageHeading'; -import { IArticle } from '@root/interfaces'; -import * as utils from '@root/utils/articles'; -import { ArticleItem } from '../ArticleItem'; +import "./ArticlesList.scss"; +import { Component, createSignal, Show } from "solid-js"; +import { PageHeading } from "@components/PageHeading"; +import type { IArticle } from "@root/interfaces"; +import * as utils from "@root/utils/articles"; +import { ArticleItem } from "../ArticleItem"; export type ArticlesListProps = { data: IArticle[]; @@ -11,42 +11,39 @@ export type ArticlesListProps = { }; export const ArticlesList: Component = ({ data, tags }) => { - const [articles, setArticles] = createSignal( - utils.filterArticlesByYear(data) - ); - + const [articles, setArticles] = createSignal(utils.filterArticlesByYear(data)); const [selectedTags, setSelectedTags] = createSignal([]); - const [filteredArticles, setFilteredArticles] = createSignal([]); return ( -
+
-
+
- + width="25" + height="24" + viewBox="0 0 25 24" + xmlns="http://www.w3.org/2000/svg"> + - + {data.length}
-
+
-
+
{Object.keys(articles()) .map(Number) .sort((a, b) => b - a) .map((year) => ( -
+

{year}

{utils.sortArtcilesByDate(articles()[year]).map((article) => ( diff --git a/src/pages/[article].astro b/src/pages/[article].astro new file mode 100644 index 0000000..9f162dd --- /dev/null +++ b/src/pages/[article].astro @@ -0,0 +1,140 @@ +--- + import Page from "@root/layouts/Page.astro"; + import { Markdown } from "astro/components"; + + export function getStaticPaths() { + return [ + { params: { article: 'article' } }, + ] + } +--- + + +
+
+
+ +
+ + Опубликовал Sergey Yarkov +
+
+
+

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

+
+
+
+ Article Image +
+
+
+
+ + ## Introduction + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. + Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. + Maecenas eget condimentum velit, sit amet feugiat lectus. Class aptent taciti sociosqu ad litora torquent per + conubia nostra, per inceptos himenaeos. Praesent auctor purus luctus enim egestas, ac scelerisque ante pulvinar. + Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis + convallis diam sit amet lacinia. Aliquam in elementum + + Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. + Integer in felis sed leo vestibulum venenatis. Suspendisse quis arcu sem. Aenean feugiat ex eu vestibulum + vestibulum. Morbi a eleifend magna. Nam metus lacus, porttitor eu mauris a, blandit ultrices nibh. Mauris sit + amet magna non ligula vestibulum eleifend. Nulla varius volutpat turpis sed lacinia. Nam eget mi in purus + lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis + nisi, ac posuere leo. + + ### Another Heading + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. + Sed dignissim, metus nec fringilla accumsan, risus sem sollicitudin lacus, ut interdum tellus elit sed risus. + + - `Nam metus lacus`: porttitor eu mauris a, blandit ultrices nibh. + - `Class aptent`: taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. + - `Sed nec ante`: dictum sem condimentum ullamcorper quis venenatis nisi. + +
+
+

Comments

+
+
+ + \ No newline at end of file diff --git a/src/styles/global.scss b/src/styles/global.scss index 759fad2..d4a38de 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -22,6 +22,14 @@ --font-size-8xl: 6rem; --font-size-9xl: 8rem; + /* Line heights */ + --line-height-normal: 'normal'; + --line-height-none: 1; + --line-height-shorter: 1.25; + --line-height-short: 1.375; + --line-height-base: 1.5; + --line-height-tall: 1.625; + /* Colors */ --color-white: #ffffff; --color-black: #010409; @@ -150,6 +158,15 @@ body { padding: 0 var(--content-padding); } +.list-links { + display: flex; + flex-wrap: wrap; + gap: 5px; + margin: 0; + padding: 0; + list-style: none; +} + /* Buttons */ .btn-link { cursor: pointer; @@ -174,10 +191,23 @@ body { & p, em, q { - line-height: 1.5; + line-height: var(--line-height-base); font-size: var(--font-size-lg); } + & ul { + padding-left: 1.5rem; + line-height: var(--line-height-base); + margin-bottom: 1.5rem; + margin-top: 0; + & li { + font-size: var(--font-size-lg); + line-height: var(--line-height-base); + margin-bottom: 0.5rem; + padding-left: 0.25rem; + } + } + q { font-style: italic; quotes: "«" "»"; @@ -187,7 +217,8 @@ body { h2, h3, h4 { - margin: 3rem 0 1rem 0; + margin-top: 3rem; + margin-bottom: 1rem; padding-bottom: 0.35rem; } @@ -199,14 +230,25 @@ body { } & h2 { + font-size: var(--font-size-3xl); border-bottom: 1px solid var(--border-color); } + & h3 { + font-size: var(--font-size-2xl); + } + & a { font-weight: 600; } } +li::marker { + color: var(--color-blue-500); + font-size: 1.3rem; + line-height: var(--line-height-none); +} + a { color: var(--color-blue-500); font-weight: 500; diff --git a/src/utils/articles.ts b/src/utils/articles.ts index ba78f60..13ae561 100644 --- a/src/utils/articles.ts +++ b/src/utils/articles.ts @@ -1,16 +1,16 @@ -import { IArticle } from '@root/interfaces'; +import type { IArticle } from '@root/interfaces'; import { MarkdownInstance } from 'astro'; export const transformArticles = ( articles: MarkdownInstance[] -): IArticle[] => { - return articles.map((article) => ({ +): IArticle[] => articles.map((article) => ({ title: article.frontmatter.title, description: article.frontmatter.description, + author: article.frontmatter.author, tags: article.frontmatter.tags, published_at: article.frontmatter.published_at, - })); -}; + })) +; export const sortArtcilesByDate = (articles: IArticle[]): IArticle[] => { return articles.sort( diff --git a/tsconfig.json b/tsconfig.json index ab90f2e..cf2a11c 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -8,6 +8,7 @@ "types": ["vite/client"], "sourceMap": true, "baseUrl": ".", + "jsx": "preserve", "paths": { "@root/*": ["./src/*"], "@styles/*": ["./src/styles/*"],