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

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@bleedingdev/modern-js-main-doc",
+  "description": "Documentation of modern.js framework",
+  "type": "module",
+  "homepage": "https://github.com/BleedingDev/ultramodern.js#readme",
+  "bugs": {
+    "url": "https://github.com/BleedingDev/ultramodern.js/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/BleedingDev/ultramodern.js.git",
+    "directory": "packages/document"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "framework",
+    "modern",
+    "modern.js"
+  ],
+  "version": "3.2.0-ultramodern.0",
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public"
+  },
+  "dependencies": {
+    "mermaid": "^11.15.0",
+    "@modern-js/sandpack-react": "npm:@bleedingdev/modern-js-sandpack-react@3.2.0-ultramodern.0"
+  },
+  "devDependencies": {
+    "@rsbuild/plugin-sass": "1.5.2",
+    "@rspress/core": "2.0.11",
+    "@rspress/plugin-llms": "2.0.11",
+    "@rspress/shared": "2.0.11",
+    "@shikijs/transformers": "^4.0.2",
+    "@types/fs-extra": "11.0.4",
+    "@types/node": "^25.8.0",
+    "@typescript/native-preview": "7.0.0-dev.20260516.1",
+    "classnames": "^2.5.1",
+    "clsx": "^2.1.1",
+    "fs-extra": "^11.3.5",
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "rsbuild-plugin-open-graph": "1.1.2"
+  },
+  "scripts": {
+    "dev": "rspress dev",
+    "dev:no_lazy": "LAZY=false rspress dev",
+    "build": "rspress build",
+    "preview": "rspress preview"
+  }
+}

package/rspress.config.ts

