bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 02:19:08 +03:00
Code Issues Packages Projects Releases Wiki Activity

refactor: changed pages layouts

Browse Source
This commit is contained in:
Sergey Yarkov 2022-07-20 20:19:41 +03:00
parent 4613a61d25
commit 0640038da9
18 changed files with 13796 additions and 14188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27526
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

12
package.json
View File

@ -16,12 +16,12 @@
"preview": "astro preview --host"
},
"devDependencies": {
"@astrojs/solid-js": "^0.2.1",
"@typescript-eslint/eslint-plugin": "^5.30.6",
"@typescript-eslint/parser": "^5.30.6",
"astro": "^1.0.0-beta.63",
"astro-icon": "^0.7.1",
"eslint": "^8.19.0",
"@astrojs/solid-js": "^0.4.1",
"@typescript-eslint/eslint-plugin": "^5.30.7",
"@typescript-eslint/parser": "^5.30.7",
"astro": "^1.0.0-beta.73",
"astro-icon": "^0.7.3",
"eslint": "^8.20.0",
"eslint-plugin-solid": "^0.7.1",
"prettier": "^2.7.1",
"prettier-plugin-astro": "^0.1.1",

6
src/components/ArticleItem/ArticleItem.scss
View File

@ -18,10 +18,9 @@
font-family: monospace;
color: var(--font-color-gray);
text-transform: uppercase;
margin: 0;
text-align: right;
white-space: nowrap;
margin-bottom: 10px;
margin-bottom: 0;
}
&:hover {
text-decoration: none;
@ -38,6 +37,9 @@
& a {
flex-direction: column-reverse;
align-items: flex-start;
& p {
margin-bottom: 5px;
}
}
}
}

48
src/components/ArticlePost/ArticlePost.astro Normal file
View File

@ -0,0 +1,48 @@
---
import type { ArticleType } from '@root/types';
import { DateFormatter } from '@root/utils';
import './ArticlePost.scss';
export interface Props {
data: ArticleType;
}
const { data } = Astro.props as Props;
const { title, tags, author, published_at } = data;
---
<article class='article'>
<header>
<div class='meta'>
<ul class='list-links'>
{tags.map((tag) => (
<li>
<a class="btn-link" href={`/articles?tags=${tag}`}>
{tag}
</a>
</li>
))}
</ul>
<div>
<time datetime={published_at}>{DateFormatter.format(new Date(published_at))}</time>
<span>Опубликовал&nbsp;<b>{author}</b></span>
</div>
</div>
<div class='heading'>
<h1>{title}</h1>
</div>
<div>
<figure>
<img
src='https://img.freepik.com/premium-photo/beautiful-emerald-lake-yoho-national-park-british-columbia-canada_131985-177.jpg?w=1920'
alt='Article Image'
/>
</figure>
</div>
</header>
<slot></slot>
<footer>
<h2>Comments</h2>
</footer>
</article>

78
src/components/ArticlePost/ArticlePost.scss Normal file
View File

@ -0,0 +1,78 @@
.article {
& header {
& .meta {
display: flex;
justify-content: space-between;
align-items: flex-end;
column-gap: 5px;
& ul {
max-width: 350px;
}
& div {
display: flex;
flex-direction: column;
text-align: right;
white-space: nowrap;
& time {
text-transform: uppercase;
font-size: var(--font-size-sm);
}
}
}
& .heading {
margin-top: 2rem;
& h1 {
font-weight: 600;
font-size: 2.25rem;
}
& p {
font-size: 1.125rem;
line-height: var(--line-height-base);
}
}
& figure {
margin: 0;
& img {
border-radius: var(--border-radius-md);
display: block;
margin: 0 auto;
max-width: 100%;
}
}
}
& footer {
margin-top: 5rem;
}
}
@media screen and (max-width: 560px) {
.article {
& header {
& .heading h1 {
font-size: 2rem;
}
& .meta {
flex-direction: column-reverse;
align-items: flex-start;
& ul {
max-width: 100%;
}
& div {
align-self: flex-end;
margin-bottom: 1.2rem;
}
}
}
}
}

1
src/components/ArticlePost/index.ts Normal file
View File

@ -0,0 +1 @@
export { default } from './ArticlePost.astro';

4
src/components/PageHeading/PageHeading.astro
View File

