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

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" "preview": "astro preview --host"
}, },
"devDependencies": { "devDependencies": {
"@astrojs/solid-js": "^0.2.1", "@astrojs/solid-js": "^0.4.1",
"@typescript-eslint/eslint-plugin": "^5.30.6", "@typescript-eslint/eslint-plugin": "^5.30.7",
"@typescript-eslint/parser": "^5.30.6", "@typescript-eslint/parser": "^5.30.7",
"astro": "^1.0.0-beta.63", "astro": "^1.0.0-beta.73",
"astro-icon": "^0.7.1", "astro-icon": "^0.7.3",
"eslint": "^8.19.0", "eslint": "^8.20.0",
"eslint-plugin-solid": "^0.7.1", "eslint-plugin-solid": "^0.7.1",
"prettier": "^2.7.1", "prettier": "^2.7.1",
"prettier-plugin-astro": "^0.1.1", "prettier-plugin-astro": "^0.1.1",

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

@ -18,10 +18,9 @@
font-family: monospace; font-family: monospace;
color: var(--font-color-gray); color: var(--font-color-gray);
text-transform: uppercase; text-transform: uppercase;
margin: 0;
text-align: right; text-align: right;
white-space: nowrap; white-space: nowrap;
margin-bottom: 10px; margin-bottom: 0;
} }
&:hover { &:hover {
text-decoration: none; text-decoration: none;
@ -38,6 +37,9 @@
& a { & a {
flex-direction: column-reverse; flex-direction: column-reverse;
align-items: flex-start; 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; const { heading, description } = Astro.props as Props;
--- ---
<header class='page-heading'> <div class='page-heading'>
<h1 style={!description && 'margin-bottom: 2.5rem;'}> <h1 style={!description && 'margin-bottom: 2.5rem;'}>
{heading} {heading}
</h1> </h1>
{description && <p>{description}</p>} {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'> <section class='recent'>
<div class='container'> <div class='recent-heading'>
<div class='recent-heading'> <h2>недавние публикации</h2>
<h2>недавние публикации</h2> <a href='/articles'>смотреть все</a>
<a href='/articles'>смотреть все</a>
</div>
</div> </div>
<div class='recent-list container'> <div class='recent-list'>
{recent.length !== 0 ? ( {recent.length !== 0 ? (
recent.slice(0, length).map((article) => <ArticleItem data={article} />) recent.slice(0, length).map((article) => <ArticleItem data={article} />)
) : ( ) : (

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

@ -2,6 +2,6 @@
import './Splash.scss'; import './Splash.scss';
--- ---
<section class='splash container'> <section class='splash'>
<slot></slot> <slot></slot>
</section> </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 BaseHead from '@root/components/BaseHead.astro';
import BaseLayout from '@components/BaseLayout'; import BaseLayout from '@components/BaseLayout';
import { SITE_METADATA } from '@root/config'; import { SITE_METADATA } from '@root/config';
import PageHeading from '@root/components/PageHeading';
export interface Props extends BaseHeadProps { export interface Props extends BaseHeadProps {
lang?: string | undefined; 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}> <html lang={lang}>
<head> <head>
<BaseHead title={title} description={description} /> <BaseHead title={title ? `${title} | ${SITE_METADATA.title}` : SITE_METADATA.title} description={description} />
</head> </head>
<BaseLayout> <BaseLayout>
<slot></slot> <div class='container'>
{showPageHeading && <PageHeading heading={title} description={description} />}
<slot></slot>
</div>
</BaseLayout> </BaseLayout>
</html> </html>

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

@ -1,182 +1,80 @@
--- ---
import '@root/styles/prism-one-light.css'; 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 { Markdown } from 'astro/components';
import ArticleContent from '@components/ArticleContent';
export function getStaticPaths() { export function getStaticPaths() {
return [{ params: { article: 'article' } }]; return [{ params: { article: 'article' } }];
} }
--- ---
<PageLayout title='Article'> <ArticleLayout
<article class='article container'> content={{
<header> title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
<div class='meta'> author: 'Sergey Yarkov',
<ul class='list-links'> tags: ['AVR', 'JavaScript', 'NodeJS'],
<li><a class='btn-link' href='#'>JavaScript</a></li> published_at: new Date().toISOString(),
<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> <Markdown>
<li><a class='btn-link' href='#'>GraphQL</a></li> ## Introduction
<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
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus. 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. 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 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 conubia nostra, per inceptos himenaeos. [Praesent auctor](#) purus luctus enim egestas, ac scelerisque ante
pulvinar. pulvinar.
Donec ut rhoncus ex. Suspendisse ac rhoncus nisl, eu tempor urna. Curabitur vel bibendum lorem. Morbi convallis 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 convallis diam sit amet [lacinia](#). Aliquam in elementum
Curabitur tempor quis eros tempus lacinia. Nam bibendum pellentesque quam a convallis. Sed ut vulputate nisi. 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 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 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 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 lobortis eleifend. Sed nec ante dictum sem condimentum ullamcorper quis venenatis nisi. Proin vitae facilisis
nisi, ac posuere leo. 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. 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. 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. - `Nam metus lacus`: porttitor eu mauris a, [blandit ultrices](#) nibh.
- `Class aptent`: taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. - `Class aptent`: taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
- `Sed nec ante`: dictum sem condimentum [ullamcorper quis](#) venenatis nisi. - `Sed nec ante`: dictum sem condimentum [ullamcorper quis](#) venenatis nisi.
```typescript ```typescript
import type { APIContext } from 'astro'; import type { APIContext } from 'astro';
export async function get({ params, request }: APIContext) { export async function get({ params, request }: APIContext) {
return { return {
body: JSON.stringify({ body: JSON.stringify({
path: new URL(request.url).pathname, 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;
}
} }
```
@media screen and (max-width: 560px) { Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eu turpis molestie, dictum est a, mattis tellus.
.article { Sed dignissim.
& header {
& .heading h1 {
font-size: 2rem;
}
& .meta { <figure>
flex-direction: column-reverse; <img src="https://wallpaperaccess.com/full/138733.jpg" alt="test" />
<figcaption>This is a test image!</figcaption>
</figure>
& ul { <blockquote>
max-width: 100%; <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 { ## Conclusion
align-self: flex-end;
margin-bottom: 1.2rem; 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>
}
}
</style>
</PageLayout>

6
src/pages/about.astro
View File

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

6
src/pages/articles.astro
View File

@ -1,6 +1,5 @@
--- ---
import PageLayout from '@layouts/default.astro'; import PageLayout from '@layouts/default.astro';
import { ArticlesList } from '@components/ArticlesList';
import { ArticleType } from '@root/types'; import { ArticleType } from '@root/types';
import * as utils from '@utils/index'; 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()); 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]} /> --> <!-- <ArticlesList client:load data={utils.transformArticles(articles)} tags={[...tags]} /> -->
</PageLayout> </PageLayout>

5
src/pages/contacts.astro
View File

@ -5,9 +5,8 @@ import ContactForm from '@components/ContactForm';
import ContactsList from '@components/ContactsList'; import ContactsList from '@components/ContactsList';
--- ---
<PageLayout title='Контакты | Sergey Yarkov'> <PageLayout title='Контакты' description='Воспользуйтесь формой обратной связи или напишите мне в социальные сети.'>
<section class='container'> <section>
<PageHeading heading='Контакты' description='Воспользуйтесь формой обратной связи или напишите мне в социальные сети.' />
<ContactForm client:idle /> <ContactForm client:idle />
<ContactsList /> <ContactsList />
</section> </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); const articles = utils.transformArticles(data);
--- ---
<PageLayout> <PageLayout showPageHeading={false}>
<Splash> <Splash>
<SplashHeading> <SplashHeading>
<hgroup> <hgroup>
@ -24,6 +24,5 @@ const articles = utils.transformArticles(data);
<Link icon='email_filled' href='/about'>написать мне</Link> <Link icon='email_filled' href='/about'>написать мне</Link>
</SplashLinks> </SplashLinks>
</Splash> </Splash>
<RecentArticles articles={articles} length={4} /> <RecentArticles articles={articles} length={4} />
</PageLayout> </PageLayout>

10
src/pages/projects.astro
View File

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

2
src/types/index.ts
View File

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