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 }

+

+

+
+ ); +}; + +export default AlertMessage; diff --git a/app/fonts.ts b/app/fonts.ts index 380c688..41f84f8 100644 --- a/app/fonts.ts +++ b/app/fonts.ts @@ -14,7 +14,7 @@ const UbuntuMonoFont = Ubuntu_Mono({ }); const UbuntuFont = Ubuntu({ - weight: "400", + weight: ["400", "700"], subsets: ["latin"], variable: "--font-base" }); diff --git a/app/page.module.scss b/app/page.module.scss index 17dc97b..1e863b9 100644 --- a/app/page.module.scss +++ b/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 { diff --git a/app/page.tsx b/app/page.tsx index 619f222..ab73419 100644 --- a/app/page.tsx +++ b/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 = () => (
- + - - - - - +
+ + + + + + + +
);