@modern-js/main-doc 0.0.0-next-1682345215633 → 0.0.0-next-1682397076713

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @modern-js/main-doc
 
-## 0.0.0-next-1682345215633
+## 0.0.0-next-1682397076713
 
 ### Patch Changes
 
@@ -13,7 +13,7 @@
   fix(builder): 修复 browserslist 配置会对 node 产物生效的问题
 
 - Updated dependencies [fe92de6a5]
-  - @modern-js/builder-doc@0.0.0-next-1682345215633
+  - @modern-js/builder-doc@0.0.0-next-1682397076713
 
 ## 2.15.0
 

package/docs/en/about/showcase.mdx

@@ -0,0 +1,15 @@
+---
+sidebar_position: 0
+---
+
+# Showcase
+
+Welcome to the Modern.js showcase page! Here, we present a collection of websites that have been built using Modern.js.
+
+If you have built a website using Modern.js, we would love for you to share it with the community. Simply reply to the GitHub discussion thread with a link to your website. We will collect content on a regular basis and display it on the current page.
+
+## The Cases
+
+import { ShowcaseList } from '@site/src/components/ShowcaseList';
+
+<ShowcaseList />

package/docs/en/about/team.mdx

@@ -2,11 +2,11 @@
 sidebar_position: 1
 ---
 
-# 团队
+# Meet the Team
 
-Modern.js 的开发由 ByteDance 的 Modern.js 团队和社区贡献者驱动。
+The development of Modern.js is driven by ByteDance's Modern.js team and community contributors.
 
-## 核心团队成员
+## Core Team Members
 
 import { RandomMemberList } from '@site/src/components/RandomMemberList';
 

package/docs/zh/about/showcase.mdx

@@ -0,0 +1,15 @@
+---
+sidebar_position: 0
+---
+
+# 案例展示
+
+欢迎来到 Modern.js 的案例展示页面！在这里，我们展示了一些基于 Modern.js 所实现的网站。
+
+如果你使用 Modern.js 构建了一个网站，欢迎你与社区分享它。只需回复 [GitHub 讨论贴](https://github.com/web-infra-dev/modern.js/discussions/3554) 并附上你网站的链接即可。我们会定期收集内容，并将它们展示在当前页面。
+
+## 案例
+
+import { ShowcaseList } from '@site/src/components/ShowcaseList';
+
+<ShowcaseList />

package/docs/zh/about/team.mdx

@@ -2,11 +2,11 @@
 sidebar_position: 1
 ---
 
-# Meet the Team
+# 团队
 
-The development of Modern.js is driven by ByteDance's Modern.js team and community contributors.
+Modern.js 的开发由字节跳动的 Modern.js 团队和社区贡献者驱动。
 
-## Core Team Members
+## 核心团队成员
 
 import { RandomMemberList } from '@site/src/components/RandomMemberList';
 

package/modern.config.ts

@@ -48,7 +48,7 @@ const getNavbar = (lang: string): NavItem[] => {
     },
     {
       text: getText('关于', 'About'),
-      link: getLink('/about/team'),
+      link: getLink('/about/showcase'),
       activeMatch: '/about/',
     },
     {

package/package.json

@@ -11,13 +11,13 @@
     "modern",
     "modern.js"
   ],
-  "version": "0.0.0-next-1682345215633",
+  "version": "0.0.0-next-1682397076713",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/",
     "access": "public"
   },
   "peerDependencies": {
-    "@modern-js/builder-doc": "0.0.0-next-1682345215633"
+    "@modern-js/builder-doc": "0.0.0-next-1682397076713"
   },
   "devDependencies": {
     "classnames": "^2",
@@ -29,9 +29,9 @@
     "fs-extra": "^10",
     "@types/node": "^16",
     "@types/fs-extra": "^9",
-    "@modern-js/builder-doc": "0.0.0-next-1682345215633",
-    "@modern-js/doc-tools": "0.0.0-next-1682345215633",
-    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1682345215633"
+    "@modern-js/builder-doc": "0.0.0-next-1682397076713",
+    "@modern-js/doc-tools": "0.0.0-next-1682397076713",
+    "@modern-js/doc-plugin-auto-sidebar": "0.0.0-next-1682397076713"
   },
   "scripts": {
     "dev": "modern dev",

package/src/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["@modern-js-app"]
+}

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

