@modern-js/main-doc 0.0.0-next-1678874896224 → 0.0.0-next-1678891119529

package/docs/zh/configure/app/tools/babel.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: babel
+---
+
+# tools.babel
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.babel](https://modernjs.dev/builder/api/config-tools.html#toolsbabel)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/babel.md';
+
+<Main />

package/docs/zh/configure/app/tools/css-extract.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssExtract
+---
+
+# tools.cssExtract
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.cssExtract](https://modernjs.dev/builder/api/config-tools.html#toolscssextract)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/cssExtract.md';
+
+<Main />

package/docs/zh/configure/app/tools/css-loader.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: cssLoader
+---
+
+# tools.cssLoader
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.cssLoader](https://modernjs.dev/builder/api/config-tools.html#toolscssloader)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/cssLoader.md';
+
+<Main />

package/docs/zh/configure/app/tools/dev-server.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: devServer
+---
+
+# tools.devServer
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.devServer](https://modernjs.dev/builder/api/config-tools.html#toolsdevserver)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/devServer.md';
+
+<Main />

package/docs/zh/configure/app/tools/html-plugin.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: htmlPlugin
+---
+
+# tools.htmlPlugin
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.htmlPlugin](https://modernjs.dev/builder/api/config-tools.html#toolshtmlplugin)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/htmlPlugin.md';
+
+<Main />

package/docs/zh/configure/app/tools/inspector.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: inspector
+---
+
+# tools.inspector
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.inspector](https://modernjs.dev/builder/api/config-tools.html#toolsinspector)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/inspector.md';
+
+<Main />

package/docs/zh/configure/app/tools/less.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: less
+---
+
+# tools.less
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.less](https://modernjs.dev/builder/api/config-tools.html#toolsless)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/less.md';
+
+<Main />

package/docs/zh/configure/app/tools/minify-css.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: minifyCss
+---
+
+# tools.minifyCss
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.minifyCss](https://modernjs.dev/builder/api/config-tools.html#toolsminifycss)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/minifyCss.md';
+
+<Main />

package/docs/zh/configure/app/tools/postcss.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: postcss
+---
+
+# tools.postcss
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.postcss](https://modernjs.dev/builder/api/config-tools.html#toolspostcss)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/postcss.md';
+
+<Main />

package/docs/zh/configure/app/tools/pug.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: pug
+---
+
+# tools.pug
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.pug](https://modernjs.dev/builder/api/config-tools.html#toolspug)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/pug.md';
+
+<Main />

package/docs/zh/configure/app/tools/rspack.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: rspack
+---
+
+# tools.rspack
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.rspack](https://modernjs.dev/builder/api/config-tools.html#toolsrspack)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/rspack.md';
+
+<Main />

package/docs/zh/configure/app/tools/sass.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: sass
+---
+
+# tools.sass
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.sass](https://modernjs.dev/builder/api/config-tools.html#toolssass)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/sass.md';
+
+<Main />

package/docs/zh/configure/app/tools/style-loader.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: styleLoader
+---
+
+# tools.styleLoader
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.styleLoader](https://modernjs.dev/builder/api/config-tools.html#toolsstyleloader)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/styleLoader.md';
+
+<Main />

package/docs/zh/configure/app/tools/styled-components.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: styledComponents
+---
+
+# tools.styledComponents
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.styledComponents](https://modernjs.dev/builder/api/config-tools.html#toolsstyledcomponents)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/styledComponents.md';
+
+<Main />

package/docs/zh/configure/app/tools/terser.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: terser
+---
+
+# tools.terser
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.terser](https://modernjs.dev/builder/api/config-tools.html#toolsterser)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/terser.md';
+
+<Main />

package/docs/zh/configure/app/tools/ts-checker.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: tsChecker
+---
+
+# tools.tsChecker
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.tsChecker](https://modernjs.dev/builder/api/config-tools.html#toolstschecker)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/tsChecker.md';
+
+<Main />

package/docs/zh/configure/app/tools/ts-loader.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: tsLoader
+---
+
+# tools.tsLoader
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.tsLoader](https://modernjs.dev/builder/api/config-tools.html#toolstsloader)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/tsLoader.md';
+
+<Main />

package/docs/zh/configure/app/tools/webpack-chain.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: webpackChain
+---
+
+# tools.webpackChain
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.webpackChain](https://modernjs.dev/builder/api/config-tools.html#toolswebpackchain)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/webpackChain.md';
+
+<Main />

package/docs/zh/configure/app/tools/webpack.mdx

@@ -0,0 +1,13 @@
+---
+sidebar_label: webpack
+---
+
+# tools.webpack
+
+:::tip
+该配置由 Modern.js Builder 提供，更多信息可参考 [tools.webpack](https://modernjs.dev/builder/api/config-tools.html#toolswebpack)。
+:::
+
+import Main from '@modern-js/builder-doc/docs/zh/config/tools/webpack.md';
+
+<Main />

package/{zh → docs/zh}/guides/advanced-features/rspack-start.mdx

@@ -28,6 +28,8 @@ import InitRspackApp from '@site-docs/components/init-rspack-app';
 
 - 微前端（Micro Frontend）
 - Storybook 调试
+- 同时使用服务端渲染（SSR）和约定式路由的场景
+- 同时使用静态站点生成（SSG）和约定式路由的场景
 
 :::
 

package/modern.config.ts

@@ -0,0 +1,157 @@
+import path from 'path';
+import docTools, { defineConfig, type NavItem } from '@modern-js/doc-tools';
+import { pluginAutoSidebar } from '@modern-js/doc-plugin-auto-sidebar';
+
+const rootCategories = [
+  'tutorials',
+  'guides',
+  'apis/app',
+  'configure/app',
+  'blog',
+];
+
+const { version } = require('./package.json');
+
+const docPath = path.join(__dirname, 'docs');
+
+const getNavbar = (lang: string): NavItem[] => {
+  const cn = lang === 'zh';
+  const prefix = cn ? '' : '/en';
+  const getLink = (str: string) => `${prefix}${str}`;
+  const getText = (cnText: string, enText: string) => (cn ? cnText : enText);
+  return [
+    {
+      text: getText('指南', 'Guide'),
+      link: getLink('/guides/get-started/introduction'),
+      activeMatch: '/guides/',
+    },
+    {
+      text: getText('教程', 'Tutorials'),
+      link: getLink('/tutorials/foundations/introduction'),
+      activeMatch: '/tutorials/',
+    },
+    {
+      text: getText('配置', 'Configure'),
+      link: getLink('/configure/app/usage'),
+      activeMatch: '/configure/app',
+    },
+    {
+      text: getText('API', 'API'),
+      link: getLink('/apis/app/commands'),
+      activeMatch: '/apis/',
+    },
+    // TODO enabled after we write the v2 release blog
+    // {
+    //   text: getText('博客', 'Blog'),
+    //   link: getLink('/blog/index'),
+    //   activeMatch: '/blog/',
+    // },
+    {
+      text: `v${version}`,
+      items: [
+        {
+          text: 'Modern.js Module',
+          link: 'https://modernjs.dev/module-tools/en/',
+        },
+        {
+          text: 'Modern.js Doc',
+          link: 'https://modernjs.dev/doc-tools/',
+        },
+        {
+          text: 'Modern.js Builder',
+          link: 'https://modernjs.dev/builder/en/',
+        },
+        {
+          text: 'Modern.js v1',
+          link: 'https://modernjs.dev/v1/',
+        },
+      ],
+    },
+  ];
+};
+
+export default defineConfig({
+  doc: {
+    root: docPath,
+    base: '/',
+    logo: 'https://lf-cdn-tos.bytescm.com/obj/static/webinfra/modern-js-website/assets/images/images/modernjs-logo.svg',
+    icon: 'https://lf3-static.bytednsdoc.com/obj/eden-cn/uhbfnupenuhf/favicon.ico',
+    lang: 'zh',
+    themeDir: path.join(__dirname, 'src'),
+    markdown: {
+      checkDeadLinks: process.env.NODE_ENV === 'production',
+    },
+    head: [
+      `
+          <script>
+          ;(function (w, d, u, b, n, pc, ga, ae, po, s, p, e, t, pp) {pc = 'precollect';ga = 'getAttribute';ae = 'addEventListener';po = 'PerformanceObserver';s = function (m) {p = [].slice.call(arguments);p.push(Date.now(), location.href);(m == pc ? s.p.a : s.q).push(p)};s.q = [];s.p = { a: [] };w[n] = s;e = document.createElement('script');e.src = u + '?bid=' + b + '&globalName=' + n;e.crossorigin = u.indexOf('sdk-web') > 0 ? 'anonymous' : 'use-credentials';d.getElementsByTagName('head')[0].appendChild(e);if (ae in w) {s.pcErr = function (e) {e = e || w.event;t = e.target || e.srcElement;if (t instanceof Element || t instanceof HTMLElement) {if (t[ga]('integrity')) {w[n](pc, 'sri', t[ga]('href') || t[ga]('src'))} else {w[n](pc, 'st', { tagName: t.tagName, url: t[ga]('href') || t[ga]('src') })}} else {w[n](pc, 'err', e.error)}};s.pcRej = function (e) {e = e || w.event;w[n](pc, 'err', e.reason || (e.detail && e.detail.reason))};w[ae]('error', s.pcErr, true);w[ae]('unhandledrejection', s.pcRej, true);};if('PerformanceLongTaskTiming' in w) {pp = s.pp = { entries: [] };pp.observer = new PerformanceObserver(function (l) {pp.entries = pp.entries.concat(l.getEntries)});pp.observer.observe({ entryTypes: ['longtask', 'largest-contentful-paint','layout-shift'] })}})(window,document,'https://lf3-short.bytegoofy.com/slardar/fe/sdk-web/browser.cn.js','modernjs_dev','Slardar');
+
+          </script>
+          `,
+      `
+          <script>
+            window.Slardar('init', {
+              bid: 'modernjs_dev'
+            });
+            window.Slardar('start')
+          </script>
+          `,
+    ],
+    themeConfig: {
+      locales: [
+        {
+          lang: 'zh',
+          title: 'Modern.js',
+          description:
+            'A Progressive React Framework for modern web development.',
+          nav: getNavbar('zh'),
+          label: '简体中文',
+        },
+        {
+          lang: 'en',
+          title: 'Modern.js',
+          description:
+            'A Progressive React Framework for modern web development.',
+          nav: getNavbar('en'),
+          label: 'English',
+        },
+      ],
+      socialLinks: [
+        {
+          icon: 'github',
+          mode: 'link',
+          content: 'https://github.com/web-infra-dev/modern.js',
+        },
+      ],
+    },
+    route: {
+      exclude: ['scripts/**', '**/components/**'],
+    },
+    builderConfig: {
+      output: {
+        disableTsChecker: true,
+        svgDefaultExport: 'component',
+        dataUriLimit: 0,
+      },
+      dev: {
+        startUrl: true,
+      },
+      source: {
+        alias: {
+          '@site-docs': path.join(__dirname, './docs/zh'),
+          '@site-docs-en': path.join(__dirname, './docs/en'),
+          '@site': require('path').resolve(__dirname),
+        },
+      },
+    },
+    plugins: [
+      pluginAutoSidebar({
+        root: docPath,
+        categories: ['zh', 'en'].flatMap(lang =>
+          rootCategories.map(category => `${lang}/${category}`),
+        ),
+      }),
+    ],
+  },
+  plugins: [docTools()],
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@modern-js/main-doc",
-  "description": "Shared documentation of modern.js framework",
+  "description": "Documentation of modern.js framework",
   "homepage": "https://modernjs.dev",
   "bugs": "https://github.com/web-infra-dev/modern.js/issues",
   "repository": "web-infra-dev/modern.js",
@@ -11,23 +11,32 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1678874896224",
+  "version": "0.0.0-next-1678891119529",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1678874896224"
+    "@modern-js/builder-doc": "0.0.0-next-1678891119529"
   },
   "devDependencies": {
+    "classnames": "^2",
+    "clsx": "^1.2.1",
+    "react": "^18",
+    "react-dom": "^18",
     "ts-node": "^10",
     "typescript": "^4",
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1678874896224"
+    "@modern-js/builder-doc": "0.0.0-next-1678891119529",
+    "@modern-js/doc-tools": "0.0.0-next-1678891119529",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1678891119529"
   },
   "scripts": {
-    "build": "npx ts-node ./scripts/sync.ts"
+    "dev": "modern dev",
+    "build": "npx ts-node ./scripts/sync.ts",
+    "build:doc": "modern build",
+    "preview": "modern preview"
   }
 }

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

@@ -0,0 +1,61 @@
+.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);
+  width: calc(50% - 16px);
+  cursor: pointer;
+  margin-bottom: 32px;
+  flex: 0 0 auto;
+  transition: all 0.3s ease;
+  text-decoration: none;
+
+  &:nth-child(2n) {
+    margin-left: 32px;
+  }
+
+  &:hover {
+    transition: all 0.3s ease;
+    color: #fff;
+    background-color: rgba(51, 194, 255, 0.2);
+  }
+}
+
+.title {
+  display: inline-block;
+  font-weight: 800;
+  font-size: 24px;
+  line-height: 1.4;
+}
+
+.desc {
+  display: inline-block;
+  margin-top: 16px;
+  font-size: 14px;
+  line-height: 1.4;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.icon {
+  width: 56px;
+  margin-top: 10px;
+  flex-shrink: 0;
+  height: 56px;
+  fill: #fff;
+}
+
+@media screen and (max-width: 768px) {
+  .card {
+    width: 100%;
+
+    &:nth-child(2n) {
+      margin-left: 0;
+    }
+  }
+}

package/src/components/ContentCard/index.tsx

@@ -0,0 +1,25 @@
+import React, { ComponentType, SVGProps } from 'react';
+import cl from 'classnames';
+import { withBase } from '@modern-js/doc-tools/runtime';
+import styles from './index.module.scss';
+
+export interface ContentCardProps {
+  title: string;
+  desc?: string;
+  img?: string | ComponentType<SVGProps<SVGSVGElement>>;
+  href: string;
+}
+
+const ContentCard: React.FC<ContentCardProps> = ({ title, desc, href }) => (
+  <a
+    href={withBase(href)}
+    target="_blank"
+    style={{ textDecoration: 'none' }}
+    className={cl(styles.card)}
+  >
+    <span className={styles.title}>{title}</span>
+    <span className={styles.desc}>{desc}</span>
+  </a>
+);
+
+export default ContentCard;

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

@@ -0,0 +1,8 @@
+.feature-layout {
+  display: flex;
+  flex-direction: column;
+  width: 80vw;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 20vh 0 0;
+}

package/src/components/FeatureLayout/index.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import styles from './index.module.css';
+
+export const FeatureLayout: React.FC<{ children: React.ReactNode }> = ({
+  children,
+}) => <div className={styles['feature-layout']}>{children}</div>;
+
+export default FeatureLayout;