⏳ Changelog - Githubissues

visortelle commented 2 years ago

Day 1.

Home page layout inspired by the Rust's crates.io

day-1

Day 2.

"Most Downloaded" and "Recently Updated" package lists at home page.

https://user-images.githubusercontent.com/9302460/147856801-837eb0fe-9b9c-4900-89f6-93aee15cc4e0.mov

visortelle commented 2 years ago

Day 2. A simple search in Hackage.

https://user-images.githubusercontent.com/9302460/147860610-52f00b54-73c3-414c-b3e3-a102956c9b44.mov

visortelle commented 2 years ago

Day 3. Implemented search in Hoogle.

https://user-images.githubusercontent.com/9302460/147878573-2a88709b-89f1-4072-a741-39dc55371a6d.mov

visortelle commented 2 years ago

Day 3. More informative layout for Hoogle search results.

https://user-images.githubusercontent.com/9302460/147884325-6887377c-2fb0-4170-a537-49d8ef100ae7.mov

ulysses4ever commented 2 years ago

Great so see some work on this issue, thank you! One thought I had staring at the screenshots: the big bold numbers on the right of the main part of the page (Downloads, Packages Published) look pretty useless to me, and I'd hope to have little noice on the main page. I understand it's modeled after crates.io, and I appreciate their lead in user-friendly design, but I'd suggest to approach this task with more thought than simply following an existing design.

visortelle commented 2 years ago

@ulysses4ever thank you for your attention and remarks.

I follow simple goals with the project:

Attract more non-academia newcomers to Haskell. Or at least stop to scare them away. Unfortunately, most Haskell-related sites on the web unlikely can be called attractive. It's not very big work to improve the situation compared to other work in the community.

Disclaimer: I'm not a professional visual designer or promoter. 🤣

Regarding big bold numbers - maybe it's a bit sad to admit, but these marketing tricks work.
I want to familiarize myself with the Haskell ecosystem and community more closely.
Make usability better for regular Haskell users. I take all сomments into account and promise that will not sacrifice UX for the sake of something visual.

Copying parts of the crates.io home page is more like the easiest to start a project. Now I have some thoughts and a quite clear plan on what to do next.

yutotakano commented 2 years ago

I was reading through the original RFC issue thinking it was perhaps another stale issue from 2018. I was so surprised to see a person take the initiative only a few days ago, and it's brought a really big smile to my face seeing this come to life with vibrancy.

As I'm not knowledged on Hackage's web APIs nor am I a professional web developer, I can't do much but to follow this issue with admiration, but I wish you the best of luck and will cheer for you, hoping this design hits completion! It looks absolutely solid and it'll be such a great improvement to Hackage. 💜

Edit: I love the Hoogle integration and the slick search. For the big bold numbers, it may be better to write them as "34.5 Billion packages published" (or the equivalent with e.g. thousand/million), instead of the actual detailed count, because too much detail draws the user away from the impact.

Edit 2: On a closer note, if the real number is only 16,288, the above change might be for the worse. Perhaps keeping the actual number is better.

visortelle commented 2 years ago

Day 4.

Started package page implementation.

https://user-images.githubusercontent.com/9302460/147923918-af65901c-467b-44a9-989c-6249a1fdb278.mov

Now I parse HTML content response from proxied HTTP request to hackage.haskell.org. There are missing JSON APIs. It won't be hard to replace it with JSON APIs after it will be implemented on the hackage-server side. It will be easier after merging this PR: https://github.com/haskell/hackage-server/pull/996

Now it seems possible to sync HTML parsing with hackage-server without relying on HTML layout and styles of the content generated by haddock.

Will see.

myShoggoth commented 2 years ago

This is very exciting, thank you!

visortelle commented 2 years ago

Day 5.

Not so much done on features.

Implemented server-side rendering. It should be fast.
Started sidebar implementation at the package page.
Deployed 🚀 to Vercel in one click 😳.
- Home page: https://hackage-ui.vercel.app/
- Package page example: https://hackage-ui.vercel.app/package/lens

visortelle commented 2 years ago

Now you can follow the project at Twitter: https://twitter.com/HackageUI

visortelle commented 2 years ago

Day 6.

Added favicon, page titles, meta for SEO.
Added some links to the footer.

