add Readme blockquote icons, few MD content render tweaks (#2282)

Author: Simek

components/Icons/index.tsx

@@ -1010,3 +1010,142 @@ export function Module({ width = 24, height = 24, style }: IconProps) {
     </Svg>
   );
 }
+
+export function NoteBlockquote({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <Circle
+        cx="128"
+        cy="128"
+        r="96"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Path
+        d="M120,120a8,8,0,0,1,8,8v40a8,8,0,0,0,8,8"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Circle cx="124" cy="84" r="12" fill="currentColor" />
+    </Svg>
+  );
+}
+
+export function TipBlockquote({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <Line
+        x1="88"
+        y1="232"
+        x2="168"
+        y2="232"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Path
+        d="M78.7,167A79.87,79.87,0,0,1,48,104.45C47.76,61.09,82.72,25,126.07,24a80,80,0,0,1,51.34,142.9A24.3,24.3,0,0,0,168,186v6a8,8,0,0,1-8,8H96a8,8,0,0,1-8-8v-6A24.11,24.11,0,0,0,78.7,167Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Path
+        d="M136,56c20,3.37,36.61,20,40,40"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+    </Svg>
+  );
+}
+
+export function WarningBlockquote({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <Path
+        d="M142.41,40.22l87.46,151.87C236,202.79,228.08,216,215.46,216H40.54C27.92,216,20,202.79,26.13,192.09L113.59,40.22C119.89,29.26,136.11,29.26,142.41,40.22Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Line
+        x1="128"
+        y1="144"
+        x2="128"
+        y2="104"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Circle cx="128" cy="180" r="12" fill="currentColor" />
+    </Svg>
+  );
+}
+
+export function CautionBlockquote({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <Line
+        x1="128"
+        y1="136"
+        x2="128"
+        y2="80"
+        fill="none"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <Path
+        d="M164.45,32H91.55a8,8,0,0,0-5.66,2.34L34.34,85.89A8,8,0,0,0,32,91.55v72.9a8,8,0,0,0,2.34,5.66l51.55,51.55A8,8,0,0,0,91.55,224h72.9a8,8,0,0,0,5.66-2.34l51.55-51.55a8,8,0,0,0,2.34-5.66V91.55a8,8,0,0,0-2.34-5.66L170.11,34.34A8,8,0,0,0,164.45,32Z"
+        fill="none"
+        stroke="currentColor"
+        strokeMiterlimit="10"
+        strokeWidth="24"
+      />
+      <Circle cx="128" cy="172" r="24" fill="currentColor" />
+    </Svg>
+  );
+}
+
+export function ImportantBlockquote({ width = 24, height = 24, style }: IconProps) {
+  return (
+    <Svg width={width} height={height} viewBox="0 0 256 256" style={style}>
+      <path
+        d="M54.46,201.54c-9.2-9.2-3.1-28.53-7.78-39.85C41.82,150,24,140.5,24,128s17.82-22,22.68-33.69C51.36,83,45.26,63.66,54.46,54.46S83,51.36,94.31,46.68C106.05,41.82,115.5,24,128,24S150,41.82,161.69,46.68c11.32,4.68,30.65-1.42,39.85,7.78s3.1,28.53,7.78,39.85C214.18,106.05,232,115.5,232,128S214.18,150,209.32,161.69c-4.68,11.32,1.42,30.65-7.78,39.85s-28.53,3.1-39.85,7.78C150,214.18,140.5,232,128,232s-22-17.82-33.69-22.68C83,204.64,63.66,210.74,54.46,201.54Z"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <line
+        x1="128"
+        y1="80"
+        x2="128"
+        y2="136"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="24"
+      />
+      <circle cx="128" cy="172" r="12" fill="currentColor" />
+    </Svg>
+  );
+}

components/Package/MarkdownContentBox/index.tsx

@@ -11,7 +11,18 @@ import remarkGfm from 'remark-gfm';
 import useSWR from 'swr';
 
 import { A, P } from '~/common/styleguide';
-import { CCFile, ChangelogFile, Check, ContributingFile, ReadmeFile } from '~/components/Icons';
+import {
+  CautionBlockquote,
+  CCFile,
+  ChangelogFile,
+  Check,
+  ContributingFile,
+  ImportantBlockquote,
+  NoteBlockquote,
+  ReadmeFile,
+  TipBlockquote,
+  WarningBlockquote,
+} from '~/components/Icons';
 import CopyButton from '~/components/Package/CopyButton';
 import ThreeDotsLoader from '~/components/Package/ThreeDotsLoader';
 import rndDark from '~/styles/shiki/rnd-dark.json';
@@ -285,7 +296,8 @@ export default function MarkdownContentBox({ packageName, library, loader = fals
                         : tw`border-palette-gray4 dark:border-secondary`),
                     }}>
                     {blockquoteType.type && (
-                      <strong className="blockquote-title">
+                      <strong className="blockquote-title" style={tw`flex items-center gap-1.5`}>
+                        {getBlockquoteIcon(blockquoteType.type)}
                         {capitalize(blockquoteType.type)}
                       </strong>
                     )}
@@ -345,3 +357,20 @@ function getTabContentUrl(library: LibraryType, fileName: string) {
   const { packagePath, branchName } = parseGitHubUrl(library.githubUrl);
   return `${library.github.urls.repo?.replace('github.com/', 'raw.githubusercontent.com/')}/${branchName ?? 'HEAD'}/${packagePath !== '.' ? `${packagePath}/` : ''}${fileName}`;
 }
+
+function getBlockquoteIcon(type: string) {
+  switch (type) {
+    case 'note':
+      return <NoteBlockquote style={tw`-ml-0.5 size-4`} />;
+    case 'tip':
+      return <TipBlockquote style={tw`-ml-0.5 size-4`} />;
+    case 'warning':
+      return <WarningBlockquote style={tw`-ml-0.5 size-4`} />;
+    case 'caution':
+      return <CautionBlockquote style={tw`-ml-0.5 size-4`} />;
+    case 'important':
+      return <ImportantBlockquote style={tw`-ml-0.5 size-4`} />;
+    default:
+      return null;
+  }
+}

styles/shiki/rnd-dark.json

@@ -335,7 +335,7 @@
       }
     },
     {
-      "scope": ["keyword.operator", "keyword.control"],
+      "scope": ["keyword.soft", "keyword.hard", "keyword.operator", "keyword.control"],
       "settings": {
         "foreground": "#ff7b72"
       }

styles/shiki/rnd-light.json

@@ -320,7 +320,7 @@
       }
     },
     {
-      "scope": ["keyword.operator", "keyword.control"],
+      "scope": ["keyword.soft", "keyword.hard", "keyword.operator", "keyword.control"],
       "settings": {
         "foreground": "#cf222e"
       }

styles/styles.css

@@ -517,7 +517,7 @@ select {
 
     .blockquote-title {
       font-weight: 600;
-      margin-bottom: -4px;
+      margin-bottom: -6px;
       display: block;
     }
 
@@ -530,10 +530,10 @@ select {
     }
 
     &.tip {
-      border-left-color: #238636;
+      border-left-color: #238a2c;
 
       .blockquote-title {
-        color: #238636;
+        color: #238a2c;
       }
     }
 
@@ -693,10 +693,6 @@ select {
     border: 1px solid var(--table-border);
     padding: 5px 8px;
 
-    &:empty {
-      display: none;
-    }
-
     &:first-child {
       border-left: 0;
     }
@@ -706,6 +702,10 @@ select {
     }
   }
 
+  td:empty {
+    display: none;
+  }
+
   th {
     background-color: var(--table-header-background);
   }