From 405555da5d1c25c626e43607f37b0348f447f4bf Mon Sep 17 00:00:00 2001 From: Thuan Bui <9248622+10h30@users.noreply.github.com> Date: Mon, 22 Dec 2025 18:13:05 +0700 Subject: [PATCH] Refactor layout: implement Header and Footer components, update pages to use them --- src/components/Footer.astro | 9 +++++++ src/components/Header.astro | 9 +++++++ src/components/Navigation.astro | 8 +++--- src/components/Social.astro | 13 +++++++++ src/pages/about.astro | 6 +++-- src/pages/blog.astro | 6 +++-- src/pages/index.astro | 6 +++-- src/styles/global.css | 47 ++++++++++++++++++++++++++++++++- 8 files changed, 94 insertions(+), 10 deletions(-) create mode 100644 src/components/Footer.astro create mode 100644 src/components/Header.astro create mode 100644 src/components/Social.astro diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 0000000..ab272ee --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,9 @@ +--- +import Social from "./Social.astro"; +--- + + diff --git a/src/components/Header.astro b/src/components/Header.astro new file mode 100644 index 0000000..b01d93b --- /dev/null +++ b/src/components/Header.astro @@ -0,0 +1,9 @@ +--- +import Navigation from "./Navigation.astro"; +--- + +
+ +
diff --git a/src/components/Navigation.astro b/src/components/Navigation.astro index c672240..5161ad9 100644 --- a/src/components/Navigation.astro +++ b/src/components/Navigation.astro @@ -2,6 +2,8 @@ --- -Home -About -Blog + diff --git a/src/components/Social.astro b/src/components/Social.astro new file mode 100644 index 0000000..3436dd5 --- /dev/null +++ b/src/components/Social.astro @@ -0,0 +1,13 @@ +--- +const { platform, username } = Astro.props; +--- + + +{platform} diff --git a/src/pages/about.astro b/src/pages/about.astro index db97b81..8f01fbb 100644 --- a/src/pages/about.astro +++ b/src/pages/about.astro @@ -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"; const pageTitle = "About Me"; @@ -47,7 +48,7 @@ const textCase = "uppercase"; - +

{pageTitle}

... and my new Astro site!

@@ -91,5 +92,6 @@ const textCase = "uppercase";

My goal is not 3 days.

) } +