@ -9,9 +9,9 @@ export interface Props {
const { heading, description } = Astro.props as Props;
---
<header class='page-heading'>
<div class='page-heading'>
<h1 style={!description && 'margin-bottom: 2.5rem;'}>
{heading}
</h1>
{description && <p>{description}</p>}
</header>
</div>

10
src/components/RecentArticles/RecentArticles.astro
View File

@ -16,14 +16,12 @@ const recent = sortArtcilesByDate(articles);
---
<section class='recent'>
<div class='container'>
<div class='recent-heading'>
<h2>недавние публикации</h2>
<a href='/articles'>смотреть все</a>
</div>
<div class='recent-heading'>
<h2>недавние публикации</h2>
<a href='/articles'>смотреть все</a>
</div>
<div class='recent-list container'>
<div class='recent-list'>
{recent.length !== 0 ? (
recent.slice(0, length).map((article) => <ArticleItem data={article} />)
) : (

2
src/components/Splash/Splash.astro
View File

@ -2,6 +2,6 @@
import './Splash.scss';
---
<section class='splash container'>
<section class='splash'>
<slot></slot>
</section>

34
src/layouts/article.astro Normal file
View File

@ -0,0 +1,34 @@
---
import type { Props as BaseHeadProps } from '@root/components/BaseHead.astro';
import type { ArticleType } from '@root/types';
import '@styles/global.scss';
import BaseHead from '@root/components/BaseHead.astro';
import BaseLayout from '@components/BaseLayout';
import { DateFormatter } from '@root/utils';
import ArticleContent from '@root/components/ArticleContent';
import ArticlePost from '@root/components/ArticlePost';
export interface Props extends BaseHeadProps {
lang?: string | undefined;
content: ArticleType;
}
const { lang = 'ru', content } = Astro.props as Props;
---
<html lang={lang}>
<head>
<BaseHead title={content.title} />
</head>
<BaseLayout>
<div class='container'>
<ArticlePost data={content}>
<ArticleContent>
<slot></slot>
</ArticleContent>
</ArticlePost>
</div>
</BaseLayout>
</html>

11
src/layouts/default.astro
View File

@ -5,20 +5,25 @@ import '@styles/global.scss';
import BaseHead from '@root/components/BaseHead.astro';
import BaseLayout from '@components/BaseLayout';
import { SITE_METADATA } from '@root/config';
import PageHeading from '@root/components/PageHeading';
export interface Props extends BaseHeadProps {
lang?: string | undefined;
showPageHeading?: boolean | undefined;
}
const { title = SITE_METADATA.title, description, lang = 'ru' } = Astro.props as Props;
const { title, description, lang = 'ru', showPageHeading = true } = Astro.props as Props;
---
<html lang={lang}>
<head>
<BaseHead title={title} description={description} />
<BaseHead title={title ? `${title} | ${SITE_METADATA.title}` : SITE_METADATA.title} description={description} />
</head>
<BaseLayout>
<slot></slot>
<div class='container'>
{showPageHeading && <PageHeading heading={title} description={description} />}
<slot></slot>
</div>
</BaseLayout>
</html>

220
src/pages/[article].astro
View File

@ -1,182 +1,80 @@
---
import '@root/styles/prism-one-light.css';
import PageLayout from '@root/layouts/default.astro';
import ArticleLayout from '@root/layouts/article.astro';
import { Markdown } from 'astro/components';
import ArticleContent from '@components/ArticleContent';
export function getStaticPaths() {
return [{ params: { article: 'article' } }];
}
---
<PageLayout title='Article'>
<article class='article container'>
<header>
<div class='meta'>
<ul class='list-links'>
<li><a class='btn-link' href='#'>JavaScript</a></li>
<li><a class='btn-link' href='#'>Docker</a></li>
<li><a class='btn-link' href='#'>Node.js</a></li>
<li><a class='btn-link' href='#'>AVR</a></li>
<li><a class='btn-link' href='#'>GraphQL</a></li>
<li><a class='btn-link' href='#'>Web-development</a></li>
</ul>
<div>
<time datetime='2022-01-01'> 19 ЯНВ, 2022</time>
<span>Опубликовал&nbsp;<b>Sergey Yarkov</b></span>
</div>
</div>
<div class='heading'>
<h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>
<div>
<figure>
<img
src='https://img.freepik.com/premium-photo/beautiful-emerald-lake-yoho-national-park-british-columbia-canada_131985-177.jpg?w=1920'
alt='Article Image'
/>
</figure>
</div>
</header>
<ArticleContent>
<Markdown>
## Introduction
<ArticleLayout
content={{
title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
author: 'Sergey Yarkov',
tags: ['AVR', 'JavaScript', 'NodeJS'],
published_at: new Date().toISOString(),
}}
>
<Markdown>
## 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
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.
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
### 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.
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.
- `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.
```typescript
import type { APIContext } from 'astro';
```typescript
import type { APIContext } from 'astro';
export async function get({ params, request }: APIContext) {
return {
body: JSON.stringify({
path: new URL(request.url).pathname,
}),
};
}
```
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus.
Sed dignissim.
<figure>
<img src="https://wallpaperaccess.com/full/138733.jpg" alt="test" />
<figcaption>This is a test image!</figcaption>
</figure>
<blockquote>
<p>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.
</p>
<p>— <a href="#">Metus Nec</a></p>
</blockquote>
## Conclusion
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.
</Markdown>
</ArticleContent>
<footer>
<h2>Comments</h2>
</footer>
</article>
<style lang='scss'>
.article {
& header {
& .meta {
display: flex;
justify-content: space-between;
align-items: flex-start;
column-gap: 5px;
& ul {
max-width: 350px;
}
& div {
display: flex;
flex-direction: column;
text-align: right;
white-space: nowrap;
}
}
& .heading {
margin-top: 2rem;
& h1 {
font-weight: 600;
font-size: 2.25rem;
}
& p {
font-size: 1.125rem;
line-height: var(--line-height-base);
}
}
& figure {
margin: 0;
& img {
border-radius: var(--border-radius-md);
display: block;
margin: 0 auto;
max-width: 100%;
}
}
}
& footer {
margin-top: 5rem;
}
export async function get({ params, request }: APIContext) {
return {
body: JSON.stringify({
path: new URL(request.url).pathname,
}),
};
}
```
@media screen and (max-width: 560px) {
.article {
& header {
& .heading h1 {
font-size: 2rem;
}
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus.
Sed dignissim.
& .meta {
flex-direction: column-reverse;
<figure>
<img src="https://wallpaperaccess.com/full/138733.jpg" alt="test" />
<figcaption>This is a test image!</figcaption>
</figure>
& ul {
max-width: 100%;
}
<blockquote>
<p>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.
</p>
<p>— <a href="#">Metus Nec</a></p>
</blockquote>
& div {
align-self: flex-end;
margin-bottom: 1.2rem;
}
}
}
}
}
</style>
</PageLayout>
## Conclusion
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.
</Markdown>
</ArticleLayout>

6
src/pages/about.astro
View File

@ -2,7 +2,6 @@
import { SITE_METADATA } from '@root/config';
import { Markdown } from 'astro/components';
import PageLayout from '@layouts/default.astro';
import PageHeading from '@components/PageHeading';
import SkillsList from '@components/SkillsList';
import SkillsBlock from '@components/SkillsBlock';
@ -13,9 +12,8 @@ import ArticleContent from '@components/ArticleContent';
const { skills } = SITE_METADATA;
---
<PageLayout title='Обо мне | Sergey Yarkov'>
<section class='container'>
<PageHeading heading='Обо мне' />
<PageLayout title='Обо мне'>
<section>
<ArticleContent>
<Markdown content={aboutContent.rawContent()}>

6
src/pages/articles.astro
View File

@ -1,6 +1,5 @@
---
import PageLayout from '@layouts/default.astro';
import { ArticlesList } from '@components/ArticlesList';
import { ArticleType } from '@root/types';
import * as utils from '@utils/index';
@ -8,6 +7,9 @@ const articles = await Astro.glob<ArticleType>('../../content/articles/**/*.md')
const tags = new Set(articles.map((article) => article.frontmatter.tags).flat());
---
<PageLayout title='Статьи | Sergey Yarkov'>
<PageLayout
title='Статьи'
description='Технические статьи, туториалы и различные справочные материалы которые связаны с IT тематикой находятся здесь.'
>
<!-- <ArticlesList client:load data={utils.transformArticles(articles)} tags={[...tags]} /> -->
</PageLayout>

5
src/pages/contacts.astro
View File

@ -5,9 +5,8 @@ import ContactForm from '@components/ContactForm';
import ContactsList from '@components/ContactsList';
---
<PageLayout title='Контакты | Sergey Yarkov'>
<section class='container'>
<PageHeading heading='Контакты' description='Воспользуйтесь формой обратной связи или напишите мне в социальные сети.' />
<PageLayout title='Контакты' description='Воспользуйтесь формой обратной связи или напишите мне в социальные сети.'>
<section>
<ContactForm client:idle />
<ContactsList />
</section>

3
src/pages/index.astro
View File

@ -10,7 +10,7 @@ const data = await Astro.glob<ArticleType>('../../content/articles/**/*.md');
const articles = utils.transformArticles(data);
---
<PageLayout>
<PageLayout showPageHeading={false}>
<Splash>
<SplashHeading>
<hgroup>
@ -24,6 +24,5 @@ const articles = utils.transformArticles(data);
<Link icon='email_filled' href='/about'>написать мне</Link>
</SplashLinks>
</Splash>
<RecentArticles articles={articles} length={4} />
</PageLayout>

10
src/pages/projects.astro
View File

@ -1,16 +1,14 @@
---
import { SITE_METADATA } from '@root/config';
import PageLayout from '@layouts/default.astro';
import PageHeading from '@root/components/PageHeading';
import ProjectsList from '@root/components/ProjectsList';
import ProjectItem from '@root/components/ProjectItem';
import ProjectsList from '@components/ProjectsList';
import ProjectItem from '@components/ProjectItem';
const { projects } = SITE_METADATA;
---
<PageLayout title='Проекты | Sergey Yarkov'>
<section class='container'>
<PageHeading heading='Проекты' description='Несколько моих основных проектов которые были разработаны и выложены в открытый доступ.' />
<PageLayout title='Проекты' description='Несколько моих основных проектов которые были разработаны и выложены в открытый доступ.'>
<section>
<ProjectsList>
{projects.map((project) => <ProjectItem data={project} />)}
</ProjectsList>

2
src/types/index.ts
View File

@ -2,7 +2,7 @@ export type ArticleType = {
title: string;
author: string;
tags: Array<string>;
published_at: number;
published_at: string;
};
export type ProjectType = {