alire-project
Website redesign proposal: modernizing alire.ada.dev
Website Redesign Proposal: Modernizing alire.ada.dev
Overview
I would like to propose a complete redesign of the alire.ada.dev website to improve the UI and UX. After discussing with @Fabien-Chouteau (as suggested by @mosteo), I'm creating this issue to outline the planned improvements and get feedback from the community and maintainers.
Current Limitations
The current Jekyll-based site has several limitations:
- Documentation is not well-structured and difficult to navigate
- Full page reloads can be slow when navigating
- Search functionality could be improved
- Build times can be slow with a large number of crates
- Visual design could be modernized to match other package managers (NPM, PyPI, crates.io, Go Pkg)
Proposed Solution
I suggest migrating from Jekyll to a modern static site generator, specifically VitePress or Nuxt, which would offer the following benefits:
Technical Improvements
- SPA Navigation: Instant page transitions without full reloads for a smoother user experience
- Faster Build Times: More efficient generation of pages, especially important as the number of crates grows
- Improved Search: Built-in search functionality based on minisearch that could replace Tipue
- Better Developer Experience: Hot Module Replacement (HMR) for faster development iterations (even though there won't be much development, once the essential features have been developed)
- Light/Dark Mode: Easy implementation of theme switching
Documentation Improvements
- Multi-page Structure: Breaking up the current single-page documentation into logical sections
- Version-specific Documentation: Support for minor version (SemVer) documentation (as suggested by Fabien)
- Improved Navigation: Better sidebar and navigation between related topics
- Based on Existing Content: Initial implementation will use the existing documentation from the Alire repository
Visual and Data Improvements
- Enhanced Package Visualization: More advanced dependency graphs
- Advanced Statistics: Better data visualization for tags, targets, and other metrics
- Modern UI: An interface that aligns with current web standards and user expectations
Implementation Plan
- Documentation First: As suggested by Fabien, I'll start with improving the documentation structure
- Prototype Development: I'll create a working prototype to demonstrate the improvements
- Review Process: Share development builds via Cloudflare Pages for feedback
- Deployment: Maintain compatibility with GitHub Pages for hosting
Questions for the Community
- Are there specific pain points with the current website that should be prioritized?
- Would you prefer VitePress (Vue-based, optimized for documentation) or Nuxt (Vue-based, meta-framework) for the implementation?
- I chosen Vue based framework because I know this front-end framework very well, and it is on top used framework, with React, Svelte, and Angular
- Are there specific features from other package manager websites that you'd like to see incorporated?
- Any suggestions for improving the documentation structure?
Link to the stable version
Here is the updated (stable) version of the rework: https://alire-website.pages.dev/
TODO
@Fabien-Chouteau
- [ ] Theme with more personality
- [ ] Improve network graph
@mgrojo:
-
[X] I've seen that the "Edit this page" link on documentation gets 404: alire-project/alire/edit/master/doc/docs/publishing.md The correct link is: alire-project/alire/edit/master/doc/publishing.md
-
[X] There is 555 crates | There is 4 crates matching your search -> There are ...
-
[X] Tag searching only seems to work from the completion; if you submit it, or you click on a tag from a crate, it returns nothing, like following this link: alire-website.pages.dev/crates?s=%23coap. Same with @author
-
[X] Scrolling down the "browse crates" page should automatically load more, otherwise it loses sense to have such a page. An alternative way might be links to numbered pages and next and previous arrows.
-
[ ] I agree with Fabien regarding the network graph. If it cannot be restored to the old format or better, it seems dispensable.
-
[x] If there is a good tag cloud generator in the framework, it might be a good (alternative) goody. Otherwise, I miss being able to browse tags in any way.
-
[X] Clicking on Author might redirect to the page for searching @author (when working). I searching only with the maintainer login (github pseudo)
-
[x] Clicking on "20 SPARK Crates" (and so on) might redirect to the page for searching #spark (when working).
-
[ ] I wouldn't display Alire next to the ALR logo, it seems a bit redundant; choose one of the two for each case. Or it might only be a thing of aesthetics solvable with different color or size, I'm not sure.
-
[X] What about a link to ada-lang.io somewhere, like on the reference to Ada/SPARK or in the footer? Added in the footer
-
[x] Add copy icons on the "Quick Start" section.
Hi,
Here is a proposal: https://83e0fe77.alire-website.pages.dev/
For the graph network, I'm hesitating to put a redirect to: Alire Network Graph
I can generate an up-to-date CSV to always use the latest graph version on cosmograph (the UX is better IMHO). We can add metadata for each node (like tags, version, etc., and a link to the alire.ada.dev page corresponding to the crate).
I added a feature to crypt emails. To decrypt emails, it is necessary to make an interaction (click on the name or "Diplay email" of the author / maintainers). This is to mitigate the spams.
First of all, this looks great! Huge improvement from the current state π₯³
- Search is great
- Discover Crates is great
- Documentation looks way better
- Create pages are awesome (Kudos on the license parsing ^^)
A couple of comments from my side:
- In terms of style, I think the themes lack a bit of personality. I would bring some color(s), maybe.
- The download button is too low. I think it should be visible right away, either next to "Get started" like before, or in the top bar.
- The crate badges are gone
- The network graph is not as good as it used to be. The new version is static and not very readable.
Thank you Fabien for the quick feedback :)
Create pages are awesome (Kudos on the license parsing ^^)
I was inspired by what was done on Crates.io. But since we use SPDX, there are missing cases (*-or-later , cecill-c for example). I need to improve it to switch back to spdx.org instead of choosealicense.com when the last one does not know a license.
- [X] Make a better SPDX by taking inspiration from crates.io > license.js
In terms of style, I think the themes lack a bit of personality. I would bring some color(s), maybe.
You're right! Since Alire has no official color, I do not know which way to choose. Does anyone have some insights? I will do some experiments on my side.
- [ ] Theme with more personality
The download button is too low. I think it should be visible right away, either next to "Get started" like before, or in the top bar.
I can add a button right to "Getting started" that scrolls to the download section. What do you think?
- [X] Add a button for download Alire at the top of the home page
The crate badges are gone
I can re-add it in the crate information, or package header.
- [x] Re-add crate bagde
The network graph is not as good as it used to be. The new version is static and not very readable.
What is the real purpose of this graph?
Furthermore, I suggest using a link to cosmograph for Alire Crates instead. What's your opinion?
- [ ] Improve network graph
Awesome! Visually and featurewise, a great improvement.
I'd like to report some little issues, even if they might be known:
-
[ ] I've seen that the "Edit this page" link on documentation gets 404: https://github.com/alire-project/alire/edit/master/doc/docs/publishing.md
The correct link is: https://github.com/alire-project/alire/edit/master/doc/publishing.md
-
[ ] There is 555 crates | There is 4 crates matching your search -> There are ...
-
[ ] Tag searching only seems to work from the completion; if you submit it, or you click on a tag from a crate, it returns nothing, like following this link: https://alire-website.pages.dev/crates?s=%23coap. Same with
@author
Suggestions:
- [ ] Scrolling down the "browse crates" page should automatically load more, otherwise it loses sense to have such a page. An alternative way might be links to numbered pages and next and previous arrows.
- [ ] I agree with Fabien regarding the network graph. If it cannot be restored to the old format or better, it seems dispensable.
- [ ] If there is a good tag cloud generator in the framework, it might be a good (alternative) goody. Otherwise, I miss being able to browse tags in any way.
- [ ] Clicking on Author might redirect to the page for searching
@author(when working). - [ ] Clicking on "20 SPARK Crates" (and so on) might redirect to the page for searching
#spark(when working). - [ ] I wouldn't display Alire next to the ALR logo, it seems a bit redundant; choose one of the two for each case. Or it might only be a thing of aesthetics solvable with different color or size, I'm not sure.
- [ ] What about a link to ada-lang.io somewhere, like on the reference to Ada/SPARK or in the footer?
- [ ] Add copy icons on the "Quick Start" section.
In terms of style, I think the themes lack a bit of personality. I would bring some color(s), maybe.
You're right! Since Alire has no official color, I do not know which way to choose. Does anyone have some insights? I will do some experiments on my side.
@mosteo I think it would be worth using some of the Open Collective funds to go to Fiverr and get a designer to help us improve what we have.
I can add a button right to "Getting started" that scrolls to the download section. What do you think?
Yes, that would work for me.
The crate badges are gone
I can re-add it in the crate information, or package header.
I like the badges, I think it would be great to keep them around. Note that you also have to generate the corresponding JSON files: https://alire.ada.dev/badges/ada_toml.json
The network graph is not as good as it used to be. The new version is static and not very readable.
What is the real purpose of this graph?
There's no purpose really, it's just nice to see ^^
I have update the 1st message to add a TODO list.
In terms of style, I think the themes lack a bit of personality. I would bring some color(s), maybe.
You're right! Since Alire has no official color, I do not know which way to choose. Does anyone have some insights? I will do some experiments on my side.
@mosteo I think it would be worth using some of the Open Collective funds to go to Fiverr and get a designer to help us improve what we have.
This could be a good idea π
I can add a button right to "Getting started" that scrolls to the download section. What do you think?
Yes, that would work for me.
Done. You can show it on the updated (stable) version of the rework: alire-website.pages.dev
The network graph is not as good as it used to be. The new version is static and not very readable.
What is the real purpose of this graph?
There's no purpose really, it's just nice to see ^^
Oh π I will explore other solution to have a nice graph.
I like the badges, I think it would be great to keep them around. Note that you also have to generate the corresponding JSON files: alire.ada.dev/badges/ada_toml.json
I re-added it. Currently links to badge point to alire.ada.dev, that explain bad link on "per-version" page of crate, but it will works like a charm when in production (on alire.ada.dev). I also optimized the SVG (with SVGO).
If there is a good tag cloud generator in the framework, it might be a good (alternative) goody. Otherwise, I miss being able to browse tags in any way.
@mgrojo I think you talking about things like this:
If that is the case, we will have to see. I, personally, find it hideous, and I have never used this feature on sites that offer it. but, we definitely need something to list all tags used (like the current tag page)
If there is a good tag cloud generator in the framework, it might be a good (alternative) goody. Otherwise, I miss being able to browse tags in any way.
@mgrojo I think you talking about things like this:
Yes, although I don't like having tags in vertical.
we definitely need something to list all tags used (like the current tag page)
Indeed. It could add the number of entries for all the tags, not only the top ones.
If there is a good tag cloud generator in the framework, it might be a good (alternative) goody. Otherwise, I miss being able to browse tags in any way.
@mgrojo I think you talking about things like this:
Yes, although I don't like having tags in vertical.
we definitely need something to list all tags used (like the current tag page)
Indeed. It could add the number of entries for all the tags, not only the top ones.
Yes, in fact it will be easy. In the building time, the entier tag list is built. I only show the 1st ten on the home page. I will check that when I have a moment
I have update the website with @mgrojo suggestions. There is some remaining BTW.
About:
I wouldn't display Alire next to the ALR logo, it seems a bit redundant; choose one of the two for each case. Or it might only be a thing of aesthetics solvable with different color or size, I'm not sure.
In fact, I often see the logo next to the "entity" in the nav bar (e.g. Vercel, Nuxt, Astro, Cloudflare, etc.) so I do not see any problem. But, we can make the logo more colorful, maybe.
I have update the website with @mgrojo suggestions. Nice, thanks.
In fact, I often see the logo next to the "entity" in the nav bar (e.g. Vercel, Nuxt, Astro, Cloudflare, etc.) so I do not see any problem. But, we can make the logo more colorful, maybe.
I don't see any problem on any of those examples, except maybe Vercel. The reason might be because they are colourful or they don't resemble an abbreviation of the brand, as the ALR logo does; they are also taller than the brand text. I don't know how to explain it, but I see something a bit odd. In any case, if a designer is going to be assigned the web design, he/she should know better.
If there is a good tag cloud generator in the framework, it might be a good (alternative) goody. Otherwise, I miss being able to browse tags in any way.
@mgrojo I think you talking about things like this:
Yes, although I don't like having tags in vertical.
We already have a network graph, and we are not sure why π So adding a tag cloud seems like feature creep to me.
The network graph is not as good as it used to be. The new version is static and not very readable.
What is the real purpose of this graph?
There's no purpose really, it's just nice to see ^^
Oh π I will explore other solution to have a nice graph.
Why not keep the current one? Or just remove the graph.
Hello,
Small update of the website, I added the /tags page with several options to list and sort tags.
I made little improvement in the UI, and notably adding a particles effects on the home page at the top.
Regarding the Graph Network:
Why not keep the current one?
I can re-add it (and updating it to latest d3.js major version). But currently, IMHO, I do not find it very useful. You can just explore the graph, but you have not options to filter, or show what you want (make size of nodes depending of IN/OUT/INOUT edges, or by tags like current version of alire.ada.dev, find a specific node, and also, when we click on a node, we want to see details about it, like what we can have in alire.toml, except the long description maybe).
So I'm thinking about the following solutions:
- Just update the current version to the latest D3.js version, with minimal graph (like current)
- Make an augmented version of the Network Graph with filters and node details (using D3.js or Sigma.js)
- Use an external website to showing the graph (like Cosmograph on Alire Crates or Retina > Alire Crates)
For the 1st and the 3rd, the estimated time to completion (ETC) is very low. The second will be the most demanding since, we have to develop a complete graph explorer.
I look forward to hearing from you about what you think is best.
Use an external website to showing the graph (like Cosmograph on Alire Crates or Retina > Alire Crates)
The Retina graph looks great. Could you also color nodes by its most popular tag?
@mosteo I think it would be worth using some of the Open Collective funds to go to Fiverr and get a designer to help us improve what we have.
On this note, I know a local guy that could help without going out to unknown randoms on Fiverr. I'll ask him for his opinion and a quote.
On the logo and the color palette. Thing is, I did that logo on a whim and it has no special significance, and I'm really untalented for graphic design. So, we could use this occasion to come up with something.
One possibility is to come up with some graphic item that could pair well with the project and give us ideas on the colors. So after some thinking and AI poking, I got this list:
- wALRus: it's in the name, so it could be the mascot. But the pronunciation is not evocative of the project. It could make for a kawaii mascot though?
- A lyre Ζ±: not an animal but it reads the same as the English people are saying it? (unlike Spanish/French unfortunately)
- Lyrebird: turns out this is an actual bird, so if looking for a mascot this could be another candidate. It's visually striking, too.
- Cupidesthes hilarion / Symmachia hilaria: those are butterflies, and the thing is that the root for the actual person name "Alire" seems to come from the greek "hilaros" (as other more common names do). So it's a much tenuous link, but still. There are more butterflies/moths/insects it seems with some variation of it in their taxonomy.
I don't know if this is really helpful. Also, if you have other ideas...
@mosteo I think it would be worth using some of the Open Collective funds to go to Fiverr and get a designer to help us improve what we have.
On this note, I know a local guy that could help without going out to unknown randoms on Fiverr. I'll ask him for his opinion and a quote.
That would be great π
On the logo and the color palette. Thing is, I did that logo on a whim and it has no special significance, and I'm really untalented for graphic design. So, we could use this occasion to come up with something.
I like the current logo quite a lot.
Hello,
Small feedback. I have not touched the code yet, I do some design experiment:
I tried several things, and I, personally, found this design cool, I only changed the font.
[!TIP] click on the image above to have a better look
[!NOTE]
I take inspiration from 80's vibe (notably, Cons ERX 260, a shoe released in 80's with a re-edition in 2019's I guess, and arcade style. I found the color combo interesting, and it is away from other package managers, so, making it easy to identify.
1st, what do you think about this design? Are those colors ok? Which one did you prefer (or is it ugly as hell)?
EDIT: I made a page to try and play with configuration, font, and colors: https://heziode.github.io/multi-layer-shadow-text-designer/
Sorry for being a pain, but the light design in particular looks not great to me. But, since this is a matter of taste, I wouldn't push back if people like it.
I contacted my designer acquaintance a while ago, but they don't do website styling. Rather than looking for a random contractor, maybe looking for templates is enough? @Heziode, I guess this Vue tech is easily themable.
Sorry for being a pain, but the light design in particular looks not great to me. But, since this is a matter of taste, I wouldn't push back if people like it.
Are you talking about the global style, or my previous message, about the logo attempt?
Rather than looking for a random contractor, maybe looking for templates is enough? I guess this Vue tech is easily themable.
I use VitePress for the static site generation framework (rely on Vue), and Reka-UI for the components, layout, UI. The style can be changed :)
The only "problem" we could have (in the future, not now), and that is the case with any static generator framework (Jekyll, Vue, Nuxt, VitePress, Next, 11y, etc.) is: if we grow, the compile time will increase, because none of the current frontend stacks support incremental updates (only compiling pages that have been updated). There is an incremental update-like system (ISR), that could be implemented, but not on GitHub Pages; this will require hosting the static site on Netlify or Cloudflare. But this is mostly a reminder for⦠later. This question will have to be raised when we have something like 10-15k pages.