feat: support specify desktop or mobile when build SSR

README.md

@@ -48,6 +48,7 @@ dumi-theme-yunti is a documentation site theme package designed for `Dumi 2`. <b
 - [x] 🧩 **Flexible Component Reusability:** This theme package provides high flexibility for customizing local themes. It exports premium components from the theme package, which can be reused as independent modules. Developers can freely combine and use these components in the dumi local theme package.
 - [x] 📱 **Well-Adapted for Mobile Devices:** This theme package is well-adapted for mobile devices. With the flexible style solution based on CSSinJS, multiple layout options are easily implemented. Users can enjoy a consistent and smooth experience across different devices.
 - [ ] 🧭 **SSR Enhancement and Menu Nesting:** Refer to antd source code to optimize SSR and menu nesting.
+  - [x] Supports specifying desktop or mobile when build SSR, you can specify this using the `DESKTOP` and `MOBILE` env, also you can use `useResponsive` by `import { useResponsive } from 'dumi-theme-yunti'`.
   - [ ] <https://react.dev/errors/418?invariant=418>
   - [ ] <https://react.dev/errors/422?invariant=422>
 

example/package.json

@@ -7,6 +7,7 @@
     "build:no-compress": "COMPRESS=none dumi build",
     "dev": "dumi dev",
     "postinstall": "npm run setup",
+    "mbp": "MOBILE=true npm run bp",
     "preview": "dumi preview",
     "setup": "dumi setup"
   },

src/components/ApiHeader/index.tsx

@@ -1,10 +1,10 @@
 import { Icon, Markdown, Snippet } from '@lobehub/ui';
 import { Divider, Space, Typography } from 'antd';
