chore: move website into rspack repo (web-infra-dev#5991)

.eslintignore

@@ -11,4 +11,5 @@ webpack-cli-test
 examples
 diffcases
 scripts/test/diff.cjs
-scripts/test/binary-path.cjs
+scripts/test/binary-path.cjs
+website/**/*

.typos.toml

@@ -18,6 +18,8 @@ extend-exclude = [
   "pnpm-lock.yaml",
   "scripts/test/diff.cjs",
   "scripts/test/binary-path.cjs",
+  # temporarily disable typos for website
+  "website/**/*" 
 ]
 
 [default.extend-words]

website/.gitignore

@@ -0,0 +1,4 @@
+node_modules/
+doc_build/
+.cspellcache
+.idea/

website/.prettierrc

@@ -0,0 +1,3 @@
+{
+  "singleQuote": true
+}

website/README.md

@@ -0,0 +1,49 @@
+# Rspack Documentation
+
+📄 Documentation for Rspack.
+
+## Translation
+
+Currently Rspack provides documentation in English and Chinese. If you can use Chinese, please update both documents at the same time. Otherwise, just update the English documentation.
+
+```bash
+root
+└─ docs
+   ├─ en     # English Document
+   └─ zh     # Chinese Document
+```
+
+## Contributing
+
+This website is built with [Rspress](https://rspress.dev), the document content can be written using markdown or mdx syntax. You can refer to the [Rspress Website](https://rspress.dev) for detailed usage.
+
+The source code of Rspress can be found in [this folder](https://github.com/web-infra-dev/rspress).
+
+If you have any problems using the Rspress, please create a new issue at [Rspress Issues](https://github.com/web-infra-dev/rspress/issues).
+
+### Install dependencies
+
+Enable [pnpm](https://pnpm.io/) with corepack:
+
+```sh
+corepack enable
+```
+
+Install dependencies:
+
+```sh
+pnpm install
+```
+
+### Local development
+
+```bash
+pnpm install
+pnpm run dev
+```
+
+### Production build
+
+```bash
+pnpm run build
+```

website/_redirects

@@ -0,0 +1 @@
+/en / 200

website/components/ApiMeta.scss

@@ -0,0 +1,78 @@
+.api-meta-version,
+.api-meta-stability {
+  margin-top: 16px;
+  margin-right: 8px;
+  padding: 6px 12px;
+  font-size: 13px;
+  background-color: #3eaf7c;
+  color: white;
+  display: inline-flex;
+  border-radius: 0.2rem;
+}
+
+.api-meta-version {
+  padding: 6px 16px;
+  position: relative;
+  margin-right: 28px;
+}
+// Add a new tag in .api-meta-version
+.api-meta-version-added::before {
+  position: absolute;
+  right: -15px;
+  top: -10px;
+  content: 'new';
+  color: white;
+  padding: 0 4px;
+  height: 20px;
+  min-width: 20px;
+  font-weight: 500;
+  font-size: 12px;
+  background-color: rgb(245, 63, 63);
+  border-radius: 5px;
+}
+
+.api-meta-version-deprecated::before {
+  position: absolute;
+  right: -26px;
+  top: -10px;
+  content: 'deprecated';
+  color: white;
+  padding: 0 4px;
+  height: 20px;
+  min-width: 20px;
+  font-weight: 500;
+  font-size: 12px;
+  background-color: var(--rp-c-gray);
+  border-radius: 5px;
+}
+
+.api-meta-version-removed::before {
+  position: absolute;
+  right: -26px;
+  top: -10px;
+  content: 'removed';
+  color: white;
+  padding: 0 4px;
+  height: 20px;
+  min-width: 20px;
+  font-weight: 500;
+  font-size: 12px;
+  background-color: rgb(90, 0, 0);
+  border-radius: 5px;
+}
+
+.api-meta-stability-Stable {
+  background-color: #5a8147;
+}
+.api-meta-stability-Experimental {
+  background-color: #ca5010;
+}
+.api-meta-stability-Deprecated {
+  background-color: #d60027;
+}
+.api-meta-stability-Removed {
+  background-color: #7e7e7e;
+}
+.api-meta-stability-Legacy {
+  background-color: #0a56b2;
+}

website/components/ApiMeta.tsx

@@ -0,0 +1,66 @@
+import { useLang } from 'rspress/runtime';
+import './ApiMeta.scss';
+
+/**
+ * The Stability Index is learned from https://nodejs.org/api/documentation.html#stability-index
+ */
+export enum Stability {
+  Deprecated = 'Deprecated', // The feature may emit warnings. Backward compatibility is not guaranteed.
+  Removed = 'Removed',
+  Experimental = 'Experimental', // The feature is not subject to semantic versioning rules
+  Stable = 'Stable', // Compatibility with the npm ecosystem is a high priority.
+  Legacy = 'Legacy', // Although this feature is unlikely to be removed and is still covered by semantic versioning guarantees, it is no longer actively maintained, and other alternatives are available.
+}
+
+export interface ApiMetaProps {
+  addedVersion?: string;
+  deprecatedVersion?: string;
+  removedVersion?: string;
+  stability?: Stability;
+}
+
+export function ApiMeta(props: ApiMetaProps) {
+  let lang = useLang();
+  return (
+    <div className="api-meta">
+      {(!!props.addedVersion ||
+        !!props.deprecatedVersion ||
+        !!props.removedVersion) && (
+        <div className="api-meta-version">
+          {!!props.addedVersion && (
+            <span className="api-meta-version-added">
+              <a href={`/${lang}/misc/future`}>v{props.addedVersion}</a>
+            </span>
+          )}
+          {!!props.deprecatedVersion && (
+            <span className="api-meta-version-deprecated">
+              <a
+                href={`/${lang}/misc/future?deprecatedVersion=${props.deprecatedVersion}`}
+              >
+                v{props.deprecatedVersion}
+              </a>
+            </span>
+          )}
+          {!!props.removedVersion && (
+            <span className="api-meta-version-removed">
+              <a
+                href={`/${lang}/misc/future?removedVersion=${props.removedVersion}`}
+              >
+                v{props.removedVersion}
+              </a>
+            </span>
+          )}
+        </div>
+      )}
+      {!!props.stability && (
+        <div
+          className={`api-meta-stability api-meta-stability-${
+            props.stability || ''
+          }`}
+        >
+          Stability: {props.stability}
+        </div>
+      )}
+    </div>
+  );
+}

website/components/CompatibleCard.scss

@@ -0,0 +1,33 @@
+.component-card {
+  padding: 20px;
+  margin: 28px auto;
+  border-radius: 10px;
+  box-shadow: rgba(149, 157, 165, 0.2) 0px 4px 12px;
+  position: relative;
+
+  &-title-line {
+    display: flex;
+    flex-direction: row;
+  }
+
+  &-link {
+    color: var(--rp-c-brand);
+    margin-bottom: 5px;
+  }
+
+  &-space {
+    flex-grow: 1;
+  }
+
+  &-status {
+    color: #ff8900bd;
+    background-color: #ff89003d;
+    padding: 2px 8px;
+    border-radius: 5px;
+  }
+
+  &-desc {
+    color: var(--rp-c-text-1);
+    margin: 8px 0 0 0;
+  }
+}