Skip to content

Unify crate pages style #3164

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.

Sign up for GitHub

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

Merged
syphar merged 5 commits into from
Jan 26, 2026
Merged

Unify crate pages style #3164

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c6526ac
Clean up template files
GuillaumeGomez Jan 25, 2026
a4356de
Update `browser-ui-test` version to `0.23.1`
GuillaumeGomez Jan 25, 2026
2581fe6
Unify crate pages style
GuillaumeGomez Jan 25, 2026
5421acf
Strengthens `gui-tests/theme.goml` test
GuillaumeGomez Jan 25, 2026
3cc2f94
Add regression test for #3135
GuillaumeGomez Jan 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
244 changes: 122 additions & 122 deletions crates/bin/docs_rs_web/templates/core/about/builds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,127 +6,127 @@
{%- set docsrs_repo = "https://github.com/rust-lang/docs.rs" -%}
<h1>Builds</h1>
<div class="about-page">
<div class="container pure-u-5-6 about">
<p>
Docs.rs automatically builds documentation for crates released on <a href="https://crates.io/">crates.io</a>.

It may take a while to build your crate, depending on how many crates are in <a href="/releases/queue">the queue</a>.
</p>

<p>
All crates are built in a sandbox using the nightly release of the Rust compiler.
{%- if let Some(rustc_version) = rustc_version %}
The current version in use is <code>{{ rustc_version }}</code>.
{%- endif -%}
</p>

<h3 id="notes-on-docsrs"> <a href="#notes-on-docsrs">Notes on using Docs.rs</a> </h3>

<h4 id="setting-a-readme"> <a href="#setting-a-readme">Setting a README</a> </h4>
<p>
The README displayed on docs.rs follows Cargo’s <code>package.readme</code> rules.
If <code>readme</code> is not set, docs.rs will look for <code>README.md</code>, <code>README.txt</code>, or <code>README</code> in the crate root.
Set <code>readme = "path/to/file"</code> to use a custom file, <code>readme = true</code> to use <code>README.md</code>, or <code>readme = false</code> to disable the README.
</p>

<h4 id="detecting-docsrs"> <a href="#detecting-docsrs">Detecting Docs.rs</a> </h4>
<p>
To recognize Docs.rs from your Rust code, you can test for the <code>docsrs</code> cfg, e.g.:
{% filter dedent(None)|highlight("rust") -%}
#[cfg(docsrs)]
mod documentation;
{%- endfilter %}
The `docsrs` cfg only applies to the final rustdoc invocation (i.e. the crate currently
being documented). It does not apply to dependencies (including workspace ones).
</p>
<p>
To recognize Docs.rs from <code>build.rs</code> files, you can test for the environment variable <code>DOCS_RS</code>, e.g.:
{% filter dedent(3)|highlight("rust") -%}
if std::env::var("DOCS_RS").is_ok() {
// ... your code here ...
}
{%- endfilter %}
This approach can be helpful if you need dependencies for building the library, but not for building the documentation.
</p>

<h4 id="cross-compiling"> <a href="#cross-compiling">Cross-compiling</a> </h4>
<p>
All targets other than <code>x86_64-unknown-linux-gnu</code> are cross-compiled. For implementation reasons, this is unlikely to change for the foreseeable future.
</p>

<p>
You can configure how your crate is built by adding <a href="metadata">package metadata</a> to your <code>Cargo.toml</code>, e.g.:
{% filter dedent(None)|highlight("toml") -%}
[package.metadata.docs.rs]
rustc-args = ["--cfg", "my_cfg"]
{%- endfilter %}
Here, the compiler arguments are set so that <code>#[cfg(my_cfg)]</code> (not to be confused with <code>#[cfg(doc)]</code>) can be used for conditional compilation.
This approach is also useful for setting <a href="https://doc.rust-lang.org/cargo/reference/features.html">cargo features</a>.
</p>

<h4 id="testing-builds-ci"> <a href="#testing-builds-ci">Testing documentation builds in CI</a> </h4>
<p>
When you start using docs.rs metadata or <code>#[cfg(docsrs)]</code> in your code, you might run into issues
where your code builds fine locally but fails on docs.rs.

To avoid this, you can add <a href="https://github.com/dtolnay/cargo-docs-rs"><code>cargo docs-rs</code></a> to
your test-suite.

While it doesn't perfectly replicate our build environment, it can catch many common issues.
</p>

<h4 id="testing-builds-locally"> <a href="#testing-builds-locally">Testing documentation builds locally</a> </h4>
{%- set build_subcommand = "{}/blob/master/README.md#build-subcommand"|format(docsrs_repo) -%}
<p>
The Docs.rs <a href="{{ build_subcommand|safe }}">README</a> describes how to build
unpublished crate documentation locally using the same build environment as the Docs.rs build agent.
</p>

