bubble/yarkov.tech
1
0
Fork 0
mirror of https://github.com/sergeyyarkov/yarkov.tech.git synced 2026-10-11 10:29:21 +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

1002
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>

4
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>
<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>

9
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>
<div class='container'>
{showPageHeading && <PageHeading heading={title} description={description} />}
<slot></slot>
</div>
</BaseLayout>
</html>

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

@ -1,44 +1,21 @@
---
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>
<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
@ -100,83 +77,4 @@ export function getStaticPaths() {
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;
}
}
@media screen and (max-width: 560px) {
.article {
& header {
& .heading h1 {
font-size: 2rem;
}
& .meta {
flex-direction: column-reverse;
& ul {
max-width: 100%;
}
& div {
align-self: flex-end;
margin-bottom: 1.2rem;
}
}
}
}
}
</style>
</PageLayout>
</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 = {