Adapt pages for mobile devices. Menu navigation is missing yet.

https://user-images.githubusercontent.com/9302460/148267709-b1c63f78-9632-44a1-8709-45695010d5cd.mp4

Add toasts for copy package name feature and error toasts for failed requests.

https://user-images.githubusercontent.com/9302460/148267951-03d58100-7040-4daa-9a51-948c5225973c.mov

Search progress indication.

https://user-images.githubusercontent.com/9302460/148268037-3ee53a97-3db8-4dca-83b2-0333312a9f94.mov

Fixed several search input bugs. 🐞

visortelle commented 2 years ago

Still Day 6. 😄

Implemented the "Recent searches" feature. The search history is stored in the browser's local storage.

https://user-images.githubusercontent.com/9302460/148293624-5d639616-1b99-435c-ba5a-7e4ac372ef47.mov

Now you can Show help by typing :? into the search bar.

https://user-images.githubusercontent.com/9302460/148293879-dfd2ea1f-66c5-4178-93bc-cf031a0cd938.mov

ollimandoliini commented 2 years ago

Hey! This looks amazing, nice work!

Couple of ideas that came to mind:

The search could maybe somehow indicate if there are no results for the search. Currently the user might think that it's still searching even though the search has been completed with no results.
It would be nice if you could navigate the search results with arrow keys and enter.

These might already be on your radar :)

visortelle commented 2 years ago

@ollimandoliini thank you!

The search could maybe somehow indicate if there are no results for the search.

Right now working on it.

It would be nice if you could navigate the search results with arrow keys and enter.

Yeah. I thought about it. Added it to todos list.

visortelle commented 2 years ago

Day 7. Before the second cup of coffee. ☕️

Search results header for Hackage and Hoogle searches.

Ability to clean up search history.

https://user-images.githubusercontent.com/9302460/148386499-930b2974-70f1-4aae-a274-3d91bb614f7a.mov

Disable ligatures by default. Will make them optional later.
No results indication as @ollimandoliini asked.

https://user-images.githubusercontent.com/9302460/148386227-e7d54813-15a8-48d1-a341-5391b0786bae.mov

visortelle commented 2 years ago

Day 7. After the second cup of coffee ☕️

Not you can expand/collapse search results items in Hoogle search as asked by @bgamari in https://github.com/visortelle/hackage-ui/issues/3

https://user-images.githubusercontent.com/9302460/148423788-beb510f9-1cd6-4b0e-b72a-aaafccae30f0.mov

visortelle commented 2 years ago

Day 8.

Homepage and Repository info at the package page.

Bodigrim commented 2 years ago

I think this is absolutely awesome! Thanks for you work, @visortelle. Happy to help with Haskell side of things, if needed.

visortelle commented 2 years ago

Thank you, @Bodigrim. 🙂

I have these candidates to solve:

https://github.com/haskell/hackage-server/issues/986 https://github.com/haskell/haddock/issues/1420 https://github.com/haskell/haddock/issues/352

I think @gbaz and @Kleidukos may suggest other prioritized issues to solve that may be potentially useful for the project.

For two or three weeks, I have a plan to make the service usable as much as possible. Without touching the code of any projects that it's consuming as a data source. I mean Hackage-server, Haddock, and Hoogle at this time.

After that, it would be time to take a break to rationally observe what we got, collect feedback, and plan what to do next.

There are many ideas I keep in mind, but there isn't much sense to discuss them until the initial part of the project isn't finished.

This weekend I plan to finally touch the packages docs part. I'm very curious about what I could achieve here. 😅

visortelle commented 2 years ago

Day 8.

Display the date when the package has been published last time.

https://user-images.githubusercontent.com/9302460/148615275-54fca1d8-8fe5-4e46-8e82-40de8c98fbca.mov

visortelle commented 2 years ago

Day 9.

Fix the "Browse on GitHub" button for git@github.com:owner/repo case.
Improve typography of lists and tables on the package page.

ulysses4ever commented 2 years ago

Black background for code with white background for everything else isn't great for my eyes, personally. I hope this either will be possible to change on the user side or will be changed altogether.

visortelle commented 2 years ago

@ulysses4ever yep, it will be possible to change on the user side.

visortelle commented 2 years ago

