Update landing page's UI layout

src/components/CardList.test.ts

@@ -1,6 +1,6 @@
 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", () => {
   let container: AstroContainer

src/components/Footer.astro

@@ -0,0 +1,31 @@
+---
+
+---
+
+<footer class="hero-section">
+  <div
+    class="hero-paragraph"
+    id="footerParagraph"
+    style="font-size: 10px;
+    margin-top: 15px !important;  /* Pull element UP */
+    padding-top: 0 !important;
+    position: relative;
+    top: -8px; /* Fine-tune position */
+    display: block;"
+  >
+    Backed by
+    <a
+      href="https://codedoodles.xyz"
+      target="_blank"
+      rel="dofollow noopener noreferrer"
+      style="color:rgb(128, 128, 128);"
+      aria-label="Visit Programming and Doodles official website"
+    >
+      <span itemscope itemtype="https://schema.org/Organization">
+        <meta itemprop="name" content="Programming and Doodles™" />
+        <span itemprop="name">Programming and Doodles</span>&#8482;</span
+      >
+      <time datetime="2025">2025.</time></a
+    > All rights reserved.
+  </div>
+</footer>

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"')
+  })
+})

src/components/Head.astro

@@ -1,66 +1,76 @@
 ---
 const { title = "Dev Encyclopedia", ...props } = Astro.props
 ---
+
 <!-- Common meta tags -->
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="title" content="DevPedia | Open-Source Developer Reference">
-<meta 
-  name="description" 
-  content="400+ programming terms explained clearly. Open-source tech dictionary with category filters for frontend, backend, DevOps, and CS fundamentals. Community-maintained knowledge base.">
-<meta 
-  name="keywords" 
-  content="open source programming dictionary, coding glossary, developer reference, tech terminology, frontend concepts, backend concepts, DevOps terms, computer science basics, GitHub knowledge base">
-<meta name="robots" content="index, follow">
-<meta name="language" content="en">
-<meta name="author" content="Chenuli Jayasinghe">
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+<meta name="title" content="DevPedia | Open-Source Developer Reference" />
+<meta
+  name="description"
+  content="400+ programming terms explained clearly. Open-source tech dictionary with category filters for frontend, backend, DevOps, and CS fundamentals. Community-maintained knowledge base."
+/>
+<meta
+  name="keywords"
+  content="open source programming dictionary, coding glossary, developer reference, tech terminology, frontend concepts, backend concepts, DevOps terms, computer science basics, GitHub knowledge base"
+/>
+<meta name="robots" content="index, follow" />
+<meta name="language" content="en" />
+<meta name="author" content="Chenuli Jayasinghe" />
 
 <!-- Canonical URL -->
 <link rel="canonical" href="https://devpedia.dev" />
 
 <!-- Open Graph -->
-<meta property="og:type" content="website">
-<meta property="og:url" content="https://devpedia.dev">
+<meta property="og:type" content="website" />
+<meta property="og:url" content="https://devpedia.dev" />
 
-<meta property="og:title" content="Dev Encyclopedia | A dictionary for programmers">
-<meta 
-  property="og:description" 
-  content="Community-driven encyclopedia for programmers with 400+ terms + category filters. Learn about programming concepts and tech jargon in Plain English">
-<meta property="og:image" content="https://i.ibb.co/nMwVhk7c/social-media-cover.png">
-<meta property="og:image:width" content="1200">
-<meta property="og:image:height" content="630">
+<meta
+  property="og:title"
+  content="Dev Encyclopedia | A dictionary for programmers"
+/>
+<meta
+  property="og:description"
+  content="Community-driven encyclopedia for programmers with 400+ terms + category filters. Learn about programming concepts and tech jargon in Plain English"
+/>
+<meta
+  property="og:image"
+  content="https://i.ibb.co/nMwVhk7c/social-media-cover.png"
+/>
+<meta property="og:image:width" content="1200" />
+<meta property="og:image:height" content="630" />
 
 <!-- Structured Data -->
 <script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "WebSite",
-  "name": "Dev Encyclopedia",
-  "url": "https://devpedia.pages.dev",
-  "description": "A dictionary for programmers",
-  "license": "https://github.com/Buzzpy/Dev-Encyclopedia/blob/develop/LICENSE",
-  "isAccessibleForFree": true,
-  "keywords": "programmer dictionary, dev encyclopedia, devpedia, programming, development, glossary, open source, technical terms, programmer encyclopedia",
-  "publisher": {
-    "@type": "Organization",
-    "name": "Programming and Doodles",
-    "founder": "Chenuli Jayasinghe",
-    "foundingDate": "2024",
-    "email": "chenuli@devpedia.dev",
-    "sameAs": "https://github.com/Buzzpy"
+  {
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": "Dev Encyclopedia",
+    "url": "https://devpedia.pages.dev",
+    "description": "A dictionary for programmers",
+    "license": "https://github.com/Buzzpy/Dev-Encyclopedia/blob/develop/LICENSE",
+    "isAccessibleForFree": true,
+    "keywords": "programmer dictionary, dev encyclopedia, devpedia, programming, development, glossary, open source, technical terms, programmer encyclopedia",
+    "publisher": {
+      "@type": "Organization",
+      "name": "Programming and Doodles",
+      "founder": "Chenuli Jayasinghe",
+      "foundingDate": "2024",
+      "email": "chenuli@devpedia.dev",
+      "sameAs": "https://github.com/Buzzpy"
+    }
   }
-}
 </script>
 
 <!-- Footer Microdata -->
 <script type="application/ld+json">
