From 1299104aa54bcbbb17b7d7ac26c45105a79f1413 Mon Sep 17 00:00:00 2001 From: Helen Chong <119173961+helenclx@users.noreply.github.com> Date: Fri, 12 Apr 2024 00:47:15 +0800 Subject: [PATCH] Make the header a WebC component --- src/_includes/main/base.njk | 6 +- src/_includes/main/header-main.webc | 223 ++++++++++++++++++++++++++++ src/_includes/main/header.njk | 10 -- src/assets/css/main.css | 27 ---- src/assets/js/events.js | 183 ----------------------- 5 files changed, 226 insertions(+), 223 deletions(-) create mode 100644 src/_includes/main/header-main.webc delete mode 100644 src/_includes/main/header.njk delete mode 100644 src/assets/js/events.js diff --git a/src/_includes/main/base.njk b/src/_includes/main/base.njk index 989c7511..5bce081d 100644 --- a/src/_includes/main/base.njk +++ b/src/_includes/main/base.njk @@ -37,14 +37,14 @@ {# JavaScript #} - - {% if toc %} {% endif %} {{ title }} | Leilukin's Hub - {% include "main/header.njk" %} + {% renderTemplate "webc" %} + + {% endrenderTemplate %} {% renderTemplate "webc" %} {% endrenderTemplate %} diff --git a/src/_includes/main/header-main.webc b/src/_includes/main/header-main.webc new file mode 100644 index 00000000..e1660021 --- /dev/null +++ b/src/_includes/main/header-main.webc @@ -0,0 +1,223 @@ +
+ +
+
+ +
+
+ + + + diff --git a/src/_includes/main/header.njk b/src/_includes/main/header.njk deleted file mode 100644 index 1562b651..00000000 --- a/src/_includes/main/header.njk +++ /dev/null @@ -1,10 +0,0 @@ -
- -
-
- -
-
\ No newline at end of file diff --git a/src/assets/css/main.css b/src/assets/css/main.css index 361294be..ce7a3c01 100644 --- a/src/assets/css/main.css +++ b/src/assets/css/main.css @@ -229,33 +229,6 @@ dd { grid-column-start: 2; } -/* HEADER COMPONENT */ -.main-header { - width: 100%; - background-color: var(--clr-main-header-bg); - display: flex; - flex-direction: column; - justify-content: center; - text-align: center; -} - -.main-header__top-bar { - background-color: var(--clr-navbar-bg); - width: 100%; - padding: 0.5em 0; -} - -.main-header__img { - display: grid; - place-content: center; -} - -.main-header img { - object-fit: scale-down; - overflow: hidden; - filter: drop-shadow(0.1rem 0.1rem 0.2rem black); -} - /* MAIN CONTENT */ main, .content-container, diff --git a/src/assets/js/events.js b/src/assets/js/events.js deleted file mode 100644 index 46bcd3c0..00000000 --- a/src/assets/js/events.js +++ /dev/null @@ -1,183 +0,0 @@ -// const header = document.querySelector(".main-header"); - -const todayEvent = getTodayEvent(); -const headerTopBarEl = document.querySelector(".main-header__top-bar"); -const headerImgEl = document.querySelector(".main-header__img"); - -if (todayEvent != "No event") { - if (todayEvent == "Leilukin's Birthday" || todayEvent == "Leilukin's Hub Anniversary") { - headerTopBarEl.innerHTML = getBlurbHtml(todayEvent); - } else { - headerImgEl.classList.add(getBanner(todayEvent)); - headerTopBarEl.innerHTML = getBlurbHtml(todayEvent); - } -} else { - headerTopBarEl.textContent = "Welcome to Leilukin's Hub!" -}; - -function getTodayEvent() { - const date = new Date(); - const month = date.getMonth() + 1; - const day = date.getDate(); - - if (month == 3 && day == 1) - return "Zero Discrimination Day"; - else if (month == 3 && day == 31) - return "Trans Day of Visibility"; - else if (month == 4 && day == 6) - return "International Asexuality Day"; - else if (month == 4 && day == 26) - return "Lesbian Visibility Day"; - else if (month == 5 && day == 17) - return "IDAHOBIT"; - else if (month == 5 && day == 19) - return "Agender Pride Day"; - else if (month == 5 && day == 25) - return "Pansexual and Panromantic Awareness & Visibility Day"; - else if (month == 6) - return "Pride Month"; - else if (month == 7 && day == 14) - return "Non-Binary People's Day"; - else if (month == 7 && day == 28) - return "Leilukin's Birthday"; - else if (month == 9 && day == 11) - return "Leilukin's Hub Anniversary"; - else if (month == 9 && day == 23) - return "Bi Visibility Day"; - else if (month == 10 && day == 8) - return "International Lesbian Day"; - else if (month == 10 && day == 11) - return "National Coming Out Day"; - else if (month == 10 && day == 26) - return "Intersex Awareness Day"; - else - return "No event"; -} - -function getBanner(day) { - switch (day) { - case "Zero Discrimination Day": - return "flag-progress-intersex"; - break; - case "Trans Day of Visibility": - return "flag-trans"; - break; - case "International Asexuality Day": - return "flag-ace"; - break; - case "Lesbian Visibility Day": - return "flag-lesbian"; - break; - case "IDAHOBIT": - return "flag-progress"; - break; - case "Agender Pride Day": - return "flag-agender"; - break; - case "Pansexual and Panromantic Awareness & Visibility Day": - return "flag-pan"; - break; - case "Pride Month": - return "flag-progress-intersex"; - break; - case "Non-Binary People's Day": - return "flag-non-binary"; - break; - case "Bi Visibility Day": - return "flag-bi"; - break; - case "International Lesbian Day": - return "flag-lesbian"; - break; - case "National Coming Out Day": - return "flag-rainbow"; - break; - case "Intersex Awareness Day": - return "flag-intersex"; - break; - default: - return ""; - } -} - -function getBlurbHtml(day) { - switch (day) { - case "Zero Discrimination Day": - return ` - Today is Zero Discrimination Day - `; - break; - case "Trans Day of Visibility": - return ` - Today is Trans Day of Visibility - `; - break; - case "International Asexuality Day": - return ` - Today is International Asexuality Day - `; - break; - case "Lesbian Visibility Day": - return ` - Today is Lesbian Visibility Day - `; - break; - case "IDAHOBIT": - return ` - Today is International Day Against Homophobia, Biphobia and Transphobia - `; - break; - case "Agender Pride Day": - return ` - Today is Agender Pride Day - `; - break; - case "Pansexual and Panromantic Awareness & Visibility Day": - return ` - Today is Pansexual and Panromantic Visibility Day - `; - break; - case "Pride Month": - return ` - Happy Pride Month! - `; - break; - case "Non-Binary People's Day": - return ` - Today is Non-Binary People's Day - `; - break; - case "Leilukin's Birthday": - return ` - Today is Leilukin's birthday - `; - break; - case "Leilukin's Hub Anniversary": - return ` - Today is the anniversary of the launch of Leilukin's Hub - `; - break; - case "Bi Visibility Day": - return ` - Today is Bi Visibility Day - `; - break; - case "International Lesbian Day": - return ` - Today is International Lesbian Day - `; - break; - case "National Coming Out Day": - return ` - Today is National Coming Out Day - `; - break; - case "Intersex Awareness Day": - return ` - Today is Intersex Awareness Day - `; - break; - default: - return ``; - } -}