@@ -0,0 +1,153 @@
+import { pluginSass } from '@rsbuild/plugin-sass';
+import { defineConfig } from '@rspress/core';
+import { transformerNotationHighlight } from '@shikijs/transformers';
+import path from 'path';
+import { pluginOpenGraph } from 'rsbuild-plugin-open-graph';
+
+const docPath = path.join(__dirname, 'docs');
+const siteTitle = 'Modern.js';
+const siteDescription =
+  'The Modern.js framework is a progressive web framework based on React. At ByteDance, we use Modern.js to build upper-level frameworks that have supported the development of thousands of web applications.';
+const socialDescription =
+  'A Progressive React Framework for modern web development.';
+const socialImage =
+  'https://lf3-static.bytednsdoc.com/obj/eden-cn/nuvjhpqnuvr/modern-website/banner.jpeg';
+
+function normalizeBase(base = '/') {
+  const trimmed = base.trim();
+  const withLeadingSlash = trimmed.startsWith('/') ? trimmed : `/${trimmed}`;
+  return withLeadingSlash.endsWith('/')
+    ? withLeadingSlash
+    : `${withLeadingSlash}/`;
+}
+
+// Set by CI for GitHub Pages project sites. Defaults to root for local dev/custom domains.
+const docsBase = normalizeBase(process.env.DOCS_BASE);
+
+export default defineConfig({
+  root: docPath,
+  llms: true,
+  title: siteTitle,
+  description: siteDescription,
+  base: docsBase,
+  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: 'en',
+  themeDir: path.join(__dirname, 'src'),
+  markdown: {
+    checkDeadLinks: true,
+    shiki: {
+      transformers: [transformerNotationHighlight()],
+    },
+  },
+  search: {
+    codeBlocks: true,
+  },
+  // head: [
+  //   () => {
+  //     return [
+  //       `<meta property="og:image" content="${socialImage}">`,
+  //       `<meta property="og:description" content="${socialDescription}">`,
+  //       `<meta property="og:image:alt" content="${siteTitle}">`,
+  //       `<meta name="twitter:card" content="summary_large_image">`,
+  //       `<meta name="twitter:title" content="${siteTitle}">`,
+  //       `<meta name="twitter:description" content="${socialDescription}">`,
+  //       `<meta name="twitter:image" content="${socialImage}">`,
+  //       `<meta name="twitter:image:alt" content="${siteTitle}">`,
+  //     ].join('');
+  //   },
+  // ],
+  themeConfig: {
+    locales: [
+      {
+        lang: 'zh',
+        title: siteTitle,
+        description: socialDescription,
+        // nav: getNavbar('zh'),
+        label: '简体中文',
+      },
+      {
+        lang: 'en',
+        title: siteTitle,
+        description: socialDescription,
+        // nav: getNavbar('en'),
+        label: 'English',
+      },
+    ],
+    editLink: {
+      docRepoBaseUrl:
+        'https://github.com/web-infra-dev/modern.js/tree/main/packages/document/docs',
+      text: 'Edit this page on GitHub',
+    },
+    socialLinks: [
+      {
+        icon: 'discord',
+        mode: 'link',
+        content: 'https://discord.gg/qPCqYg38De',
+      },
+      {
+        icon: 'github',
+        mode: 'link',
+        content: 'https://github.com/web-infra-dev/modern.js',
+      },
+    ],
+  },
+  route: {
+    // exclude document fragments from routes
+    exclude: ['scripts/**', '**/zh/components/**', '**/en/components/**'],
+  },
+  replaceRules: [
+    {
+      // The major version is different inside the ByteDance,
+      // so we use a flag to define it.
+      search: /MAJOR_VERSION/g,
+      replace: '2',
+    },
+  ],
+  builderConfig: {
+    performance: {
+      buildCache: false,
+    },
+    tools: {
+      // FIXME: use `?raw` after upgrading to Rsbuild@1.4.0, https://github.com/web-infra-dev/rsbuild/pull/5355
+      rspack(_config, { addRules }) {
+        addRules([
+          {
+            test: /\.txt$/i,
+            type: 'asset/source',
+          },
+        ]);
+      },
+    },
+    output: {
+      dataUriLimit: 0,
+    },
+    dev: {
+      lazyCompilation: process.env.LAZY !== 'false',
+    },
+    resolve: {
+      alias: {
+        '@site-docs': path.join(__dirname, './docs/zh'),
+        '@site-docs-en': path.join(__dirname, './docs/en'),
+        '@site': require('path').resolve(__dirname),
+      },
+    },
+    plugins: [
+      pluginSass(),
+      pluginOpenGraph({
+        // Note, title is page-specific
+        title: 'Modern.js Home Page',
+        // While site name is site wide
+        siteName: siteTitle,
+        type: 'website',
+        url: 'https://modernjs.dev/',
+        image: socialImage,
+        description: socialDescription,
+        twitter: {
+          site: '@_Modern_JS',
+          card: 'summary_large_image',
+        },
+      }),
+    ],
+  },
+});

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

@@ -0,0 +1,65 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  padding: 32px 32px 36px;
+  font-weight: 500;
+  font-size: 20px;
+  box-sizing: border-box;
+  border-radius: 24px;
+  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;
+  flex: 0 0 auto;
+  transition: all 0.3s ease;
+  text-decoration: none;
+
+  &:nth-child(2n) {
+    margin-left: 32px;
+  }
+
+  &:hover {
+    background: linear-gradient(
+      150.85deg,
+      rgba(124, 178, 250, 0.2) 3%,
+      rgba(124, 178, 250, 0.1) 97.17%
+    );
+  }
+}
+
+.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;
+  opacity: 0.8;
+}
+
+.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,24 @@
+import { withBase } from '@rspress/core/runtime';
+import cl from 'classnames';
+import type React from 'react';
+import styles from './index.module.scss';
+
+export interface ContentCardProps {
+  title: string;
+  desc?: string;
+  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: 0 0 10vh;
+}

package/src/components/FeatureLayout/index.tsx

@@ -0,0 +1,8 @@
+import type 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;

package/src/components/Footer/index.tsx

