Change search to select list and eliminate tag cloud

[reallymello]

As I blog about different things I noticed my tag cloud is taking up way too much space on the page. I'd like to recommend eliminating the tag cloud and changing the search to a drop down / select list that has all the tags in there for the user to filter by ordered by count descending.

What do you think?

[ganevdev]

When I made tags, I thought more of them as a replacement for sections/menus for the site. That is, in general, I did not think that there should be a lot of them. This, of course, does not mean that they should be used only as I thought of them.

Your decision could be implemented, and I would have made it a separate component. But, in general, tags are usually not placed like this (formed habits are an important element of the UI). I would suggest doing something like a fixed limit (which could, of course, be changed) by the number of tags displayed. If the limit is reached, less popular tags can be "hidden" under something like a spoiler. If the user wants, he can open the spoiler.

Well and yes, in another issue you already spoke about the need to allow changing the size/style of tags, if this opportunity appears then it will partially solve this problem too.

[reallymello]

I got it working nicely, but from tags.js is there a way to read in a value from gatsby-config.js to allow the limit to be a configurable number?

The code below removes "post" from the tag cloud and only displays the next 10 most popular tags. I'd like to make the 10 setting a configurable number from the config file.

const sortTags = (array) => {
  array = _.sortBy(array, ['tagName']);
  array = array.reverse();
  array = _.sortBy(array, ['tagStat']);
  array = array.reverse();

  if (array.length > 10) {
    return array.slice(1, 9);
  } else {
    return array;
  }
};

[ganevdev]

I do not think that we can make such a config in gatsby-config.js. The fact is that there can be many tag clouds on the site, they are located in different places on the site (this is the main page and any page created by the developer, etc.). You need to give the developer ability to change the tag limit in a specific tag component by creating a prop "limit", something like this:

<FeedSearch />
<Tags limit={10} />
<FeedItems />

If there is no "limit" prop (or it is equal to 0) then no limits should be applied.

[ganevdev]

By the way, it is important to add a button that, when clicked, will display all hidden tags.

array.slice(1, 9) must start from zero, otherwise it will remove the first element of the array.

return array.slice(0, 9);

[reallymello]

By the way, it is important to add a button that, when clicked, will display all hidden tags.

array.slice(1, 9) must start from zero, otherwise it will remove the first element of the array.

return array.slice(0, 9);

Yes, I wanted to remove the #post tag in my case which was the first element and then take the remaining most popular tags.

I'll look into a prop limit. Thanks!