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

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>
+  );
+}

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

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

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

@@ -0,0 +1,58 @@
+
+.card{
+  display: flex;
+  max-width: 32%;
+  flex: 1 1 32%;
+  align-items: center;
+  margin-left: 16px;
+  margin-bottom: 16px;
+  height: 135px;
+  padding: 0 35.4px;
+  color: #FFFFFF;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  box-sizing: border-box;
+  border-radius: 8px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.card:hover{
+  transition: all 0.3s ease;
+  background: rgba(78, 202, 255, 0.2);
+}
+.desc{
+  display: inline-block;
+  margin-left: 20px;
+  color: #fff;
+}
+
+.icon{
+  width: 48px;
+  height: 48px;
+  fill: #fff;
+  flex: 0 0 48px;
+}
+
+@media screen and (min-width: 966px) and (max-width: 1300px) {
+  .card{
+    max-width: 48%;
+    flex: 1 1 48%;
+  }
+}
+
+@media screen and (max-width: 966px) {
+  .card{
+    width: 100%;
+    height: 70px;
+    margin: 0;
+    margin-bottom: 12px;
+    padding: 0 31px;
+    max-width: none;
+    flex: none;
+  }
+  .icon{
+    width: 20px;
+    height: 20px;
+  }
+}

package/src/components/ListCard/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { withBase } from '@modern-js/doc-tools/runtime';
+import styles from './index.module.css';
+
+export interface ICardProps {
+  desc: string;
+  icon: string;
+  href: string;
+}
+
+const ListCard: React.FC<ICardProps> = ({ desc, icon: Icon, href }) => (
+  <a
+    className={styles.card}
+    href={withBase(href)}
+    style={{ textDecoration: 'none' }}
+  >
+    {typeof Icon === 'function' ? (
+      <Icon className={styles.icon} />
+    ) : (
+      <img src={Icon} className={styles.icon} />
+    )}
+    <span className={styles.desc}>{desc}</span>
+  </a>
+);
+
+export default ListCard;

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

@@ -0,0 +1,14 @@
+.titleWrap {
+  display: flex;
+  justify-content: space-between;
+  background-image: url(https://lf3-static.bytednsdoc.com/obj/eden-cn/aphqeh7uhohpquloj/modern-js/text-bg.png);
+  background-size: 374px 32.7px;
+  background-repeat: no-repeat;
+}
+.title {
+  padding-top: 32px;
+  color: #fff;
+  font-size: 48px;
+  font-weight: bold;
+  margin-bottom: 48px;
+}

package/src/components/SecondaryTitle/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import styles from './index.module.css';
+
+interface ITitleProps {
+  seqNum?: number;
+  children: React.ReactNode;
+}
+
+const SecondaryTitle: React.FC<ITitleProps> = ({ children }) => (
+  <div className={styles.titleWrap}>
+    <h2 className={styles.title}>{children}</h2>
+  </div>
+);
+
+export default SecondaryTitle;

package/src/global.d.ts

@@ -0,0 +1,28 @@
+declare module '*.module.css' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.scss' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.sass' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.module.less' {
+  const classes: { readonly [key: string]: string };
+  export default classes;
+}
+
+declare module '*.svg' {
+  export const ReactComponent: React.FunctionComponent<
+    React.SVGProps<SVGSVGElement>
+  >;
+
+  const content: string;
+  export default content;
+}

package/src/i18n/enUS.ts

@@ -0,0 +1,50 @@
+export const EN_US = {
+  introduction: 'Introduction',
+  quickStart: 'Quick Start',
+
+  // Slogans
+  slogan: 'A Progressive React Framework for modern web development',
+  secondSlogan1: 'Enjoy the development experience.',
+  secondSlogan2: 'Make innovation happen faster.',
+
+  // Features
+  feature1: 'Rust Bundler',
+  featureDesc1: 'Easily switch to Rspack bundler with faster build speed.',
+  feature2: 'Integrated BFF',
+  featureDesc2:
+    'Develop BFF code in the same project, enjoy simple function calls.',
+  feature3: 'Nested Routes',
+  featureDesc3: 'File-as-route, comes with lots performance optimizations.',
+  feature4: 'Multi-Rendering Mode',
+  featureDesc4: 'SSR, SSG, SPR, all out of the box for you.',
+  feature5: 'CSS Solutions',
+  featureDesc5: 'CSS Modules, CSS-in-JS, TailwindCSS, take your pick.',
+  feature6: 'Easy to Configure',
+  featureDesc6:
+    'Launch with zero configuration, then everything is configurable.',
+
+  // Solutions
+  solutions: 'Solutions',
+  solutionsDesc1: 'A progressive React framework for web development.',
+  solutionsDesc2: 'A powerful solution for npm package development.',
+  solutionsDesc3: 'A documentation site solution with modern tech stack.',
+  solutionsDesc4: 'A Build Engine for web development.',
+
+  // Footer
+  guide: 'Guide',
+  topic: 'Topic',
+  help: 'Help',
+  coreConcept: 'Core Concept',
+  basicFeatures: 'Basic Features',
+  advancedFeatures: 'Advanced Features',
+  configuration: 'Configuration',
+  command: 'Command',
+  runtime: 'Runtime',
+  conventions: 'Conventions',
+  microFrontend: 'Micro Frontend',
+  stateManagement: 'State Management',
+  pluginSystem: 'Plugin System',
+  projectGenerator: 'Project Generator',
+  githubDiscussion: 'Github Discussion',
+  changelog: 'Changelog',
+} as const;

package/src/i18n/index.ts

@@ -0,0 +1,18 @@
+import { withBase, useLang } from '@modern-js/doc-tools/runtime';
+import { EN_US } from './enUS';
+import { ZH_CN } from './zhCN';
+
+const translations = {
+  en: EN_US,
+  zh: ZH_CN,
+} as const;
+
+export function useUrl(url: string) {
+  const lang = useLang();
+  return withBase(lang === 'zh' ? url : `/en${url}`);
+}
+
+export function useI18n() {
+  const lang = useLang() as keyof typeof translations;
+  return (key: keyof typeof EN_US) => translations[lang][key];
+}

package/src/i18n/zhCN.ts

@@ -0,0 +1,50 @@
+import { EN_US } from './enUS';
+
+export const ZH_CN: Record<keyof typeof EN_US, string> = {
+  introduction: '介绍',
+  quickStart: '快速上手',
+
+  // Slogans
+  slogan: '基于 React 的渐进式 Web 开发框架',
+  secondSlogan1: '享受愉悦的开发体验，',
+  secondSlogan2: '让创新更快发生。',
+
+  // Features
+  feature1: 'Rust 构建',
+  featureDesc1: '轻松切换到 Rspack 构建工具，编译飞快。',
+  feature2: '一体化开发',
+  featureDesc2: '在同一项目中完成 BFF 开发，享受简洁的函数调用。',
+  feature3: '嵌套路由',
+  featureDesc3: '文件系统即路由，附赠全套性能优化。',
+  feature4: '多渲染模式',
+  featureDesc4: 'SSR、SSG、SPR 等多种渲染模式，通通开箱即用。',
+  feature5: 'CSS 方案',
+  featureDesc5: 'CSS Modules、CSS-in-JS、TailwindCSS，任你挑选。',
+  feature6: '易于配置',
+  featureDesc6: '以零配置启动，然后一切皆可配置。',
+
+  // Solutions
+  solutions: '解决方案',
+  solutionsDesc1: '基于 React 的渐进式 Web 开发框架。',
+  solutionsDesc2: '简单、高性能的 npm 包开发方案。',
+  solutionsDesc3: '现代文档站解决方案。',
+  solutionsDesc4: '面向 Web 开发场景的构建引擎。',
+
+  // Footer
+  guide: '指南',
+  topic: '专题',
+  help: '帮助',
+  coreConcept: '核心概念',
+  basicFeatures: '基础功能',
+  advancedFeatures: '进阶功能',
+  configuration: '配置',
+  command: '命令',
+  runtime: '运行时',
+  conventions: '目录约定',
+  microFrontend: '微前端',
+  stateManagement: '状态管理',
+  pluginSystem: '插件系统',
+  projectGenerator: '项目生成器',
+  githubDiscussion: 'Github 讨论区',
+  changelog: '更新日志',
+};

package/src/index.ts

@@ -0,0 +1,9 @@
+import Theme from '@modern-js/doc-tools/theme';
+import HomeLayout from './pages';
+
+export default {
+  ...Theme,
+  HomeLayout,
+};
+
+export * from '@modern-js/doc-tools/theme';

package/src/pages/index.module.scss

@@ -0,0 +1,238 @@
+/**
+ * CSS files with the .module.css suffix will be treated as CSS modules
+ * and scoped locally.
+ */
+
+/* === Header Start === */
+.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;
+}
+
+.title {
+  font-style: normal;
+  font-weight: bold;
+  font-size: 3.4rem;
+  line-height: 1.6;
+  color: hsl(198deg 100% 90%);
+}
+
+.titleGradient {
+  background: -webkit-linear-gradient(
+    305deg,
+    hsl(166deg 77% 53%) 10%,
+    hsl(198deg, 100%, 60%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+.buttons {
+  display: flex;
+  justify-content: center;
+  margin-top: 8vh;
+}
+
+.leftButton,
+.rightButton {
+  width: 168px;
+
+  &:hover {
+    text-decoration: none;
+  }
+}
+
+.startArrow {
+  margin-left: 8px;
+  margin-top: 1px;
+}
+
+.leftButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 48px;
+  height: 48px;
+  background: linear-gradient(274.85deg, #4ecaff 3%, #64cfde 97.17%);
+  box-shadow: 0px 1px 8px rgba(133, 250, 202, 0.34);
+  border-radius: 39px;
+  color: #000000;
+  cursor: pointer;
+  opacity: 0.9;
+  transition: opacity 0.3s ease;
+
+  &:hover {
+    opacity: 1;
+    color: #000;
+  }
+}
+
+.rightButton {
+  display: flex;
+  height: 49px;
+  justify-content: center;
+  align-items: center;
+  background: #0d0d0d;
+  border: 1px solid #4ecaff;
+  box-sizing: border-box;
+  border-radius: 39px;
+  margin-left: 32px;
+  cursor: pointer;
+  color: #4ecaff;
+  transition: all 0.3s ease;
+
+  &:hover {
+    color: rgba(132, 218, 255, 1);
+    border: 1px solid #84daff;
+  }
+}
+
+@media (max-width: 1600px) {
+  .logo {
+    width: 420px;
+  }
+
+  .title {
+    font-size: 3.1rem;
+  }
+}
+
+@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;
+  }
+  .title {
+    font-size: 7vw;
+    text-align: center;
+  }
+  .buttons {
+    width: 65%;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    margin-top: 50px;
+  }
+  .leftButton,
+  .rightButton {
+    width: 100%;
+  }
+  .rightButton {
+    margin-left: 0;
+    margin-top: 32px;
+  }
+  .singleImg {
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 540px) {
+  .title {
+    font-size: 9vw;
+  }
+}
+
+/* === Header End === */
+
+.cardContainer {
+  display: flex;
+  flex-wrap: wrap;
+  margin-top: 16px;
+}
+
+.homepage-main {
+  background-color: #0d0d0d;
+}
+
+.flowContainer {
+  position: relative;
+  width: 1021px;
+  max-width: 100%;
+  margin: 0 auto;
+  height: 1261px;
+  overflow-y: hidden;
+}
+
+.flowLine {
+  position: absolute;
+  width: 95px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.flowLineMobile {
+  left: 30px;
+  width: 37.5px;
+}
+
+.singleImgWrap {
+  display: flex;
+  justify-content: center;
+  width: 100%;
+  margin-top: 48px;
+  border: 1px solid #6f6f6f;
+  border-radius: 8px;
+}
+
+.singleImg {
+  max-width: 910px;
+  object-fit: contain;
+}
+
+.singleImgCard {
+  margin-bottom: 16px;
+  transition: all 0.3s ease;
+}
+
+.singleImgCard:hover {
+  background: rgba(78, 202, 255, 0.2);
+  transition: all 0.3s ease;
+}
+
+@media screen and (max-width: 700px) {
+  .section-title {
+    font-size: 1rem;
+    font-size: 4vw;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .singleImg {
+    max-width: 100%;
+  }
+}
+
+@media screen and (max-width: 1100px) {
+  .flowContainer {
+    height: auto;
+    overflow: visible;
+  }
+}
+
+:global(.modern-doc-logo) {
+  width: auto !important;
+}