website: follow-up fixes
cover website: follow-up fixes
Hello,
a few fixes for the website, after the Bootstrap 5 rework was merged.
The download table and the git clone box now fit on phones, the navigation bar is wider than the page and its menu is bigger, and the homepage hero is laid out on the grid.
The CSS and JS URLs now carry a version: browsers that cached the old buildroot.js showed empty recent commits and discussions boxes until a forced reload.
Two patches fix the HTML errors left in the news and LTS pages, and the last one adds me to DEVELOPERS for the website.
Angelo Compagnucci (8):
website/download: make the table responsive
website: rework the navigation bar website/index: align the hero on the grid
website: version the CSS and JS URLs website/download: fix the git clone box on phones website/news: fix an unbalanced paragraph
website: escape the bare ampersands
DEVELOPERS: add Angelo Compagnucci for the website
DEVELOPERS | 1 + docs/website/css/main.css | 4 ++-- docs/website/download.html | 25 +++++++++++++------------ docs/website/footer.html | 2 +- docs/website/header.html | 28 ++++++++++++---------------- docs/website/index.html | 12 ++++++------ docs/website/lts.html | 8 ++++---- docs/website/news.html | 9 ++++----- 8 files changed, 43 insertions(+), 46 deletions(-)
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 1/8 website/download: make the table responsive
The releases table has the same width on every screen: on phones, the release dates and the download links are cut off on the right.
Wrap the table in a .table-responsive container, so that it scrolls horizontally inside its card when it doesn't fit, and hide the "End of Life" and "Latest release date" columns below the md breakpoint, so that it fits on most phones without scrolling.
--- docs/website/download.html | 22 ++++++++++++---------- 1 file changed, 12 insertions(+), 10 deletions(-)
docs/website/download.html +12 -10
@@ -7,27 +7,28 @@ <div class="card mb-4"> <div class="card-header text-bg-primary rounded-top">Download</div> <div class="card-body"> + <div class="table-responsive"> <table class="table"> <tr> <td></td> <th>Series</th> - <th>End of Life</th> + <th class="d-none d-md-table-cell">End of Life</th> <th>Latest release</th> - <th>Latest release date</th> + <th class="d-none d-md-table-cell">Latest release date</th> <th colspan="2">Downloads</th> </tr> <!-- <tr> <th>Candidate</th> <th>2026.08.x</th> - <td>December 2026</td> + <td class="d-none d-md-table-cell">December 2026</td> <td> 2026.08.1<br/> <a href="https://gitlab.com/buildroot.org/buildroot/-/blob/2026.08.1/CHANGES"> Changelog </a> </td> - <td>2026-10-22</td> + <td class="d-none d-md-table-cell">2026-10-22</td> <td> <a href="/downloads/buildroot-2026.08.1.tar.gz"> <img src="images/zip.png" width="24" alt="">
@@ -47,14 +48,14 @@ <tr> <th>Stable</th> <th>2026.08.1.x</th> - <td>December 2026</td> + <td class="d-none d-md-table-cell">December 2026</td> <td> 2026.08.1<br/> <a href="https://gitlab.com/buildroot.org/buildroot/-/blob/2026.08.1/CHANGES"> Changelog </a> </td> - <td>2026-10-22</td> + <td class="d-none d-md-table-cell">2026-10-22</td> <td> <a href="/downloads/buildroot-2026.08.1.tar.gz"> <img src="images/zip.png" width="24" alt="">
@@ -73,14 +74,14 @@ <tr> <th>Old stable</th> <th>2026.05.x</th> - <td>September 2026</td> + <td class="d-none d-md-table-cell">September 2026</td> <td> 2026.05.3<br/> <a href="https://gitlab.com/buildroot.org/buildroot/-/blob/2026.05.3/CHANGES"> Changelog </a> </td> - <td>2026-09-10</td> + <td class="d-none d-md-table-cell">2026-09-10</td> <td> <a href="/downloads/buildroot-2026.05.3.tar.gz"> <img src="images/zip.png" width="24" alt="">
@@ -99,14 +100,14 @@ <tr> <th>Long-term support</th> <th>2025.02.x</th> - <td>March 2028</td> + <td class="d-none d-md-table-cell">March 2028</td> <td> 2025.02.19<br/> <a href="https://gitlab.com/buildroot.org/buildroot/-/blob/2025.02.19/CHANGES"> Changelog </a> </td> - <td>2026-10-22</td> + <td class="d-none d-md-table-cell">2026-10-22</td> <td> <a href="/downloads/buildroot-2025.02.19.tar.gz"> <img src="images/zip.png" width="24" alt="">
@@ -123,6 +124,7 @@ </td> </tr> </table> + </div> This and earlier releases (and their PGP signatures) can always be downloaded from <a href="/downloads/">https://buildroot.org/downloads/</a>.
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 2/8 website: rework the navigation bar
In reply to Angelo CompagnucciOn desktop, the navigation bar is too thin: the Download button barely fits in it. Its content also has the same width as the page content, and the brand and the menu items are small.
Rework it with the Bootstrap utilities:
- use a container-xxl with a larger horizontal padding, so that the bar is wider than the page content
- make the brand (fs-2) and the menu items (fs-5) bigger, and add some space after the brand
- spread the menu items over the whole bar with flex, so that the spacing between them follows the width of the screen and the bar never wraps on two lines
- raise the height of the bar so that the Download button has 12px above and below it, and add the same space below it in the collapsed menu
--- docs/website/css/main.css | 4 ++-- docs/website/header.html | 26 +++++++++++--------------- 2 files changed, 13 insertions(+), 17 deletions(-)
docs/website/css/main.css +2 -2
@@ -25,8 +25,8 @@ a { @media (min-width: 1200px) { .navbar .nav-link { - padding-top: 20px; - padding-bottom: 20px; + padding-top: 22px; + padding-bottom: 22px; } }
docs/website/header.html +11 -15
@@ -25,34 +25,30 @@ <body class="bg-body-tertiary"> <!-- Fixed navbar --> <nav class="navbar navbar-expand-xl bg-primary sticky-top py-0" data-bs-theme="dark"> - <div class="container"> - <div class="row flex-grow-1 justify-content-center g-0"> - <div class="col-xxl-10 d-flex flex-wrap align-items-center justify-content-between"> - <a class="navbar-brand py-2" href="/"><b>Buildroot</b></a> + <div class="container-xxl px-sm-4"> + <a class="navbar-brand fs-2 me-xl-5 py-2" href="/"><b>Buildroot</b></a> <button class="navbar-toggler border-0 shadow-none" type="button" data-bs-toggle="collapse" data-bs-target="#navbar-main" aria-controls="navbar-main" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbar-main"> - <ul class="navbar-nav ms-auto"> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/news.html"> + <ul class="navbar-nav flex-grow-1 justify-content-xl-between pb-1 pb-xl-0"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/news.html"> <span class="bi bi-star-fill"></span> News</a></li> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/docs.html"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/docs.html"> <span class="bi bi-book-fill"></span> Documentation</a></li> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/support.html"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/support.html"> <span class="bi bi-question-circle-fill"></span> Support</a></li> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/contribute.html"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/contribute.html"> <span class="bi bi-share-fill"></span> Contribute</a></li> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/lts.html"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/lts.html"> <span class="bi bi-send-fill"></span> LTS</a></li> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/sponsors.html"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/sponsors.html"> <span class="bi bi-currency-dollar"></span> Sponsors</a></li> - <li class="nav-item"><a class="nav-link fw-light px-2" href="/association.html"> + <li class="nav-item"><a class="nav-link fs-5 fw-light px-2 px-xl-1" href="/association.html"> <span class="bi bi-arrows-angle-contract"></span> Association</a></li> - <li class="nav-item align-self-xl-center"><a class="btn btn-success ms-xl-3 my-2 my-xl-0" href="/download.html"> + <li class="nav-item align-self-xl-center"><a class="btn btn-success my-2 my-xl-0" href="/download.html"> <span class="bi bi-cloud-download-fill"></span> Download</a></li> </ul> </div><!--/.navbar-collapse --> </div> - </div> - </div> </nav>
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 3/8 website/index: align the hero on the grid
In reply to Angelo CompagnucciThe logo of the hero is centered in the left half of the row, with a fixed maximum width, while the title and the buttons fill the right
half: the hero looks shifted to the right with respect to the rest of the page.
Lay it out on the grid instead: the logo fills a 4 columns wide column, followed by an empty column and by the title and the buttons in the remaining 7 columns. On phones, the logo stays centered above the title.
--- docs/website/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-)
docs/website/index.html +6 -6
@@ -4,11 +4,11 @@ <div class="container"> <div class="row justify-content-center"> <div class="col-xxl-10"> - <div class="row align-items-center"> - <div class="col-md-6"> - <img class="img-fluid mx-auto d-block" src="images/logo.png" alt="" style="max-width:300px"> - </div><!-- /col-lg-6 --> - <div class="col-md-6"> + <div class="row align-items-center justify-content-center gy-4"> + <div class="col-8 col-sm-6 col-md-4"> + <img class="img-fluid w-100" src="images/logo.png" alt=""> + </div><!-- /col-md-4 --> + <div class="col-md-7 offset-md-1"> <h1 class="display-3 fw-bold text-white">Buildroot<br> <small class="d-block mt-2 fs-2 fw-normal text-white-50">Making Embedded Linux Easy</small></h1> <div class="row g-3 mt-1">
@@ -19,7 +19,7 @@ <a class="btn btn-secondary btn-lg w-100" href="/download.html"><span class="bi bi-cloud-download-fill"></span> Download</a> </div> </div> - </div><!-- /col-lg-6 --> + </div><!-- /col-md-7 --> </div><!-- /row --> </div> </div>
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 4/8 website: version the CSS and JS URLs
In reply to Angelo CompagnucciThe web server sends no caching headers, so browsers decide on their own how long to keep main.css and buildroot.js. Browsers which cached buildroot.js before commit 445fb0d067 ("website: fix the recent activity in buildroot.js") keep running the old script, which needs the x2js library that is not loaded anymore: both the recent commits and the recent discussions stay empty until a forced reload.
Add a version to the URLs of both files, so that browsers fetch the new ones. The version has to be bumped each time one of them changes.
--- docs/website/footer.html | 2 +- docs/website/header.html | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-)
docs/website/footer.html +1 -1
@@ -1,7 +1,7 @@ <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/4.0.0/jquery.min.js" integrity="sha512-8LENNbXmzI/Gbj+OwXmqR6V4QaUAw0/porPzy1+dQoJqC0JPHedWoe0DDOTL2uHA5XXJyIsPtiMHH86pVlay6A==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.3.8/js/bootstrap.bundle.min.js" integrity="sha512-HvOjJrdwNpDbkGJIG2ZNqDlVqMo77qbs4Me4cah0HoDrfhrbA+8SBlZn1KrvAQw7cILLPFJvdwIgphzQmMm+Pw==" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js" integrity="sha256-Daf8GuI2eLKHJlOWLRR/zRy9Clqcj4TUSumbxYH9kGI=" crossorigin="anonymous"></script> - <script type="text/javascript" src="js/buildroot.js"></script> + <script type="text/javascript" src="js/buildroot.js?v=2"></script> <div style="text-align: center"> <a href="https://www.bestpractices.dev/projects/12245">
docs/website/header.html +1 -1
@@ -19,7 +19,7 @@ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/5.3.8/materia/bootstrap.min.css" integrity="sha512-lR3pptsOFflVTuIszkLNcibNkPReN2dEA/t1U1++B3/wPEZL4pysMdYsQfaMefLI/X2fjvk5AeaHVBcFoVO2mA==" crossorigin="anonymous"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.13.1/font/bootstrap-icons.min.css" integrity="sha512-t7Few9xlddEmgd3oKZQahkNI4dS6l80+eGEzFQiqtyVYdvcSG2D3Iub77R20BdotfRPA9caaRkg1tyaJiPmO0g==" crossorigin="anonymous"> - <link href="css/main.css" rel="stylesheet"> + <link href="css/main.css?v=2" rel="stylesheet"> </head> <body class="bg-body-tertiary">
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 5/8 website/download: fix the git clone box on phones
In reply to Angelo CompagnucciThe git clone command is shown in a single line input, which cuts it on narrow screens, without any hint that it continues.
Show it in a span styled as the input instead, truncated with an ellipsis when it doesn't fit. The copy button still copies the whole command, as clipboard.js copies the text of the element.
--- docs/website/download.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-)
docs/website/download.html +1 -2
@@ -141,8 +141,7 @@ <p>To grab a copy of the repository use</p> <div class="input-group"> - <input class="form-control" id="giturl" - value="git clone https://gitlab.com/buildroot.org/buildroot.git" type="text" readonly> + <span class="form-control text-truncate" id="giturl">git clone https://gitlab.com/buildroot.org/buildroot.git</span> <button class="btn btn-secondary" type="button" data-clipboard-target="#giturl" data-bs-toggle="tooltip" data-bs-placement="bottom" data-bs-trigger="manual" data-bs-title="Copied!"> <img class="clippy" src="images/clippy.svg" alt="Copy to clipboard" width="13">
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 6/8 website/news: fix an unbalanced paragraph
In reply to Angelo CompagnucciIn the "Moved to git" entry, a <pre> block is nested in a paragraph. A <pre> can't be part of a paragraph, so the browser closes the paragraph before it, and the </p> that follows is left unmatched.
Close the paragraph before the <pre> block, and put the following sentence in its own paragraph.
--- docs/website/news.html | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-)
docs/website/news.html +3 -4
@@ -10153,10 +10153,9 @@ to <a href="http://git-scm.org">Git</a>. You can browse the repo online <a href="http://git.buildroot.net/buildroot">here</a>, and clone - the repo using: - <pre>git clone git://git.buildroot.net/buildroot</pre> - See the <a href="/git.html">Git Access</a> page for more details. - </p> + the repo using:</p> + <pre>git clone git://git.buildroot.net/buildroot</pre> + <p>See the <a href="/git.html">Git Access</a> page for more details.</p> </div> </div> </li>
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 7/8 website: escape the bare ampersands
In reply to Angelo CompagnucciThe news and LTS pages use bare ampersands, in text and in the mailto links of the LTS sponsorship buttons, which is not valid HTML.
Escape them as &. The links are unchanged, as the browser decodes the attribute values.
--- docs/website/lts.html | 8 ++++---- docs/website/news.html | 2 +- 2 files changed, 5 insertions(+), 5 deletions(-)
docs/website/lts.html +4 -4
@@ -38,7 +38,7 @@ <span class="badge rounded-pill text-bg-primary fs-5 align-self-start">2</span> <div> <h3 class="h4 text-body-secondary"> - Vulnerability tracking & reporting + Vulnerability tracking & reporting </h3> <p class="mb-0"> Tracking of the vulnerabilities affecting Buildroot
@@ -264,7 +264,7 @@ </td> </tr> <tr> - <th scope="row">Analysis & commit annotation</th> + <th scope="row">Analysis & commit annotation</th> <td> <div class="row g-0"> <div class="col-6 px-1"><span class="badge text-bg-primary d-block text-truncate"> </span></div>
@@ -401,12 +401,12 @@ <div class="card-body"> <p> Interested ? Contact us at - <a href="mailto:[email protected]?subject=[buildroot-lts] Sponsorship information&body=Thanks for showing interest in the Buildroot LTS Sponsorship. We would appreciate if you could introduce yourself and your company by answering the following questions: in which products do you use Buildroot ? How are you using Buildroot ? How many different configurations do you have ? How long do you support your products ?">[email protected]</a> + <a href="mailto:[email protected]?subject=[buildroot-lts] Sponsorship information&body=Thanks for showing interest in the Buildroot LTS Sponsorship. We would appreciate if you could introduce yourself and your company by answering the following questions: in which products do you use Buildroot ? How are you using Buildroot ? How many different configurations do you have ? How long do you support your products ?">[email protected]</a> to learn more about the different sponsorship tiers and get all the details about the sponsorship. </p> <div class="text-center"> - <a class="btn btn-success btn-lg" href="mailto:[email protected]?subject=[buildroot-lts] Sponsorship information&body=Thanks for showing interest in the Buildroot LTS Sponsorship. We would appreciate if you could introduce yourself and your company by answering the following questions: in which products do you use Buildroot ? How are you using Buildroot ? How many different configurations do you have ? How long do you support your products ?"> + <a class="btn btn-success btn-lg" href="mailto:[email protected]?subject=[buildroot-lts] Sponsorship information&body=Thanks for showing interest in the Buildroot LTS Sponsorship. We would appreciate if you could introduce yourself and your company by answering the following questions: in which products do you use Buildroot ? How are you using Buildroot ? How many different configurations do you have ? How long do you support your products ?"> <span class="bi bi-envelope-fill"></span> Contact us</a> </div> </div>
docs/website/news.html +1 -1
@@ -9787,7 +9787,7 @@ <div class="timeline-body"> <p>The slides from the <a href="http://fosdem.org/2010/schedule/events/emb_cross_build">Cross - Build Systems: Present & Future</a> session + Build Systems: Present & Future</a> session at <a href="http://fosdem.org/2010">FOSDEM</a> are now <a href="http://send-patches.org/news/20100211-1-FOSDEM-Crossdev-Workshop.pdf">online</a>. </div>
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
PATCH 8/8 DEVELOPERS: add Angelo Compagnucci for the website
In reply to Angelo CompagnucciI reworked the website with Bootstrap 5 and I'm going to follow its maintenance as well.
--- DEVELOPERS | 1 + 1 file changed, 1 insertion(+)
DEVELOPERS +1 -0
@@ -225,6 +225,7 @@ N: Angelo Compagnucci <[email protected]> F: board/sipeed/lichee_rv/ F: board/sipeed/lichee_rv_dock/ F: configs/sipeed_lichee_rv* +F: docs/website/ F: package/apparmor/ F: package/corkscrew/ F: package/cups/
Signature · 6 lines
2.34.1 _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot
Quoted 9 lines · Angelo Compagnucci
Angelo Compagnucci (8):
website/download: make the table responsive
website: rework the navigation bar website/index: align the hero on the grid
website: version the CSS and JS URLs website/download: fix the git clone box on phones website/news: fix an unbalanced paragraph
website: escape the bare ampersands
DEVELOPERS: add Angelo Compagnucci for the website
Thanks a lot, series applied!
Thomas
Signature · 7 lines
Thomas Petazzoni, co-owner and CEO, Bootlin Embedded Linux and Kernel engineering and training https://bootlin.com _______________________________________________ buildroot mailing list [email protected] https://lists.buildroot.org/mailman/listinfo/buildroot