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

package/src/components/Mermaid/index.tsx

@@ -0,0 +1,64 @@
+import type { CSSProperties, PropsWithChildren } from 'react';
+import React from 'react';
+import './style.scss';
+
+import mermaid, { type MermaidConfig } from 'mermaid';
+import { useEffect, useId, useState } from 'react';
+
+interface Props {
+  style?: CSSProperties;
+  title?: string;
+  config?: MermaidConfig;
+}
+export default function Mermaid({
+  style,
+  children,
+  title,
+  config,
+}: PropsWithChildren<Props>) {
+  const id = useId();
+  const [svg, setSvg] = useState('');
+  const [renderError, setRenderError] = useState(false);
+
+  async function renderMermaid2SVG() {
+    if (typeof document === 'undefined') {
+      return;
+    }
+    // https://github.com/mermaid-js/mermaid/blob/1b40f552b20df4ab99a986dd58c9d254b3bfd7bc/packages/mermaid/src/docs/.vitepress/theme/Mermaid.vue#L53
+    const hasDarkClass = document.documentElement.classList.contains('dark');
+
+    const mermaidConfig: MermaidConfig = {
+      securityLevel: 'loose',
+      startOnLoad: false,
+      theme: hasDarkClass ? 'dark' : 'default',
+      ...config,
+    };
+
+    try {
+      mermaid.initialize(mermaidConfig);
+
+      const { svg } = await mermaid.render(
+        id.replace(/:/g, ''),
+        children as string,
+      );
+
+      setSvg(svg);
+    } catch (error) {
+      setRenderError(true);
+    }
+  }
+
+  useEffect(() => {
+    renderMermaid2SVG();
+  }, [children]);
+  return (
+    <>
+      {renderError || !svg ? null : (
+        <div style={style} className="modern-mermaid">
+          <h3>{title}</h3>
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        </div>
+      )}
+    </>
+  );
+}

package/src/components/Mermaid/style.scss

