From d8de43582f2be6c3c2277f0844b6e9277282d702 Mon Sep 17 00:00:00 2001 From: Sergey Yarkov Date: Sat, 9 Jul 2022 23:35:19 +0300 Subject: [PATCH] feat: render articles on index page --- astro.config.mjs | 3 + package-lock.json | 123 +++++++++++++++- package.json | 4 +- siteMetadata.json | 11 -- src/components/ArticleItem/ArticleItem.scss | 31 ++++ src/components/ArticleItem/ArticleItem.tsx | 21 +++ src/components/ArticleItem/index.ts | 1 + src/components/ArticlesList/ArticlesList.scss | 59 ++++++++ src/components/ArticlesList/ArticlesList.tsx | 79 +++++++++++ src/components/ArticlesList/index.ts | 1 + .../RecentArticles/RecentArticles.astro | 32 ----- .../RecentArticles/RecentArticles.scss | 19 --- .../Sections/RecentArticles/index.ts | 1 - src/components/Sections/Welcome/Welcome.astro | 44 ------ src/components/Sections/Welcome/Welcome.scss | 45 ------ src/components/Sections/Welcome/index.ts | 1 - src/components/Sections/index.ts | 2 - src/interfaces/index.ts | 6 + src/pages/articles.astro | 132 +----------------- src/pages/index.astro | 128 ++++++++++++++++- src/styles/global.scss | 32 ----- src/utils/date.ts | 6 + tsconfig.json | 4 +- 23 files changed, 459 insertions(+), 326 deletions(-) delete mode 100644 siteMetadata.json create mode 100644 src/components/ArticleItem/ArticleItem.scss create mode 100644 src/components/ArticleItem/ArticleItem.tsx create mode 100644 src/components/ArticleItem/index.ts create mode 100644 src/components/ArticlesList/ArticlesList.scss create mode 100644 src/components/ArticlesList/ArticlesList.tsx create mode 100644 src/components/ArticlesList/index.ts delete mode 100644 src/components/Sections/RecentArticles/RecentArticles.astro delete mode 100644 src/components/Sections/RecentArticles/RecentArticles.scss delete mode 100644 src/components/Sections/RecentArticles/index.ts delete mode 100644 src/components/Sections/Welcome/Welcome.astro delete mode 100644 src/components/Sections/Welcome/Welcome.scss delete mode 100644 src/components/Sections/Welcome/index.ts delete mode 100644 src/components/Sections/index.ts create mode 100644 src/interfaces/index.ts create mode 100644 src/utils/date.ts diff --git a/astro.config.mjs b/astro.config.mjs index 3ac6c0c..aeb879d 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -1,6 +1,9 @@ import { defineConfig } from 'astro/config'; +import solid from '@astrojs/solid-js'; + // https://astro.build/config export default defineConfig({ site: 'https://yarkov.tech', + integrations: [solid()], }); diff --git a/package-lock.json b/package-lock.json index da92cae..21efd99 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,10 +9,12 @@ "version": "0.0.1", "license": "MIT", "devDependencies": { + "@astrojs/solid-js": "^0.2.1", "astro": "^1.0.0-beta.63", "prettier": "^2.7.1", "prettier-plugin-astro": "^0.1.1", - "sass": "^1.53.0" + "sass": "^1.53.0", + "solid-js": "^1.4.7" } }, "node_modules/@ampproject/remapping": { @@ -115,6 +117,21 @@ "node": "^14.15.0 || >=16.0.0" } }, + "node_modules/@astrojs/solid-js": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@astrojs/solid-js/-/solid-js-0.2.1.tgz", + "integrity": "sha512-l1aJL5d3YBCLxdXbcJZMtOvqpLaRJb5z+LJ8vOukTeNXlooPSH+SZWS3uhuQG6YgYgap0dlLlMjGUgJt+oUJAw==", + "dev": true, + "dependencies": { + "babel-preset-solid": "^1.4.2" + }, + "engines": { + "node": "^14.15.0 || >=16.0.0" + }, + "peerDependencies": { + "solid-js": "^1.4.3" + } + }, "node_modules/@astrojs/svelte-language-integration": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/@astrojs/svelte-language-integration/-/svelte-language-integration-0.1.6.tgz", @@ -1028,6 +1045,51 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/babel-plugin-jsx-dom-expressions": { + "version": "0.33.12", + "resolved": "https://registry.npmjs.org/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.33.12.tgz", + "integrity": "sha512-FQeNcBvC+PrPYGpeUztI7AiiAqJL2H8e7mL4L6qHZ7B4wZfbgyREsHZwKmmDqxAehlyAUolTdhDNk9xfyHdIZw==", + "dev": true, + "dependencies": { + "@babel/helper-module-imports": "7.16.0", + "@babel/plugin-syntax-jsx": "^7.16.5", + "@babel/types": "^7.16.0", + "html-entities": "2.3.2" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, + "node_modules/babel-plugin-jsx-dom-expressions/node_modules/@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", + "dev": true, + "dependencies": { + "@babel/types": "^7.16.0" + }, + "engines": { + "node": ">=6.9.0" + } + }, + "node_modules/babel-plugin-jsx-dom-expressions/node_modules/html-entities": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz", + "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==", + "dev": true + }, + "node_modules/babel-preset-solid": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/babel-preset-solid/-/babel-preset-solid-1.4.6.tgz", + "integrity": "sha512-5n+nm1zgj7BK9cv0kYu0p+kbsXgGbrxLmA5bv5WT0V5WnqRgshWILInPWLJNZbvP5gBj+huDKwk3J4RhhbFlhA==", + "dev": true, + "dependencies": { + "babel-plugin-jsx-dom-expressions": "^0.33.12" + }, + "peerDependencies": { + "@babel/core": "^7.0.0" + } + }, "node_modules/bail": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", @@ -5661,6 +5723,12 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/solid-js": { + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.4.7.tgz", + "integrity": "sha512-u3hoe5w3xseAc/8zLwYaQVGanWXknMMQkzryNz7lOPy2ygW6DhCtfMseun4kLflRNRzrUUpTV3W5p7j2SGcHCQ==", + "dev": true + }, "node_modules/source-map": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", @@ -6817,6 +6885,15 @@ "integrity": "sha512-JxkrXFiFhfunOFBI2Xxwru9t4IzrLw+nfA7RkNnV8qP65BLidrwWS+NfZhOSVGTrbf+cQfF8QNe6O4gAX8wQHw==", "dev": true }, + "@astrojs/solid-js": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/@astrojs/solid-js/-/solid-js-0.2.1.tgz", + "integrity": "sha512-l1aJL5d3YBCLxdXbcJZMtOvqpLaRJb5z+LJ8vOukTeNXlooPSH+SZWS3uhuQG6YgYgap0dlLlMjGUgJt+oUJAw==", + "dev": true, + "requires": { + "babel-preset-solid": "^1.4.2" + } + }, "@astrojs/svelte-language-integration": { "version": "0.1.6", "resolved": "https://registry.npmjs.org/@astrojs/svelte-language-integration/-/svelte-language-integration-0.1.6.tgz", @@ -7564,6 +7641,44 @@ "integrity": "sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw==", "dev": true }, + "babel-plugin-jsx-dom-expressions": { + "version": "0.33.12", + "resolved": "https://registry.npmjs.org/babel-plugin-jsx-dom-expressions/-/babel-plugin-jsx-dom-expressions-0.33.12.tgz", + "integrity": "sha512-FQeNcBvC+PrPYGpeUztI7AiiAqJL2H8e7mL4L6qHZ7B4wZfbgyREsHZwKmmDqxAehlyAUolTdhDNk9xfyHdIZw==", + "dev": true, + "requires": { + "@babel/helper-module-imports": "7.16.0", + "@babel/plugin-syntax-jsx": "^7.16.5", + "@babel/types": "^7.16.0", + "html-entities": "2.3.2" + }, + "dependencies": { + "@babel/helper-module-imports": { + "version": "7.16.0", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz", + "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==", + "dev": true, + "requires": { + "@babel/types": "^7.16.0" + } + }, + "html-entities": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/html-entities/-/html-entities-2.3.2.tgz", + "integrity": "sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==", + "dev": true + } + } + }, + "babel-preset-solid": { + "version": "1.4.6", + "resolved": "https://registry.npmjs.org/babel-preset-solid/-/babel-preset-solid-1.4.6.tgz", + "integrity": "sha512-5n+nm1zgj7BK9cv0kYu0p+kbsXgGbrxLmA5bv5WT0V5WnqRgshWILInPWLJNZbvP5gBj+huDKwk3J4RhhbFlhA==", + "dev": true, + "requires": { + "babel-plugin-jsx-dom-expressions": "^0.33.12" + } + }, "bail": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz", @@ -10656,6 +10771,12 @@ "integrity": "sha512-3dOsAHXXUkQTpOYcoAxLIorMTp4gIQr5IW3iVb7A7lFIp0VHhnynm9izx6TssdrIcVIESAlVjtnO2K8bg+Coew==", "dev": true }, + "solid-js": { + "version": "1.4.7", + "resolved": "https://registry.npmjs.org/solid-js/-/solid-js-1.4.7.tgz", + "integrity": "sha512-u3hoe5w3xseAc/8zLwYaQVGanWXknMMQkzryNz7lOPy2ygW6DhCtfMseun4kLflRNRzrUUpTV3W5p7j2SGcHCQ==", + "dev": true + }, "source-map": { "version": "0.7.4", "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.4.tgz", diff --git a/package.json b/package.json index 40519a6..fb72236 100644 --- a/package.json +++ b/package.json @@ -16,9 +16,11 @@ "preview": "astro preview" }, "devDependencies": { + "@astrojs/solid-js": "^0.2.1", "astro": "^1.0.0-beta.63", "prettier": "^2.7.1", "prettier-plugin-astro": "^0.1.1", - "sass": "^1.53.0" + "sass": "^1.53.0", + "solid-js": "^1.4.7" } } diff --git a/siteMetadata.json b/siteMetadata.json deleted file mode 100644 index b07c099..0000000 --- a/siteMetadata.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "sitename": "yarkov.tech", - "author": { - "name": "Sergey Yarkov" - }, - "contacts": { - "email": "serzh.yarkov@gmail.com", - "github": "sergeyyarkov", - "telegram": "sergeyyarkov" - } -} diff --git a/src/components/ArticleItem/ArticleItem.scss b/src/components/ArticleItem/ArticleItem.scss new file mode 100644 index 0000000..5377b6c --- /dev/null +++ b/src/components/ArticleItem/ArticleItem.scss @@ -0,0 +1,31 @@ +.article-item { + border-radius: var(--border-radius-md); + text-decoration: none; + & a { + display: flex; + justify-content: space-between; + align-items: center; + column-gap: 10px; + color: var(--font-color); + padding: 8px 15px; + & h3 { + font-size: var(--font-size-md); + font-weight: normal; + margin: 0; + } + & p { + font-size: var(--font-size-xs); + font-family: monospace; + color: var(--font-color-gray); + text-transform: uppercase; + margin: 0; + text-align: right; + } + &:hover { + text-decoration: none; + } + } + &:hover { + background-color: var(--background-color-hover); + } +} diff --git a/src/components/ArticleItem/ArticleItem.tsx b/src/components/ArticleItem/ArticleItem.tsx new file mode 100644 index 0000000..5e62eff --- /dev/null +++ b/src/components/ArticleItem/ArticleItem.tsx @@ -0,0 +1,21 @@ +import './ArticleItem.scss'; +import { Component } from 'solid-js'; +import { IArticle } from '@root/interfaces'; +import { DateFormatter } from '@utils/date'; + +export type ArticleItemProps = { + data: IArticle; +}; + +export const ArticleItem: Component = ({ data }) => ( + +); diff --git a/src/components/ArticleItem/index.ts b/src/components/ArticleItem/index.ts new file mode 100644 index 0000000..59186f8 --- /dev/null +++ b/src/components/ArticleItem/index.ts @@ -0,0 +1 @@ +export * from './ArticleItem'; diff --git a/src/components/ArticlesList/ArticlesList.scss b/src/components/ArticlesList/ArticlesList.scss new file mode 100644 index 0000000..7be461a --- /dev/null +++ b/src/components/ArticlesList/ArticlesList.scss @@ -0,0 +1,59 @@ +.articles { + &-search { + position: relative; + display: flex; + align-items: center; + column-gap: 15px; + margin-bottom: 10px; + + & svg { + position: absolute; + left: 8px; + fill: var(--font-color-grayer); + } + & input { + padding-left: 40px; + color: var(--font-color-grayer); + background-color: var(--background-color-hover); + } + & span { + font-size: var(--font-size-lg); + font-weight: 500; + color: var(--font-color-grayer); + } + } + &-tags { + margin-bottom: 45px; + & nav ul { + display: flex; + flex-wrap: wrap; + column-gap: 5px; + row-gap: 10px; + list-style: none; + margin: 0; + padding: 0; + & li a { + padding: 3px 10px; + border-radius: var(--border-radius-md); + border: 1px solid var(--border-color); + text-decoration: none; + color: var(--font-color); + font-size: var(--font-size-sm); + font-weight: 400; + &:hover { + border-color: var(--border-color-hover); + } + } + } + } + &-list { + &__wrapper { + margin-top: 40px; + & h2 { + margin-bottom: 10px; + padding-bottom: 10px; + border-bottom: 1px solid var(--border-color); + } + } + } +} diff --git a/src/components/ArticlesList/ArticlesList.tsx b/src/components/ArticlesList/ArticlesList.tsx new file mode 100644 index 0000000..b1c8539 --- /dev/null +++ b/src/components/ArticlesList/ArticlesList.tsx @@ -0,0 +1,79 @@ +import './ArticlesList.scss'; +import { Component } from 'solid-js'; + +export const ArticlesList: Component = () => { + return ( +
+
+

