nicolium: Add note to the pl.mkljczk.pl deployment

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

.github/workflows/pl-fe.yaml

@@ -79,7 +79,7 @@ jobs:
         NODE_ENV: production
       working-directory: ./packages/pl-fe
       run: |
-          WITH_LANDING_PAGE=true pnpm build
+          BANNER_HTML="pl.mkljczk.pl runs Nicolium's \`develop\` branch, which can break sometimes. For a more stable experience, use <a href=\"https://web.nicolium.app\" target=\"_blank\" rel=\"noopener noreferrer\">web.nicolium.app</a>." WITH_LANDING_PAGE=true pnpm build
           cp dist/index.html dist/404.html
           cp pl-fe.zip dist/pl-fe.zip
 

packages/pl-fe/src/build-config.ts

@@ -4,7 +4,7 @@
  */
 
 const env = compileTime(() => {
-  const { NODE_ENV, BACKEND_URL, FE_SUBDIRECTORY, WITH_LANDING_PAGE } = process.env;
+  const { NODE_ENV, BACKEND_URL, FE_SUBDIRECTORY, WITH_LANDING_PAGE, BANNER_HTML } = process.env;
 
   const sanitizeURL = (url: string | undefined = ''): string => {
     try {
@@ -22,11 +22,12 @@ const env = compileTime(() => {
     BACKEND_URL: sanitizeURL(BACKEND_URL),
     FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
     WITH_LANDING_PAGE: WITH_LANDING_PAGE === 'true',
+    BANNER_HTML,
   };
 });
 
-const { NODE_ENV, BACKEND_URL, FE_SUBDIRECTORY, WITH_LANDING_PAGE } = env;
+const { NODE_ENV, BACKEND_URL, FE_SUBDIRECTORY, WITH_LANDING_PAGE, BANNER_HTML } = env;
 
 export type PlFeEnv = typeof env;
 
-export { NODE_ENV, BACKEND_URL, FE_SUBDIRECTORY, WITH_LANDING_PAGE };
+export { NODE_ENV, BACKEND_URL, FE_SUBDIRECTORY, WITH_LANDING_PAGE, BANNER_HTML };

packages/pl-fe/src/features/compose/components/warning.tsx

@@ -1,4 +1,5 @@
 import { animated, useSpring } from '@react-spring/web';
+import clsx from 'clsx';
 import React from 'react';
 
 import { useSettings } from '@/stores/settings';
@@ -6,10 +7,15 @@ import { useSettings } from '@/stores/settings';
 interface IWarning {
   message: React.ReactNode;
   animated?: boolean;
+  className?: string;
 }
 
 /** Warning message displayed in ComposeForm. */
-const Warning: React.FC<IWarning> = ({ message, animated: animate }) => {
+const Warning: React.FC<IWarning> = ({
+  message,
+  animated: animate,
+  className: customClassName,
+}) => {
   const { reduceMotion } = useSettings();
 
   const styles = useSpring({
@@ -24,8 +30,10 @@ const Warning: React.FC<IWarning> = ({ message, animated: animate }) => {
     immediate: !animate || reduceMotion,
   });
 
-  const className =
-    'rounded border border-solid border-gray-400 bg-transparent px-2.5 py-2 text-xs text-gray-900 dark:border-gray-800 dark:text-white';
+  const className = clsx(
+    'rounded border border-solid border-gray-400 bg-transparent px-2.5 py-2 text-xs text-gray-900 dark:border-gray-800 dark:text-white',
+    customClassName,
+  );
 
   if (!message) return null;
 

packages/pl-fe/src/layouts/home-layout.tsx

@@ -4,8 +4,11 @@ import React, { useRef } from 'react';
 import { useIntl } from 'react-intl';
 
 import { uploadCompose } from '@/actions/compose';
+import { BANNER_HTML } from '@/build-config';
 import Avatar from '@/components/ui/avatar';
 import Layout from '@/components/ui/layout';
+import Text from '@/components/ui/text';
+import Warning from '@/features/compose/components/warning';
 import LinkFooter from '@/features/ui/components/link-footer';
 import {
   WhoToFollowPanel,
@@ -90,6 +93,13 @@ const HomeLayout = () => {
           </div>
         )}
 
+        {BANNER_HTML && BANNER_HTML.length > 0 && (
+          <Warning
+            message={<Text theme='muted' dangerouslySetInnerHTML={{ __html: BANNER_HTML }} />}
+            className='my-4 sm:mx-4'
+          />
+        )}
+
         <Outlet />
       </Layout.Main>