<h3 id="diagnosing-failed-builds"> <a href="#diagnosing-failed-builds">Diagnosing failed builds</a> </h3>

<h4 id="missing-dependencies"> <a href="#missing-dependencies">Missing dependencies</a> </h4>
<p>
Missing dependencies are a common reason for failed builds.
Docs.rs dependencies are managed through
<a href="https://github.com/rust-lang/crates-build-env">crates-build-env</a>.
See <a href="https://forge.rust-lang.org/docs-rs/add-dependencies.html">Forge</a> for how to add a dependency.
</p>

<h4 id="read-only-directories"> <a href="#read-only-directories">Write attempt on read-only directories</a> </h4>
<p>
Most of the sandbox is a read-only file system, including the source directory of your crate and its dependencies.
If your <code>build.rs</code> generates files that are relevant for documentation, consider writing to the
<a href="https://doc.rust-lang.org/cargo/reference/environment-variables.html#environment-variables-cargo-sets-for-crates">cargo output directory</a>,
passed in the environment variable <code>OUT_DIR</code>.
</p>

<h4 id="hitting-resource-limits"> <a href="#hitting-resource-limits">Hitting resource limits</a> </h4>
<p>
All the builds are executed inside a sandbox with limited resources. The current limits are:
</p>

{% call macros::crate_limits(limits=limits) %}{% endcall %}

<p>
If your build fails because it hit one of these limits, please
<a href="{{ docsrs_repo|safe }}/issues/new/choose">open an issue</a>
to get them increased for your crate.
Since our build agent has finite resources, we have to consider each case individually. However, there are a few general policies:
<ul>
<li>Network access will not be enabled for any crate.</li>
<li>Any crate that requests a time extension will be limited to one target.</li>
</ul>
</p>

<h4 id="failures-and-rebuilds"><a href="#failures-and-rebuilds">Other failures and requesting rebuilds</a></h4>

<p>If your crate fails to build for a reason not listed here, you can rebuild it from <a href="https://crates.io">crates.io</a> website as you can see below:</p>

<img src="/-/static/trigger-rebuild.png" alt="crates.io dropdown menu showing two items: yank and rebuild docs">

<p>Or you can <a href="{{ docsrs_repo|safe }}/issues">file an issue</a> if you think it's a <b>docs.rs</b> issue.</p>

</div>
<br/>
<div class="container pure-u-5-6 about">
<p>
Docs.rs automatically builds documentation for crates released on <a href="https://crates.io/">crates.io</a>.

It may take a while to build your crate, depending on how many crates are in <a href="/releases/queue">the queue</a>.
</p>

<p>
All crates are built in a sandbox using the nightly release of the Rust compiler.
{%- if let Some(rustc_version) = rustc_version %}
The current version in use is <code>{{ rustc_version }}</code>.
{%- endif -%}
</p>

<h3 id="notes-on-docsrs"> <a href="#notes-on-docsrs">Notes on using Docs.rs</a> </h3>

<h4 id="setting-a-readme"> <a href="#setting-a-readme">Setting a README</a> </h4>
<p>
The README displayed on docs.rs follows Cargo’s <code>package.readme</code> rules.
If <code>readme</code> is not set, docs.rs will look for <code>README.md</code>, <code>README.txt</code>, or <code>README</code> in the crate root.
Set <code>readme = "path/to/file"</code> to use a custom file, <code>readme = true</code> to use <code>README.md</code>, or <code>readme = false</code> to disable the README.
</p>

<h4 id="detecting-docsrs"> <a href="#detecting-docsrs">Detecting Docs.rs</a> </h4>
<p>
To recognize Docs.rs from your Rust code, you can test for the <code>docsrs</code> cfg, e.g.:
{% filter dedent(None)|highlight("rust") -%}
#[cfg(docsrs)]
mod documentation;
{%- endfilter %}
The `docsrs` cfg only applies to the final rustdoc invocation (i.e. the crate currently
being documented). It does not apply to dependencies (including workspace ones).
</p>
<p>
To recognize Docs.rs from <code>build.rs</code> files, you can test for the environment variable <code>DOCS_RS</code>, e.g.:
{% filter dedent(3)|highlight("rust") -%}
if std::env::var("DOCS_RS").is_ok() {
// ... your code here ...
}
{%- endfilter %}
This approach can be helpful if you need dependencies for building the library, but not for building the documentation.
</p>

<h4 id="cross-compiling"> <a href="#cross-compiling">Cross-compiling</a> </h4>
<p>
All targets other than <code>x86_64-unknown-linux-gnu</code> are cross-compiled. For implementation reasons, this is unlikely to change for the foreseeable future.
</p>