-import { useResponsive } from 'antd-style';
 import { Edit3, Github } from 'lucide-react';
 import { type ReactNode, memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import { ApiHeaderConfig } from '@/types';
 
 import { useStyles } from './style';
@@ -84,8 +84,8 @@ export const ApiHeader = memo<ApiTitleProps>(
     docUrl,
     serviceList = [],
   }) => {
-    const { styles } = useStyles();
     const { mobile } = useResponsive();
+    const { styles } = useStyles({ mobile });
     const isDoc = type === 'doc';
 
     const items = [
@@ -119,7 +119,7 @@ export const ApiHeader = memo<ApiTitleProps>(
             <Divider dashed style={{ margin: '2px 0' }} />
             <Flexbox distribution={'space-between'} gap={mobile ? 24 : 0} horizontal={!mobile}>
               <Space split={<Divider type={'vertical'} />} wrap>
-                {serviceList.map((item) => (
+                {serviceList.map(item => (
                   <a
                     href={item.url}
                     key={item.label}
@@ -149,5 +149,5 @@ export const ApiHeader = memo<ApiTitleProps>(
         )}
       </Flexbox>
     );
-  },
+  }
 );

src/components/ApiHeader/style.ts

@@ -1,21 +1,23 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, token, responsive: r, stylish }) => ({
-  desc: css`
-    font-size: ${token.fontSizeLG}px;
-    line-height: ${token.lineHeightLG}px;
-  `,
-  label: css`
-    width: 80px;
-  `,
-  meta: css``,
-  text: css`
-    ${stylish.resetLinkColor}
-  `,
-  title: css`
-    ${r.mobile} {
-      margin-block: 0;
-      font-size: 32px !important;
-    }
-  `,
-}));
+export const useStyles = createStyles(
+  ({ css, token, stylish }, { mobile }: { mobile?: boolean }) => ({
+    desc: css`
+      font-size: ${token.fontSizeLG}px;
+      line-height: ${token.lineHeightLG}px;
+    `,
+    label: css`
+      width: 80px;
+    `,
+    meta: css``,
+    text: css`
+      ${stylish.resetLinkColor}
+    `,
+    title: css`
+      ${mobile} {
+        margin-block: 0;
+        font-size: 32px !important;
+      }
+    `,
+  })
+);

src/hooks/useResponsive.ts

@@ -0,0 +1,18 @@
+import { useResponsive as baseUseResponsive } from 'antd-style';
+
+import { isBrowser } from '@/utils';
+
+export const useResponsive = () => {
+  const responsive = baseUseResponsive();
+
+  if (!isBrowser) {
+    if (process.env.MOBILE) {
+      responsive.mobile = process.env.MOBILE === 'true';
+    }
+    if (process.env.DESKTOP) {
+      responsive.desktop = process.env.DESKTOP === 'true';
+    }
+  }
+
+  return responsive;
+};

src/index.ts

@@ -1,3 +1,4 @@
 export { defineThemeConfig } from './config';
+export * from './hooks/useResponsive';
 export { siteSelectors, type SiteStore, useSiteStore } from './store';
 export * from './types';

src/layouts/DocLayout/DocumentLayout.tsx

@@ -1,10 +1,11 @@
 import { Layout } from '@lobehub/ui';
-import { useResponsive, useTheme } from 'antd-style';
+import { useTheme } from 'antd-style';
 import { Helmet, useIntl, useLocation, useOutlet } from 'dumi';
 import isEqual from 'fast-deep-equal';
 import { memo, useCallback, useEffect } from 'react';
 import { shallow } from 'zustand/shallow';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import Changelog from '@/pages/Changelog';
 import Docs from '@/pages/Docs';
 import Home from '@/pages/Home';

src/pages/Changelog/index.tsx

@@ -1,11 +1,11 @@
-import { useResponsive } from 'antd-style';
 import { useOutlet } from 'dumi';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
 import { ApiHeader } from '@/components/ApiHeader';
+import { useResponsive } from '@/hooks/useResponsive';
 import { useStyles } from '@/pages/Docs/styles';
 import Content from '@/slots/Content';
 import { githubSel, useSiteStore } from '@/store';
@@ -14,17 +14,17 @@ const Changelog = memo(() => {
   const outlet = useOutlet();
   const { mobile } = useResponsive();
   const { repoBase } = useSiteStore(
-    (s) => ({
+    s => ({
       repoBase: githubSel(s),
     }),
-    shallow,
+    shallow
   );
 
   const { fm } = useSiteStore(
-    (s) => ({
+    s => ({
       fm: s.routeMeta.frontmatter,
     }),
-    isEqual,
+    isEqual
   );
 
   const { styles } = useStyles();

src/pages/Docs/index.tsx

@@ -1,11 +1,11 @@
 import { StyleProvider } from '@ant-design/cssinjs';
 import { Giscus } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import { useLocation, useOutlet } from 'dumi';
 import { memo, useCallback, useEffect } from 'react';
 import { Center } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import ApiHeader from '@/slots/ApiHeader';
 import Content from '@/slots/Content';
 import { giscusSel, isApiPageSel, useSiteStore } from '@/store';

src/slots/Content/index.tsx

@@ -1,9 +1,9 @@
 import { Typography } from '@lobehub/ui';
-import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo, useEffect } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import ContentFooter from '@/slots/ContentFooter';
 import { themeConfig, useSiteStore } from '@/store';
 import { DivProps } from '@/types';
@@ -13,8 +13,11 @@ import { useStyles } from './style';
 const Content = memo<DivProps>(({ children, ...props }) => {
   const loading = useSiteStore(s => s.siteData.loading);
   const { docStyle } = useSiteStore(themeConfig, isEqual);
-  const { styles, cx } = useStyles(docStyle === 'pure');
   const { mobile } = useResponsive();
+  const { styles, cx } = useStyles({
+    isPure: docStyle === 'pure',
+    mobile,
+  });
 
   useEffect(() => {
     document.body.scrollTo(0, 0);

src/slots/Content/style.ts

@@ -1,27 +1,29 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ cx, token, responsive, css }, isPure: boolean) => ({
-  content: cx(
-    !isPure &&
+export const useStyles = createStyles(
+  ({ cx, token, css }, { isPure, mobile }: { isPure: boolean; mobile?: boolean }) => ({
+    content: cx(
+      !isPure &&
+        css`
+          padding: 24px 48px;
+          background-color: ${token.colorBgContainer};
+          border-radius: 10px;
+
+          ${mobile} {
+            padding: 8px 16px;
+            border-radius: 0;
+          }
+        `,
       css`
-        padding: 24px 48px;
-        background-color: ${token.colorBgContainer};
-        border-radius: 10px;
+        flex: 1;
+        box-sizing: border-box;
+        width: 100%;
+        min-height: 400px;
 
-        ${responsive.mobile} {
-          padding: 8px 16px;
-          border-radius: 0;
+        &:has([data-page-tabs='true']) {
+          padding-top: 8px;
         }
-      `,
-    css`
-      flex: 1;
-      box-sizing: border-box;
-      width: 100%;
-      min-height: 400px;
-
-      &:has([data-page-tabs='true']) {
-        padding-top: 8px;
-      }
-    `,
-  ),
-}));
+      `
+    ),
+  })
+);

src/slots/ContentFooter/index.tsx

@@ -1,8 +1,8 @@
-import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Flexbox } from 'react-layout-kit';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import { contentBottomSel, useSiteStore } from '@/store';
 
 import Linker from './Linker';

src/slots/Footer/index.tsx

@@ -1,11 +1,11 @@
 import { Footer as Foot, FooterProps } from '@lobehub/ui';
 import { Divider } from 'antd';
-import { useResponsive } from 'antd-style';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 import { Center, Flexbox } from 'react-layout-kit';
 import { shallow } from 'zustand/shallow';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import { githubSel, useSiteStore } from '@/store';
 
 import { getColumns } from './columns';
@@ -15,8 +15,8 @@ const Footer = memo(() => {
   const { themeConfig, pkg } = useSiteStore(s => s.siteData, isEqual);
   const { footerConfig, footer } = themeConfig;
   const githubUrl = useSiteStore(githubSel, shallow);
-  const { styles, theme } = useStyles();
   const { mobile } = useResponsive();
+  const { styles, theme } = useStyles({ mobile });
 
   if (!footer) return;
 

src/slots/Footer/style.ts

@@ -1,6 +1,6 @@
 import { createStyles } from 'antd-style';
 
-export const useStyles = createStyles(({ css, responsive, token }) => {
+export const useStyles = createStyles(({ css, token }, { mobile }: { mobile?: boolean }) => {
   const prefix = `rc-footer`;
 
   return {
@@ -13,7 +13,7 @@ export const useStyles = createStyles(({ css, responsive, token }) => {
 
       border-top: 1px solid ${token.colorSplit};
 
-      ${responsive.mobile} {
+      ${mobile} {
         flex-direction: column;
         border: none;
       }
@@ -144,7 +144,7 @@ export const useStyles = createStyles(({ css, responsive, token }) => {
         }
       }
 
-      ${responsive.mobile} {
+      ${mobile} {
         .${prefix} {
           text-align: center;
 

src/slots/Header/index.tsx

@@ -1,8 +1,8 @@
 import { Header as Head } from '@lobehub/ui';
 import { Flex } from 'antd';
-import { useResponsive } from 'antd-style';
 import { memo } from 'react';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import Logo from '@/slots/Logo';
 import Navbar from '@/slots/Navbar';
 import SearchBar from '@/slots/SearchBar';

src/slots/Logo/index.tsx

@@ -1,10 +1,10 @@
 import { Avatar } from '@lobehub/ui';
 import { Space } from 'antd';
-import { useResponsive } from 'antd-style';
 import { Link } from 'dumi';
 import isEqual from 'fast-deep-equal';
 import { memo } from 'react';
 
+import { useResponsive } from '@/hooks/useResponsive';
 import { themeConfig } from '@/store/selectors/siteBasicInfo';
 import { useSiteStore } from '@/store/useSiteStore';
 
@@ -13,8 +13,8 @@ import { useStyles } from './style';
 const Logo = memo(() => {
   const config = useSiteStore(themeConfig, isEqual);
   const locale = useSiteStore(s => s.locale, isEqual);
-  const { styles, cx } = useStyles();
   const { mobile } = useResponsive();
+  const { styles, cx } = useStyles({ mobile });
 
   return (
     config && (

src/slots/Logo/style.ts

@@ -1,7 +1,7 @@
 import { createStyles } from 'antd-style';
 
 export const useStyles = createStyles(
-  ({ css, responsive, token }) => css`
+  ({ css, token }, { mobile }: { mobile?: boolean }) => css`
     display: inline-flex;
     align-items: center;
 
@@ -11,8 +11,8 @@ export const useStyles = createStyles(
     color: ${token.colorText};
     text-decoration: none;
 
-    ${responsive.mobile} {
+    ${mobile} {
       font-size: 18px;
     }
-  `,
+  `
 );