#174: New AwesomeWM Website - prototype 1 main page and styling.

[raven2cz]

@Elv13 @Aire-One According to discussion #174. I created prototype for main page and styling to keep ikiwiki.

Check modifs inside this PR. Please provide your opinions and details about main page and styling.

The change provides possibilities for mobiles (small screen) and large 4K screens.

Navigation bar is kept, it can be replaced with navbar, but it needs js. I kept previous for prototype 1.

The demo is prepared here. https://raven2cz.github.io/awesome-www/

[raven2cz]

thanks fire just two final questions (i think the rest looks fine by me):

1. i'm not sure about that huge blurred border around the button - i think the rest of design elements not visually supporting, so i would go with just a hover.

Hover kept, huge blurred border discarded.

2. i wasn't able to test if dark/light theme detection works correctly in browser, as i have that feature disabled - if anyone could just have a second look on it and confirm it works - that would be nice

Tested now on windows 11 light theme with edge :-o Yes, it works. The light theme was shown as first correctly. Edge works with pages too.

[raven2cz]

@actionless New demo updated. Requested points are done.

[actionless]

thanks, just a small OCD-level thing, not very important:

[raven2cz]

@actionless anniversary centered, done.

[actionless]

btw that's out of scope of this PR but i think we also need to change everywhere "awesome" in the text to "AwesomeWM" - i haven't been reading much the frontpage text before looking into your PR - and having it there written as "awesome" not only not matching with our current official "press name", but simply makes text confusing to read in english.

[actionless]

just noticed the menu items don't have underline or color-change on hover - that's a technical usability mistake, not a stylistic preference

according to the current style of links you set already - i think adding underline on mouse hover of menu items would make sense stylistically

[raven2cz]

just noticed the menu items don't have underline or color-change on hover - that's a technical usability mistake, not a stylistic preference

according to the current style of links you set already - i think adding underline on mouse hover of menu items would make sense stylistically

Do you mean top navigation menu, nav element? There is css animation for hover, top and bottom line surrounds selected item. I can add change color of selected menu item too. But text underline is for final selected item. It is not good to have underline for hover text too. There will be two items selected in one time, previous and actual. It will be confusing for user.

[actionless]