<p>
You can configure how your crate is built by adding <a href="metadata">package metadata</a> to your <code>Cargo.toml</code>, e.g.:
{% filter dedent(None)|highlight("toml") -%}
[package.metadata.docs.rs]
rustc-args = ["--cfg", "my_cfg"]
{%- endfilter %}
Here, the compiler arguments are set so that <code>#[cfg(my_cfg)]</code> (not to be confused with <code>#[cfg(doc)]</code>) can be used for conditional compilation.
This approach is also useful for setting <a href="https://doc.rust-lang.org/cargo/reference/features.html">cargo features</a>.
</p>

<h4 id="testing-builds-ci"> <a href="#testing-builds-ci">Testing documentation builds in CI</a> </h4>
<p>
When you start using docs.rs metadata or <code>#[cfg(docsrs)]</code> in your code, you might run into issues
where your code builds fine locally but fails on docs.rs.

To avoid this, you can add <a href="https://github.com/dtolnay/cargo-docs-rs"><code>cargo docs-rs</code></a> to
your test-suite.

While it doesn't perfectly replicate our build environment, it can catch many common issues.
</p>

<h4 id="testing-builds-locally"> <a href="#testing-builds-locally">Testing documentation builds locally</a> </h4>
{%- set build_subcommand = "{}/blob/master/README.md#build-subcommand"|format(docsrs_repo) -%}
<p>
The Docs.rs <a href="{{ build_subcommand|safe }}">README</a> describes how to build
unpublished crate documentation locally using the same build environment as the Docs.rs build agent.
</p>

<h3 id="diagnosing-failed-builds"> <a href="#diagnosing-failed-builds">Diagnosing failed builds</a> </h3>

<h4 id="missing-dependencies"> <a href="#missing-dependencies">Missing dependencies</a> </h4>
<p>
Missing dependencies are a common reason for failed builds.
Docs.rs dependencies are managed through
<a href="https://github.com/rust-lang/crates-build-env">crates-build-env</a>.
See <a href="https://forge.rust-lang.org/docs-rs/add-dependencies.html">Forge</a> for how to add a dependency.
</p>

<h4 id="read-only-directories"> <a href="#read-only-directories">Write attempt on read-only directories</a> </h4>
<p>
Most of the sandbox is a read-only file system, including the source directory of your crate and its dependencies.
If your <code>build.rs</code> generates files that are relevant for documentation, consider writing to the
<a href="https://doc.rust-lang.org/cargo/reference/environment-variables.html#environment-variables-cargo-sets-for-crates">cargo output directory</a>,
passed in the environment variable <code>OUT_DIR</code>.
</p>

<h4 id="hitting-resource-limits"> <a href="#hitting-resource-limits">Hitting resource limits</a> </h4>
<p>
All the builds are executed inside a sandbox with limited resources. The current limits are:
</p>

{% call macros::crate_limits(limits=limits) %}{% endcall %}

<p>
If your build fails because it hit one of these limits, please
<a href="{{ docsrs_repo|safe }}/issues/new/choose">open an issue</a>
to get them increased for your crate.
Since our build agent has finite resources, we have to consider each case individually. However, there are a few general policies:
<ul>
<li>Network access will not be enabled for any crate.</li>
<li>Any crate that requests a time extension will be limited to one target.</li>
</ul>
</p>

<h4 id="failures-and-rebuilds"><a href="#failures-and-rebuilds">Other failures and requesting rebuilds</a></h4>

<p>If your crate fails to build for a reason not listed here, you can rebuild it from <a href="https://crates.io">crates.io</a> website as you can see below:</p>

<img src="/-/static/trigger-rebuild.png" alt="crates.io dropdown menu showing two items: yank and rebuild docs">

<p>Or you can <a href="{{ docsrs_repo|safe }}/issues">file an issue</a> if you think it's a <b>docs.rs</b> issue.</p>

</div>
<br/>
</div>
{%- endblock body %}
4 changes: 0 additions & 4 deletions crates/bin/docs_rs_web/templates/crate/builds.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,6 @@
<link rel="canonical" href="{{ canonical_url|safe }}" />
{%- endblock -%}

{%- block body_classes -%}
centered
{%- endblock body_classes -%}

{%- block topbar -%}
{%- include "rustdoc/topbar.html" -%}
{%- endblock topbar -%}
Expand Down
2 changes: 1 addition & 1 deletion crates/bin/docs_rs_web/templates/crate/features.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
{%- endblock -%}

{%- block topbar -%}
{%- include "rustdoc/topbar.html" -%}
{%- include "rustdoc/topbar.html" -%}
{%- endblock topbar -%}

{%- block header -%}
Expand Down
20 changes: 20 additions & 0 deletions gui-tests/crate-pages.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// Checks that the "crate pages" have all the same style (ie: not centered).
include: "utils.goml"
go-to: |DOC_PATH| + "/crate/sysinfo"
// Big enough to have "margin: auto" to kick in.
set-window-size: (1300, 800)

