Skip to content

Commit 583f67c

Browse files
mTixiermTixier
committed
Layoutify the pages
1 parent 3f84c4b commit 583f67c

5 files changed

Lines changed: 44 additions & 91 deletions

File tree

‎tutorial/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 Header from '../components/Header.astro';
3+
import Footer from '../components/Footer.astro';
4+
import '../styles/global.css';
5+
const { pgTitle } = Astro.props;
6+
---
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>{pgTitle}</title>
16+
</head>
17+
<body>
18+
<Header />
19+
<h1>{pgTitle}</h1>
20+
<slot />
21+
<Footer />
22+
<script>
23+
import "../scripts/menu.js";
24+
</script>
25+
</body>
26+
</html>

‎tutorial/src/pages/about.astro‎

Lines changed: 4 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
---
22
import '../styles/global.css';
3-
import Header from '../components/Header.astro';
4-
import Footer from '../components/Footer.astro';
3+
import BaseLayout from '../layouts/BaseLayout.astro';
54
65
const pgTitle = "About Me";
76
@@ -18,34 +17,9 @@ const happy = true;
1817
1918
const goal = 2;
2019
21-
const skillColor = "crimson";
2220
---
2321

24-
<html lang="en">
25-
<head>
26-
<meta charset="utf-8" />
27-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
28-
<link rel="icon" href="/favicon.ico" />
29-
<meta name="viewport" content="width=device-width" />
30-
<meta name="generator" content={Astro.generator} />
31-
<title>Astro</title>
32-
33-
<style define:vars={{skillColor}}>
34-
h1 {
35-
color: purple;
36-
font-size: 4rem;
37-
}
38-
39-
.skill{
40-
color: var(--skillColor);
41-
font-weight: bold;
42-
}
43-
</style>
44-
45-
</head>
46-
<body>
47-
<Header />
48-
<h1>{pgTitle}</h1>
22+
<BaseLayout pgTitle={pgTitle}>
4923
<h2>... and my new Astro site!</h2>
5024

5125
{happy && <p>I am happy to learn Astro!</p>}
@@ -68,11 +42,5 @@ const skillColor = "crimson";
6842
<ul>
6943
{skills.map((skill) => <li class="skill">{skill}</li>)}
7044
</ul>
71-
<Footer />
72-
73-
<script>
74-
import "../scripts/menu.js";
75-
</script>
76-
77-
</body>
78-
</html>
45+
46+
</BaseLayout>

‎tutorial/src/pages/blog.astro‎

Lines changed: 4 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,16 @@
11
---
22
import '../styles/global.css';
3-
import Header from '../components/Header.astro';
4-
import Footer from '../components/Footer.astro';
3+
import BaseLayout from '../layouts/BaseLayout.astro';
54
65
const pgTitle = "My Astro Learning Blog";
76
---
87

9-
<html lang="en">
10-
<head>
11-
<meta charset="utf-8" />
12-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13-
<link rel="icon" href="/favicon.ico" />
14-
<meta name="viewport" content="width=device-width" />
15-
<meta name="generator" content={Astro.generator} />
16-
<title>Astro</title>
17-
</head>
18-
<body>
19-
<Header />
20-
<h1>My Astro Site</h1>
21-
<h1>{pgTitle}</h1>
8+
<BaseLayout pgTitle={pgTitle}>
229
<p>This is where I will post about my journey learning Astro.</p>
2310
<ul>
2411
<a href="/myAstroTest/posts/post-1">My first blog post</a>
2512
<a href="/myAstroTest/posts/post-2">Post 2</a>
2613
<a href="/myAstroTest/posts/post-3">Post 3</a>
2714
</ul>
28-
<Footer />
29-
30-
<script>
31-
import "../scripts/menu.js";
32-
</script>
33-
34-
</body>
35-
</html>
15+
16+
</BaseLayout>

‎tutorial/src/pages/index.astro‎

Lines changed: 4 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,10 @@
11
---
22
import '../styles/global.css';
3-
import Header from '../components/Header.astro';
4-
import Footer from '../components/Footer.astro';
3+
import BaseLayout from '../layouts/BaseLayout.astro';
54
65
const pgTitle = "My Astro Website Deployed with an Action";
76
---
87

9-
<html lang="en">
10-
<head>
11-
<meta charset="utf-8" />
12-
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
13-
<link rel="icon" href="/favicon.ico" />
14-
<meta name="viewport" content="width=device-width" />
15-
<meta name="generator" content={Astro.generator} />
16-
<title>Astro</title>
17-
18-
19-
<style>
20-
h1 {
21-
color: purple;
22-
font-size: 4rem;
23-
}
24-
</style>
25-
26-
</head>
27-
<body>
28-
<Header />
29-
<h1>{pgTitle}</h1>
30-
<Footer />
31-
32-
<script>
33-
import "../scripts/menu.js";
34-
</script>
35-
36-
37-
</body>
38-
</html>
8+
<BaseLayout pgTitle={pgTitle}>
9+
<h2>My awesome blog subtitle</h2>
10+
</BaseLayout>

‎tutorial/src/styles/global.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,12 @@ h1 {
2020
font-size: 2.5rem;
2121
}
2222

23+
/* Skill set */
24+
25+
.skill{
26+
color:#ff9776;
27+
}
28+
2329
/* Menu */
2430

2531
.menu {

0 commit comments

Comments
 (0)