✨ feat: Update remark (#241)

* ✨ feat: Update remark * 🔧 chore: Update pkg.pr.new * 🔧 chore: Update pkg * 💄 style: Update Avatar alt * 🔧 chore: Fix deps * 🐛 fix: Fix react markdown * 🔧 chore: Update deps * 🔧 chore: Disable ssr * 🔧 chore: Update mako * 🔧 chore: Update .dumirc.ts * 🔧 chore: Update .dumirc.ts
lobehub · Jan 8, 2025 · 83af9c0 · 83af9c0
1 parent 241757c
commit 83af9c0
Show file tree

Hide file tree

Showing 18 changed files with 242 additions and 232 deletions.
diff --git a/.dumirc.ts b/.dumirc.ts
@@ -1,6 +1,6 @@
 import { defineConfig } from 'dumi';
-import { SiteThemeConfig } from 'dumi-theme-lobehub';
-import { INavItem } from 'dumi/dist/client/theme-api/types';
+import type { SiteThemeConfig } from 'dumi-theme-lobehub';
+import type { INavItem } from 'dumi/dist/client/theme-api/types';
 import { resolve } from 'node:path';
 
 import { description, homepage, name } from './package.json';
@@ -15,9 +15,9 @@ const nav: INavItem[] = [
   { link: '/components/awesome/features', title: 'Awesome' },
   { link: '/components/brand/lobe-hub', title: 'Brand' },
   { link: '/components/mdx/callout', title: 'Mdx' },
+  { link: '/components/color/color-scales', title: 'Color' },
   { link: 'https://icons.lobehub.com', mode: 'override', title: 'Icons' },
   { link: 'https://charts.lobehub.com', mode: 'override', title: 'Charts' },
-  { link: '/components/color/color-scales', title: 'Colors' },
   { link: '/changelog', title: 'Changelog' },
 ];
 
@@ -65,7 +65,7 @@ const themeConfig: SiteThemeConfig = {
   nav,
   prefersColor: {
     default: 'dark',
-    switch: false,
+    switch: true,
   },
   socialLinks: {
     discord: 'https://discord.gg/AYFPHvv2jT',
@@ -86,15 +86,16 @@ export default defineConfig({
   },
   apiParser: isProduction ? {} : false,
   base: '/',
+  codeSplitting: {
+    jsStrategy: 'granularChunks',
+  },
   define: {
     'process.env': process.env,
   },
-  exportStatic: {},
   extraBabelPlugins: ['babel-plugin-antd-style'],
   favicons: ['https://lobehub.com/favicon.ico'],
   jsMinifier: 'swc',
   locales: [{ id: 'en-US', name: 'English' }],
-  mako: isWin ? false : {},
   mfsu: isWin ? undefined : {},
   npmClient: 'pnpm',
   publicPath: '/',
@@ -111,10 +112,15 @@ export default defineConfig({
     ],
     entryFile: isProduction ? './src/index.ts' : undefined,
   },
+  scripts: [
+    {
+      'data-domain': 'ui.lobehub.com',
+      'src': 'https://plausible.lobehub-inc.cn/js/script.js',
+    },
+  ],
   sitemap: {
     hostname: 'https://ui.lobehub.com',
   },
-  ssr: isProduction ? {} : false,
   styles: [
     `html, body { background: transparent;  }
 

diff --git a/.github/workflows/pkg.pr.new.yml b/.github/workflows/pkg.pr.new.yml
@@ -3,7 +3,7 @@ on:
   pull_request:
   push:
     branches:
-      - '!main'
+      - '!master'
 
 jobs:
   release:
@@ -28,4 +28,4 @@ jobs:
         run: bun run build
 
       - name: Release
-        run: bunx pkg-pr-new publish
+        run: bunx pkg-pr-new publish --comment=update
diff --git a/.stylelintrc.js b/.stylelintrc.js
@@ -4,7 +4,6 @@ module.exports = {
   ...config,
   rules: {
     'custom-property-pattern': null,
-    'selector-pseudo-element-no-unknown': null,
     'no-descending-specificity': null,
     ...config.rules,
   },

diff --git a/package.json b/package.json
@@ -38,7 +38,9 @@
     "mobile.d.ts",
     "mobile.js",
     "storybook.d.ts",
-    "storybook.js"
+    "storybook.js",
+    "color.d.ts",
+    "color.js"
   ],
   "scripts": {
     "build": "father build",
@@ -87,70 +89,68 @@
     ]
   },
   "dependencies": {
-    "@ant-design/cssinjs": "^1.22.0",
-    "@babel/runtime": "^7.26.0",
+    "@ant-design/cssinjs": "^1.22.1",
     "@dnd-kit/core": "^6.3.1",
-    "@dnd-kit/modifiers": "^8.0.0",
-    "@dnd-kit/sortable": "^9.0.0",
+    "@dnd-kit/modifiers": "^9.0.0",
+    "@dnd-kit/sortable": "^10.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@emoji-mart/data": "^1.2.1",
     "@emoji-mart/react": "^1.1.1",
-    "@floating-ui/react": "^0.26.28",
+    "@floating-ui/react": "^0.27.3",
     "@giscus/react": "^3.1.0",
-    "@lobehub/fluent-emoji": "^1.0.0",
-    "@mdx-js/mdx": "^2.3.0",
-    "@mdx-js/react": "^2.3.0",
+    "@lobehub/fluent-emoji": "^1.2.0",
+    "@mdx-js/mdx": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
     "@radix-ui/react-slot": "^1.1.1",
     "@shikijs/transformers": "^1.26.1",
-    "@splinetool/runtime": "^0.9.0",
-    "ahooks": "^3.8.0",
-    "antd-style": "^3.7.0",
-    "chroma-js": "^3.0.0",
-    "class-variance-authority": "^0.7.0",
-    "dayjs": "^1.11.0",
+    "@splinetool/runtime": "^1.9.57",
+    "ahooks": "^3.8.4",
+    "antd-style": "^3.7.1",
+    "chroma-js": "^3.1.2",
+    "class-variance-authority": "^0.7.1",
+    "dayjs": "^1.11.13",
     "emoji-mart": "^5.6.0",
-    "fast-deep-equal": "^3.0.0",
+    "fast-deep-equal": "^3.1.3",
     "immer": "^10.1.1",
     "leva": "^0.9.35",
-    "lodash-es": "^4.0.0",
+    "lodash-es": "^4.17.21",
     "lucide-react": "^0.469.0",
     "mermaid": "^11.4.1",
     "numeral": "^2.0.6",
-    "polished": "^4.0.0",
-    "query-string": "^9.0.0",
+    "polished": "^4.3.1",
+    "query-string": "^9.1.1",
     "rc-footer": "^0.6.8",
     "re-resizable": "^6.10.3",
     "react-avatar-editor": "^13.0.2",
-    "react-error-boundary": "^4.1.2",
-    "react-layout-kit": "^1.0.0",
-    "react-markdown": "^8.0.7",
+    "react-error-boundary": "^5.0.0",
+    "react-layout-kit": "^1.9.1",
+    "react-markdown": "^9.0.3",
     "react-merge-refs": "^2.1.1",
     "react-rnd": "^10.4.14",
-    "rehype-katex": "^6.0.3",
+    "rehype-katex": "^7.0.1",
     "rehype-raw": "^7.0.0",
     "remark-breaks": "^4.0.0",
-    "remark-gfm": "^3.0.1",
-    "remark-math": "^5.1.1",
+    "remark-gfm": "^4.0.0",
+    "remark-math": "^6.0.0",
     "shiki": "^1.26.1",
     "swr": "^2.3.0",
-    "ts-md5": "^1.0.0",
-    "unified": "^10.1.2",
+    "ts-md5": "^1.3.1",
+    "unified": "^11.0.5",
     "url-join": "^5.0.0",
     "use-merge-value": "^1.2.0",
-    "uuid": "^11.0.0"
+    "uuid": "^11.0.4"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.5.2",
-    "@babel/runtime": "^7.0.0",
+    "@babel/runtime": "^7.26.0",
     "@commitlint/cli": "^19.6.1",
-    "@lobehub/lint": "^1.24.4",
-    "@testing-library/react": "^14.3.1",
-    "@types/chroma-js": "^2.4.5",
+    "@lobehub/lint": "^1.25.3",
+    "@testing-library/react": "^16.1.0",
+    "@types/chroma-js": "^3.1.0",
     "@types/lodash-es": "^4.17.12",
     "@types/mdx": "^2.0.13",
     "@types/numeral": "^2.0.5",
     "@types/pangu": "^4.0.2",
-    "@types/query-string": "^6.3.0",
     "@types/react": "^19.0.3",
     "@types/react-avatar-editor": "^13.0.3",
     "@types/react-dom": "^19.0.2",
@@ -164,15 +164,17 @@
     "cross-env": "^7.0.3",
     "dpdm": "^3.14.0",
     "dumi": "^2.4.17",
-    "dumi-theme-lobehub": "^1.11.0",
+    "dumi-theme-lobehub": "^1.14.1",
     "eslint": "^8.57.1",
     "father": "^4.5.1",
     "husky": "^9.1.7",
     "jsdom": "^25.0.1",
     "lint-staged": "^15.3.0",
     "prettier": "^3.4.2",
-    "remark": "^14.0.3",
-    "remark-cli": "^11.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "remark": "^15.0.1",
+    "remark-cli": "^12.0.1",
     "semantic-release": "^21.1.2",
     "stylelint": "^15.11.0",
     "typescript": "^5.7.2",

diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
@@ -48,6 +48,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
       background = 'rgba(0,0,0,0)',
       style,
       unoptimized,
+      alt,
       ...rest
     },
     ref,
@@ -69,6 +70,7 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
     const text = String(isDefaultAntAvatar ? title : avatar);
 
     const avatarProps = {
+      alt: alt || title || 'avatar',
       className: cx(styles.avatar, className),
       shape,
       size,
@@ -83,10 +85,11 @@ const Avatar = forwardRef<HTMLDivElement, AvatarProps>(
           src={
             typeof avatar === 'string' ? (
               <Img
-                alt={avatarProps.alt || title}
+                alt={avatarProps.alt}
                 height={size}
                 loading={'lazy'}
                 src={avatar}
+                unoptimized={unoptimized}
                 width={size}
               />
             ) : (

diff --git a/src/Markdown/CodeBlock.tsx b/src/Markdown/CodeBlock.tsx
@@ -44,9 +44,10 @@ const CodeBlock: FC<CodeBlockProps> = ({
   enableMermaid,
   highlight,
   mermaid,
+  children,
   ...rest
 }) => {
-  const code = useCode(rest?.children?.[0]);
+  const code = useCode(children);
 
   if (!code) return;
 

diff --git a/src/Markdown/demos/data.ts b/src/Markdown/demos/data.ts
@@ -147,7 +147,7 @@ This is [an example](http://example.com/ "Title") inline link.
 
 export const code = `
 
-#### transformerNotationDiff
+#### Notation Diff
 
 \`\`\`ts
 export function foo() {
@@ -156,15 +156,15 @@ export function foo() {
 }
 \`\`\`
 
-#### transformerNotationHighlight
+#### Notation Highlight
 
 \`\`\`ts
 export function foo() {
   console.log('Highlighted') // [!code highlight]
 }
 \`\`\`
 
-#### transformerNotationWordHighlight
+#### Notation WordHighlight
 
 \`\`\`ts
 export function foo() { // [!code word:Hello]
@@ -173,15 +173,15 @@ export function foo() { // [!code word:Hello]
 }
 \`\`\`
 
-#### transformerNotationFocus
+#### Notation Focus
 
 \`\`\`ts
 export function foo() {
   console.log('Focused') // [!code focus]
 }
 \`\`\`
 
-#### transformerNotationErrorLevel
+#### Notation ErrorLevel
 
 \`\`\`ts
 export function foo() {

diff --git a/src/Markdown/index.tsx b/src/Markdown/index.tsx
@@ -3,7 +3,7 @@
 import type { AnchorProps } from 'antd';
 import { CSSProperties, ReactNode, memo, useMemo } from 'react';
 import ReactMarkdown from 'react-markdown';
-import type { Components } from 'react-markdown/lib/ast-to-react';
+import { Components } from 'react-markdown/lib';
 import rehypeKatex from 'rehype-katex';
 import rehypeRaw from 'rehype-raw';
 import remarkBreaks from 'remark-breaks';

diff --git a/src/ThemeProvider/GlobalStyle/antdOverride.ts b/src/ThemeProvider/GlobalStyle/antdOverride.ts
@@ -49,19 +49,20 @@ export default (token: Theme) => css`
   }
 
   .${token.prefixCls}-image-preview-close,
-    .${token.prefixCls}-image-preview-switch-right,.${token.prefixCls}-image-preview-switch-left {
-    ${token.stylish.blur};
-    border-radius: ${token.borderRadiusLG}px;
-    background: ${rgba(token.colorBgMask, 0.1)};
-
-    width: 32px;
-    height: 32px;
-
+    .${token.prefixCls}-image-preview-switch-right,
+    .${token.prefixCls}-image-preview-switch-left {
     display: flex;
     align-items: center;
     justify-content: center;
 
+    width: 32px;
+    height: 32px;
     padding: 0;
+
+    background: ${rgba(token.colorBgMask, 0.1)};
+    border-radius: ${token.borderRadiusLG}px;
+
+    ${token.stylish.blur};
   }
 
   .${token.prefixCls}-popover-inner {