Add special styling for deprecated plugins in search (closes $113) (gulpjs#126)

donghwi park · phated · web-flow · commit bd278d5671a5 · 2020-08-23T16:42:01.000-07:00
Co-authored-by: Blaine Bublitz &lt;blaine.bublitz@gmail.com&gt;
diff --git a/src/pages/plugins/index.js b/src/pages/plugins/index.js
@@ -16,6 +16,7 @@ function isInternalKeyword(keyword) {
 class Plugin {
   constructor(object) {
     this._package = object.package;
+    this._flags = object.flags ? object.flags : {};
   }
 
   get key() {
@@ -26,6 +27,16 @@ class Plugin {
     return this._package.name;
   }
 
+  get isDeprecated() {
+    const isDeprecated = this._flags.deprecated ? true : false;
+    return isDeprecated;
+  }
+
+  get deprecatedMessage() {
+    const deprecatedMessage = this._flags.deprecated ? this._flags.deprecated : '';
+    return deprecatedMessage;
+  }
+
   get description() {
     return this._package.description;
   }
@@ -95,21 +106,30 @@ function PluginFooter({ keywords = [] }) {
 }
 
 function PluginComponent({ plugin }) {
+  const { isDeprecated, deprecatedMessage } = plugin
+  const cardClasses = classnames('card', { [styles.pluginDeprecatedCard]: isDeprecated });
+  const cardHeaderClasses = classnames('card__header', {
+    [styles.pluginCardHeader]: !isDeprecated,
+    [styles.deprecatedCardHeader]: isDeprecated
+  });
+  const cardBodyClasses = 'card__body';
+
   return (
     <div className="row padding-vert--md">
       <div className="col col--10 col--offset-1">
-        <div key={plugin.key} className="card">
-          <div className={classnames('card__header', styles.pluginCardHeader)}>
+        <div key={plugin.key} className={cardClasses}>
+          <div className={cardHeaderClasses}>
+            {isDeprecated && <span className="badge badge--primary">Deprecated</span>}
             <h2><a className={styles.primaryUrl} href={plugin.primaryUrl}>{plugin.name}</a></h2>
-            <span className="badge badge--primary">{plugin.version}</span>
+            {!isDeprecated && <span className="badge badge--primary">{plugin.version}</span>}
           </div>
-          <div className="card__body">
-            {plugin.description}
+          <div className={cardBodyClasses}>
+            {isDeprecated ? <div className={styles.deprecatedMessage}>{deprecatedMessage}</div> : plugin.description}
             <div className="padding-top--sm">
               {plugin.links.map((link) => <a key={link.text} className="padding-right--sm" href={link.href}>{link.text}</a>)}
             </div>
           </div>
-          <PluginFooter keywords={plugin.keywords} />
+          {!isDeprecated && <PluginFooter keywords={plugin.keywords} />}
         </div>
       </div>
     </div>
@@ -141,7 +161,6 @@ function keywordsToQuerystring(keywords) {
   } else {
     keywordsStr += `gulpplugin`;
   }
-
   return keywordsStr;
 }
 
@@ -150,6 +169,8 @@ async function fetchPackages(keywords, searchText = '', pageNumber = 0) {
 
   let search = [
     keywordsToQuerystring(keywords),
+    "is:unstable",
+    "not:unstable"
   ];
   if (searchText) {
     search.push(encodeURIComponent(searchText));
diff --git a/src/pages/plugins/plugins.module.scss b/src/pages/plugins/plugins.module.scss
@@ -4,7 +4,6 @@
 
 .searchInput {
   flex-grow: 1;
-
   appearance: none;
   background-color: var(--ifm-navbar-search-input-background-color);
   background-image: var(--ifm-navbar-search-input-icon);
@@ -31,6 +30,30 @@
   font-size: 1.1rem;
 }
 
+.pluginDeprecatedCard {
+  background-color: #ffdfdf;
+}
+
+.deprecatedCardHeader {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+
+  h2 {
+    margin-left: var(--ifm-card-horizontal-spacing);
+  }
+}
+
+
+.deprecatedMessage {
+  color: var(--ifm-color-primary-dark);
+  background-color: var(--ifm-color-white);
+  padding: 0.5rem;
+  border-radius: var(--ifm-card-border-radius);
+  border-style: solid;
+  border-width: 1px;
+}
+
 .pluginCardHeader {
   display: flex;
   justify-content: space-between;
