From 35aff19887703873da4bfca7423964bb30bc8012 Mon Sep 17 00:00:00 2001 From: KC Ng Date: Sun, 15 Feb 2026 12:11:58 +0800 Subject: [PATCH 1/5] feat: update UI layout of landing page. Change mode toggle button into individual component --- src/components/Footer.astro | 31 ++++++++ src/components/Head.astro | 104 ++++++++++++++------------ src/components/Hero.astro | 49 ++++-------- src/components/ModeToggleButton.astro | 7 ++ src/pages/index.astro | 10 ++- src/scripts/hero-action.ts | 4 +- src/styles/global.css | 21 ++++++ 7 files changed, 139 insertions(+), 87 deletions(-) create mode 100644 src/components/Footer.astro create mode 100644 src/components/ModeToggleButton.astro diff --git a/src/components/Footer.astro b/src/components/Footer.astro new file mode 100644 index 00000000..8c1e602c --- /dev/null +++ b/src/components/Footer.astro @@ -0,0 +1,31 @@ +--- + +--- + + diff --git a/src/components/Head.astro b/src/components/Head.astro index ac5c7703..c323fd87 100644 --- a/src/components/Head.astro +++ b/src/components/Head.astro @@ -1,66 +1,76 @@ --- const { title = "Dev Encyclopedia", ...props } = Astro.props --- + - - - - - - - + + + + + + + - - + + - - - - - + + + + + diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 37472ab5..2c067f13 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -1,4 +1,6 @@ --- +import ModeToggleButton from "./ModeToggleButton.astro" + const { terms } = Astro.props const categories = new Set() @@ -11,32 +13,16 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b)) --- -
-
- Backed by - - - - Programming and Doodles™ - All rights reserved. +
+
+ Dev Encyclopedia;
+
+ Find out what that Sr. Developer is talking about. +
+ + +
@@ -73,11 +59,11 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b)) Contribute -
- -
- Dev Encyclopedia; -
-
- Find out what that Sr. Developer is talking about. -
-
+
diff --git a/src/components/ModeToggleButton.astro b/src/components/ModeToggleButton.astro new file mode 100644 index 00000000..1292e9d9 --- /dev/null +++ b/src/components/ModeToggleButton.astro @@ -0,0 +1,7 @@ +--- + +--- + + diff --git a/src/pages/index.astro b/src/pages/index.astro index ec5f33da..f1efdca3 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -6,6 +6,7 @@ import Hero from "../components/Hero.astro" import CardList from "../components/CardList.astro" import Modal from "../components/Modal.astro" import Head from "../components/Head.astro" +import Footer from "../components/Footer.astro" import { getCollection } from "astro:content" @@ -40,9 +41,12 @@ const terms = await getCollection("terms") - - - +
+ + + +
+
diff --git a/src/scripts/hero-action.ts b/src/scripts/hero-action.ts index 7e7ef27c..e9881166 100644 --- a/src/scripts/hero-action.ts +++ b/src/scripts/hero-action.ts @@ -199,8 +199,8 @@ document document .getElementById("darkModeToggle")! .addEventListener("click", toggleDarkMode) -const darkModeHTML = ` Light Mode` -const lightModeHTML = ` Dark Mode` +const darkModeHTML = `` +const lightModeHTML = `` setTheme() diff --git a/src/styles/global.css b/src/styles/global.css index 618ae2c6..c7dca4ad 100644 --- a/src/styles/global.css +++ b/src/styles/global.css @@ -466,6 +466,27 @@ body.dark-mode select option { appearance: none !important; } +.toggle-button { + position: fixed; + top: 20px; + right: 20px; + z-index: 1000; + border-radius: 100%; + width: 40px; + height: 40px; + align-items: center; + padding: 0; +} + +.toggle-button i { + font-size: 1rem; + width: 100%; + height: 100%; + display: flex; + align-items: center; + justify-content: center; +} + .navigation-button { display: flex; align-items: center; From 86198bb6a4d514a0362f81dd0a07ecea019f20c6 Mon Sep 17 00:00:00 2001 From: KC Ng Date: Wed, 18 Feb 2026 21:36:41 +0800 Subject: [PATCH 2/5] feat: include new test scripts for Footer and ModeToggleButton --- src/components/CardList.test.ts | 2 +- src/components/Footer.test.ts | 31 +++++++++++++++++++++++++ src/components/ModeToggleButton.test.ts | 21 +++++++++++++++++ 3 files changed, 53 insertions(+), 1 deletion(-) create mode 100644 src/components/Footer.test.ts create mode 100644 src/components/ModeToggleButton.test.ts diff --git a/src/components/CardList.test.ts b/src/components/CardList.test.ts index e638af1f..dc958a63 100644 --- a/src/components/CardList.test.ts +++ b/src/components/CardList.test.ts @@ -1,5 +1,5 @@ import { experimental_AstroContainer as AstroContainer } from "astro/container" -import { expect, test, describe, beforeEach, vi } from "vitest" +import { expect, test, describe, beforeEach } from "vitest" import CardList from "./CardList.astro" describe("component UI display", () => { diff --git a/src/components/Footer.test.ts b/src/components/Footer.test.ts new file mode 100644 index 00000000..06cd1b41 --- /dev/null +++ b/src/components/Footer.test.ts @@ -0,0 +1,31 @@ +import { experimental_AstroContainer as AstroContainer } from "astro/container" +import { expect, describe, beforeEach, test } from "vitest" +import Footer from "./Footer.astro" + +describe("Footer", () => { + let container: AstroContainer + + beforeEach(async () => { + // instantiate Astro container api + container = await AstroContainer.create() + }) + + test("component is displayed successfully", async () => { + // render component + const result = await container.renderToString(Footer) + + // Insert test assertion + expect(result).toContain("Backed by") + expect(result).toContain("Programming and Doodles") + expect(result).toContain("All rights reserved") + }) + + test("component display the correct DOM component", async () => { + // render component + const result = await container.renderToString(Footer) + + // insert test assertion] + expect(result).toContain('class="hero-section"') + expect(result).toContain('class="hero-paragraph"') + }) +}) \ No newline at end of file diff --git a/src/components/ModeToggleButton.test.ts b/src/components/ModeToggleButton.test.ts new file mode 100644 index 00000000..6326a235 --- /dev/null +++ b/src/components/ModeToggleButton.test.ts @@ -0,0 +1,21 @@ +import { experimental_AstroContainer as AstroContainer } from "astro/container" +import { expect, test, describe, beforeEach } from "vitest" +import ModeToggleButton from "./ModeToggleButton.astro" + +describe("Mode toggle button", () => { + let container: AstroContainer + + beforeEach(async () => { + // instantiate astro container api + container = await AstroContainer.create() + }) + + test("component is rendered correctly", async () => { + // render component + const result = await container.renderToString(ModeToggleButton) + + // Insert test assertion + expect(result).toContain('class="button toggle-button"') + expect(result).toContain('class="fas fa-moon"') + }) +}) \ No newline at end of file From 9e0278670b5a1db327cd5ea9a8cf96f21f8f8364 Mon Sep 17 00:00:00 2001 From: KC Ng Date: Sat, 21 Feb 2026 23:01:27 +0800 Subject: [PATCH 3/5] feat: remove commented codes --- src/components/Hero.astro | 7 ------- 1 file changed, 7 deletions(-) diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 2c067f13..714e9625 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -58,13 +58,6 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b)) > Contribute - - - From 94dc35cf54f219af325083ce3d6e371d23f467d3 Mon Sep 17 00:00:00 2001 From: KC Ng Date: Sat, 21 Feb 2026 23:03:57 +0800 Subject: [PATCH 4/5] feat: (WIP) commented our old survey button --- src/components/Hero.astro | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/Hero.astro b/src/components/Hero.astro index 714e9625..518f9068 100644 --- a/src/components/Hero.astro +++ b/src/components/Hero.astro @@ -61,12 +61,13 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b)) -
From 30e7f278e5d704cbdb09921087555abcc68625b8 Mon Sep 17 00:00:00 2001 From: KC Date: Mon, 23 Feb 2026 07:54:57 +0800 Subject: [PATCH 5/5] Update src/components/Footer.astro Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- src/components/Footer.astro | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Footer.astro b/src/components/Footer.astro index 8c1e602c..940a3d63 100644 --- a/src/components/Footer.astro +++ b/src/components/Footer.astro @@ -5,7 +5,7 @@