Статьи

+

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

+
+
+ + + + + 3 +
+
+ +
+
+
+

2022

+ + +
+
+

2021

+ +
+
+
+ ); +}; diff --git a/src/components/ArticlesList/index.ts b/src/components/ArticlesList/index.ts new file mode 100644 index 0000000..e4ba275 --- /dev/null +++ b/src/components/ArticlesList/index.ts @@ -0,0 +1 @@ +export * from './ArticlesList'; diff --git a/src/components/Sections/RecentArticles/RecentArticles.astro b/src/components/Sections/RecentArticles/RecentArticles.astro deleted file mode 100644 index 0b9c4d9..0000000 --- a/src/components/Sections/RecentArticles/RecentArticles.astro +++ /dev/null @@ -1,32 +0,0 @@ ---- -import './RecentArticles.scss'; ---- - -
-
-
-

недавние публикации

- смотреть все -
-
-
- - -
-
diff --git a/src/components/Sections/RecentArticles/RecentArticles.scss b/src/components/Sections/RecentArticles/RecentArticles.scss deleted file mode 100644 index 962ccf3..0000000 --- a/src/components/Sections/RecentArticles/RecentArticles.scss +++ /dev/null @@ -1,19 +0,0 @@ -.publications { - &-heading { - display: flex; - align-items: center; - column-gap: 15px; - row-gap: 5px; - flex-wrap: wrap; - justify-content: space-between; - border-bottom: 1px solid var(--border-color); - padding-bottom: 10px; - & h2 { - margin: 0; - } - } - &-list { - margin-top: 10px; - max-width: calc(var(--content-width) + (var(--content-padding) * 2)); - } -} diff --git a/src/components/Sections/RecentArticles/index.ts b/src/components/Sections/RecentArticles/index.ts deleted file mode 100644 index d99a12b..0000000 --- a/src/components/Sections/RecentArticles/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as RecentArticlesSection } from './RecentArticles.astro'; diff --git a/src/components/Sections/Welcome/Welcome.astro b/src/components/Sections/Welcome/Welcome.astro deleted file mode 100644 index 2e3ee4c..0000000 --- a/src/components/Sections/Welcome/Welcome.astro +++ /dev/null @@ -1,44 +0,0 @@ ---- -import './Welcome.scss'; ---- - -
-
-
-

