refactor: changed pages layouts

package.json

@@ -16,12 +16,12 @@
 		"preview": "astro preview --host"
 	},
 	"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",
 		"prettier": "^2.7.1",
 		"prettier-plugin-astro": "^0.1.1",

src/components/ArticleItem/ArticleItem.scss

@@ -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;
+			}
 		}
 	}
 }

src/components/ArticlePost/ArticlePost.astro

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

src/components/ArticlePost/ArticlePost.scss

@@ -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;
+				}
+			}
+		}
+	}
+}

src/components/ArticlePost/index.ts

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

src/components/PageHeading/PageHeading.astro

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

src/components/RecentArticles/RecentArticles.astro

@@ -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} />)
 		) : (

src/components/Splash/Splash.astro

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

src/layouts/article.astro

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

src/layouts/default.astro

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

src/pages/[article].astro

@@ -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'>
+<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>
-					<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
 
@@ -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>
+</ArticleLayout>
-		<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>

src/pages/about.astro

@@ -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'>
+<PageLayout title='Обо мне'>
-	<section class='container'>
+	<section>
-		<PageHeading heading='Обо мне' />
 		<ArticleContent>
 			<Markdown content={aboutContent.rawContent()}>
 

src/pages/articles.astro

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

src/pages/contacts.astro

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

src/pages/index.astro

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

src/pages/projects.astro

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

src/types/index.ts

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