pl-fe: wip with_landing_page mode

Signed-off-by: Nicole Mikołajczyk <git@mkljczk.pl>

.github/workflows/pl-fe.yaml

@@ -34,13 +34,11 @@ jobs:
       working-directory: ./packages/pl-fe
       run: yarn lint
 
-    - name: build
+    - name: Build
       env:
         NODE_ENV: production
       working-directory: ./packages/pl-fe
-      run: |
-          yarn build
-          cp dist/index.html dist/404.html
+      run: yarn build
 
     - name: i18n
       working-directory: ./packages/pl-fe
@@ -57,7 +55,16 @@ jobs:
 
     - name: Include archive
       working-directory: ./packages/pl-fe/dist
-      run: zip -r pl-fe.zip .
+      run: zip -r ../pl-fe.zip .
+
+    - name: build
+      env:
+        NODE_ENV: production
+      working-directory: ./packages/pl-fe
+      run: |
+          WITH_LANDING_PAGE=true yarn build
+          cp dist/index.html dist/404.html
+          cp pl-fe.zip dist/pl-fe.zip
 
     - name: Install pl-api deps
       working-directory: ./packages/pl-api

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

@@ -12,6 +12,7 @@ const {
   NODE_ENV,
   BACKEND_URL,
   FE_SUBDIRECTORY,
+  WITH_LANDING_PAGE,
 } = process.env;
 
 const sanitizeURL = (url: string | undefined = ''): string => {
@@ -28,6 +29,7 @@ const env = {
   NODE_ENV: NODE_ENV || 'development',
   BACKEND_URL: sanitizeURL(BACKEND_URL),
   FE_SUBDIRECTORY: sanitizeBasename(FE_SUBDIRECTORY),
+  WITH_LANDING_PAGE: WITH_LANDING_PAGE === 'true',
 };
 
 export type PlFeEnv = typeof env;

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

@@ -4,4 +4,5 @@ export const {
   NODE_ENV,
   BACKEND_URL,
   FE_SUBDIRECTORY,
+  WITH_LANDING_PAGE,
 } = import.meta.compileTime<PlFeEnv>('./build-config-compiletime.ts');

packages/pl-fe/src/features/ui/components/link-footer.tsx

@@ -1,32 +1,45 @@
 import React from 'react';
-import { FormattedMessage } from 'react-intl';
+import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 
+import { WITH_LANDING_PAGE } from 'pl-fe/build-config';
 import Text from 'pl-fe/components/ui/text';
 import Emojify from 'pl-fe/features/emoji/emojify';
 import { usePlFeConfig } from 'pl-fe/hooks/use-pl-fe-config';
 import sourceCode from 'pl-fe/utils/code';
 
+const messages = defineMessages({
+  footerNotice: { id: 'getting_started.footer_notice', defaultMessage: 'Proudly made in Poland. {emoji}' },
+});
+
 const LinkFooter: React.FC = (): JSX.Element => {
+  const intl = useIntl();
   const plFeConfig = usePlFeConfig();
 
   return (
-    <Text theme='muted' size='sm'>
-      {plFeConfig.linkFooterMessage ? (
-        <span className='inline-block align-middle'>
-          <Emojify text={plFeConfig.linkFooterMessage} />
-        </span>
-      ) : (
-        <FormattedMessage
-          id='getting_started.open_source_notice'
-          defaultMessage='{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).'
-          values={{
-            code_name: sourceCode.displayName,
-            code_link: <Text theme='subtle' tag='span'><a className='underline' href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a></Text>,
-            code_version: sourceCode.version,
-          }}
-        />
+    <>
+      <Text theme='muted' size='sm'>
+        {plFeConfig.linkFooterMessage ? (
+          <span className='inline-block align-middle'>
+            <Emojify text={plFeConfig.linkFooterMessage} />
+          </span>
+        ) : (
+          <FormattedMessage
+            id='getting_started.open_source_notice'
+            defaultMessage='{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).'
+            values={{
+              code_name: sourceCode.displayName,
+              code_link: <Text theme='subtle' tag='span'><a className='underline' href={sourceCode.url} rel='noopener' target='_blank'>{sourceCode.repository}</a></Text>,
+              code_version: sourceCode.version,
+            }}
+          />
+        )}
+      </Text>
+      {WITH_LANDING_PAGE && (
+        <Text theme='muted' size='sm'>
+          <Emojify text={intl.formatMessage(messages.footerNotice, { emoji: '🇵🇱🏳️‍⚧️' })} />
+        </Text>
       )}
-    </Text>
+    </>
   );
 };
 

packages/pl-fe/src/locales/en.json

@@ -872,6 +872,7 @@
   "gdpr.title": "{siteTitle} uses cookies",
   "generic.logo": "Logo",
   "generic.saved": "Saved",
+  "getting_started.footer_notice": "Proudly made in Poland. {emoji}",
   "getting_started.open_source_notice": "{code_name} is open source software. You can contribute or report issues at {code_link} (v{code_version}).",
   "group.cancel_request": "Cancel request",
   "group.delete.success": "Group successfully deleted",