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
+17 -33
View File
@@ -1,8 +1,5 @@
--- ---
import Header from "../components/Header.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css";
const pageTitle = "About Me"; const pageTitle = "About Me";
const identity = { const identity = {
firstName: "Thuan", firstName: "Thuan",
@@ -28,33 +25,12 @@ const fontWeight = "bold";
const textCase = "uppercase"; const textCase = "uppercase";
--- ---
<html lang='en'> <BaseLayout pageTitle={pageTitle}>
<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> <h2>... and my new Astro site!</h2>
<p> <p>
I am working through Astro's introductory tutorial. This is the second I am working through Astro's introductory tutorial. This is the second page
page on my website, and it's the first one I built myself! on my website, and it's the first one I built myself!
</p> </p>
<p> <p>
@@ -70,8 +46,7 @@ const textCase = "uppercase";
{ {
identity.hobbies.length >= 2 && ( identity.hobbies.length >= 2 && (
<li> <li>
Two of my hobbies are: {identity.hobbies[0]} and{" "} Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}
{identity.hobbies[1]}
</li> </li>
) )
} }
@@ -92,6 +67,15 @@ const textCase = "uppercase";
<p>My goal is not 3 days.</p> <p>My goal is not 3 days.</p>
) )
} }
<Footer /> <style is:global define:vars={{ skillColor, fontWeight, textCase }}>
</body> h1 {
</html> color: purple;
font-size: 4rem;
}
.skill {
color: var(--skillColor);
font-weight: var(--fontWeight);
text-transform: var(--textCase);
}
</style>
</BaseLayout>
src/pages/blog.astro
+4 -19
View File
@@ -1,29 +1,14 @@
--- ---
import Header from "../components/Header.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css"; import "../styles/global.css";
const pageTitle = "Blog";
--- ---
<html lang='en'> <BaseLayout pageTitle={pageTitle}>
<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> <p>This is where I will post about my journey learning Astro.</p>
<ul> <ul>
<li><a href='/posts/post-1/'>Post 1</a></li> <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-2/'>Post 2</a></li>
<li><a href='/posts/post-3/'>Post 3</a></li> <li><a href='/posts/post-3/'>Post 3</a></li>
</ul> </ul>
<Footer /> </BaseLayout>
<script>
import "../scripts/menu.js";
</script>
</body>
</html>
src/pages/index.astro
+5 -22
View File
@@ -1,25 +1,8 @@
--- ---
import Header from "../components/Header.astro"; import BaseLayout from "../layouts/BaseLayout.astro";
import Footer from "../components/Footer.astro"; const pageTitle = "Home Page";
import "../styles/global.css";
const pageTitle = "Thuan's Astro Page";
--- ---
<html lang='en'> <BaseLayout pageTitle={pageTitle}>
<head> <h2>My awesome blog subtitle</h2>
<meta charset='utf-8' /> </BaseLayout>
<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>