10h30/jpadventure
1
0
Fork 0
mirror of https://github.com/10h30/jpadventure.git synced 2026-05-12 15:21:19 +09:00
Code Issues Packages Projects Releases Wiki Activity

Refactor pages to use BaseLayout component for consistent structure

Browse Source
This commit is contained in:
Thuan Bui
2026-01-02 12:30:54 +07:00
parent 1135ecfa48
commit 89a1d62208
4 changed files with 90 additions and 113 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/layouts/BaseLayout.astro
+25
View File
@@ -0,0 +1,25 @@
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";
const { pageTitle } = Astro.props;
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' />
<meta name='generator' content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<slot />
<Footer />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
src/pages/about.astro
+50 -66
View File
@@ -1,8 +1,5 @@
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "About Me";
const identity = {
firstName: "Thuan",
@@ -28,70 +25,57 @@ const fontWeight = "bold";
const textCase = "uppercase";
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' />
<meta name='generator' content={Astro.generator} />
<title>{pageTitle}</title>
<style define:vars={{ skillColor, fontWeight, textCase }}>
h1 {
color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: var(--fontWeight);
text-transform: var(--textCase);
}
</style>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<h2>... and my new Astro site!</h2>
<BaseLayout pageTitle={pageTitle}>
<h2>... and my new Astro site!</h2>
<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>
<p>
This site will update as I complete more of the tutorial, so keep checking
back and see how my journey is going!
</p>
<p>Here are a few facts about me:</p>
<ul>
<li>My name is {identity.firstName} {identity.lastName}.</li>
<li>
I live in {identity.country} and I work as a {identity.occupation}.
</li>
{
identity.hobbies.length >= 2 && (
<li>
Two of my hobbies are: {identity.hobbies[0]} and{" "}
{identity.hobbies[1]}
</li>
)
}
</ul>
<p>My skills are:</p>
<ul>
{skills.map((skill) => <li class='skill'>{skill}</li>)}
</ul>
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
<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>
<p>
This site will update as I complete more of the tutorial, so keep checking
back and see how my journey is going!
</p>
<p>Here are a few facts about me:</p>
<ul>
<li>My name is {identity.firstName} {identity.lastName}.</li>
<li>
I live in {identity.country} and I work as a {identity.occupation}.
</li>
{
goal === 3 ? (
<p>My goal is to finish in 3 days.</p>
) : (
<p>My goal is not 3 days.</p>
identity.hobbies.length >= 2 && (
<li>
Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}
</li>
)
}
<Footer />
</body>
</html>
</ul>
<p>My skills are:</p>
<ul>
{skills.map((skill) => <li class='skill'>{skill}</li>)}
</ul>
{happy && <p>I am happy to be learning Astro!</p>}
{finished && <p>I finished this tutorial!</p>}
{
goal === 3 ? (
<p>My goal is to finish in 3 days.</p>
) : (
<p>My goal is not 3 days.</p>
)
}
<style is:global define:vars={{ skillColor, fontWeight, textCase }}>
h1 {
color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: var(--fontWeight);
text-transform: var(--textCase);
}
</style>
</BaseLayout>
src/pages/blog.astro
+10 -25
View File
@@ -1,29 +1,14 @@
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import BaseLayout from "../layouts/BaseLayout.astro";
import "../styles/global.css";
const pageTitle = "Blog";
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' />
<meta name='generator' content={Astro.generator} />
<title>About</title>
</head>
<body>
<Header />
<h1>My Astro Learning Blog</h1>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href='/posts/post-1/'>Post 1</a></li>
<li><a href='/posts/post-2/'>Post 2</a></li>
<li><a href='/posts/post-3/'>Post 3</a></li>
</ul>
<Footer />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<p>This is where I will post about my journey learning Astro.</p>
<ul>
<li><a href='/posts/post-1/'>Post 1</a></li>
<li><a href='/posts/post-2/'>Post 2</a></li>
<li><a href='/posts/post-3/'>Post 3</a></li>
</ul>
</BaseLayout>
src/pages/index.astro
+5 -22
View File
@@ -1,25 +1,8 @@
---
import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";
const pageTitle = "Thuan's Astro Page";
import BaseLayout from "../layouts/BaseLayout.astro";
const pageTitle = "Home Page";
---
<html lang='en'>
<head>
<meta charset='utf-8' />
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
<meta name='viewport' content='width=device-width' />
<meta name='generator' content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Header />
<h1>{pageTitle}</h1>
<Footer />
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
<BaseLayout pageTitle={pageTitle}>
<h2>My awesome blog subtitle</h2>
</BaseLayout>