Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A new website for raku.org #158

Open
CIAvash opened this issue Feb 6, 2020 · 15 comments
Open

A new website for raku.org #158

CIAvash opened this issue Feb 6, 2020 · 15 comments
Assignees

Comments

@CIAvash
Copy link

@CIAvash CIAvash commented Feb 6, 2020

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

This comment has been minimized.

Copy link
Author

@CIAvash CIAvash commented Feb 6, 2020

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.

@AlexDaniel

This comment has been minimized.

Copy link
Member

@AlexDaniel AlexDaniel commented Feb 6, 2020

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

This comment has been minimized.

Copy link
Member

@AlexDaniel AlexDaniel commented Feb 6, 2020

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

This comment has been minimized.

Copy link
Member

@AlexDaniel AlexDaniel commented Feb 6, 2020

@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

This comment has been minimized.

Copy link
Collaborator

@rba rba commented Feb 6, 2020

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

This comment has been minimized.

Copy link
Author

@CIAvash CIAvash commented Feb 6, 2020

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

This comment has been minimized.

Copy link

@uzluisf uzluisf commented Feb 6, 2020

@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

This comment has been minimized.

Copy link

@uzluisf uzluisf commented Feb 7, 2020

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

This comment has been minimized.

Copy link
Contributor

@FCO FCO commented Feb 7, 2020

@AlexDaniel

This comment has been minimized.

Copy link
Member

@AlexDaniel AlexDaniel commented Feb 7, 2020

@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

This comment has been minimized.

Copy link
Member

@AlexDaniel AlexDaniel commented Feb 7, 2020

I think @FCO mean this color issue:
image

And this wasted empty space on the left side:
image

@FCO

This comment has been minimized.

Copy link
Contributor

@FCO FCO commented Feb 7, 2020

Trying on GitHub site:

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

Screenshot 2020-02-07 at 08 41 20

selecting it:

Screenshot 2020-02-07 at 08 42 40

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

@uzluisf

This comment has been minimized.

Copy link

@uzluisf uzluisf commented Feb 7, 2020

@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

This comment has been minimized.

Copy link
Contributor

@FCO FCO commented Feb 12, 2020

It seems it’s something missing on mobile…

PDF document-23337B5313D3-2.pdf

@icydee

This comment has been minimized.

Copy link

@icydee icydee commented Feb 19, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

None yet
6 participants
You can’t perform that action at this time.