feat: enhance WIP status message with markdown support

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.",

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<SimpleChildrenProps>) {
+  return <>{children}</>;
+}
+
+function AnchorRenderer({ href = '', children }: Readonly<AnchorProps>) {
+  return (
+    <Link href={href} target="_blank" rel="noopener noreferrer" inline>
+      {children}
+    </Link>
+  );
+}
+
+type WipInlineMarkdownProps = {
+  mdText: string;
+};
+
+function WipInlineMarkdown({ mdText }: Readonly<WipInlineMarkdownProps>) {
+  const markdownComponents = useMemo(
+    () => ({
+      p: ParagraphRenderer,
+      a: AnchorRenderer,
+    }),
+    [],
+  );
+
+  return (
+    <ReactMarkdown components={markdownComponents} skipHtml={false}>
+      {mdText}
+    </ReactMarkdown>
+  );
+}
+
+// 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}
+        <WipInlineMarkdown mdText={message} />
       </GlobalAlert>
     )
   );