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' + /> + )} +