Coding Phase - Week 8 Report

GSoC Projects Plugin Website
, ,
1

Last Week

  • Implement an overview popover on the home page.

    • Popover shows when the pointer is hovering over the plugin card and stays open when hovering over the popover itself.
    • It contains a list of data relevant to the plugin and buttons to download or install it quickly.
    • The popover will adjust its position by the available space on the screen.
      image
      image
      image791×367 26 KB

  • Adjust the algorithm to determine the trending plugins

    • Download stats are fetched from npm API now.
    const downloadStat = await fetch(`https://api.npmjs.org/downloads/point/${period}/${package}`).then(res => res.json());
    • Thanks to the feature provided by npm API, we can configure the period the download count applies to. It is currently set to last-week.

  • Set up Github Action script to automate build and deploy process

    • This script runs every 30 minutes or when there is a new push to the repo.
    • It first checkout the code in the Github repo, install node, runs yarn install and yarn build to build the website.
    • Then it uses actions/upload-pages-artifact@v1 to upload the website to Github Pages.
    • After job build is finished, it will deploy the page and publish it.
    • The script is currently in my demo repo, I will raise a PR in the project repo soon after my first PR gets merged.

This Week

  • Starting to discuss and implement the comment/rating section of the website.
  • Fix all download buttons
7 Likes
2

Is this website visible somewhere?

3

Yes, it's under my personal Github Page Joplin Plugins

1 Like
4

can it contain a "one-liner" (super short description as well?
Here I miss some information due to "vie...".
image

5

I can't make something up for a plugin, it must be contained in the data so I can display it. Or we can display the whole description in this popover?

6

can you pull the first line/paragraph?
So the first line/paragraph the short description

7

I don't think we'll want that pop over anyway.

Also if I click on the search input box, a new search input box popup.

8

The reason he made it is due to me Coding Phase - Week 6 Report - #4 by PackElend
I like it as it allows to show me quickly what the plug in is all about.
I admit it current content is quite minimal

9

Maybe we could have the description without the popup?

10

Yes, it is intentionally built in this way. This kind of UI is used by many sites, such as Bootstrap, Vue, Astro and etc.

11

Personally, I don't like the hover information, because the pop is always somewhere else and the information could fit in the tiles.

grafik
grafik1230×532 38.7 KB

I think it does not fit to the Joplin style, because the search fields in Joplin App are also directly the search fields and not a Button for a pop up.
The search results could also be like the tiles to fit into the site design?! Since all additional information is lost during the search (version, author, downloads, ...)

2 Likes
12

I'd add that hiding useful information on hover isn't that great, as it's completely inaccessible when using touch input (e.g. tablets running desktop OS, laptops with touch screen, etc.). Also, if you do decide to use :hover, please also always add :focus together with it, as this makes the information available to keyboard users as well (when focusing the element with the Tab key).

1 Like
13

That is possible. How do we want to display the results then? If we decided to use tiles, we probably need to display the results on a new page.

14

Thanks for your suggestions. I think if most of the Joplin users don't want this popover, I'll directly remove it then.

15

The idea was to avoid switching tabs to learn more about the plugins when I browse them.
I thought about an in-line window to show more details to reduce clicking / tabbing and going back and forth.
Scroll, see / tab, click to see more details which cannot be displayed on the pile / tab, click for download, all details, comments etc.

Main driver, The flow shall not exceed three actions

1 Like
16

What do you guys think?
Would things in-line thing appreciated by the users?

17

how Google handles it on Google Maps, when you click on place or search a place, could be an inspiration.

UPDATE
have look at https://apps.nextcloud.com. This site goes down tomorrow for a

rather large maintenance release

see https://help.nextcloud.com/t/planned-downtime-app-store-tue-16-aug/143367.

The current UI has some similarities with their app store, let us see what changes / NC's lessons learned could be included over here as well.

1 Like
18

It indeed looks similar. But their website is not completely static, the comment part requires logging in to post new comments where we don't have that kind of authorization system.

19

I would not look on this, lets how the change UX there might some picks for us

1 Like