@@ -0,0 +1,118 @@
+import { useI18n, useUrl } from '../../i18n';
+import styles from './styles.module.scss';
+
+const isExternalUrl = (url: string) => {
+  return url.startsWith('http://') || url.startsWith('https://');
+};
+
+function FooterLink({ to, href, label, ...props }: any) {
+  return (
+    <a
+      className="linkItem"
+      target="_blank"
+      {...{ href: href || to }}
+      {...props}
+    >
+      {href && isExternalUrl(href) ? <span>{label}</span> : label}
+    </a>
+  );
+}
+
+export default function Footer() {
+  const t = useI18n();
+  const links = [
+    {
+      title: t('guide'),
+      items: [
+        {
+          label: t('quickStart'),
+          to: useUrl('/guides/get-started/quick-start'),
+        },
+        {
+          label: t('coreConcept'),
+          to: useUrl('/guides/concept/entries'),
+        },
+        {
+          label: t('basicFeatures'),
+          to: useUrl('/guides/basic-features/routes'),
+        },
+        {
+          label: t('advancedFeatures'),
+          to: useUrl('/guides/advanced-features/bff'),
+        },
+      ],
+    },
+    {
+      title: 'API',
+      items: [
+        {
+          label: t('configuration'),
+          to: useUrl('/configure/app/usage'),
+        },
+        {
+          label: t('command'),
+          to: useUrl('/apis/app/commands'),
+        },
+        {
+          label: t('runtime'),
+          to: useUrl('/apis/app/runtime/core/bootstrap'),
+        },
+        {
+          label: t('conventions'),
+          to: useUrl('apis/app/hooks/src/app'),
+        },
+      ],
+    },
+    {
+      title: t('topic'),
+      items: [
+        {
+          label: t('moduleFederation'),
+          to: useUrl('/guides/topic-detail/module-federation/introduce'),
+        },
+        {
+          label: t('pluginSystem'),
+          to: useUrl('/plugin/plugin-system'),
+        },
+      ],
+    },
+    {
+      title: t('help'),
+      items: [
+        {
+          label: t('changelog'),
+          to: 'https://github.com/web-infra-dev/modern.js/releases',
+        },
+        {
+          label: 'GitHub Issues',
+          to: 'https://github.com/web-infra-dev/modern.js/issues',
+        },
+        {
+          label: t('githubDiscussion'),
+          to: 'https://github.com/web-infra-dev/modern.js/discussions',
+        },
+      ],
+    },
+  ];
+
+  const Links = links.map(linkItem => (
+    <div className={styles.linkWrapper} key={linkItem.title}>
+      <div className={styles.linkTitle}>{linkItem.title}</div>
+      <ul className={styles.items}>
+        {linkItem.items.map((item, key) => (
+          <li key={item.to || key} className={styles.link}>
+            <FooterLink {...item} />
+          </li>
+        ))}
+      </ul>
+    </div>
+  ));
+
+  return (
+    <footer className={styles.footer}>
+      <div className={styles.wrapper}>
+        <div className={styles.linksWrapper}>{Links}</div>
+      </div>
+    </footer>
+  );
+}

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

@@ -0,0 +1,49 @@
+.footer {
+  display: flex;
+  justify-content: center;
+  padding: 10vh 0;
+  border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.logo {
+  width: 240px;
+  margin-bottom: 48px;
+}
+
+.wrapper {
+  width: 80vw;
+  padding: 0 16px;
+  max-width: 1200px;
+}
+
+.linksWrapper {
+  display: flex;
+  justify-content: space-between;
+  flex-wrap: wrap;
+}
+
+.linkTitle {
+  font-weight: bold;
+  font-size: 20px;
+  margin-bottom: 12px;
+}
+
+.linkWrapper {
+  margin-bottom: 24px;
+}
+
+.link {
+  line-height: 32px;
+  font-size: 15px;
+  opacity: 0.7;
+
+  &:hover {
+    opacity: 1;
+  }
+}
+
+@media (max-width: 768px) {
+  .linkWrapper {
+    width: 50%;
+  }
+}