thing is that using an underline - conventional web symbol for a hyperlink - in order to highlight currently selected menu item is semantically very-very wrong, however that's a problem which current website already have, so it's like changing "awesome" to "AwesomeWM" - smth need to be done but not in scope of this PR (less changes - faster we'll get it merged, basically)

in scope of this you could restore hover-color-change, similar to the current version of website

[raven2cz]

thing is that using an underline - conventional web symbol for a hyperlink - in order to highlight currently selected menu item is semantically very-very wrong, however that's a problem which current website already have, so it's like changing "awesome" to "AwesomeWM" - smth need to be done but not in scope of this PR (less changes - faster we'll get it merged, basically)

Yes, the content is new PR/PRs. It has to be changed. You know that I do not speak natively English; the sentences need updates. Maybe some link doesn't work after the years etc.

in scope of this you could restore hover-color-change, similar to the current version of website

hover is done.

[raven2cz]

@actionless So, what will be next steps? Is it possible to merge PR or we will wait for next dev team opinions? I just ask about next steps of workflow to final change of webpages.

[actionless]

@raven2cz he have the rule of 2 approvals which is skipped only in emergency cases

[actionless]

@Elv13 however this website won't deploy until this is resolved, regarding tokens:

https://github.com/awesomeWM/awesome-www/issues/171

[actionless]

RN i've deployed it manually using my personal token (and next set it back to empty)

[Aire-One]

I'm late to the party. Just passing by to say thank you for the work @raven2cz :rocket:

[Elv13]

Yeah, thanks a lot, it looks Awesome!

Do you think you can add a dark CSS for the doc too? I think we are pretty happy with the bright version (lots of tweaks by a lot of people over a long time), but in dire need of a dark one. I did some groundwork last December when I pre-processed all auto-generated SVGs to support CSS, but this is as far as I got. I am neither good with color, nor up to date with CSS spell casting. I also made the doc use obscene amount of ram by embedding all SVG as <object> (because I don't know better). It's a bit more complex to develop for than awesome-www because you actually need to compile AwesomeWM with ldoc installed to see changes to the HTML. Most distributions provide easy ways to compile it. Which distro do you use?

[raven2cz]

@Elv13 arch. I tried to compile with ldoc and open pages, but I get corrupted image and missing awsome logo. I not sure, but before few months, it works normally...

Why did you convert all svg images as object? Because it seems that it is my problem with image top. If I will use standard way

<img class="img-object" alt="" src="images/AUTOGEN_awful_popup_defaultconfig.svg">

image is shown normally without mistakes.

[Elv13]

mmm, interesting failure mode. What is the distribution? That's probably worth reproducing and fixing on my side. But here's a more reliable way:

# Install docker.io or podman, somehow
# apt/dnf/zipper/pacman/emerge/something

# Create a build dir
mkdir ~/awesome_builder; cd ~/awesome_builder`

# Get the source
git clone https://github.com/awesomewm/awesome

# Same as the CI, so hopefully same outcome
cat > Dockerfile << EOF
FROM ubuntu:20.04

RUN sed -i '/^#\sdeb-src /s/^#//' "/etc/apt/sources.list"
RUN apt update -y
RUN DEBIAN_FRONTEND=noninteractive apt build-dep awesome -y --no-install-recommends
RUN DEBIAN_FRONTEND=noninteractive apt install libxcb-xfixes0-dev \
    librsvg2-common -y --no-install-recommends

CMD mkdir /awesome/build -p && \
    cd /awesome/build && \
    cmake .. && \
    make -j2
EOF

# Build the container
docker build . -t awesome_builder

# Build awesome
docker run -ti --rm -v $PWD/awesome:/awesome awesome_builder

# Open in Firefox (or Chrome, whatever you use)
firefox awesome/build/doc/index.html

You can edit the ~/awesome_builder/awesome code, this is what the container will use. The everytime you want to refresh the doc, run docker run -ti --rm -v $HOME/awesome_builder/awesome/awesome:/awesome awesome_builder again.

[raven2cz]

@Elv13 Thanks. Docker works ok. Output is correct. I have a pure arch. It seems that some new lib version has to be changed around 2 months ago, because it worked before...

I have important just few questions for dark mode.

• You told that: "pre-processed all auto-generated SVGs to support CSS". Which support are you integrate? Are there some variables which can be use for css coloring to change image colors? If yes, which variables? Or example of some usage for one image, thx.
• Colorscheme. I will prepare two layers, so there will be possibility to swap colorscheme. In actual light theme there are used a LOT of colors. Colorscheme is not created. So first step is to make little clean up of it before dark theme. @actionless defines inside this issue default AW colorscheme, I can use it, maybe there will be necessary to add more than 16 colors. It is not terminal. In addition, I'm not sure if it fits on it. We will see. Next possibilities are one dark and monokai pro themes.
• Do you want a dynamic swapping of light/dark theme (more work)? Or just simple usage of system settings by @media prefers-color-theme?

[Elv13]

You told that: "pre-processed all auto-generated SVGs to support CSS". Which support are you integrate? Are there some variables which can be use for css coloring to change image colors? If yes, which variables? Or example of some usage for one image, thx.

Not much has been done, here's the commit to use CSS for the "black" color instead of hardcoding it in SVG https://github.com/awesomeWM/awesome/commit/93f7269081a7cc5cd62762d61872ca231b8bed17

Here's the commit that added the SVG post-processing: https://github.com/awesomeWM/awesome/commit/2c18547a6b5b46170d18ae771c1b897f3495e3c3

So for now there isn't many colors we can replaces, but we can rather easily add the other ones as needed. The main reason I originally did it was fix the high contrast usability support. It had black on black content.

Do you want a dynamic swapping of light/dark theme (more work)? Or just simple usage of system settings by @media prefers-color-theme?

Having the same button as the main website and share the value would be nice, but not 100% required for the first PR.