💄 style: Update og

bentwnghk · Nov 24, 2024 · be9497f · be9497f
1 parent 2283cb9
commit be9497f
Show file tree

Hide file tree

Showing 6 changed files with 66 additions and 29 deletions.
diff --git 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
@@ -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 (
-    <Center gap={16}>
+    <Center gap={48}>
       <Center>
         <h2 style={{ fontSize: 20 }}>🤯 Start building your AIGC app now</h2>
+        <Snippet language={'bash'}>{'$ bun add @lobehub/ui'}</Snippet>
         <div style={{ color: theme.colorTextDescription, textAlign: 'center' }}>
-          The LobeUI components are developed based on{' '}
+          The Lobe UI components are developed based on{' '}
           <a href={'https://ant.design/components/overview'} rel="noreferrer" target={'_blank'}>
             Antd components
           </a>

diff --git 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
@@ -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
@@ -107,7 +107,16 @@ const Hero = memo<HeroProps>(({ title, description, actions }) => {
         <Flexbox align={'center'} style={{ zIndex: 1 }}>
           <Flexbox className={styles.container} distribution={'center'} horizontal>
             <Center>
-              {title && <h1 className={styles.title} dangerouslySetInnerHTML={{ __html: title }} />}
+              {title && (
+                <Center
+                  as={'h1'}
+                  className={styles.title}
+                  dangerouslySetInnerHTML={{ __html: title }}
+                  gap={'0.25em'}
+                  horizontal
+                  wrap={'wrap'}
+                />
+              )}
               {description && (
                 <p className={styles.desc} dangerouslySetInnerHTML={{ __html: description }} />
               )}

diff --git 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;
+    }
   `,
 }));