@modern-js/main-doc 2.69.4 → 3.0.0-alpha.0

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

@@ -1,14 +1,16 @@
 .card {
   display: flex;
   flex-direction: column;
-  background-color: transparent;
   padding: 32px 32px 36px;
-  color: #fff;
   font-weight: 500;
   font-size: 20px;
   box-sizing: border-box;
   border-radius: 24px;
-  background-color: rgba(51, 194, 255, 0.08);
+  background: linear-gradient(
+    150.85deg,
+    rgba(124, 178, 250, 0.14) 3%,
+    rgba(124, 178, 250, 0.08) 97.17%
+  );
   width: calc(50% - 16px);
   cursor: pointer;
   margin-bottom: 32px;
@@ -21,9 +23,11 @@
   }
 
   &:hover {
-    transition: all 0.3s ease;
-    color: #fff;
-    background-color: rgba(51, 194, 255, 0.2);
+    background: linear-gradient(
+      150.85deg,
+      rgba(124, 178, 250, 0.2) 3%,
+      rgba(124, 178, 250, 0.1) 97.17%
+    );
   }
 }
 
@@ -39,7 +43,7 @@
   margin-top: 16px;
   font-size: 14px;
   line-height: 1.4;
-  color: rgba(255, 255, 255, 0.65);
+  opacity: 0.8;
 }
 
 .icon {

package/src/components/ContentCard/index.tsx

@@ -1,6 +1,6 @@
+import { withBase } from '@rspress/core/runtime';
 import cl from 'classnames';
 import type React from 'react';
-import { withBase } from 'rspress/runtime';
 import styles from './index.module.scss';
 
 export interface ContentCardProps {

package/src/components/FeatureLayout/index.module.css

@@ -4,5 +4,5 @@
   width: 80vw;
   max-width: 1200px;
   margin: 0 auto;
-  padding: 20vh 0 0;
+  padding: 0 0 10vh;
 }

package/src/components/Footer/index.tsx

@@ -67,21 +67,13 @@ export default function Footer() {
       title: t('topic'),
       items: [
         {
-          label: t('microFrontend'),
-          to: useUrl('/guides/topic-detail/micro-frontend/c01-introduction'),
-        },
-        {
-          label: t('stateManagement'),
-          to: useUrl('/guides/topic-detail/model/quick-start'),
+          label: t('moduleFederation'),
+          to: useUrl('/guides/topic-detail/module-federation/introduce'),
         },
         {
           label: t('pluginSystem'),
           to: useUrl('/plugin/plugin-system'),
         },
-        {
-          label: t('projectGenerator'),
-          to: useUrl('/guides/topic-detail/generator/project'),
-        },
       ],
     },
     {
@@ -119,10 +111,6 @@ export default function Footer() {
   return (
     <footer className={styles.footer}>
       <div className={styles.wrapper}>
-        <img
-          className={styles.logo}
-          src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/modern-logo-home-page-0209.svg"
-        />
         <div className={styles.linksWrapper}>{Links}</div>
       </div>
     </footer>

package/src/components/Footer/styles.module.scss

@@ -1,8 +1,8 @@
 .footer {
-  margin-top: 6vh;
   display: flex;
   justify-content: center;
   padding: 10vh 0;
+  border-top: 1px solid rgba(0,0,0,0.1);
 }
 
 .logo {
@@ -12,6 +12,7 @@
 
 .wrapper {
   width: 80vw;
+  padding: 0 16px;
   max-width: 1200px;
 }
 
@@ -23,9 +24,8 @@
 
 .linkTitle {
   font-weight: bold;
-  font-size: 18px;
+  font-size: 20px;
   margin-bottom: 12px;
-  color: rgba(255, 255, 255, 0.9);
 }
 
 .linkWrapper {
@@ -35,10 +35,10 @@
 .link {
   line-height: 32px;
   font-size: 15px;
-  color: rgba(255, 255, 255, 0.8);
+  opacity: 0.7;
 
   &:hover {
-    color: rgba(255, 255, 255, 1);
+    opacity: 1;
   }
 }
 

package/src/components/ListCard/index.tsx

@@ -1,5 +1,5 @@
+import { withBase } from '@rspress/core/runtime';
 import type React from 'react';
-import { withBase } from 'rspress/runtime';
 import styles from './index.module.css';
 
 export interface ICardProps {

package/src/components/RandomMemberList/index.tsx

@@ -1,4 +1,4 @@
-import { NoSSR } from 'rspress/runtime';
+import { NoSSR } from '@rspress/core/runtime';
 import style from './index.module.scss';
 
 interface Member {

package/src/components/RsbuildLink/index.tsx

@@ -1,5 +1,5 @@
+import { useLang } from '@rspress/core/runtime';
 import React from 'react';
-import { useLang } from 'rspress/runtime';
 
 const RsbuildLink = ({ configName }: { configName: string }) => {
   const lang = useLang();

package/src/components/Sandpack/index.tsx

@@ -1,8 +1,8 @@
 import ModernSandpack, {
   type ModernSandpackProps,
 } from '@modern-js/sandpack-react';
+import { NoSSR, useDark } from '@rspress/core/runtime';
 import React, { type PropsWithChildren } from 'react';
-import { NoSSR, useDark } from 'rspress/runtime';
 
 import './index.css';
 

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/i18n/enUS.ts

@@ -9,7 +9,7 @@ export const EN_US = {
 
   // Features
   feature1: 'Rust Bundler',
-  featureDesc1: 'Easily switch to Rspack bundler with faster build speed.',
+  featureDesc1: 'Built with Rspack bundler for faster build speed.',
   feature2: 'Integrated BFF',
   featureDesc2:
     'Develop BFF code in the same project, enjoy simple function calls.',
@@ -34,10 +34,8 @@ export const EN_US = {
   command: 'Command',
   runtime: 'Runtime',
   conventions: 'Conventions',
-  microFrontend: 'Micro Frontend',
-  stateManagement: 'State Management',
+  moduleFederation: 'Module Federation',
   pluginSystem: 'Plugin System',
-  projectGenerator: 'Project Generator',
   githubDiscussion: 'Github Discussion',
   changelog: 'Changelog',
 

package/src/i18n/index.ts

@@ -1,4 +1,4 @@
-import { useLang, withBase } from 'rspress/runtime';
+import { useLang, withBase } from '@rspress/core/runtime';
 import { EN_US } from './enUS';
 import { ZH_CN } from './zhCN';
 

package/src/i18n/zhCN.ts

@@ -11,7 +11,7 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
 
   // Features
   feature1: 'Rust 构建',
-  featureDesc1: '轻松切换到 Rspack 构建工具，编译飞快。',
+  featureDesc1: '基于 Rspack 构建工具，编译飞快。',
   feature2: '一体化开发',
   featureDesc2: '在同一项目中完成 BFF 开发，享受简洁的函数调用。',
   feature3: '嵌套路由',
@@ -34,10 +34,8 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   command: '命令',
   runtime: '运行时',
   conventions: '目录约定',
-  microFrontend: '微前端',
-  stateManagement: '状态管理',
+  moduleFederation: '模块联邦',
   pluginSystem: '插件系统',
-  projectGenerator: '项目生成器',
   githubDiscussion: 'Github 讨论区',
   changelog: '更新日志',
 

package/src/index.ts

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

package/src/pages/index.module.scss

@@ -7,44 +7,64 @@
 .header {
   display: flex;
   justify-content: center;
-  background-color: #000;
-  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/homepage-bg-0209.png);
   background-size: cover;
   background-position: center bottom;
   background-origin: border-box;
-  height: 100vh;
-  min-height: 700px;
-  max-height: 900px;
 }
 
 .heroBanner {
   display: flex;
   width: 80vw;
   max-width: 1200px;
-  margin-top: 56px;
   flex-direction: column;
   justify-content: flex-start;
   position: relative;
-  overflow: hidden;
   box-sizing: border-box;
-  align-items: flex-start;
-  padding-top: 20vh;
+  align-items: center;
+  text-align: center;
+  padding-top: 12vh;
+  padding-bottom: 16vh;
 }
 
 .title {
   font-style: normal;
   font-weight: bold;
-  font-size: 3.4rem;
+  font-size: 3.75rem;
   line-height: 1.6;
-  color: hsl(198deg 100% 90%);
 }
 
-.titleGradient {
-  background: -webkit-linear-gradient(
-    305deg,
-    hsl(166deg 77% 53%) 10%,
-    hsl(198deg, 100%, 60%)
+.mainTitle {
+  font-size: 125%;
+}
+
+.mask {
+  position: absolute;
+  background-image: conic-gradient(
+    from 180deg at 50%50%,
+    var(--edenx-primary-color) 0deg,
+    180deg,
+    hsl(198deg, 100%, 50%) 0deg
   );
+  max-width: 500px;
+  width: 100%;
+  height: 450px;
+  border-radius: 100%;
+  mixblendmode: normal;
+  filter: blur(80px);
+  opacity: 0.1;
+  top: 100px;
+  left: 50%;
+  z-index: 0;
+  transform: translateX(-50%);
+  pointer-events: none;
+}
+
+:global(.dark) .mask {
+  opacity: 0.15;
+}
+
+.titleGradient {
+  background: var(--edenx-home-hero-name-background);
   background-clip: text;
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
@@ -53,21 +73,29 @@
 .buttons {
   display: flex;
   justify-content: center;
-  margin-top: 8vh;
+  margin-top: 2.4rem;
+}
+
+.slogan {
+  font-size: 40%;
+  font-weight: normal;
+  opacity: 0.7;
+  margin-top: 1.2rem;
 }
 
 .leftButton,
 .rightButton {
-  width: 168px;
+  width: 142px;
+  font-weight: bold;
 
   &:hover {
+    opacity: 0.7;
     text-decoration: none;
   }
-}
 
-.startArrow {
-  margin-left: 8px;
-  margin-top: 1px;
+  &:active {
+    opacity: 0.4;
+  }
 }
 
 .leftButton {
@@ -76,17 +104,16 @@
   align-items: center;
   line-height: 48px;
   height: 48px;
-  background: linear-gradient(274.85deg, #4ecaff 3%, #64cfde 97.17%);
+  background: var(--edenx-home-hero-name-background);
   box-shadow: 0px 1px 8px rgba(133, 250, 202, 0.34);
   border-radius: 39px;
-  color: #000000;
+  color: #fff;
   cursor: pointer;
   opacity: 0.9;
   transition: opacity 0.3s ease;
 
   &:hover {
-    opacity: 1;
-    color: #000;
+    color: #fff;
   }
 }
 
@@ -95,19 +122,13 @@
   height: 49px;
   justify-content: center;
   align-items: center;
-  background: #0d0d0d;
-  border: 1px solid #4ecaff;
+  border: 1px solid var(--edenx-primary-color);
   box-sizing: border-box;
   border-radius: 39px;
   margin-left: 32px;
   cursor: pointer;
-  color: #4ecaff;
+  color: var(--edenx-primary-color);
   transition: all 0.3s ease;
-
-  &:hover {
-    color: rgba(132, 218, 255, 1);
-    border: 1px solid #84daff;
-  }
 }
 
 @media (max-width: 1600px) {
@@ -116,14 +137,11 @@
   }
 
   .title {
-    font-size: 3.1rem;
+    font-size: 3.6rem;
   }
 }
 
 @media screen and (max-width: 768px) {
-  .header {
-    background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/homepage-mobile-bg-0209.png);
-  }
   .heroBanner {
     align-items: center;
   }
@@ -165,9 +183,9 @@
   margin-top: 16px;
 }
 
-.homepage-main {
-  background-color: #0d0d0d;
-}
+// .homepage-main {
+//   background-color: #0d0d0d;
+// }
 
 .flowContainer {
   position: relative;

package/src/pages/index.tsx

@@ -1,6 +1,6 @@
+import { Head, useLocation } from '@rspress/core/runtime';
 import clsx from 'clsx';
 import { useEffect } from 'react';
-import { Head, useLocation } from 'rspress/runtime';
 import ContentCard from '../components/ContentCard';
 import { FeatureLayout } from '../components/FeatureLayout';
 import Footer from '../components/Footer';
@@ -10,13 +10,15 @@ import styles from './index.module.scss';
 
 const HomepageHeader = () => {
   const t = useI18n();
-
   return (
     <div className={styles.header}>
       <header className={clsx('hero hero--primary', styles.heroBanner)}>
+        <div className={styles.mask} />
         <h1 className={styles.title}>
-          <div>Inspire Creativity in</div>
-          <div className={styles.titleGradient}>Modern Web Development</div>
+          <span className={clsx([styles.titleGradient, styles.mainTitle])}>
+            Modern.js
+          </span>
+          <div>{t('slogan')}</div>
         </h1>
         <div className={styles.buttons}>
           <a
@@ -24,12 +26,6 @@ const HomepageHeader = () => {
             className={styles.leftButton}
           >
             {t('introduction')}
-            <img
-              width="20"
-              height="20"
-              className={styles.startArrow}
-              src="https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/right-arrow.svg?url"
-            />
           </a>
           <a
             href={useUrl('/guides/get-started/quick-start')}
@@ -69,19 +65,19 @@ export default function Home() {
     {
       id: 'feature3',
       title: t('feature3'),
-      href: useUrl('/guides/basic-features/routes'),
+      href: useUrl('/guides/basic-features/routes/routes'),
       desc: t('featureDesc3'),
     },
     {
       id: 'feature4',
       title: t('feature4'),
-      href: useUrl('/guides/advanced-features/ssr'),
+      href: useUrl('/guides/basic-features/render/ssr'),
       desc: t('featureDesc4'),
     },
     {
       id: 'feature5',
       title: t('feature5'),
-      href: useUrl('/guides/basic-features/css'),
+      href: useUrl('/guides/basic-features/css/css'),
       desc: t('featureDesc5'),
     },
     {
@@ -106,7 +102,6 @@ export default function Home() {
       <HomepageHeader />
       <main className={styles['homepage-main']}>
         <FeatureLayout>
-          <SecondaryTitle>Features</SecondaryTitle>
           <div className={styles.cardContainer}>
             {features.map(card => (
               <ContentCard
@@ -119,16 +114,6 @@ export default function Home() {
           </div>
         </FeatureLayout>
 
-        <FeatureLayout>
-          <h1
-            className={clsx([styles.title, styles.titleGradient])}
-            style={{ textAlign: 'left', marginBottom: 32 }}
-          >
-            <div>{t('secondSlogan1')}</div>
-            <div>{t('secondSlogan2')}</div>
-          </h1>
-        </FeatureLayout>
-
         <Footer />
       </main>
     </div>

package/docs/en/apis/app/hooks/server/index_.mdx

@@ -1,10 +0,0 @@
----
-title: index.[tj]s
-sidebar_position: 1
----
-
-# index.[tj]s
-
-A file that extends the Modern.js Web Server. You can add [Hooks](/apis/app/runtime/web-server/hook) or [Middleware](/apis/app/runtime/web-server/middleware) to the Web Server started by the application project in this file.
-
-You can intercept and process requests and responses, perform authentication and role verification, preprocess requests, and catch exceptions. You can also insert specific business logic into the built-in processing logic (including route matching, resource addressing, header injection, page rendering, and static web hosting).

package/docs/en/apis/app/hooks/src/index_.mdx

@@ -1,38 +0,0 @@
----
-title: index.[tj]s
-sidebar_position: 4
----
-# index.[tj]s
-
-:::warning
-Soon to be deprecated, it is recommended to use [`entry.[tj]s`](/apis/app/hooks/src/entry)。
-:::
-
-The identifier for the entry point when the application uses custom `bootstrap`.
-
-In general, the [`App.[tj]sx`](/apis/app/hooks/src/app) hook file can already meet our needs. When we need to add custom behavior before `bootstrap` or completely take over the webpack packaging entry, we can place `index.[tj]s` in the `src` or entry directory. There are two cases below:
-
-## Add custom behavior before bootstrap
-
-Just export a function in `src/index.[tj]s`:
-
-```js title=src/index.js
-import { bootstrap } from '@modern-js/runtime';
-
-export default App => {
-  // do something before bootstrap...
-  bootstrap(App, 'root');
-};
-```
-
-## Completely take over the webpack entry
-
-When there is no default export function in `src/index.[tj]sx?`, the file is the real webpack packaging entry file and the code can be organized directly as using create-react-app and other scaffolding tools:
-
-```js title=src/index.jsx
-import React from 'react';
-import ReactDOM from 'react-dom';
-import App from './App';
-
-ReactDOM.render(<App />, document.getElementById('root'));
-```

package/docs/en/apis/app/hooks/src/stories.mdx

@@ -1,16 +0,0 @@
----
-title: '**/*.stories.[tj]sx'
-sidebar_position: 7
----
-# **/*.stories.[tj]sx
-
-Application project Storybook files.
-
-You can create files in the `*.stories.(js|jsx|ts|tsx|mdx)` format in the project source code directory `src/` as Storybook files.
-
-Run the `npm run dev story` command in the project to use these files to debug relevant content in Storybook.
-
-:::info
-To use Storybook, you need to enable the "Storybook" mode by running the `new` command in the project first.
-:::
-

package/docs/en/apis/app/runtime/app/define-config.mdx

@@ -1,67 +0,0 @@
----
-title: defineConfig
----
-# defineConfig
-
-:::warning
-
-Soon to be deprecated. It is recommended to use `src/modern.runtime.ts` to define Runtime configurations, which supports both static and dynamic configurations. Please refer to [Runtime Configuration](/configure/app/runtime/0-intro.html).
-
-For dynamically configuring applications runtime features.
-
-:::
-
-## Usage
-
-```ts
-import { defineConfig } from '@modern-js/runtime';
-```
-
-Runtime configurations can usually be configured under the `runtime` of the `modern.config.js`, such as the [router](/configure/app/runtime/router) configuration.
-
-The configuration in `modern.config.js` is determined at build time, If some configuration parameters are obtained at runtime, or if the configuration parameters are from a module (such as a component), then need use `defineConfig` API configuration on runtime.
-
-:::info
-`@modern-js/app-tools` has the same name API, Used to provide **TS type for configuration**, please distinguish them.
-
-:::
-
-## Function Signature
-
-```ts
-function defineConfig(Component, config): any;
-```
-
-### Input
-
-- Component: App root Component.
-- config: runtime config.
-
-## Example
-
-```tsx
-function App () {
-  ...
-}
-
-defineConfig(App, {
-  router: {
-    supportHtml5History: false
-  }
-})
-```
-
-1. `defineConfig` can configuring [runtime.state](/configure/app/runtime/state)、[runtime.router](/configure/app/runtime/router) etc.
-
-2. `defineConfig` before configuring a property, such as `router`, you need to make sure that the `modern.config.js` has been configured to enable this feature.
-
-3. `defineConfig` incoming configuration will be merged with the configuration in `modern.config.js`. Taking `router` as an example, the final application configuration is as follows:
-
-```json
-{
-  // From `modern.config.js`
-  ...runtime.router
-  // From `defineConfig`
-  ...config.router
-}
-```