diff --git a/.env.development b/.env.development index e1af66c..fa58c26 100644 --- a/.env.development +++ b/.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) diff --git a/app/_components/AlertMessage.module.scss b/app/_components/AlertMessage.module.scss new file mode 100644 index 0000000..a60476b --- /dev/null +++ b/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; + } +} diff --git a/app/_components/AlertMessage.tsx b/app/_components/AlertMessage.tsx new file mode 100644 index 0000000..3da3b9c --- /dev/null +++ b/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 ( +
{ title }
+ +