Support GitHub flavored alerts in README files (#3854)

Closes #3842

Signed-off-by: Cintia Sanchez Garcia <[email protected]>

web/package.json

@@ -30,6 +30,7 @@
     "react-router-dom": "^6.23.1",
     "react-syntax-highlighter": "^15.5.0",
     "regexify-string": "^1.0.17",
+    "rehype-github-alerts": "^3.0.0",
     "remark-gfm": "^3.0.1",
     "remark-parse": "^10.0.2",
     "remark-strip-html": "^1.0.2",

web/src/layout/App.css

@@ -22,6 +22,71 @@ select:focus {
   overflow: hidden;
 }
 
+/* GitHub alerts */
+.markdown-alert {
+  padding: 0.5rem 1rem;
+  margin-bottom: 16px;
+  border-left: 0.25em solid var(--github-alert-default-color);
+}
+
+.markdown-alert > :first-child {
+  margin-top: 0;
+}
+
+.markdown-alert > :last-child {
+  margin-bottom: 0;
+}
+
+.markdown-alert-note {
+  border-left-color: var(--github-alert-note-color);
+}
+
+.markdown-alert-tip {
+  border-left-color: var(--github-alert-tip-color);
+}
+
+.markdown-alert-important {
+  border-left-color: var(--github-alert-important-color);
+}
+
+.markdown-alert-warning {
+  border-left-color: var(--github-alert-warning-color);
+}
+
+.markdown-alert-caution {
+  border-left-color: var(--github-alert-caution-color);
+}
+
+.markdown-alert-title {
+  display: flex;
+  margin-bottom: 4px;
+  align-items: center;
+}
+
+.markdown-alert-title > svg {
+  margin-right: 8px;
+}
+
+.markdown-alert-note .markdown-alert-title {
+  color: var(--github-alert-note-color);
+}
+
+.markdown-alert-tip .markdown-alert-title {
+  color: var(--github-alert-tip-color);
+}
+
+.markdown-alert-important .markdown-alert-title {
+  color: var(--github-alert-important-color);
+}
+
+.markdown-alert-warning .markdown-alert-title {
+  color: var(--github-alert-warning-color);
+}
+
+.markdown-alert-caution .markdown-alert-title {
+  color: var(--github-alert-caution-color);
+}
+
 @media only screen and (max-width: 991.98px) {
   .noScroll-sidebar.noScroll-lg,
   .noScroll-modal.noScroll-lg {

web/src/layout/package/index.test.tsx

@@ -7,6 +7,7 @@ import API from '../../api';
 import { ErrorKind, Package, SearchResults } from '../../types';
 import { prepareQueryString } from '../../utils/prepareQueryString';
 import PackageView from './index';
+
 jest.mock('../../api');
 jest.mock('../../utils/updateMetaIndex');
 jest.mock('react-apexcharts', () => () => <div>Chart</div>);
@@ -15,6 +16,7 @@ jest.mock('react-markdown', () => (props: any) => {
   return <>{props.children}</>;
 });
 jest.mock('remark-gfm', () => () => <div />);
+jest.mock('rehype-github-alerts', () => () => <div />);
 jest.mock('../../utils/bannerDispatcher', () => ({
   getBanner: () => null,
 }));

web/src/layout/package/readme/Readme.tsx

@@ -7,6 +7,7 @@ import { ElementType, memo, useCallback, useEffect, useLayoutEffect, useRef, use
 import ReactMarkdown from 'react-markdown';
 import SyntaxHighlighter from 'react-syntax-highlighter';
 import { github } from 'react-syntax-highlighter/dist/cjs/styles/hljs';
+import { rehypeGithubAlerts } from 'rehype-github-alerts';
 import remarkGfm from 'remark-gfm';
 
 import useBreakpointDetect from '../../../hooks/useBreakpointDetect';
@@ -40,6 +41,7 @@ interface LinkProps {
 
 interface BasicProps {
   children: JSX.Element | JSX.Element[];
+  className?: string;
 }
 
 const AVAILABLE_LANGUAGES = [
@@ -344,6 +346,8 @@ const Readme = (props: Props) => {
   );
 
   const Paragraph: ElementType = (data: BasicProps) => {
+    if (data.className && data.className === 'markdown-alert-title')
+      return <p className={`fw-semibold ${data.className}`}>{data.children}</p>;
     const isOneChild = data.children && isArray(data.children) && data.children.length === 1;
     if (isUndefined(data.children)) return null;
     let content = data.children;
@@ -393,6 +397,7 @@ const Readme = (props: Props) => {
       linkTarget="_blank"
       skipHtml
       remarkPlugins={[[remarkGfm, { tableCellPadding: false }]]}
+      rehypePlugins={[rehypeGithubAlerts]}
       components={{
         pre: Pre,
         code: Code,

web/src/layout/package/readme/index.test.tsx

@@ -1,11 +1,13 @@
 import { render, screen } from '@testing-library/react';
 
 import ReadmeWrapper from './index';
+
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 jest.mock('react-markdown', () => (props: any) => {
   return <>{props.children}</>;
 });
 jest.mock('remark-gfm', () => () => <div />);
+jest.mock('rehype-github-alerts', () => () => <div />);
 
 const defaultProps = {
   packageName: 'package-name',

web/src/themes/dark.scss

@@ -61,6 +61,14 @@
 
   --font-color-light: #cbd3da;
 
+  // GitHub alerts
+  --github-alert-default-color: rgb(48, 54, 61);
+  --github-alert-note-color: rgb(31, 111, 235);
+  --github-alert-tip-color: rgb(35, 134, 54);
+  --github-alert-important-color: rgb(137, 87, 229);
+  --github-alert-warning-color: rgb(158, 106, 3);
+  --github-alert-caution-color: rgb(248, 81, 73);
+
   body {
     background-color: #2c2e31;
     color: var(--color-font);

web/src/themes/light.scss

@@ -34,6 +34,14 @@
   --color-activity-3: #30a14e;
   --color-activity-4: #216e39;
 
+  // GitHub alerts
+  --github-alert-default-color: rgb(208, 215, 222);
+  --github-alert-note-color: rgb(9, 105, 218);
+  --github-alert-tip-color: rgb(26, 127, 55);
+  --github-alert-important-color: rgb(130, 80, 223);
+  --github-alert-warning-color: rgb(191, 135, 0);
+  --github-alert-caution-color: rgb(207, 34, 46);
+
   // $theme-colors for Bootstrap
   $color1: #417598;
   $color2: #2d4857;