Hello, I'am Sergey

-

Fullstack web-developer and freelancer

-
-

- Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а - также публикую различные статьи и туториалы на разные IT темы. -

-
- -
diff --git a/src/components/Sections/Welcome/Welcome.scss b/src/components/Sections/Welcome/Welcome.scss deleted file mode 100644 index cdfd327..0000000 --- a/src/components/Sections/Welcome/Welcome.scss +++ /dev/null @@ -1,45 +0,0 @@ -.welcome { - margin-top: 80px; - margin-bottom: 150px; - &-heading { - &__title { - & h1 { - font-size: var(--font-size-5xl); - font-weight: bold; - margin-bottom: 0.5rem; - } - & h2 { - font-size: var(--font-size-xl); - margin-bottom: 1.25rem; - font-weight: normal; - } - } - &__description { - font-size: var(--font-size-lg); - max-width: 570px; - line-height: 1.5; - } - } - &-links { - display: flex; - align-items: center; - column-gap: 20px; - &__link { - display: flex; - align-items: center; - column-gap: 5px; - & a { - color: var(--font-color-gray); - } - & svg { - fill: var(--font-color-gray); - } - } - } -} - -// @media screen and (max-width: 700px) { -// .welcome { - -// } -// } diff --git a/src/components/Sections/Welcome/index.ts b/src/components/Sections/Welcome/index.ts deleted file mode 100644 index b9d7b30..0000000 --- a/src/components/Sections/Welcome/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { default as WelcomeSection } from './Welcome.astro'; diff --git a/src/components/Sections/index.ts b/src/components/Sections/index.ts deleted file mode 100644 index 8348313..0000000 --- a/src/components/Sections/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './Welcome'; -export * from './RecentArticles'; diff --git a/src/interfaces/index.ts b/src/interfaces/index.ts new file mode 100644 index 0000000..43aaddf --- /dev/null +++ b/src/interfaces/index.ts @@ -0,0 +1,6 @@ +export interface IArticle { + title: string; + description: string; + tags: Array; + published_at: number; +} diff --git a/src/pages/articles.astro b/src/pages/articles.astro index 4964570..e09dc63 100644 --- a/src/pages/articles.astro +++ b/src/pages/articles.astro @@ -1,136 +1,8 @@ --- import Page from '@layouts/Page.astro'; +import { ArticlesList } from '@components/ArticlesList'; --- -
-
-