Day 10.

Add Google Analytics. https://github.com/visortelle/hackage-ui/commit/83589702c8dd829931ff10a8c83fd6f53d923e30

I understand it may be controversial for some users, but it's implemented for a purpose. To evolve the project in the best way, we need to know which features are used and how.

No data collection for ads: https://github.com/visortelle/hackage-ui/blob/83589702c8dd829931ff10a8c83fd6f53d923e30/hackage-ui/pages/_document.tsx?_pjax=%23js-repo-pjax-container%2C%20div%5Bitemtype%3D%22http%3A%2F%2Fschema.org%2FSoftwareSourceCode%22%5D%20main%2C%20%5Bdata-pjax-container%5D#L21

In the nearest future, I'll add the ability for users to hide an IP address or completely opt-out analytics.

More than half of the Internet, including the haskell.org website, uses Google Analytics and nobody really cares. 🙂

visortelle commented 2 years ago

Day 10.

Make search input clickable, such that one can look them up without typing.
Rethinking home page.

https://user-images.githubusercontent.com/9302460/148701988-fea5474b-d499-44aa-a831-ddf45469b578.mov

visortelle commented 2 years ago

Day 11. 🙂

Nothing to show today.

Working on extracting the search input to a separated JS library. It should allow to implement a Chrome extension and maybe a VSCode plugin.

Will it be convenient or not, will see after release. 🤞

visortelle commented 2 years ago

Day 12.

Continue work on the browser extension.

Unlikely will release it today, several unexpected issues figured out. JS build stuff is still disgusting if you need something not too trivial. 😕

The same search input as on the site, but as an extension. Here is how it looks.

On page.

Popup. Will improve styles later.

By the way, do you have an opinion on what would be a good default shortcut?

Maybe different on different platforms? I didn't think about it yet, please propose what would be convenient for you. 🙂

ulysses4ever commented 2 years ago

The whole Chrome extension idea looks like a huge red herring. Of course, as a volunteer you're entitled to work on whatever you choose. Just saying that it likely lowers the chance to hit the goal of hackage-ui, as I see it (to have a fresh L&F for hackage.haskell.org).

visortelle commented 2 years ago

@ulysses4ever, why? 😳

The extension itself is not too much work. The React component is the same as on-site. I'll back to the packages page and docs soon.

visortelle commented 2 years ago

@ulysses4ever I'll explain a bit. I personally hate context switching and searching a right button or menu item. I'm a fan of emacs's M-x-like flows. Cmd + Shift + P in vscode, Cmd + Shift + A in JetBrains products, etc. Maybe it's a reason why I see it useful. Lot of devs are same.

Bodigrim commented 2 years ago

I personally think the extension is great. Ctrl+H sounds good to me.

visortelle commented 2 years ago

Day 13.

The browser extension is merged and published to Chrome and Firefox stores.

No available to install yet. Awaiting moderator reviews.

visortelle commented 2 years ago

If you want to help find some bugs, you can install the extension manually.

Download zip file:

~~haskell-spotlight-v0.0.1.zip~~

~~haskell-spotlight-v0.0.2.zip~~

~~haskell-spotlight-v0.0.3.zip~~

~~haskell-spotlight-v0.0.4.zip~~

haskell-spotlight-v0.0.5.zip

Unzip it.
Go to chrome://extensions/
Set "Developer mode" on

Click "Load Unpacked" and select the "build" directory.

If no errors, then it is installed successfully. Go to any web page and press Ctrl + h

visortelle commented 2 years ago

Screenshots:

yutotakano commented 2 years ago

As Ctrl has the same behaviour as Command on Windows, pressing Ctrl+H on Chrome just opens my Chrome History tab. Perhaps it should map to something else on systems other than Mac, like Alt + H? Or add an options page to customise it.

On another note: maybe it's worth creating a separate issue to track bugs and feature requests for the browser extension?

visortelle commented 2 years ago

As Ctrl has the same behaviour as Command on Windows, pressing Ctrl+H on Chrome just opens my Chrome History tab. Perhaps it should map to something else on systems other than Mac, like Alt? Or add an options page to customise it.

Seems like a bad default. 😕

Will implement an ability to rebind shortcut later.

