@modern-js/main-doc 2.14.0 → 2.16.0

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: 1100px) {
+  .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: 17px;
+  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,73 @@
+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',
+    },
+    {
+      name: t('volcengineDeveloper'),
+      url: 'https://developer.volcengine.com/',
+      preview:
+        'https://lf3-static.bytednsdoc.com/obj/eden-cn/zq-uylkvT/ljhwZthlaukjlkulzlp/showcase/developer-volcengine-0425.png',
+      type: 'framework',
+    },
+  ];
+};

package/src/i18n/enUS.ts

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

package/src/i18n/zhCN.ts

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

package/docs/zh/community/index.mdx

@@ -1,3 +0,0 @@
-# 社区
-
-Modern.js 社区正在建设中，敬请关注！