Plugins page: Deprecated packages

[phated]

On the plugins page, we should either show that a plugin is deprecated or we should remove them from the search.

Ref gulpjs/plugins#225

[phated]

@donghwipark I think we should continue to show the deprecated package, but add an icon or banner about deprecation with the deprecation message (you can see an example from npm at https://www.npmjs.com/package/6to5)

[ghost]

@phated I am thinking adding banner with deprecation message "This package has been deprecated". How is that? And if banner is ok I will make some example to check if it suits with the Gulp.js design.

[phated]

@donghwipark since we pull information from npm, we might have the actual deprecation message available in the data we receive. If we have the message, I'd like to display it.

Please post any images you have of the design! Thank you. 😄

[ghost]

@phated This two images are the desktop and mobile version of deprecate notification example. Please confirm.

1. Desktop version

2. Mobile version

   Additionally the message should be the actual deprecation message from npm not the fixed "This package has been deprecated"?

[phated]

@donghwipark these designs look great! Have you researched if the deprecation message is available in the data we receive from npm's API?

[ghost]

@phated oh not yet that screenshot was taken from the google develper mode. I will check and if the deprecate message is included I will change to that one!!

[ghost]

@phated The problem is I cannot find the deprecated package example. I am checking response with console.log through plugin page. Can you give some example of deprecated package so check the response data again.

[phated]

@donghwipark https://www.npmjs.com/package/gulp-webpack

[phated]

@donghwipark based on our chat today, I found that npm search actually filters gulp-webpack (and probably all deprecated packages?) by default; however, if I add is:unstable and not:unstable to the query, it tricks the API into returning gulp-webpack (see https://registry.npmjs.com/-/v1/search?from=0&text=keywords:gulpplugin%20is:unstable%20not:unstable%20webpack&quality=0.5&popularity=1.0&maintenance=0.1)

If you add those 2 strings to the array at https://github.com/gulpjs/gulpjs.github.io/blob/source/src/pages/plugins/index.js#L151, gulp-webpack will start showing in the search results. I also noticed that the object contains the deprecated message (screenshot attached)!

[ghost]

@phated Thank you for the guidelines. I will add the query if it is not yet modified and check the deprecated message. Will display the message below the default message "This package has been deprecated". Thank you

[ghost]

I am trying to change the background color for the card same as I show you on the top. But couldn't find the card's style. It seems the layout css is somewhere out of the src folder.

[phated]

The card class is provided by Docusaurus' CSS Framework (called Infima), but you can add another class at https://github.com/gulpjs/gulpjs.github.io/blob/d0c3bf316e75c9e115fef38e003bbee224754bf1/src/pages/plugins/index.js#L101

We use "CSS Modules", which means that styles for this component are in https://github.com/gulpjs/gulpjs.github.io/blob/d0c3bf316e75c9e115fef38e003bbee224754bf1/src/pages/plugins/plugins.module.scss and you can combine the classes using classnames (example at https://github.com/gulpjs/gulpjs.github.io/blob/d0c3bf316e75c9e115fef38e003bbee224754bf1/src/pages/plugins/index.js#L102)

[ghost]

@phated This will be the new design of the deprecated card

1. Desktop
2. Mobile

[phated]

@donghwipark I don't like how large that is, can you fit the message on the existing card instead of increasing the size?

[phated]

Ideally, deprecated plugins should not require more space than other plugins. We also don't need any of the other information, so you can remove keywords and description, etc.

[ghost]

1. I delete the keywords and description(card > body) in the deprecated card
2. Reduced the font size of messages
3. Need to confirm on background-color within all-cover or just the deprecate message part a. Desktop version(just the deprecate message part) b. mobile version(just the deprecate message part) c. Desktop version(All part) d. Mobile version(All part)

[phated]

@donghwipark I think it is still too big, let me show a recommendation instead.

[phated]

@donghwipark It should look more like this (please ignore my very poor photo editing skills):

[ghost]

This is the modificated version with the photo above.

1. Desktop
2. Mobile

[phated]

Completed by #126 (I typo'd the commit message)