Skip to content

Commit 39c2d60

Browse files
one-aalamone-aalam
committed
feat(2.6): Add common layout components
1 parent f1050eb commit 39c2d60

3 files changed

Lines changed: 43 additions & 33 deletions

File tree

‎src/layouts/default.astro‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
---
2+
import BaseHead from '../components/BaseHead.astro';
3+
import MainLayout from '../components/MainLayout.astro';
4+
5+
const { content, showPageHeader = true } = Astro.props
6+
---
7+
<!doctype html>
8+
<html lang="en">
9+
<head>
10+
<BaseHead title={content.title ? `Astro - Ink | ${content.title}` : ''} description={content.description}/>
11+
</head>
12+
<MainLayout>
13+
{showPageHeader &&
14+
<div class="page__header">
15+
<h1 class="page__title">{content.title}</h1>
16+
<h5 class="page__desc">{content.description}</h5>
17+
</div>
18+
}
19+
<slot />
20+
</MainLayout>
21+
</html>
22+
<style>
23+
.page__header {
24+
@apply py-4 mb-1
25+
}
26+
.page__title {
27+
@apply text-5xl font-extrabold text-primary dark:text-primaryDark
28+
}
29+
.page__desc {
30+
@apply text-gray-400
31+
}
32+
</style>

‎src/pages/about.astro‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
11
---
2-
import BaseHead from '$/components/BaseHead.astro'
3-
import MainLayout from '$/components/MainLayout.astro'
2+
import DefaultPageLayout from '$/layouts/default.astro'
3+
44
const title = 'About';
55
const description = 'There\'s a simple secret to building a faster website — just ship less.';
66
---
7-
<html>
8-
<head>
9-
<BaseHead title={`Astro Ink | ${title}`} description={description} />
10-
</head>
11-
<MainLayout>
12-
<div class="page__header mb-6">
13-
<h1 class="page__title">{title}</h1>
14-
<h5 class="page__desc">{description}</h5>
15-
</div>
16-
7+
<DefaultPageLayout content={{ title, description }}>
178
<article class="page__content prose lg:prose-md max-w-none dark:text-white">
189
<p>
1910
Astro-Ink is a crisp, minimal, personal blog theme for Astro, that shows the capability of statically built sites - offering all the goodness and DX of the modern JS ecosystem without actually shipping any JS by default. It's built by...
@@ -28,20 +19,9 @@ const description = 'There\'s a simple secret to building a faster website — j
2819
</div>
2920
</div>
3021
</article>
31-
32-
</MainLayout>
33-
</html>
22+
</DefaultPageLayout>
3423

3524
<style>
36-
.page__header {
37-
@apply py-4 mb-1
38-
}
39-
.page__title {
40-
@apply text-5xl font-extrabold text-primary dark:text-primaryDark
41-
}
42-
.page__desc {
43-
@apply text-gray-400
44-
}
4525
.author {
4626
@apply flex flex-col w-full
4727
}

‎src/pages/index.astro‎

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
---
2-
import BaseHead from '$/components/BaseHead.astro'
3-
import MainLayout from '$/components/MainLayout.astro'
2+
import DefaultPageLayout from '$/layouts/default.astro'
43
import Intro from '$/components/Intro.astro'
4+
5+
const title = 'Home'
6+
const description = 'Astro-Ink is a crisp, minimal, personal blog theme for Astro'
7+
58
---
6-
<html>
7-
<head>
8-
<BaseHead title="Astro Ink | Home" />
9-
</head>
10-
<MainLayout>
9+
<DefaultPageLayout content={{ title, description }} showPageHeader={false}>
1110
<Intro/>
12-
</MainLayout>
13-
</html>
11+
</DefaultPageLayout>

0 commit comments

Comments
 (0)