store-value: (tabs_menu_selector, ".description-container .pure-menu-horizontal ul.pure-menu-list")
store-value: (current_tab, 1)
store-value: (nb_tabs, 4)

// If this assert fails, it means we added new entries for this menu so this test needs to be
// updated.
assert-count: (|tabs_menu_selector| + " > li", |nb_tabs|)

call-function: ("check-tab-not-centered", {"tab_name": " Crate", "click_next": true})
call-function: ("check-tab-not-centered", {"tab_name": " Source", "click_next": true})
call-function: ("check-tab-not-centered", {"tab_name": " Builds", "click_next": true})
call-function: ("check-tab-not-centered", {"tab_name": "Feature flags", "click_next": false})

assert: |nb_tabs| == |current_tab|
22 changes: 22 additions & 0 deletions gui-tests/release-pages.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
// Checks that the "release pages" have all the same style (ie: centered).
include: "utils.goml"
go-to: |DOC_PATH| + "/releases"
// Big enough to have "margin: auto" to kick in.
set-window-size: (1300, 800)

store-value: (tabs_menu_selector, ".description-container .pure-menu-horizontal ul.pure-menu-list")
store-value: (current_tab, 1)
store-value: (nb_tabs, 6)

// If this assert fails, it means we added new entries for this menu so this test needs to be
// updated.
assert-count: (|tabs_menu_selector| + " > li", |nb_tabs|)

call-function: ("check-tab-centered", {"tab_name": "Recent", "click_next": true})
call-function: ("check-tab-centered", {"tab_name": "Stars", "click_next": true})
call-function: ("check-tab-centered", {"tab_name": "Recent Failures", "click_next": true})
call-function: ("check-tab-centered", {"tab_name": "Failures By Stars", "click_next": true})
call-function: ("check-tab-centered", {"tab_name": "Activity", "click_next": true})
call-function: ("check-tab-centered", {"tab_name": "Queue", "click_next": false})

assert: |nb_tabs| == |current_tab|
2 changes: 2 additions & 0 deletions gui-tests/theme.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,10 +9,12 @@ go-to: |DOC_PATH| + "/sysinfo"
set-local-storage: { "rustdoc-theme": "light" }
wait-for-css: (".nav-container", { "background-color": "rgb(255, 255, 255)" })
go-to: |DOC_PATH| + "/crate/sysinfo"
assert-local-storage: { "rustdoc-theme": "light" }
wait-for-css: ("body", { "background-color": "rgb(255, 255, 255)" })

go-to: |DOC_PATH| + "/sysinfo"
set-local-storage: { "rustdoc-theme": "ayu" }
wait-for-css: (".nav-container", { "background-color": "rgb(15, 20, 25)" })
go-to: |DOC_PATH| + "/crate/sysinfo"
assert-local-storage: { "rustdoc-theme": "ayu" }
wait-for-css: ("body", { "background-color": "rgb(15, 20, 25)" })
56 changes: 56 additions & 0 deletions gui-tests/utils.goml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
define-function: (
"check-tab",
[tab_name, centered, click_next],
block {
// We check the tab's name is the one expected.
assert-text: (|tabs_menu_selector| + " > li a.pure-menu-active .title", |tab_name|)
// We check it also matches the one we clicked.
assert: |tabs_menu_selector| + " > li:nth-of-type(" + |current_tab| + ") a.pure-menu-active"

// We ensure that the content of the page is (not?) centered.
if: (|centered|, block {
assert: "body.centered"
assert-css: ("div.container", {
"margin-top": "0px",
"margin-bottom": "0px",
"margin-left": "70px",
"margin-right": "70px",
})
})
else: block {
assert: "body:not(.centered)"
assert-css: ("div.container", {
"margin-top": "0px",
"margin-bottom": "0px",
"margin-left": "0px",
"margin-right": "0px",
})
}
if: (|click_next|, block {
store-value: (current_tab, |current_tab| + 1)
click: |tabs_menu_selector| + " > li:nth-of-type(" + |current_tab| + ")"
})
}
)

define-function: (
"check-tab-centered",
[tab_name, click_next],
block {
call-function: (
"check-tab",
{"tab_name": |tab_name|, "centered": true, "click_next": |click_next|},
)
}
)

define-function: (
"check-tab-not-centered",
[tab_name, click_next],
block {
call-function: (
"check-tab",
{"tab_name": |tab_name|, "centered": false, "click_next": |click_next|},
)
}
)
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "deps",
"dependencies": {
"browser-ui-test": "^0.23.0"
"browser-ui-test": "^0.23.1"
}
}
Loading