@modern-js/main-doc 2.8.0 → 2.9.0

package/en/configure/app/source/pre-entry.mdx

@@ -8,6 +8,6 @@ sidebar_label: preEntry
 This config is provided by Modern.js Builder, more detail can see [source.preEntry](https://modernjs.dev/builder/en/api/config-source.html#sourcepreentry).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/source/preEntry.md'
+import Main from '@modern-js/builder-doc/docs/en/config/source/preEntry.md';
 
 <Main />

package/en/configure/app/source/resolve-extension-prefix.mdx

@@ -8,6 +8,6 @@ sidebar_label: resolveExtensionPrefix
 This config is provided by Modern.js Builder, more detail can see [source.resolveExtensionPrefix](https://modernjs.dev/builder/en/api/config-source.html#sourceresolveextensionprefix).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/source/resolveExtensionPrefix.md'
+import Main from '@modern-js/builder-doc/docs/en/config/source/resolveExtensionPrefix.md';
 
 <Main />

package/en/configure/app/source/resolve-main-fields.mdx

@@ -8,6 +8,6 @@ sidebar_label: resolveMainFields
 This config is provided by Modern.js Builder, more detail can see [source.resolveMainFields](https://modernjs.dev/builder/en/api/config-source.html#sourceresolvemainfields).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/source/resolveMainFields.md'
+import Main from '@modern-js/builder-doc/docs/en/config/source/resolveMainFields.md';
 
 <Main />

package/en/configure/app/tools/autoprefixer.mdx

@@ -8,6 +8,6 @@ sidebar_label: autoprefixer
 This config is provided by Modern.js Builder, more detail can see [tools.autoprefixer](https://modernjs.dev/builder/en/api/config-tools.html#toolsautoprefixer).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/autoprefixer.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/autoprefixer.md';
 
 <Main />

package/en/configure/app/tools/babel.mdx

@@ -8,6 +8,6 @@ sidebar_label: babel
 This config is provided by Modern.js Builder, more detail can see [tools.babel](https://modernjs.dev/builder/en/api/config-tools.html#toolsbabel).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/babel.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/babel.md';
 
 <Main />

package/en/configure/app/tools/css-extract.mdx

@@ -8,6 +8,6 @@ sidebar_label: cssExtract
 This config is provided by Modern.js Builder, more detail can see [tools.cssExtract](https://modernjs.dev/builder/en/api/config-tools.html#toolscssextract).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/cssExtract.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/cssExtract.md';
 
 <Main />

package/en/configure/app/tools/css-loader.mdx

@@ -8,6 +8,6 @@ sidebar_label: cssLoader
 This config is provided by Modern.js Builder, more detail can see [tools.cssLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolscssloader).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/cssLoader.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/cssLoader.md';
 
 <Main />

package/en/configure/app/tools/dev-server.mdx

@@ -8,6 +8,6 @@ sidebar_label: devServer
 This config is provided by Modern.js Builder, more detail can see [tools.devServer](https://modernjs.dev/builder/en/api/config-tools.html#toolsdevserver).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/devServer.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/devServer.md';
 
 <Main />

package/en/configure/app/tools/html-plugin.mdx

@@ -8,6 +8,6 @@ sidebar_label: htmlPlugin
 This config is provided by Modern.js Builder, more detail can see [tools.htmlPlugin](https://modernjs.dev/builder/en/api/config-tools.html#toolshtmlplugin).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/htmlPlugin.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/htmlPlugin.md';
 
 <Main />

package/en/configure/app/tools/inspector.mdx

@@ -8,6 +8,6 @@ sidebar_label: inspector
 This config is provided by Modern.js Builder, more detail can see [tools.inspector](https://modernjs.dev/builder/en/api/config-tools.html#toolsinspector).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/inspector.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/inspector.md';
 
 <Main />

package/en/configure/app/tools/less.mdx

@@ -8,6 +8,6 @@ sidebar_label: less
 This config is provided by Modern.js Builder, more detail can see [tools.less](https://modernjs.dev/builder/en/api/config-tools.html#toolsless).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/less.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/less.md';
 
 <Main />

package/en/configure/app/tools/minify-css.mdx

@@ -8,6 +8,6 @@ sidebar_label: minifyCss
 This config is provided by Modern.js Builder, more detail can see [tools.minifyCss](https://modernjs.dev/builder/en/api/config-tools.html#toolsminifycss).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/minifyCss.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/minifyCss.md';
 
 <Main />

package/en/configure/app/tools/postcss.mdx

@@ -8,6 +8,6 @@ sidebar_label: postcss
 This config is provided by Modern.js Builder, more detail can see [tools.postcss](https://modernjs.dev/builder/en/api/config-tools.html#toolspostcss).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/postcss.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/postcss.md';
 
 <Main />

package/en/configure/app/tools/pug.mdx

@@ -8,6 +8,6 @@ sidebar_label: pug
 This config is provided by Modern.js Builder, more detail can see [tools.pug](https://modernjs.dev/builder/en/api/config-tools.html#toolspug).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/pug.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/pug.md';
 
 <Main />

package/en/configure/app/tools/rspack.mdx

@@ -8,6 +8,6 @@ sidebar_label: rspack
 This config is provided by Modern.js Builder, more detail can see [tools.rspack](https://modernjs.dev/builder/en/api/config-tools.html#toolsrspack).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/rspack.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/rspack.md';
 
 <Main />

package/en/configure/app/tools/sass.mdx

@@ -8,6 +8,6 @@ sidebar_label: sass
 This config is provided by Modern.js Builder, more detail can see [tools.sass](https://modernjs.dev/builder/en/api/config-tools.html#toolssass).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/sass.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/sass.md';
 
 <Main />

package/en/configure/app/tools/style-loader.mdx

@@ -8,6 +8,6 @@ sidebar_label: styleLoader
 This config is provided by Modern.js Builder, more detail can see [tools.styleLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolsstyleloader).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/styleLoader.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/styleLoader.md';
 
 <Main />

package/en/configure/app/tools/styled-components.mdx

@@ -8,6 +8,6 @@ sidebar_label: styledComponents
 This config is provided by Modern.js Builder, more detail can see [tools.styledComponents](https://modernjs.dev/builder/en/api/config-tools.html#toolsstyledcomponents).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/styledComponents.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/styledComponents.md';
 
 <Main />

package/en/configure/app/tools/terser.mdx

@@ -8,6 +8,6 @@ sidebar_label: terser
 This config is provided by Modern.js Builder, more detail can see [tools.terser](https://modernjs.dev/builder/en/api/config-tools.html#toolsterser).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/terser.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/terser.md';
 
 <Main />

package/en/configure/app/tools/ts-checker.mdx

@@ -8,6 +8,6 @@ sidebar_label: tsChecker
 This config is provided by Modern.js Builder, more detail can see [tools.tsChecker](https://modernjs.dev/builder/en/api/config-tools.html#toolstschecker).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/tsChecker.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/tsChecker.md';
 
 <Main />

package/en/configure/app/tools/ts-loader.mdx

@@ -8,6 +8,6 @@ sidebar_label: tsLoader
 This config is provided by Modern.js Builder, more detail can see [tools.tsLoader](https://modernjs.dev/builder/en/api/config-tools.html#toolstsloader).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/tsLoader.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/tsLoader.md';
 
 <Main />

package/en/configure/app/tools/webpack-chain.mdx

@@ -8,6 +8,6 @@ sidebar_label: webpackChain
 This config is provided by Modern.js Builder, more detail can see [tools.webpackChain](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpackchain).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/webpackChain.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/webpackChain.md';
 
 <Main />

package/en/configure/app/tools/webpack.mdx

@@ -8,6 +8,6 @@ sidebar_label: webpack
 This config is provided by Modern.js Builder, more detail can see [tools.webpack](https://modernjs.dev/builder/en/api/config-tools.html#toolswebpack).
 :::
 
-import Main from '@modern-js/builder-doc/docs/en/config/tools/webpack.md'
+import Main from '@modern-js/builder-doc/docs/en/config/tools/webpack.md';
 
 <Main />

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": "2.8.0",
+  "version": "2.9.0",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "^2.8.0"
+    "@modern-js/builder-doc": "^2.9.0"
   },
   "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": "2.8.0"
+    "@modern-js/builder-doc": "2.9.0",
+    "@modern-js/doc-tools": "2.9.0",
+    "@modern-js/doc-plugin-auto-sidebar": "2.9.0"
   },
   "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;

package/src/components/Footer/index.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+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/'),
+        },
+        {
+          label: t('advancedFeatures'),
+          to: useUrl('/guides/advanced-features/'),
+        },
+      ],
+    },
+    {
+      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('microFrontend'),
+          to: useUrl('/guides/topic-detail/micro-frontend/c01-introduction'),
+        },
+        {
+          label: t('stateManagement'),
+          to: useUrl('/guides/topic-detail/model/quick-start'),
+        },
+        {
+          label: t('pluginSystem'),
+          to: useUrl('/guides/topic-detail/framework-plugin/introduction'),
+        },
+        {
+          label: t('projectGenerator'),
+          to: useUrl('/guides/topic-detail/generator/project'),
+        },
+      ],
+    },
+    {
+      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, i) => (
+    <div className={styles.linkWrapper} key={i}>
+      <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}>
+        <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>
+  );
+}