mirror of
https://github.com/10h30/jpadventure.git
synced 2026-05-12 15:21:19 +09:00
Refactor pages to use BaseLayout component for consistent structure
This commit is contained in:
Thuan Bui
@@ -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>
|
||||||
+50
-66
@@ -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,70 +25,57 @@ const fontWeight = "bold";
|
|||||||
const textCase = "uppercase";
|
const textCase = "uppercase";
|
||||||
---
|
---
|
||||||
|
|
||||||
<html lang='en'>
|
<BaseLayout pageTitle={pageTitle}>
|
||||||
<head>
|
<h2>... and my new Astro site!</h2>
|
||||||
<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>
|
|
||||||
|
|
||||||
<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>
|
|
||||||
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>
|
||||||
|
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 ? (
|
identity.hobbies.length >= 2 && (
|
||||||
<p>My goal is to finish in 3 days.</p>
|
<li>
|
||||||
) : (
|
Two of my hobbies are: {identity.hobbies[0]} and {identity.hobbies[1]}
|
||||||
<p>My goal is not 3 days.</p>
|
</li>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
<Footer />
|
</ul>
|
||||||
</body>
|
<p>My skills are:</p>
|
||||||
</html>
|
<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>
|
||||||
|
|||||||
+10
-25
@@ -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>
|
<p>This is where I will post about my journey learning Astro.</p>
|
||||||
<meta charset='utf-8' />
|
<ul>
|
||||||
<link rel='icon' type='image/svg+xml' href='/favicon.svg' />
|
<li><a href='/posts/post-1/'>Post 1</a></li>
|
||||||
<meta name='viewport' content='width=device-width' />
|
<li><a href='/posts/post-2/'>Post 2</a></li>
|
||||||
<meta name='generator' content={Astro.generator} />
|
<li><a href='/posts/post-3/'>Post 3</a></li>
|
||||||
<title>About</title>
|
</ul>
|
||||||
</head>
|
</BaseLayout>
|
||||||
<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>
|
|
||||||
|
|||||||
+5
-22
@@ -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>
|
|
||||||
|
|||||||
Reference in New Issue
Block a user