feat!: Added alert banner

.env.development

@@ -11,5 +11,6 @@ SMTP_TO_EMAIL=email			# Email to which emails will be sent
 
 DOMAIN_NAME=example.com		# Your domain name
 RESUME_URL=URL				# Location of the resume PDF
+ALERT_TEXT_URL=URL			# URL of a txt file with urgent message to be displayed (see app/_components/AlertMessage.tsx)
 CLARITY_ID=string			# Clarity Analytics ID (optional, remove to disable)
 CLARITY_CONSENT=1			# 1 if you need to request explicit consent from user, 0 if not (requires CLARITY_ID)

app/_components/AlertMessage.module.scss

@@ -0,0 +1,23 @@
+@import "../theme.scss";
+
+.alertBox
+{
+	@include maxCenter;
+	@include flex(row);
+	align-items: center;
+	gap: $spacingM;
+
+	border: 2px solid $colorStatusWarningBorderActive;
+	padding: $spacingS $spacingM;
+
+	.icon
+	{
+		font-size: $fontSizeHero900;
+		color: $colorStatusWarningForeground1;
+	}
+
+	.title
+	{
+		@include body1Stronger;
+	}
+}

app/_components/AlertMessage.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import cls from "./AlertMessage.module.scss";
+import { ChatWarningRegular } from "@fluentui/react-icons";
+
+/**
+ * This alert box displays a custom message at the top of the homepage.
+ *
+ * It retrieves the message from a text file located at ALERT_TEXT_URL.
+ * Useful when needed to display a quick urgent message without recompiling the website.
+ *
+ * The message is shown when following criterias are met:
+ * - ALERT_TEXT_URL variable is set
+ * - The file located at ALERT_TEXT_URL is accessible, not empty, and returns successfull HTTP status code (2xx)
+ */
+
+const AlertMessage: React.FC = async () =>
+{
+	if (!process.env.ALERT_TEXT_URL)
+		return null;
+
+	const response: Response = await fetch(process.env.ALERT_TEXT_URL, { cache: "no-cache" });
+	const alertText: string = await response.text();
+
+	if (!response.ok || !alertText)
+		return null;
+
+	const title: string = alertText.split("\n", 1)[0];
+	const message: string = alertText.substring(title.length);
+
+	return (
+		<div role="alert" className={ cls.alertBox } aria-label={ alertText }>
+			<ChatWarningRegular className={ cls.icon } />
+			<div>
+				<p className={ cls.title }>{ title }</p>
+				<p dangerouslySetInnerHTML={ { __html: message } } />
+			</div>
+		</div>
+	);
+};
+
+export default AlertMessage;

app/fonts.ts

@@ -14,7 +14,7 @@ const UbuntuMonoFont = Ubuntu_Mono({
 });
 
 const UbuntuFont = Ubuntu({
-	weight: "400",
+	weight: ["400", "700"],
 	subsets: ["latin"],
 	variable: "--font-base"
 });

app/page.module.scss

@@ -3,8 +3,14 @@
 .page
 {
 	@include flex(column);
+	gap: $spacingXL;
 	max-width: unset;
-	gap: 8vw; // Bigger gap on bigger devices
+
+	> article
+	{
+		@include flex(column);
+		gap: 8vw; // Bigger gap on bigger devices
+	}
 
 	h2
 	{

app/page.tsx

@@ -1,4 +1,5 @@
 import React from "react";
+import AlertMessage from "./_components/AlertMessage";
 import FrontSection from "./_data/FrontSection";
 import AboutSection from "./_page_sections/AboutSection";
 import ContactSection from "./_page_sections/ContactSection";
@@ -10,13 +11,17 @@ import cls from "./page.module.scss";
 const HomePage: React.FC = () => (
 	<main className={ cls.page }>
 
-		<FrontSection />
+		<AlertMessage />
 
-		<SkillsSection />
-		<ProjectsSection />
-		<ExperienceSection />
-		<AboutSection />
-		<ContactSection />
+		<article>
+			<FrontSection />
+
+			<SkillsSection />
+			<ProjectsSection />
+			<ExperienceSection />
+			<AboutSection />
+			<ContactSection />
+		</article>
 	</main>
 );