Статьи

-

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

-
-
- - - - - 3 -
-
- -
-
-
-

2022

- - -
-
-

2021

- -
-
-
+ - - diff --git a/src/pages/index.astro b/src/pages/index.astro index 0270660..0723dd6 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,12 +1,128 @@ --- import Page from '@layouts/Page.astro'; -import { - WelcomeSection, - RecentArticlesSection, -} from '@root/components/Sections'; +import { IArticle } from '@root/interfaces'; +import { ArticleItem } from '@components/ArticleItem'; + +const data = await Astro.glob('../../content/articles/**/*.md'); +const recent = data.sort( + (a, b) => + b.frontmatter.published_at.valueOf() - a.frontmatter.published_at.valueOf() +); --- - - +
+
+
+

Hello, I'am Sergey

+

Fullstack web-developer and freelancer

+
+

+ Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а + также публикую различные статьи и туториалы на разные IT темы. +

+
+ +
+ +
+
+
+

недавние публикации

+ смотреть все +
+
+
+ {recent.map((article) => )} +
+
+ + diff --git a/src/styles/global.scss b/src/styles/global.scss index 20d949c..1d486a5 100644 --- a/src/styles/global.scss +++ b/src/styles/global.scss @@ -138,38 +138,6 @@ body { margin-bottom: 2.5rem; } -.article-item { - border-radius: var(--border-radius-md); - text-decoration: none; - & a { - display: flex; - justify-content: space-between; - align-items: center; - column-gap: 10px; - color: var(--font-color); - padding: 8px 15px; - & h3 { - font-size: var(--font-size-md); - font-weight: normal; - margin: 0; - } - & p { - font-size: var(--font-size-xs); - font-family: monospace; - color: var(--font-color-gray); - text-transform: uppercase; - margin: 0; - text-align: right; - } - &:hover { - text-decoration: none; - } - } - &:hover { - background-color: var(--background-color-hover); - } -} - a { color: var(--color-blue-500); font-weight: 500; diff --git a/src/utils/date.ts b/src/utils/date.ts new file mode 100644 index 0000000..84e3fff --- /dev/null +++ b/src/utils/date.ts @@ -0,0 +1,6 @@ +export const DateFormatter = new Intl.DateTimeFormat(undefined, { + timeZone: 'UTC', + month: 'short', + year: 'numeric', + day: 'numeric', +}); diff --git a/tsconfig.json b/tsconfig.json index 6af2fc4..ab90f2e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,12 +6,14 @@ "resolveJsonModule": true, "isolatedModules": true, "types": ["vite/client"], + "sourceMap": true, "baseUrl": ".", "paths": { "@root/*": ["./src/*"], "@styles/*": ["./src/styles/*"], "@components/*": ["./src/components/*"], - "@layouts/*": ["./src/layouts/*"] + "@layouts/*": ["./src/layouts/*"], + "@utils/*": ["./src/utils/*"] }, "outDir": "./dist" },