-{
-  "@context": "https://schema.org",
-  "@type": "WPFooter",
-  "copyrightHolder": {
-    "@type": "Organization",
-    "name": "Programming and Doodles",
-    "copyrightYear": "2025"
-  },
-  "copyrightNotice": "Content available under CC BY-SA 4.0 license"
-}
+  {
+    "@context": "https://schema.org",
+    "@type": "WPFooter",
+    "copyrightHolder": {
+      "@type": "Organization",
+      "name": "Programming and Doodles",
+      "copyrightYear": "2025"
+    },
+    "copyrightNotice": "Content available under CC BY-SA 4.0 license"
+  }
 </script>

src/components/Hero.astro

@@ -1,4 +1,6 @@
 ---
+import ModeToggleButton from "./ModeToggleButton.astro"
+
 const { terms } = Astro.props
 const categories = new Set<string>()
 
@@ -11,32 +13,16 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b))
 ---
 
 <hero-com data>
-  <div class="hero-section">
-    <div
-      class="hero-paragraph"
-      id="heroParagraph"
-      style="font-size: 10px;
-    margin-top: 15px !important;  /* Pull element UP */
-    padding-top: 0 !important;
-    position: relative;
-    top: -8px; /* Fine-tune position */
-    display: block;"
-    >
-      Backed by
-      <a
-        href="https://codedoodles.xyz"
-        target="_blank"
-        rel="dofollow noopener noreferrer"
-        style="color:rgb(128, 128, 128);"
-        aria-label="Visit Programming and Doodles official website"
-      >
-        <span itemscope itemtype="https://schema.org/Organization">
-          <meta itemprop="name" content="Programming and Doodles™" />
-          <span itemprop="name">Programming and Doodles</span>&#8482;</span
-        >
-        <time datetime="2025">2025.</time></a
-      > All rights reserved.
+  <section class="hero-section">
+    <div class="hero-title" id="heroTitle" style="padding-top: 0.5rem;">
+      Dev Encyclopedia;
+    </div>
+    <div class="hero-paragraph" id="heroParagraph">
+      Find out what that Sr. Developer is talking about.
     </div>
+
+    <ModeToggleButton />
+
     <div class="search-and-filter">
       <div class="search-bar">
         <i class="fas fa-search"></i>
@@ -72,29 +58,16 @@ let sortedCategories = Array.from(categories).sort((a, b) => a.localeCompare(b))
       >
         <i class="fab fa-github" style="padding-right: 10px;"></i> Contribute
       </button>
-
-      <button class="button" id="darkModeToggle">
-        <i class="fas fa-moon" style="padding-right: 10px;"></i><span
-          id="darkModeText">Dark Mode</span
-        >
-      </button>
-
       <button class="button" id="sponsorButton">
         <i class="fa-solid fa-dollar-sign" style="padding-right: 10px;"></i> Sponsor
       </button>
-      <button
+      <!-- (WIP) Removed survey button for new replacement -->
+      <!-- <button
         class="button"
         onclick="window.open('https://docs.google.com/forms/d/e/1FAIpQLSfKxg9lGenniBRrmPQz_qsCa7NtlN1uZPu_vv780UiRCppcOQ/viewform', '_blank')"
       >
         <i class="fa-solid fa-pen" style="padding-right: 10px;"></i> User survey
-      </button>
-    </div>
-
-    <div class="hero-title" id="heroTitle" style="padding-top: 50px;">
-      Dev Encyclopedia;
-    </div>
-    <div class="hero-paragraph" id="heroParagraph">
-      Find out what that Sr. Developer is talking about.
+      </button> -->
     </div>
-  </div>
+  </section>
 </hero-com>

src/components/ModeToggleButton.astro

@@ -0,0 +1,7 @@
+---
+
+---
+
+<button class="button toggle-button" id="darkModeToggle">
+  <i class="fas fa-moon"></i>
+</button>

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"')
+  })
+})

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")
 </head>
 
 <BaseLayout>
-  <Hero terms={terms} />
-  <CardList terms={terms} />
-  <Modal />
+  <main>
+    <Hero terms={terms} />
+    <CardList terms={terms} />
+    <Modal />
+  </main>
+  <Footer />
 </BaseLayout>
 
 <script src="../scripts/cards.ts"></script>

src/scripts/hero-action.ts

@@ -199,8 +199,8 @@ document
 document
   .getElementById("darkModeToggle")!
   .addEventListener("click", toggleDarkMode)
-const darkModeHTML = `<i class="fas fa-moon" style="padding-right: 10px;"></i><span id="darkModeText"> Light Mode</span>`
-const lightModeHTML = `<i class="fas fa-sun" style="padding-right: 10px;"></i><span id="darkModeText"> Dark Mode</span>`
+const darkModeHTML = `<i class="fas fa-moon" ></i>`
+const lightModeHTML = `<i class="fas fa-sun" ></i>`
 
 setTheme()
 

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;