@lobehub/lobehub 2.0.0-next.72 → 2.0.0-next.73

package/src/app/[variants]/@modal/(.)changelog/modal/features/Post.tsx

@@ -1,57 +0,0 @@
-import { Typography } from '@lobehub/ui';
-import Link from 'next/link';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { CustomMDX } from '@/components/mdx';
-import Image from '@/components/mdx/Image';
-import { OFFICIAL_SITE } from '@/const/url';
-import { Locales } from '@/locales/resources';
-import { ChangelogService } from '@/server/services/changelog';
-import { ChangelogIndexItem } from '@/types/changelog';
-
-import Cover from './Cover';
-import PublishedTime from './PublishedTime';
-import ReadDetail from './ReadDetail';
-import VersionTag from './VersionTag';
-
-const Post = async ({
-  id,
-  versionRange,
-  locale,
-}: ChangelogIndexItem & { branch?: string; locale: Locales; mobile?: boolean }) => {
-  const changelogService = new ChangelogService();
-  const data = await changelogService.getPostById(id, { locale });
-  const url = urlJoin(OFFICIAL_SITE, 'changelog', id);
-
-  if (!data) return null;
-
-  return (
-    <Flexbox gap={8}>
-      <Link href={url} style={{ color: 'inherit' }} target={'_blank'}>
-        <Cover>
-          <Image alt={data.title} src={data.image} />
-        </Cover>
-      </Link>
-      <Flexbox gap={8} paddingInline={24}>
-        <Typography headerMultiple={0.2} style={{ width: '100%' }}>
-          <Link href={url} style={{ color: 'inherit' }} target={'_blank'}>
-            <h1 id={id}>{data.rawTitle || data.title}</h1>
-          </Link>
-          <CustomMDX source={data.content} />
-        </Typography>
-        <Flexbox align={'center'} gap={8} horizontal justify={'space-between'} width={'100%'}>
-          <VersionTag range={versionRange} />
-          <PublishedTime
-            date={data.date.toISOString()}
-            style={{ fontSize: 12, opacity: 0.5 }}
-            template={'MMMM D, YYYY'}
-          />
-        </Flexbox>
-        <ReadDetail desc={data.description} postId={id} title={data.rawTitle || data.title} />
-      </Flexbox>
-    </Flexbox>
-  );
-};
-
-export default Post;

package/src/app/[variants]/@modal/(.)changelog/modal/features/PublishedTime.tsx

@@ -1,50 +0,0 @@
-'use client';
-
-import { createStyles } from 'antd-style';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh.js';
-import { CSSProperties, FC } from 'react';
-import { useTranslation } from 'react-i18next';
-
-const useStyles = createStyles(({ css, token }) => {
-  return {
-    time: css`
-      margin-block: calc(var(--lobe-markdown-margin-multiple) * 1em);
-
-      font-size: 14px;
-      line-height: var(--lobe-markdown-line-height);
-      color: ${token.colorTextSecondary};
-      letter-spacing: 0.02em;
-    `,
-  };
-});
-
-interface PrivacyUpdatedProps {
-  className?: string;
-  date: string;
-  style?: CSSProperties;
-  template?: string;
-}
-const PublishedTime: FC<PrivacyUpdatedProps> = ({
-  date = new Date().toISOString(),
-  style,
-  className,
-  template = 'dddd, MMMM D YYYY',
-}) => {
-  const { i18n } = useTranslation();
-  const { styles, cx } = useStyles();
-  const time = dayjs(date).locale(i18n.language).format(template);
-
-  return (
-    <time
-      aria-label={'published-date'}
-      className={cx(styles.time, className)}
-      dateTime={time}
-      style={style}
-    >
-      {time}
-    </time>
-  );
-};
-
-export default PublishedTime;

package/src/app/[variants]/@modal/(.)changelog/modal/features/ReadDetail.tsx

