Improved Showcase page: tags + search engine + migrate v1 users

[slorber]

This issue is for Major League Hacking fellows only.

🚀 Feature

The v2 showcase page lists various Docusaurus 2 sites: https://v2.docusaurus.io/showcase

Problems:

• Many v1 sites are using v2 now, we should showcase them on v2 too! (https://v1.docusaurus.io/en/users)
• one site is quite different from another site
• the list is quite long and expected to grow over time
• there's no easy way to filter a site by its attributes

If a user wants to use Docusaurus for:

• its versioning features, he should be able to easily look-up sites that use versioning.
• its i18n features, he should be able to easily look-up sites that use i18n.
• its custom theming features, he should be able to easily look-up the most beautiful and customized Docusaurus sites.
• ...

Solution

Migrate older v1 sites

We should migrate all Docusaurus v1 sites (https://v1.docusaurus.io/en/users) that migrated to v2 to the v2 showcase (https://v2.docusaurus.io/showcase).

There are multiple ways to identify that a site is v2 (nested sidebar categories, new algolia search, SPA-like navigation...), but the most reliable way is to inspect the DOM of a site with dev tools and look for this:

Create a search engine

We should implement a way to filter sites by tags.

I suggest we use the following initial tags (open for feedbacks):

• highlight: for sites that are outstanding and that we want to draw attention to
• design: for sites using a quite customized design that's different enough from the classic theme
• i18n: for sites using the i18n feature
• versioning: for sites using docs versioning
• multi-instance: for sites using multi-instance support
• large: for sites that have a lot of content
• facebook: for sites owned by Facebook open-source projects
• personal: for personal websites (sometimes people use Docusaurus for their own website)
• rtl: for sites using the docusaurus RTL support (https://datagit.ir/ is the only one currently)

The site declaration could become:

  {
    title: 'AgileTs',
    description: 'Global State and Logic Framework for reactive Applications',
    preview: require('./showcase/agilets.png'),
    website: 'https://agile-ts.org/',
    source: 'https://github.com/agile-ts/documentation',
    // remove those 2 legacy fbOpenSource and pinned
    // fbOpenSource: false,
    // pinned: false,
    tags: ["facebook","versioning"],
  },

The UX/UI for filtering could be quite simple, open for suggestions.

Here's a basic inspiration from https://reactnative.directory/

The filtering should happen in memory directly on the page (as we don't have any backend/api).

You don't need to do anything too complex for the filtering, the algo can be as simple as:

const filteredSites = sites.filter(site => difference(selectedTags,site.tags).length === 0)

By default, I would use an AND filtering (ie if tags "facebook" + "design" are both selected, then the site must have both tags), but eventually, we could add a switch to allow an OR filtering (the site will appear if it matches a single selected tag).

Maybe we could find/create a little logo for each tag, and on each site card we'll display the site tags logos in a little overlay?

Please make some prototypes and post screenshots here with your suggestions.

[lisa761]

Hey, just a doubt, other than adding the sites that have migrated from v1 to v2, to v2 showcase, we also need to remove it from v1 users list, right? I found some sites that are present in both, viz React Native, T-Regx and Taro.

[slorber]

Hi @lisa761

It's not too important to keep the v1 site up to date now, just leave it untouched and make sure the v2 showcase looks good :)