diff --git a/packages/pxweb2/public/locales/en/translation.json b/packages/pxweb2/public/locales/en/translation.json index e9f6d8df0..f0c3358de 100644 --- a/packages/pxweb2/public/locales/en/translation.json +++ b/packages/pxweb2/public/locales/en/translation.json @@ -48,7 +48,7 @@ "error": "Error:" }, "status_messages": { - "welcome": "Welcome to the new PxWeb 2.0! We're still improving to help you find and use the figures you need 📊✨", + "welcome": "Welcome to the new PxWeb 2.0! We're still improving to help you find and use the figures you need 📊✨. [More about PxWeb](https://www.pxtools.net/)", "drawer_view": "Graph display is under construction.", "drawer_save_file": "More file formats are in the works.", "drawer_save_api": "Feature for API query is under construction.", diff --git a/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx b/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx index 717f03ced..54f01a63b 100644 --- a/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx +++ b/packages/pxweb2/src/app/components/Banners/WipStatusMessage.tsx @@ -1,25 +1,61 @@ -import { useEffect, useState, useCallback } from 'react'; +import { useEffect, useState, useCallback, useMemo } from 'react'; import { useTranslation } from 'react-i18next'; -import { GlobalAlert } from '@pxweb2/pxweb2-ui'; +import { GlobalAlert, Link } from '@pxweb2/pxweb2-ui'; import classes from './WipStatusMessage.module.scss'; +import ReactMarkdown from 'react-markdown'; const SESSION_STORAGE_KEY = 'pxweb2.wip_status_message_dismissed'; +// Simple components to render markdown elements with custom styles and behavior +type SimpleChildrenProps = { children?: React.ReactNode }; +type AnchorProps = { href?: string; children?: React.ReactNode }; + +function ParagraphRenderer({ children }: Readonly) { + return <>{children}; +} + +function AnchorRenderer({ href = '', children }: Readonly) { + return ( + + {children} + + ); +} + +type WipInlineMarkdownProps = { + mdText: string; +}; + +function WipInlineMarkdown({ mdText }: Readonly) { + const markdownComponents = useMemo( + () => ({ + p: ParagraphRenderer, + a: AnchorRenderer, + }), + [], + ); + + return ( + + {mdText} + + ); +} + +// Main component to display the WIP status message with dismiss functionality export default function WipStatusMessage() { const { t } = useTranslation(); const [isDismissed, setIsDismissed] = useState(false); useEffect(() => { const dismissed = - typeof window !== 'undefined' - ? window.sessionStorage.getItem(SESSION_STORAGE_KEY) - : null; + globalThis.sessionStorage?.getItem(SESSION_STORAGE_KEY) ?? null; setIsDismissed(dismissed === 'true'); }, []); const handleDismiss = useCallback(() => { - sessionStorage.setItem(SESSION_STORAGE_KEY, 'true'); + globalThis.sessionStorage?.setItem(SESSION_STORAGE_KEY, 'true'); setIsDismissed(true); }, []); @@ -38,7 +74,7 @@ export default function WipStatusMessage() { className={classes.welcomeAlert} onDismissed={handleDismiss} > - {message} + ) );