@@ -0,0 +1,221 @@
+.dark {
+  .modern-mermaid {
+    .flowchart-label {
+      rect {
+        fill: #23272f !important;
+        stroke: #81b1db !important;
+        stroke-width: 1px !important;
+      }
+
+      polygon {
+        fill: #23272f !important;
+        stroke: #81b1db !important;
+        stroke-width: 1px !important;
+      }
+
+      span.nodeLabel {
+        color: #ccc !important;
+      }
+    }
+
+    .edgeLabel {
+      fill: #23272f !important;
+      color: #ccc !important;
+      background-color: #23272f !important;
+    }
+
+    .flowchart-link {
+      stroke: #ccc !important;
+    }
+
+    .marker {
+      stroke: #ccc !important;
+      fill: #ccc !important;
+    }
+  }
+}
+
+.modern-doc {
+  .modern-mermaid {
+    svg {
+      display: block;
+      margin: 0 auto;
+    }
+    .flow-start,
+    .flow-end {
+      rect,
+      polygon {
+        fill: #666 !important;
+        stroke: #666 !important;
+      }
+
+      span.nodeLabel {
+        color: #fff !important;
+      }
+    }
+
+    .flow-optimization {
+      rect,
+      polygon {
+        fill: var(--tw-ring-color) !important;
+        stroke: var(--rp-container-details-link) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook {
+      rect,
+      polygon {
+        fill: var(--rp-container-info-border) !important;
+        stroke: var(--rp-container-info-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook-non-support {
+      rect,
+      polygon {
+        fill: var(--rp-container-danger-border) !important;
+        stroke: var(--rp-container-danger-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-hook-partial-support {
+      rect,
+      polygon {
+        fill: var(--rp-container-warning-border) !important;
+        stroke: var(--rp-container-warning-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+
+    .flow-process {
+      rect,
+      polygon {
+        fill: var(--rp-container-details-border) !important;
+        stroke: var(--rp-container-details-border) !important;
+      }
+
+      span.nodeLabel {
+        color: #333 !important;
+      }
+    }
+  }
+
+  .flowchart-link {
+    stroke: #666 !important;
+  }
+
+  .marker {
+    stroke: #666 !important;
+    fill: #666 !important;
+  }
+
+  .cluster {
+    rect {
+      fill: transparent !important;
+      stroke: #666 !important;
+    }
+  }
+}
+
+.dark {
+  .rspress-doc {
+    .modern-mermaid {
+      .flow-start,
+      .flow-end {
+        rect,
+        polygon {
+          fill: #666 !important;
+          stroke: #666 !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-optimization {
+        rect,
+        polygon {
+          fill: var(--tw-ring-color) !important;
+          stroke: var(--rp-container-details-link) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook {
+        rect,
+        polygon {
+          fill: var(--rp-container-info-bg) !important;
+          stroke: var(--rp-container-info-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook-non-support {
+        rect,
+        polygon {
+          fill: var(--rp-container-danger-bg) !important;
+          stroke: var(--rp-container-danger-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-hook-partial-support {
+        rect,
+        polygon {
+          fill: var(--rp-container-warning-bg) !important;
+          stroke: var(--rp-container-warning-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+
+      .flow-process {
+        rect,
+        polygon {
+          fill: var(--rp-container-details-bg) !important;
+          stroke: var(--rp-container-details-border) !important;
+        }
+
+        span.nodeLabel {
+          color: #ccc !important;
+        }
+      }
+    }
+  }
+}
+
+.modern-mermaid {
+  font-size: 20px;
+  text-align: center;
+  svg {
+    display: block;
+    margin: 0 auto;
+  }
+}

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

@@ -0,0 +1,35 @@
+.wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 20%;
+  max-width: 20%;
+  margin: 24px 0;
+
+  &:hover {
+    .avatar {
+      transform: scale(1.15);
+    }
+  }
+}
+
+.avatar {
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  transition: all 0.2s ease-in-out;
+  background-color: #f8f8f8;
+}
+
+.name {
+  margin-top: 12px;
+  font-size: 13px;
+  color: rgb(0, 53, 67);
+}

package/src/components/RandomMemberList/index.tsx

@@ -0,0 +1,122 @@
+import { NoSSR } from '@rspress/core/runtime';
+import style from './index.module.scss';
+
+interface Member {
+  id: string;
+  avatar: string;
+  // The display name, if not set, use id instead
+  name?: string;
+}
+
+const MEMBERS: Member[] = [
+  {
+    id: '10Derozan',
+    avatar: 'https://avatars.githubusercontent.com/u/50694858?s=120&v=4',
+  },
+  {
+    id: '2heal1',
+    avatar: 'https://avatars.githubusercontent.com/u/41466093?s=120&v=4',
+  },
+  {
+    id: '9aoy',
+    avatar: 'https://avatars.githubusercontent.com/u/22373761?s=120&v=4',
+  },
+  {
+    id: 'Asuka109',
+    avatar: 'https://avatars.githubusercontent.com/u/18379948?s=120&v=4',
+  },
+  {
+    id: 'caohuilin',
+    avatar: 'https://avatars.githubusercontent.com/u/12605189?s=120&v=4',
+  },
+  {
+    id: 'chenjiahan',
+    avatar: 'https://avatars.githubusercontent.com/u/7237365?s=120&v=4',
+  },
+  {
+    id: 'clChenLiang',
+    avatar: 'https://avatars.githubusercontent.com/u/13596193?s=120&v=4',
+  },
+  {
+    id: 'danpeen',
+    avatar: 'https://avatars.githubusercontent.com/u/18045417?s=120&v=4',
+  },
+  {
+    id: 'GiveMe-A-Name',
+    avatar: 'https://avatars.githubusercontent.com/u/58852732?s=120&v=4',
+  },
+  {
+    id: 'jkzing',
+    avatar: 'https://avatars.githubusercontent.com/u/2851517?s=120&v=4',
+  },
+  {
+    id: 'JSerFeng',
+    avatar: 'https://avatars.githubusercontent.com/u/57202839?s=120&v=4',
+  },
+  {
+    id: 'KyrieLii',
+    avatar: 'https://avatars.githubusercontent.com/u/16858738?s=120&v=4',
+  },
+  {
+    id: 'nyqykk',
+    avatar: 'https://avatars.githubusercontent.com/u/65393845?s=120&v=4',
+  },
+  {
+    id: 'sanyuan0704',
+    avatar: 'https://avatars.githubusercontent.com/u/39261479?s=120&v=4',
+  },
+  {
+    id: 'targeral',
+    avatar: 'https://avatars.githubusercontent.com/u/9037723?s=120&v=4',
+  },
+  {
+    id: 'xuchaobei',
+    avatar: 'https://avatars.githubusercontent.com/u/5110783?s=120&v=4',
+  },
+  {
+    id: 'xyoscer',
+    avatar: 'https://avatars.githubusercontent.com/u/16360717?s=120&v=4',
+  },
+  {
+    id: 'yimingjfe',
+    avatar: 'https://avatars.githubusercontent.com/u/10381581?s=120&v=4',
+  },
+  {
+    id: 'zhoushaw',
+    avatar: 'https://avatars.githubusercontent.com/u/27547179?s=120&v=4',
+  },
+  {
+    id: 'zllkjc',
+    avatar: 'https://avatars.githubusercontent.com/u/68810266?s=120&v=4',
+  },
+  {
+    id: 'zoolsher',
+    avatar: 'https://avatars.githubusercontent.com/u/9161085?s=120&v=4',
+  },
+];
+
+export const RandomMemberList = () => {
+  const randomList = MEMBERS.sort(() => Math.random() - 0.5);
+
+  return (
+    <NoSSR>
+      <div className={style.wrapper}>
+        {randomList.map(item => (
+          <a
+            className={style.link}
+            href={`https://github.com/${item.id}`}
+            target="_blank"
+            rel="nofollow"
+            key={item.id}
+            style={{
+              border: 'none',
+            }}
+          >
+            <img className={style.avatar} src={item.avatar} />
+            <span className={style.name}>{item.name || item.id}</span>
+          </a>
+        ))}
+      </div>
+    </NoSSR>
+  );
+};

package/src/components/RsbuildLink/index.tsx

@@ -0,0 +1,19 @@
+import { useLang } from '@rspress/core/runtime';
+import React from 'react';
+
+const RsbuildLink = ({ configName }: { configName: string }) => {
+  const lang = useLang();
+  const href = `https://v2.rsbuild.dev/${lang === 'zh' ? 'zh/' : ''}config/${configName
+    .split('.')
+    .join('/')
+    .replace(/([a-z])([A-Z])/g, '$1-$2')
+    .toLowerCase()}`;
+
+  return (
+    <a href={href} target="__blank">
+      Rsbuild - {configName}
+    </a>
+  );
+};
+
+export default RsbuildLink;

package/src/components/Sandpack/index.css

@@ -0,0 +1,10 @@
+.light {
+  --sp-layout-height: 500px !important;
+}
+
+.dark {
+  --sp-layout-height: 500px !important;
+}
+.sp-read-only {
+  display: none;
+}

package/src/components/Sandpack/index.tsx

@@ -0,0 +1,22 @@
+import ModernSandpack, {
+  type ModernSandpackProps,
+} from '@modern-js/sandpack-react';
+import { NoSSR, useDark } from '@rspress/core/runtime';
+import React, { type PropsWithChildren } from 'react';
+
+import './index.css';
+
+const Sandpack = (props: PropsWithChildren<ModernSandpackProps>) => {
+  const dark = useDark();
+  const { children, files, ...otherProps } = props;
+  return (
+    <NoSSR>
+      <ModernSandpack
+        files={files}
+        theme={dark ? 'dark' : 'light'}
+        {...otherProps}
+      />
+    </NoSSR>
+  );
+};
+export default Sandpack;

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 type 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/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(--rp-c-divider-light);
+
+  &:hover {
+    border-color: var(--rp-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(--rp-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(--rp-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(--rp-c-text-2);
+}

package/src/components/ShowcaseList/index.tsx

@@ -0,0 +1,39 @@
+import styles from './index.module.scss';
+import { useShowcases } from './useShowcases';
+
+const getDomain = (url: string) => new URL(url).hostname;
+
+const TYPE_MAP = {
+  doc: 'Doc',
+  module: 'Module',
+  builder: 'Builder',
+  framework: '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>
+  );
+};