Skip to content

Commit 0803bb4

Browse files
mmert9008mmert9008
authored
Merge pull request #5 from mmert9008/staging
Created a layout and refactored. Currently at https://docs.astro.build/en/tutorial/4-layouts/2/
2 parents ed94347 + 908bfa8 commit 0803bb4

File tree

4 files changed

+74
-99
lines changed

4 files changed

+74
-99
lines changed

‎src/layouts/BaseLayout.astro‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
---
2+
import '../styles/global.css';
3+
import Header from '../components/Header.astro';
4+
import Footer from '../components/Footer.astro';
5+
6+
const { pageTitle } = Astro.props;
7+
---
8+
9+
<html lang="en">
10+
<head>
11+
<meta charset="utf-8" />
12+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13+
<meta name="viewport" content="width=device-width" />
14+
<meta name="generator" content={Astro.generator} />
15+
<title>{pageTitle}</title>
16+
</head>
17+
<body>
18+
<Header />
19+
<h1>{pageTitle}</h1>
20+
<slot />
21+
<Footer />
22+
<script>
23+
import '../scripts/menu.js';
24+
</script>
25+
</body>
26+
</html>

‎src/pages/about.astro‎

Lines changed: 39 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,5 @@
11
---
2-
import '../styles/global.css';
3-
import Header from '../components/Header.astro';
4-
import Footer from '../components/Footer.astro';
2+
import BaseLayout from '../layouts/BaseLayout.astro';
53
64
const pageTitle = "About Me";
75
@@ -23,56 +21,41 @@ const fontWeight = "bold";
2321
const textCase = "uppercase"
2422
---
2523

26-
<html lang="en">
27-
<head>
28-
<meta charset="utf-8" />
29-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
30-
<meta name="viewport" content="width=device-width" />
31-
<meta name="generator" content={Astro.generator} />
32-
<title>{pageTitle}</title>
33-
<style define:vars={{skillColor, fontWeight, textCase}}>
34-
h1 {
35-
color: purple;
36-
font-size: 4rem;
37-
}
38-
39-
.skill {
40-
color: var(--skillColor);
41-
font-weight: var(--fontWeight);
42-
text-transform: var(--textCase);
43-
}
44-
</style>
45-
</head>
46-
<body>
47-
<Header />
48-
<h1>{pageTitle}</h1>
49-
<h2>... and my new Astro site!</h2>
50-
51-
<p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
52-
53-
<p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
54-
55-
<p>Here are a few facts about me:</p>
56-
<ul>
57-
<li>My name is {identity.firstName}.</li>
58-
<li>I live in {identity.country} and I work as a {identity.occupation}.</li>
59-
{identity.hobbies.length >= 2 &&
60-
<li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
61-
}
62-
</ul>
63-
<p>My skills are:</p>
64-
<ul>
65-
{skills.map((skill) => <li class="skill">{skill}</li>)}
66-
</ul>
67-
68-
{happy && <p>I am happy to be learning Astro!</p>}
69-
70-
{finished && <p>I finished this tutorial!</p>}
71-
72-
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
73-
<Footer />
74-
<script>
75-
import '../scripts/menu.js';
76-
</script>
77-
</body>
78-
</html>
24+
<BaseLayout pageTitle={pageTitle}>
25+
<style is:global define:vars={{skillColor, fontWeight, textCase}}>
26+
h1 {
27+
color: purple;
28+
font-size: 4rem;
29+
}
30+
31+
.skill {
32+
color: var(--skillColor);
33+
font-weight: var(--fontWeight);
34+
text-transform: var(--textCase);
35+
}
36+
</style>
37+
<h2>... and my new Astro site!</h2>
38+
39+
<p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>
40+
41+
<p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
42+
43+
<p>Here are a few facts about me:</p>
44+
<ul>
45+
<li>My name is {identity.firstName}.</li>
46+
<li>I live in {identity.country} and I work as a {identity.occupation}.</li>
47+
{identity.hobbies.length >= 2 &&
48+
<li>Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}</li>
49+
}
50+
</ul>
51+
<p>My skills are:</p>
52+
<ul>
53+
{skills.map((skill) => <li class="skill">{skill}</li>)}
54+
</ul>
55+
56+
{happy && <p>I am happy to be learning Astro!</p>}
57+
58+
{finished && <p>I finished this tutorial!</p>}
59+
60+
{goal === 3 ? <p>My goal is to finish in 3 days.</p> : <p>My goal is not 3 days.</p>}
61+
</BaseLayout>

‎src/pages/blog.astro‎

Lines changed: 4 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,14 @@
11
---
2-
import '../styles/global.css';
3-
import Header from '../components/Header.astro';
4-
import Footer from '../components/Footer.astro';
2+
import BaseLayout from '../layouts/BaseLayout.astro';
53
4+
const pageTitle = "My Astro Learning Blog";
65
---
76

8-
<html lang="en">
9-
<head>
10-
<meta charset="utf-8" />
11-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
12-
<meta name="viewport" content="width=device-width" />
13-
<meta name="generator" content={Astro.generator} />
14-
<title>Astro</title>
15-
</head>
16-
<body>
17-
<Header />
18-
<h1>My Astro Learning Blog</h1>
7+
<BaseLayout pageTitle={pageTitle}>
198
<p>This is where I will post about my journey learning Astro.</p>
209
<ul>
2110
<li><a href="/posts/post-1/">Post 1</a></li>
2211
<li><a href="/posts/post-2/">Post 2</a></li>
2312
<li><a href="/posts/post-3/">Post 3</a></li>
2413
</ul>
25-
<Footer />
26-
<script>
27-
import '../scripts/menu.js';
28-
</script>
29-
</body>
30-
</html>
14+
</BaseLayout>

‎src/pages/index.astro‎

Lines changed: 5 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,7 @@
11
---
2-
import '../styles/global.css';
3-
import Header from '../components/Header.astro';
4-
import Footer from '../components/Footer.astro';
5-
6-
const pageTitle = 'Home Page';
2+
import BaseLayout from '../layouts/BaseLayout.astro';
3+
const pageTitle = "Home Page";
74
---
8-
9-
<html lang="en">
10-
<head>
11-
<meta charset="utf-8" />
12-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13-
<meta name="viewport" content="width=device-width" />
14-
<meta name="generator" content={Astro.generator} />
15-
<title>{pageTitle}</title>
16-
</head>
17-
<body>
18-
<Header />
19-
<h1>{pageTitle}</h1>
20-
<Footer />
21-
<script>
22-
import '../scripts/menu.js';
23-
</script>
24-
</body>
25-
</html>
5+
<BaseLayout pageTitle={pageTitle}>
6+
<h2>My awesome blog subtitle</h2>
7+
</BaseLayout>

0 commit comments

Comments
 (0)