mirror of
https://github.com/sergeyyarkov/yarkov.tech.git
synced 2026-10-11 02:19:08 +03:00
feat: render articles on index page
This commit is contained in:
parent
e2a20afb0d
commit
d8de43582f
@ -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()],
|
||||
});
|
||||
|
||||
123
package-lock.json
generated
123
package-lock.json
generated
@ -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",
|
||||
|
||||
@ -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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,11 +0,0 @@
|
||||
{
|
||||
"sitename": "yarkov.tech",
|
||||
"author": {
|
||||
"name": "Sergey Yarkov"
|
||||
},
|
||||
"contacts": {
|
||||
"email": "serzh.yarkov@gmail.com",
|
||||
"github": "sergeyyarkov",
|
||||
"telegram": "sergeyyarkov"
|
||||
}
|
||||
}
|
||||
31
src/components/ArticleItem/ArticleItem.scss
Normal file
31
src/components/ArticleItem/ArticleItem.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
21
src/components/ArticleItem/ArticleItem.tsx
Normal file
21
src/components/ArticleItem/ArticleItem.tsx
Normal file
@ -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<ArticleItemProps> = ({ data }) => (
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>{data.title}</h3>
|
||||
<p>
|
||||
<time datetime={data.published_at.toString()}>
|
||||
{DateFormatter.format(new Date(data.published_at))}
|
||||
</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
);
|
||||
1
src/components/ArticleItem/index.ts
Normal file
1
src/components/ArticleItem/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './ArticleItem';
|
||||
59
src/components/ArticlesList/ArticlesList.scss
Normal file
59
src/components/ArticlesList/ArticlesList.scss
Normal file
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
79
src/components/ArticlesList/ArticlesList.tsx
Normal file
79
src/components/ArticlesList/ArticlesList.tsx
Normal file
@ -0,0 +1,79 @@
|
||||
import './ArticlesList.scss';
|
||||
import { Component } from 'solid-js';
|
||||
|
||||
export const ArticlesList: Component = () => {
|
||||
return (
|
||||
<section class='articles container'>
|
||||
<header>
|
||||
<h1 class='page-heading'>Статьи</h1>
|
||||
<p class='page-description'>
|
||||
Технические статьи, туториалы и различные справочные материалы которые
|
||||
связаны с IT тематикой находятся здесь.
|
||||
</p>
|
||||
</header>
|
||||
<div class='articles-search'>
|
||||
<svg
|
||||
width='25'
|
||||
height='24'
|
||||
viewBox='0 0 25 24'
|
||||
xmlns='http://www.w3.org/2000/svg'>
|
||||
<path d='M10.6026 3.60001C11.8798 3.59993 13.1316 3.94283 14.2172 4.5901C15.3028 5.23736 16.179 6.16331 16.7472 7.26368C17.3154 8.36405 17.5531 9.59517 17.4334 10.8184C17.3137 12.0417 16.8415 13.2085 16.0699 14.1876L21.2427 19.164C21.4085 19.3248 21.5053 19.5399 21.5135 19.7662C21.5218 19.9926 21.4411 20.2137 21.2874 20.3853C21.1337 20.5569 20.9184 20.6665 20.6845 20.6921C20.4505 20.7178 20.2151 20.6576 20.0253 20.5236L19.9205 20.436L14.7476 15.4596C13.8802 16.0922 12.8687 16.5172 11.7968 16.6994C10.7248 16.8815 9.62324 16.8157 8.58298 16.5074C7.54272 16.199 6.59366 15.6569 5.81422 14.9259C5.03478 14.1949 4.44733 13.296 4.10042 12.3034C3.7535 11.3108 3.65708 10.2531 3.81911 9.21757C3.98114 8.18204 4.39698 7.19847 5.03226 6.34812C5.66755 5.49778 6.50404 4.80506 7.47263 4.32721C8.44122 3.84936 9.51411 3.60009 10.6026 3.60001V3.60001ZM10.6026 5.40001C9.27934 5.40001 8.01025 5.90572 7.07454 6.80589C6.13884 7.70607 5.61316 8.92697 5.61316 10.2C5.61316 11.473 6.13884 12.6939 7.07454 13.5941C8.01025 14.4943 9.27934 15 10.6026 15C11.9259 15 13.195 14.4943 14.1307 13.5941C15.0664 12.6939 15.5921 11.473 15.5921 10.2C15.5921 8.92697 15.0664 7.70607 14.1307 6.80589C13.195 5.90572 11.9259 5.40001 10.6026 5.40001Z'></path>
|
||||
</svg>
|
||||
<input type='text' placeholder='поиск по названию или описанию...' />
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div class='articles-tags'>
|
||||
<nav>
|
||||
<ul>
|
||||
<li>
|
||||
<a href='#'>Docker</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>JavaScript</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href='#'>AVR</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class='articles-list'>
|
||||
<div class='articles-list__wrapper'>
|
||||
<h2>2022</h2>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>Развертывание вашего Node.js приложение с помощью Docker</h3>
|
||||
<p>
|
||||
<time datetime='2022-01-01 22:00'>ЯНВ 15, 2022</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>
|
||||
Создание блог-сайта с помощью статического генератора GatsbyJS
|
||||
</h3>
|
||||
<p>
|
||||
<time datetime='2022-01-01 22:00'>ЯНВ 05, 2022</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div class='articles-list__wrapper'>
|
||||
<h2>2021</h2>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>
|
||||
Как взаимодействовать с микроконтроллером испульзуюя
|
||||
WebSerialAPI
|
||||
</h3>
|
||||
<p>
|
||||
<time datetime='2021-01-01 22:00'>ФЕВ 15, 2021</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
);
|
||||
};
|
||||
1
src/components/ArticlesList/index.ts
Normal file
1
src/components/ArticlesList/index.ts
Normal file
@ -0,0 +1 @@
|
||||
export * from './ArticlesList';
|
||||
@ -1,32 +0,0 @@
|
||||
---
|
||||
import './RecentArticles.scss';
|
||||
---
|
||||
|
||||
<section class='publications'>
|
||||
<div class='container'>
|
||||
<div class='publications-heading'>
|
||||
<h2>недавние публикации</h2>
|
||||
<a href='/articles'>смотреть все</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='publications-list container'>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>
|
||||
Как взаимодействовать с микроконтроллером испульзуюя WebSerialAPI
|
||||
</h3>
|
||||
<p>
|
||||
<time datetime='2022-01-01 22:00'>ЯНВ 21, 2022</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>Развертывание вашего Node.js приложение с помощью Docker</h3>
|
||||
<p>
|
||||
<time datetime='2022-01-01 22:00'>ЯНВ 15, 2022</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</section>
|
||||
@ -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));
|
||||
}
|
||||
}
|
||||
@ -1 +0,0 @@
|
||||
export { default as RecentArticlesSection } from './RecentArticles.astro';
|
||||
@ -1,44 +0,0 @@
|
||||
---
|
||||
import './Welcome.scss';
|
||||
---
|
||||
|
||||
<section class='welcome container'>
|
||||
<header class='welcome-heading'>
|
||||
<hgroup class='welcome-heading__title'>
|
||||
<h1>Hello, I'am Sergey</h1>
|
||||
<h2>Fullstack <b>web-developer</b> and <b>freelancer</b></h2>
|
||||
</hgroup>
|
||||
<p class='welcome-heading__description'>
|
||||
Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а
|
||||
также публикую различные статьи и туториалы на разные IT темы.
|
||||
</p>
|
||||
</header>
|
||||
<nav class='welcome-links'>
|
||||
<div class='welcome-links__link'>
|
||||
<svg
|
||||
width='18'
|
||||
height='19'
|
||||
viewBox='0 0 18 19'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d='M9 1.70001C8.04 1.70001 7.2 2.54001 7.2 3.50001C7.2 4.46001 8.04 5.30001 9 5.30001C9.96 5.30001 10.8 4.46001 10.8 3.50001C10.8 2.54001 9.96 1.70001 9 1.70001ZM4.8 6.50001V7.70001C4.8 7.70001 7.2 7.70001 7.2 10.1V12.5C7.2 14.9 4.8 14.9 4.8 14.9V16.1H13.2V14.9C13.2 14.9 10.8 14.9 10.8 12.5V7.70001C10.8 7.10001 10.2 6.50001 9.6 6.50001H4.8Z'
|
||||
></path>
|
||||
</svg>
|
||||
<a href='/about'> обо мне</a>
|
||||
</div>
|
||||
<div class='welcome-links__link'>
|
||||
<svg
|
||||
width='18'
|
||||
height='18'
|
||||
viewBox='0 0 18 18'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d='M16.125 6.366V12.6562C16.125 13.7437 15.2437 14.625 14.1562 14.625H3.84375C3.32161 14.625 2.82085 14.4176 2.45163 14.0484C2.08242 13.6792 1.875 13.1784 1.875 12.6562V6.366L8.77425 10.161C8.91488 10.2383 9.0855 10.2383 9.22575 10.161L16.125 6.36563V6.366ZM14.1562 3.375C14.6702 3.37505 15.1637 3.57606 15.5314 3.93509C15.8992 4.29412 16.1119 4.78272 16.1243 5.2965L9 9.21525L1.87575 5.29613L1.8765 5.26237C1.8975 4.75472 2.11395 4.27484 2.48059 3.92309C2.84723 3.57134 3.33566 3.37495 3.84375 3.375H14.1562Z'
|
||||
></path>
|
||||
</svg>
|
||||
<a href='/contacts'> написать мне</a>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
@ -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 {
|
||||
|
||||
// }
|
||||
// }
|
||||
@ -1 +0,0 @@
|
||||
export { default as WelcomeSection } from './Welcome.astro';
|
||||
@ -1,2 +0,0 @@
|
||||
export * from './Welcome';
|
||||
export * from './RecentArticles';
|
||||
6
src/interfaces/index.ts
Normal file
6
src/interfaces/index.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export interface IArticle {
|
||||
title: string;
|
||||
description: string;
|
||||
tags: Array<string>;
|
||||
published_at: number;
|
||||
}
|
||||
@ -1,136 +1,8 @@
|
||||
---
|
||||
import Page from '@layouts/Page.astro';
|
||||
import { ArticlesList } from '@components/ArticlesList';
|
||||
---
|
||||
|
||||
<Page title='Статьи | Sergey Yarkov'>
|
||||
<section class='articles container'>
|
||||
<header>
|
||||
<h1 class='page-heading'>Статьи</h1>
|
||||
<p class='page-description'>
|
||||
Технические статьи, туториалы и различные справочные материалы которые
|
||||
связаны с IT тематикой находятся здесь.
|
||||
</p>
|
||||
</header>
|
||||
<div class='articles-search'>
|
||||
<svg
|
||||
width='25'
|
||||
height='24'
|
||||
viewBox='0 0 25 24'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d='M10.6026 3.60001C11.8798 3.59993 13.1316 3.94283 14.2172 4.5901C15.3028 5.23736 16.179 6.16331 16.7472 7.26368C17.3154 8.36405 17.5531 9.59517 17.4334 10.8184C17.3137 12.0417 16.8415 13.2085 16.0699 14.1876L21.2427 19.164C21.4085 19.3248 21.5053 19.5399 21.5135 19.7662C21.5218 19.9926 21.4411 20.2137 21.2874 20.3853C21.1337 20.5569 20.9184 20.6665 20.6845 20.6921C20.4505 20.7178 20.2151 20.6576 20.0253 20.5236L19.9205 20.436L14.7476 15.4596C13.8802 16.0922 12.8687 16.5172 11.7968 16.6994C10.7248 16.8815 9.62324 16.8157 8.58298 16.5074C7.54272 16.199 6.59366 15.6569 5.81422 14.9259C5.03478 14.1949 4.44733 13.296 4.10042 12.3034C3.7535 11.3108 3.65708 10.2531 3.81911 9.21757C3.98114 8.18204 4.39698 7.19847 5.03226 6.34812C5.66755 5.49778 6.50404 4.80506 7.47263 4.32721C8.44122 3.84936 9.51411 3.60009 10.6026 3.60001V3.60001ZM10.6026 5.40001C9.27934 5.40001 8.01025 5.90572 7.07454 6.80589C6.13884 7.70607 5.61316 8.92697 5.61316 10.2C5.61316 11.473 6.13884 12.6939 7.07454 13.5941C8.01025 14.4943 9.27934 15 10.6026 15C11.9259 15 13.195 14.4943 14.1307 13.5941C15.0664 12.6939 15.5921 11.473 15.5921 10.2C15.5921 8.92697 15.0664 7.70607 14.1307 6.80589C13.195 5.90572 11.9259 5.40001 10.6026 5.40001Z'
|
||||
></path>
|
||||
</svg>
|
||||
<input type='text' placeholder='поиск по названию или описанию...' />
|
||||
<span>3</span>
|
||||
</div>
|
||||
<div class='articles-tags'>
|
||||
<nav>
|
||||
<ul>
|
||||
<li><a href='#'>Docker</a></li>
|
||||
<li><a href='#'>JavaScript</a></li>
|
||||
<li><a href='#'>AVR</a></li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
<div class='articles-list'>
|
||||
<div class='articles-list__wrapper'>
|
||||
<h2>2022</h2>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>Развертывание вашего Node.js приложение с помощью Docker</h3>
|
||||
<p>
|
||||
<time datetime='2022-01-01 22:00'>ЯНВ 15, 2022</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>
|
||||
Создание блог-сайта с помощью статического генератора GatsbyJS
|
||||
</h3>
|
||||
<p>
|
||||
<time datetime='2022-01-01 22:00'>ЯНВ 05, 2022</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
<div class='articles-list__wrapper'>
|
||||
<h2>2021</h2>
|
||||
<article class='article-item'>
|
||||
<a href='#'>
|
||||
<h3>
|
||||
Как взаимодействовать с микроконтроллером испульзуюя WebSerialAPI
|
||||
</h3>
|
||||
<p>
|
||||
<time datetime='2021-01-01 22:00'>ФЕВ 15, 2021</time>
|
||||
</p>
|
||||
</a>
|
||||
</article>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<ArticlesList />
|
||||
</Page>
|
||||
|
||||
<style lang='scss'>
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -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<IArticle>('../../content/articles/**/*.md');
|
||||
const recent = data.sort(
|
||||
(a, b) =>
|
||||
b.frontmatter.published_at.valueOf() - a.frontmatter.published_at.valueOf()
|
||||
);
|
||||
---
|
||||
|
||||
<Page title='Sergey Yarkov'>
|
||||
<WelcomeSection />
|
||||
<RecentArticlesSection />
|
||||
<section class='welcome container'>
|
||||
<header class='welcome-heading'>
|
||||
<hgroup class='welcome-heading__title'>
|
||||
<h1>Hello, I'am Sergey</h1>
|
||||
<h2>Fullstack <b>web-developer</b> and <b>freelancer</b></h2>
|
||||
</hgroup>
|
||||
<p class='welcome-heading__description'>
|
||||
Я занимаюсь разработкой веб-сайтов и веб-приложений разной сложности, а
|
||||
также публикую различные статьи и туториалы на разные IT темы.
|
||||
</p>
|
||||
</header>
|
||||
<nav class='welcome-links'>
|
||||
<div class='welcome-links__link'>
|
||||
<svg
|
||||
width='18'
|
||||
height='19'
|
||||
viewBox='0 0 18 19'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d='M9 1.70001C8.04 1.70001 7.2 2.54001 7.2 3.50001C7.2 4.46001 8.04 5.30001 9 5.30001C9.96 5.30001 10.8 4.46001 10.8 3.50001C10.8 2.54001 9.96 1.70001 9 1.70001ZM4.8 6.50001V7.70001C4.8 7.70001 7.2 7.70001 7.2 10.1V12.5C7.2 14.9 4.8 14.9 4.8 14.9V16.1H13.2V14.9C13.2 14.9 10.8 14.9 10.8 12.5V7.70001C10.8 7.10001 10.2 6.50001 9.6 6.50001H4.8Z'
|
||||
></path>
|
||||
</svg>
|
||||
<a href='/about'> обо мне</a>
|
||||
</div>
|
||||
<div class='welcome-links__link'>
|
||||
<svg
|
||||
width='18'
|
||||
height='18'
|
||||
viewBox='0 0 18 18'
|
||||
xmlns='http://www.w3.org/2000/svg'
|
||||
>
|
||||
<path
|
||||
d='M16.125 6.366V12.6562C16.125 13.7437 15.2437 14.625 14.1562 14.625H3.84375C3.32161 14.625 2.82085 14.4176 2.45163 14.0484C2.08242 13.6792 1.875 13.1784 1.875 12.6562V6.366L8.77425 10.161C8.91488 10.2383 9.0855 10.2383 9.22575 10.161L16.125 6.36563V6.366ZM14.1562 3.375C14.6702 3.37505 15.1637 3.57606 15.5314 3.93509C15.8992 4.29412 16.1119 4.78272 16.1243 5.2965L9 9.21525L1.87575 5.29613L1.8765 5.26237C1.8975 4.75472 2.11395 4.27484 2.48059 3.92309C2.84723 3.57134 3.33566 3.37495 3.84375 3.375H14.1562Z'
|
||||
></path>
|
||||
</svg>
|
||||
<a href='/contacts'> написать мне</a>
|
||||
</div>
|
||||
</nav>
|
||||
</section>
|
||||
|
||||
<section class='publications'>
|
||||
<div class='container'>
|
||||
<div class='publications-heading'>
|
||||
<h2>недавние публикации</h2>
|
||||
<a href='/articles'>смотреть все</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class='publications-list container'>
|
||||
{recent.map((article) => <ArticleItem data={article.frontmatter} />)}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<style lang='scss'>
|
||||
.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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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));
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</Page>
|
||||
|
||||
@ -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;
|
||||
|
||||
6
src/utils/date.ts
Normal file
6
src/utils/date.ts
Normal file
@ -0,0 +1,6 @@
|
||||
export const DateFormatter = new Intl.DateTimeFormat(undefined, {
|
||||
timeZone: 'UTC',
|
||||
month: 'short',
|
||||
year: 'numeric',
|
||||
day: 'numeric',
|
||||
});
|
||||
@ -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"
|
||||
},
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user