docs: improve style of API meta tags

web-infra-dev · Apr 17, 2024 · 589771e · 589771e
1 parent e9556a3
commit 589771e
Show file tree

Hide file tree

Showing 9 changed files with 98 additions and 209 deletions.
diff --git a/website/components/ApiMeta.module.scss b/website/components/ApiMeta.module.scss
@@ -0,0 +1,34 @@
+
+.wrapper {
+  margin-top: 1.5rem;
+}
+
+:global(h2) + .wrapper {
+  margin-top: 0px;
+}
+
+.tag {
+  display: inline-flex;
+  color: #1c1c1c;
+  margin: 0 8px 12px 0;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  border-radius: 6px;
+}
+
+.added {
+  background-color: hsl(162deg 60% 75%);
+}
+
+.deprecated {
+  background-color: hsl(36deg 100% 82%);
+}
+
+.removed {
+  background-color: hsl(0deg 100% 90%);
+}
+
+.experimental {
+  background-color: hsl(262deg 100% 90%);
+}
diff --git a/website/components/ApiMeta.scss b/website/components/ApiMeta.scss
diff --git a/website/components/ApiMeta.tsx b/website/components/ApiMeta.tsx
@@ -1,5 +1,5 @@
 import { useLang } from 'rspress/runtime';
-import './ApiMeta.scss';
+import styles from './ApiMeta.module.scss';
 
 /**
  * The Stability Index is learned from https://nodejs.org/api/documentation.html#stability-index
@@ -8,8 +8,6 @@ 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 {
@@ -22,41 +20,33 @@ export interface ApiMetaProps {
 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>
+    <div className={styles.wrapper}>
+      {props.addedVersion && (
+        <span className={`${styles.tag} ${styles.added}`}>
+          <a href={`/${lang}/misc/future`}>Added in v{props.addedVersion}</a>
+        </span>
+      )}
+      {props.deprecatedVersion && (
+        <span className={`${styles.tag} ${styles.deprecated}`}>
+          <a
+            href={`/${lang}/misc/future?deprecatedVersion=${props.deprecatedVersion}`}
+          >
+            Deprecated in v{props.deprecatedVersion}
+          </a>
+        </span>
+      )}
+      {props.removedVersion && (
+        <span className={`${styles.tag} ${styles.removed}`}>
+          <a
+            href={`/${lang}/misc/future?removedVersion=${props.removedVersion}`}
+          >
+            Removed in v{props.removedVersion}
+          </a>
+        </span>
       )}
-      {!!props.stability && (
+      {props.stability && (
         <div
-          className={`api-meta-stability api-meta-stability-${
-            props.stability || ''
-          }`}
+          className={`${styles.tag} ${ props.stability ? styles[props.stability.toLowerCase()] : ''}`}
         >
           Stability: {props.stability}
         </div>

diff --git a/website/docs/en/config/builtins.mdx b/website/docs/en/config/builtins.mdx
@@ -17,9 +17,7 @@ The built-in functionality provided by _builtins_ may change in the future or be
 
 ## builtins.banner
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`BannerPlugin`](/config/plugins.html#bannerplugin).
@@ -74,9 +72,7 @@ module.exports = {
 
 ## builtins.emotion
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [builtin:swc-loader options](https://www.rspack.dev/guide/loader.html#builtinswc-loader).
@@ -182,9 +178,7 @@ This option allows you to tell Rspack what imports it should look at to determin
 
 ## builtins.presetEnv
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed}/>
 
 :::warning
 Please migrate to [builtin:swc-loader options](https://www.rspack.dev/guide/loader.html#builtinswc-loader)
@@ -231,9 +225,7 @@ module.exports = {
 
 ## builtins.html
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`HtmlRspackPlugin`](/config/plugins.html#htmlrspackplugin).
@@ -287,9 +279,7 @@ If the configuration options provided by `rspack.HtmlRspackPlugin` cannot meet y
 
 ## builtins.minifyOptions
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`SwcJsMinimizerRspackPlugin`](/config/plugins.html#swcjsminimizerrspackplugin).
@@ -325,9 +315,7 @@ type BuiltinsMinifyOptions = {
 
 ## builtins.define
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`DefinePlugin`](/config/plugins.html#defineplugin).
@@ -380,9 +368,7 @@ console.log(undefined === undefined);
 
 ## builtins.react
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [builtin:swc-loader options](https://www.rspack.dev/guide/loader.html#builtinswc-loader)
@@ -422,9 +408,7 @@ type ReactOptions = {
 
 ## builtins.decorator
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [builtin:swc-loader options](https://www.rspack.dev/guide/loader.html#builtinswc-loader)
@@ -497,9 +481,7 @@ type BuiltinsCssModules = {
 
 ## builtins.progress
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`ProgressPlugin`](/config/plugins.html#progressplugin).
@@ -523,9 +505,7 @@ This configuration can be used to control progress, `false` means to turn off pr
 
 ## builtins.devFriendlySplitChunks
 
-<ApiMeta deprecatedVersion="0.3.12" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.12" removedVersion="0.5.0" stability={Stability.Removed} />
 
 Whether to enable the development-friendly split chunks algorithm.
 
@@ -535,9 +515,7 @@ Whether to enable the development-friendly split chunks algorithm.
 
 ## builtins.copy
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`CopyRspackPlugin`](/config/plugins.html#copyrspackplugin).
@@ -642,9 +620,7 @@ The result of running with the above configuration would be that the `directory`
 
 ## builtins.relay
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [builtin:swc-loader options](https://www.rspack.dev/guide/loader.html#builtinswc-loader)
@@ -671,9 +647,7 @@ If specific configuration is passed, Rspack will not attempt to locate any `rela
 
 ## builtins.pluginImport
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [builtin:swc-loader options](https://www.rspack.dev/guide/loader.html#builtinswc-loader)
@@ -785,9 +759,7 @@ import 'antd/es/button/style';
 
 ## builtins.provide
 
-<ApiMeta deprecatedVersion="0.3.10" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.3.10" removedVersion="0.5.0" stability={Stability.Removed} />
 
 :::warning
 Please migrate to [`ProvidePlugin`](/config/plugins.html#provideplugin).

diff --git a/website/docs/en/config/experiments.mdx b/website/docs/en/config/experiments.mdx
@@ -8,9 +8,7 @@ Enable and try out some experimental features.
 
 ## experiments.incrementalRebuild
 
-<ApiMeta deprecatedVersion="0.4.0" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta deprecatedVersion="0.4.0" removedVersion="0.5.0" stability={Stability.Removed} />
 
 Enable incremental rebuild. `true` will try to reuse the results of the last build when rebuild to improve build speed, supports configuration of different stages, the default is enabled.
 
@@ -72,9 +70,7 @@ Used to control whether to enable Rspack future default options, check out the d
 
 ### experiments.rspackFuture.disableTransformByDefault
 
-<ApiMeta addedVersion="0.3.5" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta addedVersion="0.3.5" removedVersion="0.5.0" stability={Stability.Removed} />
 
 - **Type:** `boolean`
 - **Introduced in Version:** v0.3.5
@@ -246,9 +242,7 @@ Used to control whether to enable Rspack future default options, check out the d
 
 ### experiments.rspackFuture.newResolver
 
-<ApiMeta addedVersion="0.3.7" />
-
-<ApiMeta removedVersion="0.5.0" stability={Stability.Removed} />
+<ApiMeta addedVersion="0.3.7" removedVersion="0.5.0" stability={Stability.Removed} />
 
 - **Type:** `boolean`
 - **Introduced in Version:** v0.3.7
@@ -308,9 +302,7 @@ module.exports = {
 
 ### experiments.rspackFuture.disableApplyEntryLazily
 
-<ApiMeta addedVersion="0.4.5" />
-
-<ApiMeta removedVersion="0.6.0" stability={Stability.Removed} />
+<ApiMeta addedVersion="0.4.5" removedVersion="0.6.0" stability={Stability.Removed} />
 
 - **Type:** `boolean`
 - **Introduced in Version:** v0.4.5

diff --git a/website/docs/en/guide/web-workers.mdx b/website/docs/en/guide/web-workers.mdx
@@ -5,7 +5,7 @@ import { ApiMeta, Stability } from '../../../components/ApiMeta.tsx';
 
 # Web Workers
 
-<ApiMeta addedVersion={'0.2.6'} stability={Stability.Stable} />
+<ApiMeta addedVersion={'0.2.6'} />
 
 [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers) are first-class citizens of Rspack, which means you don't need any loader to use Web Workers directly.