Announcing Phase 1 of the Nix(OS) Website Rework

tl;dr
We modernized the tech stack of nixos.org without changing any content or functionality. And we would like you to report any regressions / UI glitches and differences in content between the current nixos.org and the beta (see below).

Website Beta: https://main--nixos-homepage.netlify.app/
Report Bugs: Sign in to GitHub · GitHub

The goal for the next week is to capture and fix all major glitches so that we can make the switch.

nl;iwtr
Dear Community,

during the last few year we got quite used to nixos.org with its design, structure and content. Unfortunately, we also got used to its quirks. Over the years the technical stack, which grew historically, got harder and harder to maintain. And this does not even cover the marketing team, but also other members of the community, who want to contribute changes and get a local working copy of the website running. With more and more complaints the marketing team decided it is time to do something about it.

But it is not quite what you think. This is not just a reskin of the existing website. This project aims to modernize the website and its components, fix UI/UX problems and other bugs and lastly give the site some fresh coat of paint. These changes will be split into different phases.

Phase 1 (current phase)

This announcement covers the beta testing of what we like to call Phase 1. The goal of which is to rebase the website “as is” (which means, everything looks the same and stays in its place) to a new tech stack. For this new tech stack we chose Astro and therefore NodeJS as a base. We made the choice to use Astro due to its integration with lots of tools common in the NodeJS development landscape and its useful helpers and integrations which help to keep the codebase minimal and automate many things in the development workflow, thus keeping the bar for entry low.

Another thing we wanted to make sure is to have a consistent and easy way of styling things. While CSS and its classes are somehow useful they also are quite limiting for those unfamiliar with its concepts and the design system the website uses but want to contribute new ideas to the website. So we choose Tailwind as a solution. While it makes working with CSS concepts a lot easier it also allows us to introduce “constraints” which keep developers from getting off track with their suggestions and preventing divergences from the design overall.

We also use a component system and MDX to help people write consistent looking pages and posts while (re)using parts that will automatically look good in the final result when used.

Lastly we dusted off some of the content format and moved all “postings” over to the Markdown format. So no more fiddeling with DocBookXML. Just use your Markdown editor of choice (or your standard text editor) and start contributing.

Phase 2 (next step)

As you probably figured out by now, this is only the first stop in a longer journey to making the nixos.org website more hackable, accessible and awesome overall. So Phase 2 will cover UI/UX problems (which will greatly cover accessibility issues) and other bugs in general. We want our community to grow and enjoy Nix and thus we should make and keep the website accessible to all people. This also may include features like a dark mode for example (which btw. also aids accessibility, since people with brightness sensitivity also prefer dark mode to reduce eyestrain).

Phase 3

In Phase 3 we finally get to the point which will create the most immediately noticeable changes. We will modernize the look and feel of the website. With a solid tech stack and a usable structure and good practices in our backs we are going to update the design of our website and make it more fresh looking and appealing to new audiences.

We know this is quite a long journey and that many people would prefer to see a visual update first but from our point of view it is important to first put the site on a solid foundation (hackability and usability wise) and then work with this foundation on visual things.

Thank you

At this point it is more than necessary to say thank you to everyone who contributed or advised regarding this work already. And thanks to the marketing team, which kind of got me into this whole thing of working with the Nix community instead of just using it. Seeing people having motivation to make a change is really rewarding.

If you want to join the work on the NixOS websit, feel free to join the marketing Matrix channel or just work on open issues.

Let’s make the future of Nix awesome one CSS line at the time :slight_smile:

Keep being awesome,
Thilo from the Marketing team

54 Likes

Awesome! I am curious about the choice to use Netlify (disclaimer, am Cloudflare employee, not working on Pages though) – is this a long term decision, or just temporary while it’s built?

1 Like

Are you aware the content is out of sync with the current homepage? Ideally you could do a rebase to get this sorted out, because it will be confusing for people reviewing the beta.

2 Likes

Yeah, we are aware of that, this is why we explicitly called for notices on diverging content. We also will bring over any missing contributions which happened from the last time we did it. Unfortunately due to the nature of the old tech stack having semi-structured content and the new tech stack having structured content it is pretty hard to automate this or fixing this quickly through a rebase or other tools. This is why the sync is happening in bursts and manually for now.

1 Like

The moderation team page is out of date.

1 Like

Seems to be broken on some viewport sizes, especially smaller ones (left is beta):


2 Likes

Thanks so much for pushing this forward @avocadoom. I know this particular project has been baking in the background for a long time now, and I am excited to see what comes next!

I can’t speak to the marketing team’s plan, but Netlify is also used on the current website. We used to use Cloudflare Pages on nix.dev, but its build environment didn’t allow us to use Nix to describe the build dependencies, which led to some complications. It’s a bit off-topic, so feel free to reach out. It would be nice to integrate with Cloudflare better.

2 Likes

Happy to help with bringing the asciinema player up to date and making demos fit the page in the best possible way (I’m the asciinema author, and Nix/NixOS user at the same time) :raised_hands:

14 Likes

Awesome :tada: that would be greatly appreciated!

Tracked here [Techstack-Beta] Adjust breakpoints · Issue #1235 · NixOS/nixos-homepage · GitHub

Tracked here [Techstack-Beta] Update Moderation Page · Issue #1234 · NixOS/nixos-homepage · GitHub

1 Like

I hope everyone realizes how insanely awesome and needed this is <3
Thank you so much!!

5 Likes

We will modernize the look and feel of the website.

What does this mean?

Does NixOS need a new visual identity less than four years after the last one? The visual identity affects more than just the website.

Personally, following from my previous involvement with the marketing team, this feels like a non-goal. The website content (which was the focus when I was still working with @garbas on this all) still isn’t done according to what was planned at the time. Maybe before “phase 3”, thinking about “phase finish authoring the website content” would be more appropriate? Though maybe the team’s priorities shifted since back then?

6 Likes

Giving a design update does not directly imply giving the visual identity a complete overhaul. Design updates while preserving the CI are definetely possible.

I don’t really see why these two things exclude each other. Especially since the things currently done are the groundwork to make future content contributions more easier and decouple them from templates etc. So there are no conflicts between people hacking on visual changes and content.

While not being involved with what was discussed at the time I don’t see any problem with introducing new content throughout or doing things in parallel.

3 Likes

Dear Community,

after half a year of work we are finally making the switch to Astro to improve maintainability and future-proofnes of the website.

If you want to contribute feel free to reach out to the marketing team.

Thanks to everyone who made this possible and especially to the people who reported bugs in the testing phase. A special thanks goes out to @samueldr, who did an amazing job doing lots of in depth reviews with really great descriptions. While migrating such a huge project, you just start to miss out on things, even if you have domain knowledge for it. Without Samuel, these things would have stayed unnoticed.

With such a huge migrations comes a lot of error potential. Please report any issues under the nixos-homepage repo and we’ll sort them out.

Keep being awesome,
Thilo

6 Likes

Since it shipped, I will voice my concern here, too.

First in #1296, it is a shame that the website is not being built as a Nix derivation, as it was.

There is still no rationale explained behind #1251, which regressed the styles of the manuals.

Things that, before this change, worked, and were stated goals to support.


I’ll also note that there were things that required my attention late last week, during the week-end and early this week that prevented me from spending energy continuing to check, validate and report issues. So expect more bug reports still :/.

9 Likes

Oh wow the manual regression is really bad… Who even allowed this to go through all the way to becoming part of the default branch now…

2 Likes

Thank you for doing this - I’m glad it’s imperfect because that means you shipped :slight_smile: good work!

2 Likes