@@ -1,72 +0,0 @@
-'use client';
-
-import { ActionIcon, Icon } from '@lobehub/ui';
-import { Divider } from 'antd';
-import { createStyles } from 'antd-style';
-import { ChevronRightIcon } from 'lucide-react';
-import Link from 'next/link';
-import { memo } from 'react';
-import { useTranslation } from 'react-i18next';
-import { Flexbox } from 'react-layout-kit';
-import urlJoin from 'url-join';
-
-import { OFFICIAL_SITE } from '@/const/url';
-import { useShare } from '@/hooks/useShare';
-
-const ICON_SIZE = { blockSize: 28, size: 16 };
-
-const useStyles = createStyles(
-  ({ css, token }) => css`
-    position: relative;
-
-    margin-block: 16px 32px;
-    padding: 16px;
-    border-radius: ${token.borderRadiusLG}px;
-
-    background: ${token.colorFillTertiary};
-  `,
-);
-
-const ReadDetail = memo<{ desc: string; postId: string; title: string }>(
-  ({ postId, title, desc }) => {
-    const { t } = useTranslation('changelog');
-    const { styles, theme } = useStyles();
-    const url = urlJoin(OFFICIAL_SITE, `/changelog/${postId}`);
-    const { x, telegram, reddit, mastodon, whatsapp } = useShare({ desc, title, url });
-
-    return (
-      <Flexbox align={'center'} className={styles} gap={4} horizontal>
-        <Link href={x.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon fill={theme.colorTextSecondary} icon={x.icon} size={ICON_SIZE} />
-        </Link>
-        <Link href={telegram.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon fill={theme.colorTextSecondary} icon={telegram.icon} size={ICON_SIZE} />
-        </Link>
-        <Link href={reddit.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon fill={theme.colorTextSecondary} icon={reddit.icon} size={ICON_SIZE} />
-        </Link>
-        <Link href={mastodon.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon fill={theme.colorTextSecondary} icon={mastodon.icon} size={ICON_SIZE} />
-        </Link>
-        <Link href={whatsapp.link} style={{ color: 'inherit' }} target={'_blank'}>
-          <ActionIcon fill={theme.colorTextSecondary} icon={whatsapp.icon} size={ICON_SIZE} />
-        </Link>
-        <Divider style={{ height: '100%' }} type={'vertical'} />
-        <Link href={url} style={{ color: 'inherit', flex: 1 }} target={'_blank'}>
-          <Flexbox
-            align={'center'}
-            horizontal
-            justify={'space-between'}
-            paddingInline={4}
-            width={'100%'}
-          >
-            {t('readDetails')}
-            <Icon color={theme.colorTextSecondary} icon={ChevronRightIcon} size={20} />
-          </Flexbox>
-        </Link>
-      </Flexbox>
-    );
-  },
-);
-
-export default ReadDetail;

package/src/app/[variants]/@modal/(.)changelog/modal/features/VersionTag.tsx

@@ -1,26 +0,0 @@
-'use client';
-
-import { Tag } from '@lobehub/ui';
-import { createStyles } from 'antd-style';
-import { memo } from 'react';
-
-const useStyles = createStyles(({ token, css }) => {
-  return {
-    tag: css`
-      margin: 0;
-      padding-block: 4px;
-      padding-inline: 12px;
-      border-radius: 16px;
-
-      color: ${token.colorTextSecondary};
-    `,
-  };
-});
-
-const VersionTag = memo<{ range: string[] }>(({ range }) => {
-  const { styles } = useStyles();
-
-  return <Tag className={styles.tag}>{range.map((v) => 'v' + v).join(' ~ ')}</Tag>;
-});
-
-export default VersionTag;

package/src/app/[variants]/@modal/(.)changelog/modal/layout.tsx

@@ -1,41 +0,0 @@
-'use client';
-
-import { createStyles } from 'antd-style';
-import { PropsWithChildren, memo } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import ModalLayout from '../../_layout/ModalLayout';
-import Hero from './features/Hero';
-import Pagination from './features/Pagination';
-
-const useStyles = createStyles(
-  ({ css, prefixCls, token }) => css`
-    .${prefixCls}-modal-close {
-      border: 1px solid ${token.colorBorderSecondary};
-      background: ${token.colorBgElevated} !important;
-    }
-  `,
-);
-
-const Layout = memo<PropsWithChildren>(({ children }) => {
-  const { styles } = useStyles();
-
-  return (
-    <ModalLayout centered className={styles} height={'min(90vh, 800px)'} width={'min(90vw, 600px)'}>
-      <Flexbox
-        style={{ overflowX: 'hidden', overflowY: 'auto', position: 'relative' }}
-        width={'100%'}
-      >
-        <Hero />
-        {children}
-        <Flexbox padding={24}>
-          <Pagination />
-        </Flexbox>
-      </Flexbox>
-    </ModalLayout>
-  );
-});
-
-export default Layout;
-
-export const dynamic = 'force-dynamic';

package/src/app/[variants]/@modal/(.)changelog/modal/loading.tsx

@@ -1,10 +0,0 @@
-import { Skeleton } from 'antd';
-import { Flexbox } from 'react-layout-kit';
-
-export default () => {
-  return (
-    <Flexbox paddingBlock={12} paddingInline={24}>
-      <Skeleton active paragraph={{ rows: 5 }} title={false} />
-    </Flexbox>
-  );
-};

package/src/app/[variants]/@modal/(.)changelog/modal/page.tsx

@@ -1,38 +0,0 @@
-import { notFound } from 'next/navigation';
-import { Suspense } from 'react';
-
-import { serverFeatureFlags } from '@/config/featureFlags';
-import { ChangelogService } from '@/server/services/changelog';
-import { DynamicLayoutProps } from '@/types/next';
-import { RouteVariants } from '@/utils/server/routeVariants';
-
-import Post from './features/Post';
-import UpdateChangelogStatus from './features/UpdateChangelogStatus';
-import Loading from './loading';
-
-const Page = async (props: DynamicLayoutProps) => {
-  const hideDocs = serverFeatureFlags().hideDocs;
-  if (hideDocs) return notFound();
-
-  const { locale, isMobile } = await RouteVariants.getVariantsFromProps(props);
-
-  const changelogService = new ChangelogService();
-  const data = await changelogService.getChangelogIndex();
-
-  if (!data) return notFound();
-
-  return (
-    <>
-      {data?.map((item) => (
-        <Suspense fallback={<Loading />} key={item.id}>
-          <Post locale={locale as any} mobile={isMobile} {...item} />
-        </Suspense>
-      ))}
-      <UpdateChangelogStatus currentId={data[0]?.id} />
-    </>
-  );
-};
-
-Page.displayName = 'ChangelogModal';
-
-export default Page;

package/src/app/[variants]/@modal/_layout/ModalLayout.tsx

@@ -1,63 +0,0 @@
-'use client';
-
-import { Modal, type ModalProps } from '@lobehub/ui';
-import { useTheme } from 'antd-style';
-import { useRouter } from 'next/navigation';
-import { memo, useState } from 'react';
-
-const ModalLayout = memo<ModalProps>(
-  ({
-    children,
-    height = 'min(80vh,750px)',
-    width = 'min(80vw, 1024px)',
-    onCancel,
-    afterClose,
-    styles,
-    ...rest
-  }) => {
-    const [open, setOpen] = useState(true);
-    const router = useRouter();
-    const theme = useTheme();
-
-    return (
-      <Modal
-        afterClose={() => {
-          afterClose?.();
-          router.back();
-        }}
-        enableResponsive={false}
-        footer={null}
-        height={height}
-        onCancel={(e) => {
-          onCancel?.(e);
-          setOpen(false);
-          router.back();
-        }}
-        open={open}
-        styles={{
-          ...styles,
-          body: {
-            display: 'flex',
-            height: height,
-            overflow: 'hidden',
-            padding: 0,
-            position: 'relative',
-            ...styles?.body,
-          },
-          content: {
-            border: 'none',
-            boxShadow: `0 0 0 1px ${theme.colorBorderSecondary}`,
-            ...styles?.content,
-          },
-        }}
-        title={false}
-        width={width}
-        {...rest}
-      >
-        {children}
-      </Modal>
-    );
-  },
-);
-
-export default ModalLayout;

package/src/app/[variants]/@modal/_layout/SettingModalLayout.tsx

@@ -1,71 +0,0 @@
-'use client';
-
-import { useResponsive, useTheme } from 'antd-style';
-import { ReactNode, memo, useRef } from 'react';
-import { Flexbox } from 'react-layout-kit';
-
-import Header from '@/app/[variants]/(main)/settings/_layout/Desktop/Header';
-import SideBar from '@/app/[variants]/(main)/settings/_layout/Desktop/SideBar';
-import Footer from '@/features/Setting/Footer';
-
-interface SettingLayoutProps {
-  activeTitle?: ReactNode;
-  category: ReactNode;
-  children: ReactNode;
-  desc?: string;
-  title?: string;
-}
-
-const SettingModalLayout = memo<SettingLayoutProps>(
-  ({ children, category, desc, title, activeTitle }) => {
-    const ref = useRef<any>(null);
-    const theme = useTheme();
-    const { md = true, mobile = false } = useResponsive();
-
-    return (
-      <Flexbox horizontal={md} width={'100%'}>
-        {md ? (
-          <SideBar
-            desc={desc}
-            style={{
-              background: theme.isDarkMode ? theme.colorBgContainer : theme.colorFillTertiary,
-              borderColor: theme.colorFillTertiary,
-            }}
-            title={title}
-          >
-            {category}
-          </SideBar>
-        ) : (
-          <Header getContainer={() => ref.current} title={activeTitle}>
-            {category}
-          </Header>
-        )}
-        <Flexbox
-          align={'center'}
-          gap={mobile ? 0 : 64}
-          paddingInline={mobile ? 0 : 56}
-          ref={ref}
-          style={{
-            background: mobile
-              ? theme.colorBgContainer
-              : theme.isDarkMode
-                ? theme.colorFillQuaternary
-                : theme.colorBgElevated,
-            minHeight: '100%',
-            overflowX: 'hidden',
-            overflowY: 'auto',
-            paddingTop: mobile ? 0 : 40,
-          }}
-          width={'100%'}
-        >
-          {children}
-          <Footer />
-        </Flexbox>
-      </Flexbox>
-    );
-  },
-);
-
-SettingModalLayout.displayName = 'SettingModalLayout';
-
-export default SettingModalLayout;

package/src/app/[variants]/@modal/default.tsx

@@ -1,3 +0,0 @@
-// This ensures that the modal is not rendered when it's not active.
-
-export default () => null;

package/src/app/[variants]/@modal/error.tsx

@@ -1,3 +0,0 @@
-'use client';
-
-export { default } from '@/components/Error';

package/src/app/[variants]/@modal/layout.tsx

@@ -1,7 +0,0 @@
-import { FC, PropsWithChildren } from 'react';
-
-const Layout: FC<PropsWithChildren> = ({ children }) => {
-  return <div style={{ position: 'absolute', zIndex: 0 }}>{children}</div>;
-};
-
-export default Layout;

package/src/app/[variants]/@modal/loading.tsx

@@ -1,5 +0,0 @@
-import { Skeleton } from 'antd';
-
-export default () => {
-  return <Skeleton paragraph={{ rows: 6 }} style={{ padding: 56 }} />;
-};