Website Plugin UI

Hi there,
I'm Retr0ve, and I'll be doing Project Plugin Website for this year's GSoC.

I've made a UI mock using Figma. Screenshots and links are listed below. Let me know if this looks OK, and if its missing a certain feature you want.

Version 1

Home Page


Figma Link

Detail Page


Figma Link

Version 2

Home Page


BTW, I came up with the idea that when clicking the button on the website, we can jump to the desktop app using a link (like joplin://plugin-name). And the app can automatically install the plugin. It can be implemented using Regedit in Windows and URL Shemes in MacOS. It's just a thought for now, let me know if there are better ways to make this process smoother.

8 Likes

Hi Retr0ve,

The mock-ups are looking really great!

In my opinion, in the 'Home Page' section, I would prefer to have the plugins listed in horizontal order (or an option to toggle card view or list view) just like we have in the app. In this way, we could display more plugins on the page.

Also, I had a question about the 'Trending' and 'Recommended' plugins section. Are we going to show only a handful number of plugins with an option to show more? Maybe after clicking show more, we can apply that specific filter and show the plugins? Just thinking out loud here. But again, these are all my personal opinions.

I really liked this idea. Just to make sure, you know there is already a PR for deep links to install plugins.

1 Like

Really neat design :100: . I think it might make it easier for you during development if you also designed the mobile UIs. Great work though :sparkles:

1 Like

Thx makb,

It's a good idea.

I originally plans to only show 3-5 plugins in the Trending section and use a sliding button to show all the recommended plugins in Recommended section since the number of plugins is limited now. But a 'more' button is a great idea!

Good to know someone is working on it!

1 Like

A really nice, clean look! Nice work.
How will "Trending" be determined?

Thx Harryc,
Trending plugins are determined by download count from the plugin list repository. The specific algorithm is not determined now. :grinning:

Thank you! For answering and for your good work!

@Retr0ve, it may be useful to spend more time on the mockup, and maybe propose different versions. For example I don't think the search bar should take half of the page. And what appears to be an advanced search at the bottom of the page doesn't make a lot of sense to me either.

Perhaps have a look at other plugin and extension stores, see what they do, try to understand why they do it, and see what can be borrowed from them.

Hi, @Laurent
Thanks for the review!

Some plugin store did that, tiptap for instance, I personally think this type of hero section avoid user getting distracted from too much information. But I'll make another version if this doesn't make sense to you.

Do you think separating this advanced search to another page would be a good idea?

I agree that search should be clearly visible on the first page, but taking half of the page seems excessive.

First, do we actually need an advanced search?

I think this is some sort of personal preference. We can display plugins in categories like the chrome extension store do or we can use filters to display plugins in certain categories or badges like the firefox add-on store do. If filters are a little bit heavy for Joplin plugin discovery, I guess we'll be using category then?

@makb has already done some work on how to filter and search plugins, so probably the same approach could be done here?

1 Like

Hi Retr0ve,
If you want some reference for this one, here is my PR and forum discussion for filtering for plugins in desktop app. In this PR, I have also included a demo video, which might be useful.

1 Like

Understood, you want something similar to the filter in the desktop app right? I can display plugins in categories. Posting a new version soon. :grinning:

1 Like

@makb thx for getting involved :slight_smile:
But one question comes to mind: Do we have all this information available?

I don't see any information in GitHub - joplin/plugins: Joplin official plugin repository. For issues, please use https://github.com/laurent22/joplin/issues nor in Plugins - Joplin Forum to allow me to categorize the plug-ins.

The question is what shall be the focus for the first half, UI or functionality?
I would love to see a basic prototype first to see that all information can be pulled to provide an excellent UI/UX.

If we want to work with categories, we have to start a discussion on how to label the plug-ins and so on. A lot of work is already done around Desktop: Resolves #5867: Add filtering for plugins by mak2002 · Pull Request #6465 · laurent22/joplin · GitHub but the discussion is still open.

1 Like

Hi @laurent,
I've updated the post to include version 2. It displays plugins according to the category selection on the sidebar. And search box is now pinned to the header. What do you think of this version?

Hello PackElend,

This merged PR adds an optional categories field in plugins' manifest field, allowing devs to add multiple categories.

Personally, I think we can explain what are plugins in 1-2 sentences like how it's done on the Firefox add-ons page and then we can display searching and filtering options.

I think we are letting the plugin developers decide the categories themselves, so we don't need to label it ourselves. Joplin team will label the recommended plugins if I am not wrong.

that can be become messy as you can use different words for the same meaning

The categories themselves are preset, only the choice is left to the developer, there were quite a few discussions to make sure there wasn't anything that could be too ambigious. I guess maintainers with access to the plugin repo could submit a change if there is any abuse but it might be best to play it by ear rather than be too restrictive from the outset.

Categories

Category Description
appearance dealing with appearance of some element/s of the app. For example line numbers, layout, etc.
developer tools built for the developers.
editor enhancing note editor.
files dealing with files. For example import, export, backup, etc.
integrations integrating third party services or apps.
personal knowledge management managing and organizing notes.
productivity making Joplin more productive to use.
search enhancing search inside the app.
tags dealing with note tags.
themes changing theme of the app.
viewer enhancing the rendering of a note.
const allPossibleCategories = ['appearance', 'developer tools', 'productivity', 'themes', 'integrations', 'viewer', 'search', 'tags', 'editor', 'files', 'personal knowledge management'];
1 Like

Thanks for the update. As a general rule I prefer not to be the only one reviewing projects, so please avoid @-mentioning me or anybody in particular, and instead simply ask the community to give their feedback

1 Like