On another note: maybe it's worth creating a separate issue to track bugs and feature requests for the browser extension?

Done. https://github.com/visortelle/hackage-ui/issues/7

visortelle commented 2 years ago

Update for early adopters. 😆 Can anyone please check it on windows, does it work now with Ctrl + h 🙏

haskell-spotlight-v0.0.2.zip

Bodigrim commented 2 years ago

Is there a way to install from ZIP for Firefox?

visortelle commented 2 years ago

@Bodigrim

unzip the archive
Go to about:debugging#/runtime/this-firefox
Click "Load Temporary Add-on"
Select manifest.json file in the build dir

Updated for Firefox:

haskell-spotlight-v0.0.3.zip .

visortelle commented 2 years ago

Day 14. 🥳

Many improvements on extension. Many thanks to @Bodigrim and @ulysses4ever for their suggestions. Also, thanks @ocramz for support.

It's finally available in Firefox Store 🦊

https://addons.mozilla.org/en-US/firefox/addon/haskell-spotlight/

You can install the Chrome version manually. By following the instructions.

haskell-spotlight-v0.0.4.zip

Share your thoughts and star ⭐️ the repo and if you like it. 😁

Martinsos commented 2 years ago

Awesome work, I believe this is a really big thing for Haskell and its adoption! Let me know if I can help in any way.

visortelle commented 2 years ago

Day 15.

Implementing versions, readme, and changelog tabs on the package page.
Figuring out how can the extension for VSCode could be implemented. VSCode doesn't allow to display of arbitrary HTML, so an unlikely floating input look can be implemented. I’ll try to get convenient UX by using its WebView API.

Tomorrow moving 🚌 to apartments in another city, so probably will be no news for 2-3 days.

visortelle commented 2 years ago

Day 16 - post factum notes.

Browser Extension

Fix hotkey picker bugs. 🐞🐞🐞 Thanks to @ulysses4ever for reporting bugs. 🙂

Updated versions:

Firefox: https://addons.mozilla.org/en-US/firefox/addon/haskell-spotlight/versions/
Chrome: haskell-spotlight-v0.0.5.zip

Spotlight Input

Fixed memory leak.

visortelle commented 2 years ago

Day 17.

Working on VSCode extension. Got its initial version up and running. Wrapping head around and experimenting with VSCode API.

visortelle commented 2 years ago

Day 18.

Continue work on the VSCode extension.

Many build-related pitfalls. Also requires a lot of testing on various panels configurations.

Looks not OK yet, but feels quite convenient. Will continue tomorrow.

visortelle commented 2 years ago

Day 19.

Released preview version of the VSCode extension. 🚀

Install: https://marketplace.visualstudio.com/items?itemName=visortelle.haskell-spotlight

https://user-images.githubusercontent.com/9302460/150015894-fe62ea7d-9a45-4e31-842a-e60ae8747970.mov

If any VSCode users are here, please check out it and report any bugs 🙏.

Default hotkey is Alt + H, same as in the browser extension.

How to change the default hotkey:

CMD + Shift + P

🐞 Known issues:

[ ] :r search by recent queries doesn't work yet.
[ ] Missing keyboard navigation.

Please put your feedback here: https://github.com/visortelle/hackage-ui/issues/11

visortelle commented 2 years ago

Day 20.

Continue with tabs on the package page.

visortelle commented 2 years ago

Days 21, 22 - I was busy with other activities and didn't get a chance to touch the project. 🙂

Day 23

Implemented package versions page.

https://user-images.githubusercontent.com/9302460/150651444-9019c54f-9b02-4afa-b7e6-200e57d34dea.mov

I'd like to add more information on each version. Like when it was by published and by whom. Probably license info. But it would be too many HTTP requests.

Version range calculation left for later. If somebody would like to implement the PVP version range calculation function in JS, I'd be very appreciative. 😆

visortelle commented 2 years ago

Day 24.

Implemented the reverse dependencies list page. Idea by @Bodigrim

https://user-images.githubusercontent.com/9302460/150674862-91e81ee8-087d-4058-b62c-18263134f083.mov

The feature uses this resource as a data source: https://packdeps.haskellers.com/reverse/pandoc

visortelle / haskell-spotlight

⏳ Changelog #2

Browser Extension

Spotlight Input