diff --git a/.dumirc.ts b/.dumirc.ts index 18825b3e..f9871b2d 100644 --- a/.dumirc.ts +++ b/.dumirc.ts @@ -1,12 +1,24 @@ import { defineConfig } from 'dumi'; +import { SiteThemeConfig } from 'dumi-theme-lobehub'; +import { INavItem } from 'dumi/dist/client/theme-api/types'; import { resolve } from 'node:path'; -import { homepage, name } from './package.json'; +import { description, homepage, name } from './package.json'; const isProduction = process.env.NODE_ENV === 'production'; const isWin = process.platform === 'win32'; -const themeConfig = { +const nav: INavItem[] = [ + { link: '/components/action-icon', title: 'Components' }, + { link: '/brand/lobehub', title: 'Brand' }, + { link: '/mdx/callout', title: 'Mdx' }, + { link: 'https://icons.lobehub.com', mode: 'override', title: 'Icons' }, + { link: 'https://charts.lobehub.com', mode: 'override', title: 'Charts' }, + { link: '/colors', title: 'Colors' }, + { link: '/changelog', title: 'Changelog' }, +]; + +const themeConfig: SiteThemeConfig = { actions: [ { link: homepage, @@ -19,31 +31,37 @@ const themeConfig = { type: 'primary', }, ], + analytics: { + plausible: { + domain: 'ui.lobehub.com', + scriptBaseUrl: 'https://plausible.lobehub-inc.cn', + }, + }, apiHeader: { docUrl: `{github}/tree/master/src/{atomId}/index.md`, match: ['/components', '/mdx'], pkg: name, sourceUrl: `{github}/tree/master/src/{atomId}/index.tsx`, }, - description: 'Lobe UI is an open-source UI component library for building AIGC web apps', - footer: 'Made with 🤯 by LobeHub', - + description, giscus: { category: 'Q&A', categoryId: 'DIC_kwDOJloKoM4CXsCu', repo: 'lobehub/lobe-ui', repoId: 'R_kgDOJloKoA', }, + metadata: { + openGraph: { + image: + 'https://repository-images.githubusercontent.com/643435168/789cab53-cae5-43fa-965d-5928c3c63c1c', + }, + }, name: 'UI', - nav: [ - { link: '/components/action-icon', title: 'Components' }, - { link: '/brand/lobehub', title: 'Brand' }, - { link: '/mdx/callout', title: 'Mdx' }, - { link: 'https://icons.lobehub.com', mode: 'override', title: 'Icons' }, - { link: 'https://charts.lobehub.com', mode: 'override', title: 'Charts' }, - { link: '/colors', title: 'Colors' }, - { link: '/changelog', title: 'Changelog' }, - ], + nav, + prefersColor: { + default: 'dark', + switch: false, + }, socialLinks: { discord: 'https://discord.gg/AYFPHvv2jT', github: homepage, diff --git a/docs/index.tsx b/docs/index.tsx index 1049a43c..142a1511 100644 --- a/docs/index.tsx +++ b/docs/index.tsx @@ -1,4 +1,4 @@ -import { Features, FeaturesProps, Highlighter } from '@lobehub/ui'; +import { Features, FeaturesProps, Highlighter, Snippet } from '@lobehub/ui'; import { useTheme } from 'antd-style'; import { MoonStar, Palette, Zap } from 'lucide-react'; import { Center } from 'react-layout-kit'; @@ -35,11 +35,12 @@ export default () => ( export default () => { const theme = useTheme(); return ( -
+

🤯 Start building your AIGC app now

+ {'$ bun add @lobehub/ui'}
- The LobeUI components are developed based on{' '} + The Lobe UI components are developed based on{' '} Antd components diff --git a/package.json b/package.json index a5dfed8a..da78d289 100644 --- a/package.json +++ b/package.json @@ -76,7 +76,7 @@ }, "dependencies": { "@babel/runtime": "^7.26.0", - "@dnd-kit/core": "^6.1.0", + "@dnd-kit/core": "^6.2.0", "@dnd-kit/modifiers": "^7.0.0", "@dnd-kit/sortable": "^8.0.0", "@dnd-kit/utilities": "^3.2.2", @@ -88,7 +88,7 @@ "@react-spring/web": "^9.7.5", "@shikijs/transformers": "^1.23.1", "@splinetool/runtime": "^0.9.526", - "chroma-js": "^3.0.0", + "chroma-js": "^3.1.2", "dayjs": "^1.11.13", "emoji-mart": "^5.6.0", "emoji-regex": "^10.4.0", @@ -120,7 +120,7 @@ "ts-md5": "^1.3.1", "url-join": "^5.0.0", "use-merge-value": "^1.2.0", - "uuid": "^11.0.0" + "uuid": "^11.0.3" }, "devDependencies": { "@ant-design/icons": "^5.5.1", @@ -141,15 +141,15 @@ "@vitest/coverage-v8": "~1.2.2", "babel-plugin-antd-style": "^1.0.4", "commitlint": "^19.6.0", - "concurrently": "^9.0.0", + "concurrently": "^9.1.0", "cross-env": "^7.0.3", "dpdm": "^3.14.0", "dumi": "^2.4.14", - "dumi-theme-lobehub": "^1.8.3", + "dumi-theme-lobehub": "^1.9.1", "eslint": "^8.57.1", "father": "^4.5.1", "husky": "^9.1.7", - "jsdom": "^25.0.0", + "jsdom": "^25.0.1", "lint-staged": "^15.2.10", "prettier": "^3.3.3", "react": "^18.3.1", diff --git a/src/AuroraBackground/index.tsx b/src/AuroraBackground/index.tsx index 780291b4..c3f80e1d 100644 --- a/src/AuroraBackground/index.tsx +++ b/src/AuroraBackground/index.tsx @@ -4,7 +4,7 @@ import { createStyles, keyframes } from 'antd-style'; import { memo } from 'react'; import { Flexbox, FlexboxProps } from 'react-layout-kit'; -const useStyles = createStyles(({ isDarkMode, css }) => { +const useStyles = createStyles(({ isDarkMode, css, responsive }) => { const aurora = keyframes` 0% { background-position: 50% 50%, 50% 50%; @@ -92,6 +92,11 @@ const useStyles = createStyles(({ isDarkMode, css }) => { background-attachment: fixed; background-size: 200%, 100%; } + + ${responsive.mobile} { + transform: scale(2); + max-height: 25vh; + } `, wrapper: css` position: absolute; diff --git a/src/Hero/index.tsx b/src/Hero/index.tsx index 012644f0..45d653d8 100644 --- a/src/Hero/index.tsx +++ b/src/Hero/index.tsx @@ -107,7 +107,16 @@ const Hero = memo(({ title, description, actions }) => {
- {title &&

} + {title && ( +
+ )} {description && (

)} diff --git a/src/Hero/style.ts b/src/Hero/style.ts index ffe427aa..9df85a9f 100644 --- a/src/Hero/style.ts +++ b/src/Hero/style.ts @@ -41,12 +41,12 @@ export const useStyles = createStyles(({ css, responsive, token, stylish }) => ( `, title: css` z-index: 10; + margin: 0; - font-size: 100px; - ${responsive({ - mobile: { display: 'flex', flexDirection: 'column', fontSize: 72, lineHeight: 1.2 }, - })} + font-size: min(100px, 10vw); + line-height: 1.2; + text-align: center; b { ${stylish.gradientAnimation} @@ -60,5 +60,9 @@ export const useStyles = createStyles(({ css, responsive, token, stylish }) => ( -webkit-text-fill-color: #000 !important; } } + + ${responsive.mobile} { + font-size: 64px; + } `, }));