@modern-js/main-doc 2.19.0 → 2.19.2-alpha.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @modern-js/main-doc
 
+## 2.19.1
+
+### Patch Changes
+
+- @modern-js/builder-doc@2.19.1
+
 ## 2.19.0
 
 ### Patch Changes

package/docs/en/community/blog/overview.md

@@ -4,7 +4,72 @@ sidebar_position: 1
 
 # Overview
 
-Welcome to the Modern.js blog!
+Welcome to Modern.js blog!
 
-You can find the latest news about Modern.js here.
+You can find the latest update of Modern.js and our thought processes here. Occasionally we explain the infrastructure behind it.
 
+---
+
+## Announcing Modern.js v2: support Rspack
+
+> Published on 16.03.2023
+
+We are excited to announce the release of Modern.js v2!
+
+Modern.js is a suite of infrastructure tools we built for web development inside Bytedance (we call ourself Web Infra). Since we open sourced this project a little more than a year ago, there were dozens of contributors helped us on development; we aggregated more than 2,000 pull requests and Modern.js started to support build tool like Rspack, features like nested routes, Streaming SSR and there are more to come!
+
+We are extremely proud of what we have achieved so far, you can also refer to [this article(English version under construction)](/community/blog/v2-release-note)👈🏻 to see what has changed over the last year in Modern.js.
+
+---
+
+## What is Streaming SSR in React 18
+
+> Published on 16.12.2022
+
+Since React 18, React supports a new type of SSR (streaming SSR) and it brought two advantages over the React tool chain:
+
+- Streaming HTML: Server will be able to transmit HTML to browser parts by parts, rather than waiting until the whole page being rendered. Client side will render the page faster thus dramatically increase performance benchmark scores like TTFB(Time to First Byte), FCP(First Contentful Paint) and more.
+
+- Selective Hydration: On the client side, browser can hydrate only the HTML elements that has already been rendered, without needing to wait until the whole page finish rendering and all the javascript bundle being loaded.
+
+To understand its design further, check out this [Github Discussion](https://github.com/reactwg/react-18/discussions/37) by Dan Abramov or watch this [talk](https://www.youtube.com/watch?v=pj5N-Khihgc).
+
+Or read more from us at [here(Further content in English under construction)](https://mp.weixin.qq.com/s/w4FS5sBcHqRl-Saqi19Y6g).
+
+---
+
+## Introducing React Server Component in Modern.js
+
+> Published on 01.12.2022
+
+To explain the experimental React Server Component, the one-liner given by the React Team was: **zero-bundle-size React Server Components**.
+
+We agreed with the React team that this is where the whole direction will move forward in React. Open source maintainers and contributors inside the React community are also actively building an eco-system around it.
+
+Read more from React team at [here](https://react.dev/blog/2023/03/22/react-labs-what-we-have-been-working-on-march-2023#react-server-components) or more from us at [here](https://mp.weixin.qq.com/s/B-XLvW00vl5RE1Ur3EW4ow)
+
+## Updates during Sept - Oct in 2022
+
+> Published on 01.11.2022
+
+We updated Modern.js to v1.21.0 during Sept - Oct. Major upgrade includes:
+
+- **support pnpm v7**
+- **added typescript compiler option on server side**
+
+[Read more (English version under construction)](/community/blog/2022-0910-updates)
+
+---
+
+## Updates during July - August in 2022
+
+> Published on 2022.09.05
+
+Modern.js upgraded to v1.17.0 during July to August in 2022. Major updates include:
+
+- **Support React 18**
+- **Unifying packages**: All the Modern.js package version numbers are unified, and added version update command line in CLI.
+- **Support npm module bundle building**: We support bundling npm module output.
+- **Reduck v1.1**: We released [Reduck v1.1](https://github.com/web-infra-dev/reduck) and updated all our documentations.
+
+[Read more (English version under construction)](/community/blog/2022-0708-updates)

package/docs/en/guides/advanced-features/bff/function.mdx

@@ -130,7 +130,7 @@ export const post = async () => {
 };
 ```
 
-- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`, can be exported using these methods as functions.
+- Modern.js supports 9 definitions for HTTP Method: `GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTIONS`、`HEAD`, can be exported using these methods as functions.
 
 - The name is size insensitive, if `GET`, can write `get`、`Get`、`GEt`、`GET`, can be accurately identified. But default export as `export default xxx` will be map to `Get`.
 

package/docs/en/guides/basic-features/data-fetch.mdx

@@ -343,9 +343,9 @@ export default async (): Promise<ProfileData> => {
 
 ### FAQ
 
-1. Relationship between loader and bff functions
+1. Relationship between loader and BFF functions
 
-In a CSR project, the loader is executed on the client side and the bff function can be called directly from the loader to make a request.
+In a CSR project, the loader is executed on the client side and the bff function can be called directly in the loader to make a request.
 
 In an SSR project, each loader is also a server-side API, and we recommend using loader instead of the BFF function which http method is `get` to avoid one more layer of forwarding and execution.
 

package/docs/en/guides/basic-features/routes.mdx

@@ -375,7 +375,7 @@ To further improve the user experience and reduce time of loading, Modern.js sup
 - With `render`, static resources are loaded only when they are idle and do not hog the network with first-screen static resources.
 - When using server side rendering, data is also prefetched.
 
-import Motivation from '@site-docs-en/components/convention-routing-movitation'
+import Motivation from '@site-docs-en/components/convention-routing-motivation'
 
 <Motivation/>
 

package/docs/en/guides/concept/builder.mdx

@@ -16,7 +16,7 @@ From the perspective of building, Modern.js is divided into three layers, from t
 - Universal build engine: Modern.js Builder.
 - Low-level bundlers: webpack and rspack.
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## Builder Documentation
 

package/docs/zh/community/blog/overview.md

@@ -71,6 +71,6 @@ Modern.js 7 ~ 8 月的最新版本为 v1.17.0，本双月的主要更新有：
 - **支持 React 18**：完成框架和插件对 React 18 的适配。
 - **包版本统一**：Modern.js 所有组成包的版本号进行统一，提供升级命令。
 - **模块工程支持 bundle 构建**：模块工程类型的项目，支持对产物做 bundle 构建。
-- **Reduck v1.1**：发布 Reduck v1.1，使用文档全面更新。
+- **Reduck v1.1**：发布 [Reduck v1.1](https://github.com/web-infra-dev/reduck)，使用文档全面更新。
 
 [了解更多 →](/community/blog/2022-0708-updates)

package/docs/zh/community/blog/v2-release-note.mdx

@@ -234,11 +234,10 @@ Modern.js 中的部分代码实现参考了社区中的开源项目，我们对
 
 - `@modern-js/bundle-require`: 修改自 [bundle-require](https://github.com/egoist/bundle-require)。
 - `@modern-js/plugin`: hook API 的实现参考了 [farrow-pipeline](https://github.com/farrow-js/farrow/tree/master/packages/farrow-pipeline)。
-- `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)。
+- `@modern-js/builder`: moduleScope 和 fileSize 插件参考了 [create-react-app](https://github.com/facebook/create-react-app)，TsConfigPathsPlugin 参考了 [tsconfig-paths-webpack-plugin](https://github.com/dividab/tsconfig-paths-webpack-plugin)，generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
 - `@modern-js/plugin-testing`: jest runner 参考了 [jest-cli](https://github.com/facebook/jest/blob/fdc74af37235354e077edeeee8aa2d1a4a863032/packages/jest-cli/src/cli/index.ts#L21)。
 - `@modern-js/doc-tools`: 部分样式参考了 [vitepress](https://github.com/vuejs/vitepress)。
 - `@modern-js/plugin-data-loader`: 部分实现参考了 [remix](https://github.com/remix-run/remix)。
-- `@modern-js/utils`: generateMetaTags 函数参考了 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin)。
 
 ## 最后
 

package/docs/zh/guides/advanced-features/bff/function.mdx

@@ -135,7 +135,7 @@ export const post = async () => {
 };
 ```
 
-- 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTION`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
+- 对应 HTTP Method，Modern.js 也支持了 9 种定义，即：`GET`、`POST`、`PUT`、`DELETE`、`CONNECT`、`TRACE`、`PATCH`、`OPTIONS`、`HEAD`，即可以用这些 Method 作为函数导出的名字。
 
 - 名字是大小不敏感的，如果是 `GET`，写成 `get`、`Get`、`GEt`、`GET`，都可以准确识别。而默认导出，即 `export default xxx` 则会被映射为 `Get`。
 

package/docs/zh/guides/basic-features/data-fetch.mdx

@@ -341,9 +341,9 @@ export default async (): Promise<ProfileData> => {
 
 ### 常见问题
 
-1. loader 和 bff 函数的关系
+1. loader 和 BFF 函数的关系
 
-在 CSR 项目中，loader 在客户端执行，在 loader 可以直接调用 bff 函数进行接口请求。
+在 CSR 项目中，loader 在客户端执行，在 loader 可以直接调用 BFF 函数进行接口请求。
 
 在 SSR 项目中，每个 loader 也是一个服务端接口，我们推荐使用 loader 替代 http method 为 `get` 的 BFF 函数，作为接口层，避免多一层转发和执行。
 

package/docs/zh/guides/basic-features/routes.mdx

@@ -473,7 +473,7 @@ export const init = (context: RuntimeContext) => {
 - 使用 `render`，仅在空闲时对静态资源进行加载，不会与首屏静态资源抢占网络。
 - 在 SSR 场景下，也会对数据进行预取。
 
-import Motivation from '@site-docs/components/convention-routing-movitation'
+import Motivation from '@site-docs/components/convention-routing-motivation'
 
 <Motivation/>
 

package/docs/zh/guides/concept/builder.mdx

@@ -16,7 +16,7 @@ Modern.js Builder 是 Modern.js 体系的核心组件之一，它是一个面向
 - 通用构建引擎：Modern.js Builder。
 - 底层打包工具：webpack 和 rspack。
 
-<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ maxWidth: '540px' }} />
+<img src="https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/builder-layers-1117.png" style={{ width: '100%', maxWidth: '540px' }} />
 
 ## 构建文档
 

package/package.json

@@ -15,13 +15,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "2.19.0",
+  "version": "2.19.2-alpha.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.19.0"
+    "@modern-js/builder-doc": "^2.19.1"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -33,9 +33,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "2.19.0",
-    "@modern-js/doc-tools": "2.19.0",
-    "@modern-js/doc-plugin-auto-sidebar": "2.19.0"
+    "@modern-js/doc-plugin-auto-sidebar": "2.19.1",
+    "@modern-js/doc-tools": "2.19.1",
+    "@modern-js/builder-doc": "2.19.1"
   },
   "scripts": {
     "dev": "modern dev",

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

@@ -42,6 +42,13 @@
   }
 }
 
+@media (max-width: 480px) {
+  .card {
+    flex: 0 1 100%;
+    margin-bottom: 16px;
+  }
+}
+
 .title {
   font-size: 16px;
   font-weight: 600;

package/src/pages/index.module.scss

@@ -153,7 +153,7 @@
 
 @media screen and (max-width: 540px) {
   .title {
-    font-size: 9vw;
+    font-size: 8vw;
   }
 }