⏳ Changelog

[visortelle]

[visortelle]

Day 1.

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

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]

Day 2. A simple search in Hackage.

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

[visortelle]

Day 3. Implemented search in Hoogle.

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

[visortelle]

Day 3. More informative layout for Hoogle search results.

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

[ulysses4ever]

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]

@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]

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]

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]

This is very exciting, thank you!

[visortelle]

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]

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

[visortelle]

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]

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]

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]

@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]

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]

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]

Day 8.

• Homepage and Repository info at the package page.

[Bodigrim]

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

[visortelle]

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]

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]

Day 9.

• Fix the "Browse on GitHub" button for [email protected]:owner/repo case.
• Improve typography of lists and tables on the package page.

[ulysses4ever]

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]

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

[visortelle]

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]

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]

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]

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]

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]

@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.