@bleedingdev/modern-js-main-doc 3.2.0-ultramodern.0

package/src/components/ShowcaseList/useShowcases.ts

@@ -0,0 +1,101 @@
+import { useI18n } from '../../i18n';
+
+export type ShowcaseType = 'framework' | 'builder' | 'doc' | 'module';
+
+export type ShowcaseItem = {
+  url: string;
+  name: string;
+  preview: string;
+  type: ShowcaseType;
+};
+
+export const useShowcases = (): ShowcaseItem[] => {
+  const t = useI18n();
+
+  return [
+    {
+      name: 'Tiktok Seller',
+      url: 'https://seller-us-accounts.tiktok.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/tiktok-seller-showcase-08172.png',
+      type: 'framework',
+    },
+    {
+      name: 'Tiktok Streamer',
+      url: 'https://shop.tiktok.com/streamer/welcome',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/tiktok-steamer-showcase-08172.png',
+      type: 'framework',
+    },
+    {
+      name: 'Tiktok Shop Partner',
+      url: 'https://partner-us.tiktok.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/tiktok-shop-partner-0817.png',
+      type: 'framework',
+    },
+    {
+      name: t('doubao'),
+      url: 'https://www.doubao.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/doubao-showcase-0817.png',
+      type: 'framework',
+    },
+    {
+      name: t('volctrans'),
+      url: 'https://translate.volcengine.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/volctrans-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: t('writingo'),
+      url: 'https://writingo.net/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/writingo-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: 'Rspack',
+      url: 'https://rspack.rs/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/rspack-0424.jpeg',
+      type: 'doc',
+    },
+    {
+      name: 'Modern.js',
+      url: 'https://modernjs.dev/en/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/modernjs-dev-0425.jpeg',
+      type: 'doc',
+    },
+    {
+      name: t('shidianbaike'),
+      url: 'https://shidian.baike.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/shidianbaike-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: t('xiaohe'),
+      url: 'https://xiaohe.cn/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/xiaohe-0424.png',
+      type: 'framework',
+    },
+    {
+      name: t('dongchedi'),
+      url: 'https://m.dcdapp.com/motor/feoffline/usedcar_channel/channel.html',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/dongchedi-0425.png',
+      type: 'builder',
+    },
+    {
+      name: t('volcengineDeveloper'),
+      url: 'https://developer.volcengine.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/developer-volcengine-0425.png',
+      type: 'framework',
+    },
+  ];
+};

package/src/components/SolutionCards/index.module.scss

@@ -0,0 +1,73 @@
+.root {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin: 1.5rem 0;
+}
+
+.card {
+  cursor: pointer;
+  border: 1px solid var(--rp-c-bg-soft);
+  background-color: var(--rp-c-bg-soft);
+  transition: color 0.5s, background-color 0.5s;
+  padding: 22px;
+  border-radius: 16px;
+  flex: 0 1 32%;
+  font-size: 14px;
+  font-weight: 500;
+  transition: border-color 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
+
+  &1 {
+    background-color: #e9f5ff;
+
+    &:hover {
+      border-color: #66b9ff;
+    }
+  }
+
+  &2 {
+    background-color: #f3f4ff;
+
+    &:hover {
+      border-color: #6673ff;
+    }
+  }
+
+  &3 {
+    background-color: #e9ffed;
+
+    &:hover {
+      border-color: #52e06c;
+    }
+  }
+}
+
+.twoCards {
+  flex: 0 1 48%;
+}
+
+@media (max-width: 480px) {
+  .card {
+    flex: 0 1 100%;
+    margin-bottom: 16px;
+  }
+}
+
+.title {
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.4;
+  letter-spacing: -0.02em;
+  margin: 0 0 0.75em !important;
+  color: #213547;
+  display: block;
+}
+
+.description {
+  font-size: 12px;
+  margin: 0 !important;
+  line-height: 1.7 !important;
+  color: rgba(60, 60, 60, 0.75);
+  font-weight: 400;
+  transition: color 0.5s;
+}

package/src/components/SolutionCards/index.tsx

@@ -0,0 +1,30 @@
+import clsx from 'clsx';
+import styles from './index.module.scss';
+
+type Card = {
+  link: string;
+  title: string;
+  description: string;
+};
+
+export const SolutionCards = ({ cards }: { cards: Card[] }) => {
+  const classNames = [styles.card1, styles.card2, styles.card3];
+  const renderCards = () =>
+    cards.map((card, index) => (
+      <a
+        key={card.title}
+        href={card.link}
+        className={clsx([
+          styles.card,
+          classNames[index],
+          cards.length === 2 ? styles.twoCards : '',
+        ])}
+        target="_blank"
+      >
+        <div className={styles.title}>{card.title}</div>
+        <div className={styles.description}>{card.description}</div>
+      </a>
+    ));
+
+  return <div className={styles.root}>{renderCards()}</div>;
+};

package/src/custom.scss

@@ -0,0 +1,15 @@
+:root {
+  --edenx-primary-color: #2f54eb;
+  --edenx-gradient-color-dark: var(--edenx-primary-color);
+  --edenx-gradient-color-light: #7cb2fa;
+
+  --edenx-home-hero-name-background: linear-gradient(
+    274.85deg,
+    var(--edenx-gradient-color-dark) 3%,
+    var(--edenx-gradient-color-light) 97.17%
+  );
+}
+
+.rspress-announcement div {
+  background: var(--edenx-home-hero-name-background) !important;
+}

