Sponsored by: The FreeBSD Foundation
Diff Detail
Diff Detail
- Repository
- R9 FreeBSD doc repository
- Lint
Lint Skipped - Unit
Tests Skipped - Build Status
Buildable 72051 Build 68934: arc lint + arc unit
Event Timeline
There are a very large number of changes, so older changes are hidden. Show Older Changes
| website/themes/beastie/static/images/Netflix-Logo.png | ||
|---|---|---|
| 1 ↗ | (On Diff #168212) | If we're not using this logo anymore we should not put it in the tree |
| website/themes/beastie/static/images/Netflix-Logo.png | ||
|---|---|---|
| 1 ↗ | (On Diff #168212) | I'm still waiting on confirmation about usage from Netflix. That may or may not happen. For now I don't mind a few kb making it in when it _might_ be used soon. It'll just sit in the dir without being referenced. However, if you really want it removing I can, of course. |
Comment Actions
I just hacked it up live via Inspect Element rather than figuring out how to do it the actual website sources. Also has the benefit of giving instant feedback so it can be a more interactive process of playing around with it.
| website/themes/beastie/static/images/Netflix-Logo.png | ||
|---|---|---|
| 1 ↗ | (On Diff #168212) | But what they think doesn't matter? It's not appropriate to use it on the front page to advertise networking because it shows heavy favouritism, so where would it even be used? It shouldn't be here unless there's a clear need for it. |
Comment Actions
Another minor issue is visual distinction between elements. The same colour and text styling (when not hovered over) are used for headings and links here:
At least for me, my brain thinks those headings are links and wants to be able to click on them, but you can't, and don't find that out until you hover over them to try to click on them.
Links are also inconsistent. In most places they're underlined on hover, however in the "Why FreeBSD?" section they're always underlined (in fact, this is the default, they're just overridden to not be always underlined for the various other specific places):
The links in the navbar drop-downs also feel pretty "dead" (no interactivity when you hover over them) but that's an issue inherited from the docs theme.
| website/themes/beastie/static/images/Netflix-Logo.png | ||
|---|---|---|
| 1 ↗ | (On Diff #168212) | I disagree, and I'm more than happy to explain the rationale why it is not favouritism. We should talk about this versus type, it's much better to discuss differences of opinion :) Nonetheless, I've removed it. |
Comment Actions
Looking through the markup I see there are slashes placed at the end of self-closing tags such as <meta>, <link>, <img> and others (and sometimes not). But no HTML standard has ever specified that slashes be put there. This is a holdover from when people thought we'd all be using XHTML/XML for web pages. While allowed for that reason, putting a slash there has no meaning, it does nothing, is not required and browsers ignore it. If anything, the slash can cause problems for unquoted attributes. As a long time web developer, I suggest these be removed.
| website/config/_default/hugo.toml | ||
|---|---|---|
| 18 ↗ | (On Diff #168212) | I'm not sure this is really useful any more. It can be catered for with {{ if hugo.IsServer }}. I'll look at removing this. For now it causes no harm. |
| 19 ↗ | (On Diff #168212) | I did a bit more digging into this. It's only used in layouts/_partials/site-head.html and only when it's the homepage. It's for search engine results pages (SERPs). If you particularly want to indulge yourself @ziaee https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta :) |
| 20 ↗ | (On Diff #168212) | This is a hangover from docs site. I'll remove it. It's not used at all in the website templates. |
| website/config/_default/hugo.toml | ||
|---|---|---|
| 19 ↗ | (On Diff #168212) | Thanks! |
Comment Actions
You probably already do this but occasionally run the HTML through the W3C HTML Validator for that list of errors and warnings: https://validator.w3.org/nu/
And then there's the CSS Validator: https://jigsaw.w3.org/css-validator/ A lot of those vendor extensions can be removed.
Comment Actions
CSS cleanup is planned after this release Rob, yes. For now we'd like to get something new out there, and iterate on it. If it's working, I'm happy :)
Really appreciate your eye for details! If you have time, please keep an eye on this and feel free to make suggestions. I'm making a post-implementation todo list of 'none blocking' things that can be addressed later. Once it's gone live and is in the proper docs git repository it'll be much easier for everyone to make contributions too, which is what I'm very much hoping for.
Comment Actions
I think we have made a lot of progress on this, and the greatest points of controversy are resolved. To me, if this is acceptable to the major stake holders, I can merge this and we can continue iterating in the tree.
Turning over to the major stakeholders: releng, security, translation, and webmaster.
Comment Actions
Hello group!
Is the community Wiki part of this new theme revision
I noticed this contrast between the community Wikipedia page and this new theme revision https://wiki.freebsd.org/
At the bottom of the page
{F141925374}
Comment Actions
It's the same as it was - the exact lang files have been copied over, and @vladlen has been brilliant at keeping up with the changes. There are more improvements to come, which will be implemented post go-live (and they're improvements on what we had before).
You can see a staging version at https://freebsd.fortasse.cloud - please do take a look.
We would like to get this live before the end of the month, then once it is, continuously improve on things as more and more users experience it. The intention is this is *not* a 'done' site like the original, we intend to keep it alive and improving :)
Many thanks for your time folks!
Comment Actions
Thank you for your great work! I always wanted to investigate but it's good to hear that there has been ongoing effort on this.
Just based on the look (not looking at the source code) so I can be in POV of newcomers to our website, there are a few things I would like to point out.
- In dark mode, the background is... too dark. Can we have the colour for the dark mode background of the documentation website?
- The header is thick. It's because in the freebsd logo on top-left, the beastie logo is too huge compared to "FreeBSD". I don't know if this is a image protected by the foundation, but we can always ask if we're allowed to modify it.
- On the front page, the FreeBSD logo is too huge. I would make it similar size to the font of "A Powerful, Open Source Operating System". Again, the beastie logo is too huge compared to "FreeBSD"
- The latest news to press column boxes are too crowded (font is too huge) on my laptop (responsive css issue). It would be better if they were 2 rows where the first row has 3 columns and the second row has 2 columns.
- Same for six sections under "Why FreeBSD?". Laptops need more space (padding, margin, etc).
- On /releases, the image on top stands out too much on non-light mode. I think removing it would be better.
- I'm not sure if this is a bug in hugo or in website code, but when I load /where, /release, and /releng, it loads the following look below then properly loads the theme (this happens in split second, but it's quite annoying).
Other than that, there are a few padding/margin/gap issues, but I don't know how to explain this. After this patch is merged, I can tweak css to find the best layout.
Comment Actions
Thank you for your great work! I always wanted to investigate but it's good to hear that there has been ongoing effort on this.
Just based on the look (not looking at the source code) so I can be in POV of newcomers to our website, there are a few things I would like to point out.
- In dark mode, the background is... too dark. Can we have the colour for the dark mode background of the documentation website?
- The header is thick. It's because in the freebsd logo on top-left, the beastie logo is too huge compared to "FreeBSD". I don't know if this is a image protected by the foundation, but we can always ask if we're allowed to modify it.
- On the front page, the FreeBSD logo is too huge. I would make it similar size to the font of "A Powerful, Open Source Operating System". Again, the beastie logo is too huge compared to "FreeBSD"
- The latest news to press column boxes are too crowded (font is too huge) on my laptop (responsive css issue). It would be better if they were 2 rows where the first row has 3 columns and the second row has 2 columns.
- Same for six sections under "Why FreeBSD?". Laptops need more space (padding, margin, etc).
- On /releases, the image on top stands out too much on non-light mode. I think removing it would be better.
- I'm not sure if this is a bug in hugo or in website code, but when I load /where, /release, and /releng, it loads the following look below then properly loads the theme (this happens in split second, but it's quite annoying).
Other than that, there are a few padding/margin/gap issues, but I don't know how to explain this. After this patch is merged, I can tweak css to find the best layout.
Thanks for the detailed feedback @minsoochoo0122_proton.me ! Yes, once we've pushed this live it'll be great to have community interaction to 'tune' the layout. This was, is, never intended to be a finished site. It's intended to be a _working_ site we can iterate on.
Comment Actions
Many thanks @carlavilla. If you want to catch up with all the work Mr McBride and I did in the last six months, the working branch is here: https://github.com/phips/freebsd-doc/tree/new-website-paint. There is a live preview at https://freebsd.fortasse.cloud
Comment Actions
Just out of curiosity – is this scheduled to go live before or after the release of FreeBSD 14.4 (10 March 2026)?
Comment Actions
Mark, what happened with the old design? The main page is totally different.
And another question. Do you know the license of the images? I mean the logos. Can we use them without problems?
Comment Actions
Hey @carlavilla — this is the design Mark McBride did, that over email you said we'd roll with. It's the same layout as was on your GH branch. Lots of things have been fixed though — like removing Netflix logo etc. And on that, logos: the only one in use that we sought permission for is the Bastille logo, which Chris Edwards has OK'd (I have an email with permission). bhyve and openzfs appear to have suitable licenses, although please do check for your own comfort. The 'networking' logo is a Font Awesome graphic. The documentation one we'd need to check with Mr McBride where it came from — if you'd like to replace it with something that you're happier with though, please do 😄
Comment Actions
As @carlavilla said @wosch — also, dead easy to catch up. Before we push this live it will be rebased anyway (because it's mostly 'paint' it's relatively easy to do that).
Comment Actions
As @carlavilla said @wosch — also, dead easy to catch up. Before we push this live it will be rebased anyway (because it's mostly 'paint' it's relatively easy to do that).
Brilliant! Thanks @carlavilla!
Comment Actions
I’ve not noticed any PRs on the GitHub working branch @carlavilla - did you pull it where it was and you’re working with that? If there’s anything I can do to help, please just say. Appreciate you being on the task now too 😀
(Thanks for keeping your eye on progress too @ziaee 👍)
Comment Actions
Hello @carlavilla — is your working branch somewhere I can pull/rebase please? I'd love to get this all in place, and live, sometime soon — my original goal was last Christmas 😆
Comment Actions
The repository: https://github.com/sergio-carlavilla/freebsd-new-design
I need to improve the dark theme and also finish the other pages aside from home.html
Busy weeks at my work, I'll try to finish at least the main page today
Comment Actions
Hi Sergio!
I did pull request with fixed home page, that can work with all translation now https://github.com/sergio-carlavilla/freebsd-new-design/pull/9
Shortly:
6 features moved to adoc files in content/lang/home.
Downloads sections moved to _partials
Longer description:
The current home.html page already made significant progress toward better i18n support by adding variables for translating text on the home page.
My patch proposes to make i18n even easier and more consistent with other pages on the site, where all content is stored in .adoc files, while formatting and styles remain in the theme.
Changes made:
- Feature sections moved to AsciiDoc files
I created the directories:
content/en/home
content/ru/home
content/zh-tw/home
Inside each, I created feature1.adoc through feature6.adoc for the six features on the home page. The full textual content has been moved into these .adoc files. The home.html template now only contains links to these files.
The content in these files is formatted naturally, the same way as the rest of the AsciiDoc content on the site.
The featureN.adoc files are explicitly listed in home.html to clearly define which files should be displayed on the home page. Additionally, each file includes a weight variable in its front matter to allow reordering of features.
- "Downloads" and "Upcoming releases" sections moved to _partials/
- Upcoming releases: I implemented i18n for this section. The correct link to schedule.adoc is now generated based on the language of the release documentation. The schedule URL is now available in English and Russian. The correct URL is automatically activated for non‑English languages based on variables defined in releases.adoc.
- Downloads: This section requires more work to achieve correct i18n. I plan to address it in a follow‑up step, provided this patch is accepted.
- Legacy versions
The current site excludes "Legacy versions" from the design. However, the name "Legacy" sounds misleading — these are actually currently supported versions. In my opinion, they should also be listed on the downloads section. This could be addressed in a future patch.
P.S. Important: This patch moves the page content into .adoc files, but the visual appearance of the page remains exactly the same as it is now.
Comment Actions
Hello @vladlen!
I'd love to get this new home page more i18n friendly, and have that as an important 'todo' once we get it live. I was trying to minimise changes outside of the beastie theme directory with this large drop, to make it easier to rebase and to focus on.
Could we get the new site live, then brings this change in please? It would help with keeping things contained to the beastie theme for the initial drop.
As I've mentioned in other comments too, my _hope_ with these changes are that more people can get involved in making changes and keeping it up to date. It's very evident that Sergio has so much work on he struggles to keep up with the volunteer project — his input as things are is amazing, and I for one can't imagine how he juggles it all 😂
I did a rebase for my branch yesterday, and got this review up to date. Hopefully we'll drop this, live, soon and we can crack on with the next phases of improvement.
--Mark
Comment Actions
Hello @vladlen!
I'd love to get this new home page more i18n friendly, and have that as an important 'todo' once we get it live. I was trying to minimise changes outside of the beastie theme directory with this large drop, to make it easier to rebase and to focus on.
Could we get the new site live, then brings this change in please? It would help with keeping things contained to the beastie theme for the initial drop.
As I've mentioned in other comments too, my _hope_ with these changes are that more people can get involved in making changes and keeping it up to date. It's very evident that Sergio has so much work on he struggles to keep up with the volunteer project — his input as things are is amazing, and I for one can't imagine how he juggles it all 😂
--Mark
Hi Mark,
I proposed changes to the code, that Sergio is modifying in his branch, He started i18n for home page (it would be good to make this step before launch new theme), and I proposed more simple solution, that works in general case for all languages and text formats - text is stored in adoc files, not in toml strings. It is simple,consistent and looks reliable. My patch has many files only because we have 6 features on the home page, but it is not complex.