Merge branch 'master' into catalogcard

Author: amitamrutiya

src/custom/LearningCard/LearningCard.tsx

@@ -25,11 +25,19 @@ interface Tutorial {
 
 interface Props {
   tutorial: Tutorial;
-  path: string;
+  path?: string;
   courseCount: number;
   courseType: string;
 }
 
+const OptionalLink: React.FC<React.PropsWithChildren<{ path?: string }>> = ({ path, children }) => {
+  if (!path) {
+    return <>{children}</>;
+  }
+
+  return <CardLink href={path}>{children}</CardLink>;
+};
+
 const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType }) => {
   return (
     <CardWrapper>
@@ -57,7 +65,7 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
           </CardParent>
         </Card2>
       ) : (
-        <CardLink href={path}>
+        <OptionalLink path={path}>
           <CardActive>
             <CardParent style={{ borderTop: `5px solid ${tutorial.frontmatter.themeColor}` }}>
               <div>
@@ -88,7 +96,7 @@ const LearningCard: React.FC<Props> = ({ tutorial, path, courseCount, courseType
               </div>
             </CardParent>
           </CardActive>
-        </CardLink>
+        </OptionalLink>
       )}
     </CardWrapper>
   );

src/custom/Markdown/index.tsx

@@ -2,6 +2,7 @@ import ReactMarkdown from 'react-markdown';
 import rehypeRaw from 'rehype-raw';
 import remarkGfm from 'remark-gfm';
 import {
+  BasicAnchorMarkdown,
   StyledMarkdown,
   StyledMarkdownBlockquote,
   StyledMarkdownH1,
@@ -97,3 +98,27 @@ export const RenderMarkdownTooltip: React.FC<RenderMarkdownProps> = ({ content }
     </ReactMarkdown>
   );
 };
+
+// Markdown support for notifications markdown content
+export const BasicMarkdown: React.FC<RenderMarkdownProps> = ({ content }) => {
+  return (
+    <ReactMarkdown
+      remarkPlugins={[remarkGfm]}
+      components={{
+        a: ({ ...props }) => (
+          <BasicAnchorMarkdown
+            onClick={(e) => {
+              window.open(props.href, '_blank');
+              e.stopPropagation();
+            }}
+            as="a"
+          >
+            {props.children}
+          </BasicAnchorMarkdown>
+        )
+      }}
+    >
+      {content}
+    </ReactMarkdown>
+  );
+};

src/custom/Markdown/style.tsx

@@ -10,6 +10,15 @@ export const StyledMarkdown = styled('a')(({ theme }) => ({
   cursor: 'pointer'
 }));
 
+// anchor style for notifications markdown content
+export const BasicAnchorMarkdown = styled('a')(() => ({
+  textDecoration: 'none',
+  '&:hover': {
+    textDecoration: 'underline'
+  },
+  cursor: 'pointer'
+}));
+
 export const StyledMarkdownP = styled('p')(({ theme }) => ({
   color: theme.palette.text.default,
   marginBlock: '0px',

src/custom/index.tsx

@@ -31,7 +31,7 @@ import { useWindowDimensions } from './Helpers/Dimension';
 import { useNotificationHandler } from './Helpers/Notification';
 import { ColView, updateVisibleColumns } from './Helpers/ResponsiveColumns/responsive-coulmns.tsx';
 import { LearningCard } from './LearningCard';
-import { RenderMarkdown } from './Markdown';
+import { BasicMarkdown, RenderMarkdown } from './Markdown';
 import { ModalCard } from './ModalCard';
 import PopperListener, { IPopperListener } from './PopperListener';
 import PromptComponent from './Prompt';
@@ -110,7 +110,7 @@ export {
 
 // Markdown
 export { StyledMarkdown } from './Markdown/style';
-export { RenderMarkdown };
+export { BasicMarkdown, RenderMarkdown };
 
 // Stepper
 export { CustomizedStepper, useStepper } from './Stepper';