package/src/global.d.ts

@@ -0,0 +1,28 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  const content: string;
+  export default content;
+}

package/src/i18n/enUS.ts

@@ -0,0 +1,54 @@
+export const EN_US = {
+  // Announcement
+  announcementLabel: 'NEW',
+  announcementText: 'Modern.js 3.0 is released!',
+
+  introduction: 'Introduction',
+  quickStart: 'Quick Start',
+
+  // Slogans
+  slogan: 'A Progressive React Framework for modern web development',
+  secondSlogan1: 'Enjoy the development experience.',
+  secondSlogan2: 'Make innovation happen faster.',
+
+  // Features
+  feature1: 'Rust Bundler',
+  featureDesc1: 'Built with Rspack bundler for faster build speed.',
+  feature2: 'Integrated BFF',
+  featureDesc2:
+    'Develop BFF code in the same project, enjoy simple function calls.',
+  feature3: 'Nested Routes',
+  featureDesc3: 'File-as-route, comes with lots performance optimizations.',
+  feature4: 'Multi-Rendering Mode',
+  featureDesc4: 'RSC, SSR, SSG, all out of the box for you.',
+  feature5: 'CSS Solutions',
+  featureDesc5: 'CSS Modules, CSS-in-JS, Tailwind CSS, take your pick.',
+  feature6: 'Easy to Configure',
+  featureDesc6:
+    'Launch with zero configuration, then everything is configurable.',
+
+  // Footer
+  guide: 'Guide',
+  topic: 'Topic',
+  help: 'Help',
+  coreConcept: 'Core Concept',
+  basicFeatures: 'Basic Features',
+  advancedFeatures: 'Advanced Features',
+  configuration: 'Configuration',
+  command: 'Command',
+  runtime: 'Runtime',
+  conventions: 'Conventions',
+  moduleFederation: 'Module Federation',
+  pluginSystem: 'Plugin System',
+  githubDiscussion: 'Github Discussion',
+  changelog: 'Changelog',
+
+  // Showcases
+  doubao: 'Doubao',
+  writingo: 'Writingo',
+  volctrans: 'Volctrans',
+  shidianbaike: 'Shidian Baike',
+  xiaohe: 'Xiaohe',
+  dongchedi: 'Dongchedi',
+  volcengineDeveloper: 'Volcengine Developer',
+} as const;

package/src/i18n/index.ts

@@ -0,0 +1,18 @@
+import { useLang, withBase } from '@rspress/core/runtime';
+import { EN_US } from './enUS';
+import { ZH_CN } from './zhCN';
+
+const translations = {
+  en: EN_US,
+  zh: ZH_CN,
+} as const;
+
+export function useUrl(url: string) {
+  const lang = useLang();
+  return withBase(lang === 'zh' ? `/zh${url}` : url);
+}
+
+export function useI18n() {
+  const lang = useLang() as keyof typeof translations;
+  return (key: keyof typeof EN_US) => translations[lang][key];
+}

package/src/i18n/zhCN.ts

@@ -0,0 +1,54 @@
+import type { EN_US } from './enUS';
+
+export const ZH_CN: Record<keyof typeof EN_US, string> = {
+  // Announcement
+  announcementLabel: 'NEW',
+  announcementText: 'Modern.js 3.0 正式发布！',
+
+  introduction: '介绍',
+  quickStart: '快速上手',
+
+  // Slogans
+  slogan: '基于 React 的渐进式 Web 开发框架',
+  secondSlogan1: '享受愉悦的开发体验，',
+  secondSlogan2: '让创新更快发生。',
+
+  // Features
+  feature1: 'Rust 构建',
+  featureDesc1: '基于 Rspack 构建工具，编译飞快。',
+  feature2: '一体化开发',
+  featureDesc2: '在同一项目中完成 BFF 开发，享受简洁的函数调用。',
+  feature3: '嵌套路由',
+  featureDesc3: '文件系统即路由，附赠全套性能优化。',
+  feature4: '多渲染模式',
+  featureDesc4: 'RSC、SSR、SSG 等多种渲染模式，通通开箱即用。',
+  feature5: 'CSS 方案',
+  featureDesc5: 'CSS Modules、CSS-in-JS、Tailwind CSS，任你挑选。',
+  feature6: '易于配置',
+  featureDesc6: '以零配置启动，然后一切皆可配置。',
+
+  // Footer
+  guide: '指南',
+  topic: '专题',
+  help: '帮助',
+  coreConcept: '核心概念',
+  basicFeatures: '基础功能',
+  advancedFeatures: '进阶功能',
+  configuration: '配置',
+  command: '命令',
+  runtime: '运行时',
+  conventions: '目录约定',
+  moduleFederation: '模块联邦',
+  pluginSystem: '插件系统',
+  githubDiscussion: 'Github 讨论区',
+  changelog: '更新日志',
+
+  // Showcase
+  doubao: '豆包',
+  writingo: '火山写作',
+  volctrans: '火山翻译',
+  shidianbaike: '识典百科',
+  xiaohe: '小荷健康',
+  dongchedi: '懂车帝',
+  volcengineDeveloper: '火山引擎开发者社区',
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+import './custom.scss';
+import HomeLayout from './pages';
+
+export * from '@rspress/core/theme-original';
+export { HomeLayout };