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 layout: implement Header and Footer components, update pages to use them

Browse Source
This commit is contained in:
Thuan Bui
2025-12-22 18:13:05 +07:00
parent c3f6ddabb7
commit 405555da5d
8 changed files with 94 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Footer.astro
+9
View File
@@ -0,0 +1,9 @@
---
import Social from "./Social.astro";
---
<footer>
<Social platform='github' username='10h30' />
<Social platform='instagram' username='yeuchaybo' />
<Social platform='linkedin' username='thuanbui' />
</footer>
src/components/Header.astro
+9
View File
@@ -0,0 +1,9 @@
---
import Navigation from "./Navigation.astro";
---
<header>
<nav>
<Navigation />
</nav>
</header>
src/components/Navigation.astro
+5 -3
View File
@@ -2,6 +2,8 @@
--- ---
<a href='/'>Home</a> <div id='main-menu' class='nav-links'>
<a href='/about/'>About</a> <a href='/'>Home</a>
<a href='/blog/'>Blog</a> <a href='/about/'>About</a>
<a href='/blog/'>Blog</a>
</div>
src/components/Social.astro
+13
View File
@@ -0,0 +1,13 @@
---
const { platform, username } = Astro.props;
---
<style>
a {
padding: 0.5rem 1rem;
color: white;
background-color: #4c1d95;
text-decoration: none;
}
</style>
<a href={`https://www.${platform}.com/${username}`}>{platform}</a>
src/pages/about.astro
+4 -2
View File
@@ -1,5 +1,6 @@
--- ---
import Navigation from "../components/Navigation.astro"; import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css"; import "../styles/global.css";
const pageTitle = "About Me"; const pageTitle = "About Me";
@@ -47,7 +48,7 @@ const textCase = "uppercase";
</style> </style>
</head> </head>
<body> <body>
<Navigation /> <Header />
<h1>{pageTitle}</h1> <h1>{pageTitle}</h1>
<h2>... and my new Astro site!</h2> <h2>... and my new Astro site!</h2>
@@ -91,5 +92,6 @@ const textCase = "uppercase";
<p>My goal is not 3 days.</p> <p>My goal is not 3 days.</p>
) )
} }
<Footer />
</body> </body>
</html> </html>
src/pages/blog.astro
+4 -2
View File
@@ -1,5 +1,6 @@
--- ---
import Navigation from "../components/Navigation.astro"; import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css"; import "../styles/global.css";
--- ---
@@ -12,7 +13,7 @@ import "../styles/global.css";
<title>About</title> <title>About</title>
</head> </head>
<body> <body>
<Navigation /> <Header />
<h1>My Astro Learning Blog</h1> <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>
@@ -20,5 +21,6 @@ import "../styles/global.css";
<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 />
</body> </body>
</html> </html>
src/pages/index.astro
+4 -2
View File
@@ -1,5 +1,6 @@
--- ---
import Navigation from "../components/Navigation.astro"; import Header from "../components/Header.astro";
import Footer from "../components/Footer.astro";
import "../styles/global.css"; import "../styles/global.css";
const pageTitle = "Thuan's Astro Page"; const pageTitle = "Thuan's Astro Page";
@@ -14,7 +15,8 @@ const pageTitle = "Thuan's Astro Page";
<title>{pageTitle}</title> <title>{pageTitle}</title>
</head> </head>
<body> <body>
<Navigation /> <Header />
<h1>{pageTitle}</h1> <h1>{pageTitle}</h1>
<Footer />
</body> </body>
</html> </html>
src/styles/global.css
+45
View File
@@ -19,3 +19,48 @@ h1 {
margin: 1rem 0; margin: 1rem 0;
font-size: 2.5rem; font-size: 2.5rem;
} }
/* nav styles */
.nav-links {
width: 100%;
display: none;
margin: 0;
}
.nav-links a {
display: block;
text-align: center;
padding: 10px 0;
text-decoration: none;
font-size: 1.2rem;
font-weight: bold;
text-transform: uppercase;
color: #0d0950;
}
.nav-links a:hover,
.nav-links a:focus {
background-color: #ff9776;
}
@media screen and (min-width: 636px) {
.nav-links {
margin-left: 5em;
display: block;
position: static;
width: auto;
background: none;
}
.nav-links a {
display: inline-block;
padding: 15px 20px;
}
}
footer {
display: flex;
gap: 1rem;
margin-top: 2rem;
}