Problem-solving: A new website for raku.org

[CIAvash]

I created a website for Raku. You can view the demo here. Its source code is available here.

Features:

• Created with Hugo: it's fast and has a lot of features
• Multilingual: All pages are separate markdown files(except the home page)
• Blog: which covers #115. Blog posts are markdown files with title, date and author fields. More blogs can be added.

[CIAvash]

Because I don't want to waste people's time, I'd like to mention that the design is final, so I'm not looking for comments on how to change or improve the website. What I mean is I created a website, you can use it if you want to. I'm not spending more time on it.

[AlexDaniel]

Because I don't to waste people's time, I'd like to mention that the design is final, so I'm not looking for comments on how to change or improve the website. What I mean is I created a website, you can use it if you want to. I'm not spending more time on it.

OK, then first and foremost we need someone who'd be willing to work on it.

[AlexDaniel]

Feedback for whoever is going to work on it (don't take this too seriously, this is just my opinion):

• General look and feel is great, keep it. @CIAvash++
• Camelia that is less right-in-your-face is good! Don't add more logos! ~Except for the favicon, please do add a favicon.~ ✓
• Perhaps reconsider the use of the crooked logo in the navbar, it doesn't look great. If a straight one doesn't look better then maybe try without a logo at all, and put one somewhere else (like in the footer maybe)
• The code section needs to be redone, maybe completely. It looks big and clunky, doesn't even fit on my screen and requires additional vertical scrolling. Moreover, eventually we need to add “Run it!” feature and make the code editable, so think where the additional button is going to fit in the new design (this feature is relatively easy to implement, @zoffixznet++ had it on their blog using https://tio.run API or something like that)
• Try to add vertical rhythm, chances are everything will magically look much better.
• Contrast seems to be fine, no need to significantly improve it, but also please don't make it worse.
• Except maybe consider adding a slight shadow to make the text pop, like the one on rakudo.org (text-shadow: 0 0.05rem 0.1rem rgba(0,0,0,0.5);)
• #a4ac3e color doesn't look nice, maybe #d3df38 is just fine?
• Main page bubbles (Community/Social Media/Language) probably need to be of the same vertical size.
• Same for Resources bubbles.
• There's no footer across all pages. Maybe we need one? I think the one on the current version https://raku.org is pretty good. It adds a logical end for any page, especially ones that end abruptly (e.g. Community).
• ~Download button on the main page doesn't work?~ ✓
• Recent Blog Posts is gone?

Generally it looks like a big improvement to me (when compared to the original website). It's just a little bit unpolished and these tiny details make it look a bit sloppy, but otherwise it's great.

[AlexDaniel]

@rba maybe you can already start hosting it on let's say https://new.raku.org ? This way more people will be able to look (and take it more seriously) :)

[rba]

Yes I will start taking care for the hosting (more likely under https://stage.raku.org). To be honest I wouldn't find the time soon to work on the site or content itself. Yet I would like to work on a Dockerfile to make sure it will be containerized.

My feedback for the one who is like to pick this up:

• If we take the layout we need to adjust the (externaly) linked sites as well (to have similar head with links to easily switch from modules to docs, to faqs and back the main page.
• As we have sponsors for infrastructure, I need a sponsoring page go give the logos a home.
• With hugo as a static page generator this will then be serverd with nginx within a docker container. The build automation should do checks and create the container automatically and push into a registry (preferred place would be https://github.com/orgs/Raku/packages to not mess around with the well known place to find images hub.docker.com.) (I can work on this too or just assist if needed.)
• The section "Why Raku": I would just use this section with 2-3 quick-start tiles and avoid scrolling parts. Or can we embed a REPL? (Whe I like to inform myself about a "new" language I like to see and play with it immediately. So download or how to get it installed and small (basic) examples and a playground.)
• Should we separate a simple blog page which could be used more universally?
• Or should we just have like a "news" section to feed in like pl6anet.org? Or just mixing in compiler release announcements? For a new-be I would take moment to understand the components of raku.
• With the updated rakudo.org page, there should be all compiler found there (?). So the download like could directly point to the https://rakudo.org/downloads maybe?
• I can not say much about the color setup, yet we need to make sure to make the red/green/brown colors viewable for people who have https://en.wikipedia.org/wiki/Color_blindness like myself. So far the current colors are not too bad.
• English only or start with languages? Do we find enough people to do the translation to other languages than english?

Open for discussion...

[CIAvash]

I don't want things to be broken, so I fixed the download link and added the favicon.

For color blindness, I used the Firefox developer tool for this to make it at least OK, I don't know how much I succeeded.

[uzluisf]

@CIAvash++. Whoever ends up working in the website's design might draw some inspiration from the https://inko-lang.org/ website. I'm myself tweaking the CSS for a mirror of the documentation (https://rakudocs.gitlab.io/) but it still needs some work.

[uzluisf]

I started tweaking CIAvash's website and this is the result so far (https://uzluisf.github.io/raku-demo/). The main changes are

• the "Why Raku?" section now has a selection menu linked to a code snippet and a small description. Although now there's no need to scroll to select a code snippet, a code snippet itself might've some vertical scrolling when its height exceeds the height of "Why Raku?". The section still shows up on mobile but I think a simple highlight of features should replace it.
• a footer similar to the current website.

[FCO]

@uzluisf There is a collour that’s making it hard to read the code:

selecting it:

And, isn’t it too empty on the left side?

[AlexDaniel]

@FCO sorry your comment came in a bit mangled. I tried to fix it but probably made it a little bit worse. I think email replies don't come properly through your mail client or server.

[AlexDaniel]

I think @FCO mean this color issue:

And this wasted empty space on the left side:

[FCO]

Trying on GitHub site:

There is a color that’s making it hard to read the code:

selecting it:

And, isn’t it too empty on the left side?

[uzluisf]

@AlexDaniel, @FCO The color issue was being caused by the pre tag's default color from Bootstrap and the Pyments theme's dark background. It was a matter of overriding it but it took me longer than anticipated to figure it out :-).

As for the somewhat empty left side, I've moved the code snippets below the description but there might still be some space below if the code snippet isn't that long. An alternative would be to grow the parent div's height accordingly but I'm not sure how to do that.

[FCO]

It seems it’s something missing on mobile…

PDF document-23337B5313D3-2.pdf

[icydee]

A general nit-pick, the spelling of 'comming' should be 'coming' throughout the first page.

[AlexDaniel]

Any updates? Or any thoughts on how this can go forward?

Generally, it looks pretty nice, but the layout is sloppy and there are some bugs. I don't think we can switch to it now, at least not without a maintainer who'd be willing to work on it.

[FCO]

That's visible now, thanks!