fix

web-infra-dev · Jun 25, 2024 · ecb276f · ecb276f
1 parent 2cc979b
commit ecb276f
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 9 deletions.
diff --git a/website/components/ApiMeta.module.scss b/website/components/ApiMeta.module.scss
@@ -2,18 +2,28 @@
   margin-top: 1.5rem;
 }
 
+.wrapperInline {
+  display: inline;
+}
+
 :global(h2) + .wrapper {
   margin-top: 0px;
 }
 
-.tag {
+.tagInline {
   display: inline-flex;
   color: #1c1c1c;
-  margin: 0 8px 12px 0;
+  margin-right: 8px;
   padding: 4px 10px;
   font-size: 12px;
   font-weight: 600;
   border-radius: 6px;
+  line-height: 18px;
+}
+
+.tag {
+  composes: tagInline;
+  margin-bottom: 12px;
 }
 
 .added {

diff --git a/website/components/ApiMeta.tsx b/website/components/ApiMeta.tsx
@@ -15,31 +15,34 @@ export interface ApiMetaProps {
   deprecatedVersion?: string;
   removedVersion?: string;
   stability?: Stability;
+  inline?: boolean;
 }
 
 export function ApiMeta(props: ApiMetaProps) {
   let lang = useLang();
   const href = `/${lang}/misc/planning/future`;
+  const tagStyle = props.inline ? styles.tagInline : styles.tag;
+  const wrapperStyle = props.inline ? styles.wrapperInline : styles.wrapper;
   return (
-    <div className={styles.wrapper}>
+    <div className={wrapperStyle}>
       {props.addedVersion && (
-        <span className={`${styles.tag} ${styles.added}`}>
+        <span className={`${tagStyle} ${styles.added}`}>
           <a href={href}>Added in v{props.addedVersion}</a>
         </span>
       )}
       {props.deprecatedVersion && (
-        <span className={`${styles.tag} ${styles.deprecated}`}>
+        <span className={`${tagStyle} ${styles.deprecated}`}>
           <a href={href}>Deprecated in v{props.deprecatedVersion}</a>
         </span>
       )}
       {props.removedVersion && (
-        <span className={`${styles.tag} ${styles.removed}`}>
+        <span className={`${tagStyle} ${styles.removed}`}>
           <a href={href}>Removed in v{props.removedVersion}</a>
         </span>
       )}
       {props.stability && (
         <div
-          className={`${styles.tag} ${
+          className={`${tagStyle} ${
             props.stability ? styles[props.stability.toLowerCase()] : ''
           }`}
         >

diff --git a/website/docs/en/guide/features/web-workers.mdx b/website/docs/en/guide/features/web-workers.mdx
@@ -25,7 +25,8 @@ In addition to `new Worker()`, the following syntax is also supported:
 
 - `new SharedWorker()`
 - `import { Worker } from "worker_threads"`: usually used in Node environments
-- `navigator.serviceWorker.register()`: used to register Service Workers
+- <ApiMeta addedVersion={'1.0.0-alpha.0'} inline /> `navigator.serviceWorker.register()`:
+  used to register Service Workers
 
 Custom syntax can be provided via [`module.parser.javascript.worker`](/config/module#moduleparserjavascriptworker).
 

diff --git a/website/docs/zh/guide/features/web-workers.mdx b/website/docs/zh/guide/features/web-workers.mdx
@@ -25,7 +25,8 @@ new Worker(new URL('./worker.js', import.meta.url), {
 
 - `new SharedWorker()`
 - `import { Worker } from "worker_thread"`：常用于 node 环境
-- `navigator.serviceWorker.register()`：用于注册 Service Worker
+- <ApiMeta addedVersion={'1.0.0-alpha.0'} inline /> `navigator.serviceWorker.register()`：用于注册
+  Service Worker
 
 可通过 [`module.parser.javascript.worker`](/config/module#moduleparserjavascriptworker) 提供自定义语法。