diff --git a/.github/workflows/pl-fe.yaml b/.github/workflows/pl-fe.yaml
index 31523cc79..a5ae393a2 100644
--- a/.github/workflows/pl-fe.yaml
+++ b/.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 web.nicolium.app." WITH_LANDING_PAGE=true pnpm build
cp dist/index.html dist/404.html
cp pl-fe.zip dist/pl-fe.zip
diff --git a/packages/pl-fe/src/build-config.ts b/packages/pl-fe/src/build-config.ts
index 04deae652..7e2fa6a5f 100644
--- a/packages/pl-fe/src/build-config.ts
+++ b/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 };
diff --git a/packages/pl-fe/src/features/compose/components/warning.tsx b/packages/pl-fe/src/features/compose/components/warning.tsx
index 6203b40cd..5b2c9497b 100644
--- a/packages/pl-fe/src/features/compose/components/warning.tsx
+++ b/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 = ({ message, animated: animate }) => {
+const Warning: React.FC = ({
+ message,
+ animated: animate,
+ className: customClassName,
+}) => {
const { reduceMotion } = useSettings();
const styles = useSpring({
@@ -24,8 +30,10 @@ const Warning: React.FC = ({ 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;
diff --git a/packages/pl-fe/src/layouts/home-layout.tsx b/packages/pl-fe/src/layouts/home-layout.tsx
index 82cf5a14d..471047759 100644
--- a/packages/pl-fe/src/layouts/home-layout.tsx
+++ b/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 = () => {
)}
+ {BANNER_HTML && BANNER_HTML.length > 0 && (
+ }
+ className='my-4 sm:mx-4'
+ />
+ )}
+