@@ -0,0 +1,80 @@
+.wrapper {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 32px;
+}
+
+@media (max-width: 600px) {
+  .wrapper {
+    grid-template-columns: repeat(1, 1fr);
+  }
+}
+
+.card {
+  display: block;
+  cursor: pointer;
+  age-break-inside: avoid;
+  break-inside: avoid;
+  border-radius: 20px;
+  overflow: hidden;
+  transition: 0.15s ease-in;
+  border: 1px solid var(--modern-c-divider-light);
+
+  &:hover {
+    border-color: var(--modern-c-brand);
+  }
+}
+
+.preview {
+  display: block;
+  width: 100%;
+  aspect-ratio: 1.84;
+  object-fit: contain;
+  cursor: pointer;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  pointer-events: none;
+  background-color: var(--modern-c-bg-soft);
+}
+
+.bottom {
+  padding: 12px 18px 14px;
+}
+
+.name {
+  display: flex;
+  justify-content: space-between;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 28px;
+  color: var(--modern-c-text-1);
+}
+
+.type {
+  display: block;
+  color: #fff;
+  font-size: 12px;
+  background: -webkit-linear-gradient(
+    305deg,
+    hsl(166deg, 77%, 43%) 10%,
+    hsl(198deg, 100%, 50%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+}
+
+:global(.dark) .type {
+  background: -webkit-linear-gradient(
+    305deg,
+    hsl(166deg, 77%, 53%) 10%,
+    hsl(198deg, 100%, 60%)
+  );
+  background-clip: text;
+  -webkit-background-clip: text;
+}
+
+.domain {
+  font-size: 13px;
+  line-height: 24px;
+  color: var(--modern-c-text-2);
+}

package/src/components/ShowcaseList/index.tsx

@@ -0,0 +1,39 @@
+import { useShowcases } from './useShowcases';
+import styles from './index.module.scss';
+
+const getDomain = (url: string) => new URL(url).hostname;
+
+const TYPE_MAP = {
+  doc: 'Modern.js Doc',
+  module: 'Modern.js Module',
+  builder: 'Modern.js Builder',
+  framework: 'Modern.js Framework',
+};
+
+export const ShowcaseList = () => {
+  const showcases = useShowcases();
+
+  return (
+    <div className={styles.wrapper}>
+      {showcases.map(item => {
+        return (
+          <a
+            key={item.url}
+            href={item.url}
+            target="_blank"
+            className={styles.card}
+          >
+            <img src={item.preview} className={styles.preview} />
+            <div className={styles.bottom}>
+              <div className={styles.name}>
+                {item.name}
+                <span className={styles.type}>{TYPE_MAP[item.type]}</span>
+              </div>
+              <div className={styles.domain}>{getDomain(item.url)}</div>
+            </div>
+          </a>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/ShowcaseList/useShowcases.ts

@@ -0,0 +1,66 @@
+import { useI18n } from '../../i18n';
+
+export type ShowcaseType = 'framework' | 'builder' | 'doc' | 'module';
+
+export type ShowcaseItem = {
+  url: string;
+  name: string;
+  preview: string;
+  type: ShowcaseType;
+};
+
+export const useShowcases = (): ShowcaseItem[] => {
+  const t = useI18n();
+
+  return [
+    {
+      name: t('volctrans'),
+      url: 'https://translate.volcengine.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/volctrans-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: t('writingo'),
+      url: 'https://writingo.net/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/writingo-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: 'Rspack',
+      url: 'https://rspack.dev/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/rspack-0424.jpeg',
+      type: 'doc',
+    },
+    {
+      name: 'Modern.js',
+      url: 'https://modernjs.dev/en/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/modernjs-dev-0425.jpeg',
+      type: 'doc',
+    },
+    {
+      name: t('shidianbaike'),
+      url: 'https://shidian.baike.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/shidianbaike-0424.jpeg',
+      type: 'framework',
+    },
+    {
+      name: t('xiaohe'),
+      url: 'https://xiaohe.cn/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/xiaohe-0424.png',
+      type: 'framework',
+    },
+    {
+      name: t('dongchedi'),
+      url: 'https://m.dcdapp.com/motor/feoffline/usedcar_channel/channel.html',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/dongchedi-0425.png',
+      type: 'builder',
+    },
+  ];
+};

package/src/i18n/enUS.ts

@@ -47,4 +47,11 @@ export const EN_US = {
   projectGenerator: 'Project Generator',
   githubDiscussion: 'Github Discussion',
   changelog: 'Changelog',
+
+  // Showcases
+  writingo: 'Writingo',
+  volctrans: 'Volctrans',
+  shidianbaike: 'Shidian Baike',
+  xiaohe: 'Xiaohe',
+  dongchedi: 'Dongchedi',
 } as const;

package/src/i18n/zhCN.ts

@@ -47,4 +47,11 @@ export const ZH_CN: Record<keyof typeof EN_US, string> = {
   projectGenerator: '项目生成器',
   githubDiscussion: 'Github 讨论区',
   changelog: '更新日志',
+
+  // Showcase
+  writingo: '火山写作',
+  volctrans: '火山翻译',
+  shidianbaike: '识典百科',
+  xiaohe: '小荷健康',
+  dongchedi: '懂车帝',
 };