, so the markup can be
+ indented normally without leading whitespace reaching the page. */
+
+.terminal {
+ display: flex;
+ flex-direction: column;
+ background: var(--ink);
+ padding: 22px 24px;
+ overflow-x: auto;
+}
+
+.terminal__line {
+ font-family: var(--mono);
+ font-size: 14px;
+ line-height: 1.85;
+ color: var(--page);
+ white-space: nowrap;
+}
+
+.terminal__result {
+ margin-top: 1.85em;
+ color: var(--green-pale);
+}
+
+.terminal .prompt {
+ color: var(--green);
+}
+
+/* Wider screens opt into more generous spacing. Everything above is the
+ small-screen baseline. */
+
+@media screen and (min-width: 40em) {
+ .masthead,
+ .colophon {
+ padding-left: 32px;
+ padding-right: 32px;
+ }
+
+ .shell {
+ padding: 44px 32px 56px;
+ }
}
diff --git a/app/assets/stylesheets/docs.css b/app/assets/stylesheets/docs.css
new file mode 100644
index 0000000..ebd0b86
--- /dev/null
+++ b/app/assets/stylesheets/docs.css
@@ -0,0 +1,89 @@
+/* Home page: hero, usage block, and the FAQ list. Flat selectors, no nesting. */
+
+.docs {
+ display: flex;
+ flex-direction: column;
+ gap: 32px;
+}
+
+.docs__hero {
+ display: flex;
+ flex-direction: column;
+ gap: 18px;
+ max-width: 62ch;
+}
+
+.docs__hero h1 {
+ margin: 0;
+ font-weight: 700;
+ font-size: 1.75rem;
+ line-height: 1.08;
+ letter-spacing: 1.18px;
+}
+
+.docs__hero p {
+ margin: 0;
+ font-size: 18px;
+ line-height: 1.55;
+ color: var(--muted);
+}
+
+.docs__usage {
+ display: flex;
+ flex-direction: column;
+ gap: 12px;
+ max-width: 74ch;
+}
+
+.docs__note {
+ margin: 0;
+ font-size: 14.5px;
+ color: var(--muted);
+}
+
+.docs__faq {
+ display: flex;
+ flex-direction: column;
+ border-top: 1px solid var(--line);
+ max-width: 78ch;
+}
+
+.docs__faq-item {
+ display: grid;
+ grid-template-columns: 1fr;
+ gap: 8px;
+ padding: 22px 0;
+ border-bottom: 1px solid var(--line);
+}
+
+.docs__faq-item h2 {
+ margin: 0;
+ font-weight: 700;
+ font-size: 16px;
+ line-height: 1.35;
+ letter-spacing: normal;
+}
+
+.docs__faq-item p {
+ margin: 0;
+ font-size: 16px;
+ line-height: 1.55;
+ color: var(--muted);
+}
+
+/* Wider screens opt into the two-column FAQ and the larger heading. */
+
+@media screen and (min-width: 40em) {
+ .docs {
+ gap: 44px;
+ }
+
+ .docs__hero h1 {
+ font-size: 2.1rem;
+ }
+
+ .docs__faq-item {
+ grid-template-columns: 240px 1fr;
+ gap: 28px;
+ }
+}
diff --git a/app/assets/stylesheets/fonts.css.erb b/app/assets/stylesheets/fonts.css.erb
new file mode 100644
index 0000000..265e221
--- /dev/null
+++ b/app/assets/stylesheets/fonts.css.erb
@@ -0,0 +1,30 @@
+/*
+ * Self-hosted webfonts, so no third-party request is made on first load.
+ * .css.erb rather than .scss so the asset paths do not depend on the sass
+ * engine, which is on its way out.
+ */
+
+@font-face {
+ font-family: "Oxygen";
+ font-style: normal;
+ font-weight: 400;
+ font-display: swap;
+ src: url("<%= font_path "oxygen-400.woff2" %>") format("woff2");
+}
+
+@font-face {
+ font-family: "Oxygen";
+ font-style: normal;
+ font-weight: 700;
+ font-display: swap;
+ src: url("<%= font_path "oxygen-700.woff2" %>") format("woff2");
+}
+
+/* Variable font: one file serves every weight between 200 and 900. */
+@font-face {
+ font-family: "Source Code Pro";
+ font-style: normal;
+ font-weight: 200 900;
+ font-display: swap;
+ src: url("<%= font_path "source-code-pro.woff2" %>") format("woff2");
+}
diff --git a/app/assets/stylesheets/reports.css b/app/assets/stylesheets/reports.css
new file mode 100644
index 0000000..68b1153
--- /dev/null
+++ b/app/assets/stylesheets/reports.css
@@ -0,0 +1,257 @@
+/* Report page: the results table, the deviation notice, and the share block. */
+
+.report {
+ display: flex;
+ flex-direction: column;
+ gap: 24px;
+}
+
+.report__head {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.report__meta {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 8px;
+ margin: 0;
+ padding: 0;
+ list-style: none;
+}
+
+.report__meta li {
+ font-family: var(--mono);
+ font-size: 12.5px;
+ padding: 7px 12px;
+ background: var(--cream);
+ color: var(--muted);
+}
+
+/* The numeric columns do not wrap, so the table gets its own horizontal scroll
+ rather than pushing the page wide. */
+
+.results-wrap {
+ overflow-x: auto;
+ border: 1px solid var(--line);
+ background: var(--surface);
+}
+
+.results-wrap:focus-visible {
+ outline: 2px solid var(--green);
+ outline-offset: 2px;
+}
+
+.results {
+ width: 100%;
+ border-collapse: collapse;
+ background: var(--surface);
+}
+
+.results th {
+ font-family: var(--mono);
+ font-size: 11px;
+ font-weight: 500;
+ letter-spacing: 1.2px;
+ text-transform: uppercase;
+ color: var(--muted);
+ text-align: left;
+ padding: 12px 8px;
+ border-bottom: 2px solid var(--line);
+}
+
+.results td {
+ padding: 12px 8px;
+ border-top: 1px solid var(--line);
+ vertical-align: middle;
+}
+
+.results th:first-child,
+.results td:first-child {
+ padding-left: 14px;
+}
+
+.results th:last-child,
+.results td:last-child {
+ padding-right: 14px;
+}
+
+.results th.results__rail,
+.results td.results__rail {
+ width: 4px;
+ padding-left: 12px;
+ padding-right: 0;
+}
+
+.results__slower,
+.results__ips {
+ text-align: right;
+ font-family: var(--mono);
+ font-variant-numeric: tabular-nums;
+ white-space: nowrap;
+}
+
+.results__slower {
+ font-size: 14px;
+}
+
+.results__name {
+ min-width: 0;
+}
+
+.results__label {
+ font-family: var(--mono);
+ font-size: 15px;
+ font-weight: 300;
+}
+
+.results__tag {
+ font-family: var(--mono);
+ font-size: 10px;
+ font-weight: 500;
+ letter-spacing: 1.2px;
+ text-transform: uppercase;
+ color: var(--ink);
+ background: var(--green-pale);
+ padding: 3px 6px;
+ margin-left: 8px;
+ white-space: nowrap;
+}
+
+.results__value {
+ font-size: 16px;
+ font-weight: 300;
+}
+
+.results__dev {
+ font-size: 12.5px;
+ color: var(--faint);
+}
+
+.results__dev.is-noisy {
+ color: var(--warn-ink);
+}
+
+.results tr.is-fastest {
+ background: #f8fdf9;
+}
+
+.results tr.is-fastest td.results__rail {
+ background: var(--green);
+ background-clip: content-box;
+}
+
+.results tr.is-fastest .results__label,
+.results tr.is-fastest .results__value {
+ font-weight: 900;
+}
+
+.results tr.is-fastest .results__slower {
+ color: var(--faint);
+}
+
+.notice {
+ display: flex;
+ flex-direction: column;
+ gap: 5px;
+ padding: 18px 22px;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ border-left: 4px solid var(--yellow);
+}
+
+.notice p {
+ margin: 0;
+ font-size: 15.5px;
+ line-height: 1.5;
+ color: var(--muted);
+ max-width: 66ch;
+}
+
+.share {
+ display: flex;
+ flex-direction: column;
+ gap: 14px;
+}
+
+.share__link {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: center;
+ gap: 18px;
+}
+
+.share__url {
+ font-family: var(--mono);
+ font-size: 13.5px;
+ padding: 14px 16px;
+ background: var(--surface);
+ border: 1px solid var(--line);
+ user-select: all;
+ word-break: break-all;
+}
+
+.share__hint {
+ font-size: 13.5px;
+ color: var(--muted);
+}
+
+.share__snippet {
+ background: var(--surface);
+ border: 1px solid var(--line);
+}
+
+.share__snippet-head {
+ display: flex;
+ flex-wrap: wrap;
+ justify-content: space-between;
+ align-items: center;
+ gap: 12px;
+ padding: 12px 16px;
+ background: var(--page);
+ border-bottom: 1px solid var(--line);
+}
+
+.share__snippet pre {
+ margin: 0;
+ padding: 18px 16px;
+ background: var(--ink);
+ color: var(--page);
+ font-family: var(--mono);
+ font-size: 13.5px;
+ line-height: 1.8;
+ overflow-x: auto;
+ user-select: all;
+}
+
+/* Wider screens opt into roomier cells. */
+
+@media screen and (min-width: 40em) {
+ .report {
+ gap: 30px;
+ }
+
+ .results th {
+ padding: 15px 10px;
+ }
+
+ .results td {
+ padding: 16px 10px;
+ }
+
+ .results th:first-child,
+ .results td:first-child {
+ padding-left: 22px;
+ }
+
+ .results th:last-child,
+ .results td:last-child {
+ padding-right: 22px;
+ }
+
+ .results th.results__rail,
+ .results td.results__rail {
+ padding-left: 18px;
+ }
+}
diff --git a/app/assets/stylesheets/reports.scss b/app/assets/stylesheets/reports.scss
deleted file mode 100644
index 4c50ea4..0000000
--- a/app/assets/stylesheets/reports.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-// Place all the styles related to the reports controller here.
-// They will automatically be included in application.css.
-// You can use Sass (SCSS) here: http://sass-lang.com/
-
-.report {
- .results {
- font-family: Monaco, Consolas, 'Liberation Mono', Courier, monospace;
- }
- width: 600px;
-
- @media screen and (max-width: 600px) {
- width: 100%;
- padding-right: 5px;
- font-size: 13px;
-
- .results {
- font-size: 13px;
- }
-
- }
-}
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
deleted file mode 100644
index de6be79..0000000
--- a/app/helpers/application_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module ApplicationHelper
-end
diff --git a/app/helpers/docs_helper.rb b/app/helpers/docs_helper.rb
deleted file mode 100644
index 611f68b..0000000
--- a/app/helpers/docs_helper.rb
+++ /dev/null
@@ -1,2 +0,0 @@
-module DocsHelper
-end
diff --git a/app/helpers/reports_helper.rb b/app/helpers/reports_helper.rb
index 741e2d3..d2a59d1 100644
--- a/app/helpers/reports_helper.rb
+++ b/app/helpers/reports_helper.rb
@@ -18,7 +18,7 @@ def format_ips(value)
def times_slower(best, cur)
best_low = best["ips"] - best["stddev"]
report_high = cur["ips"] + cur["stddev"]
- overlaps = report_high > best_low
+ overlaps = report_high > best_low
if overlaps
return "-"
@@ -34,4 +34,58 @@ def stddev_percentage(part)
def format_stddev(part)
"%4.1f%%" % stddev_percentage(part)
end
+
+ # The report rendered as a markdown table, for pasting into an issue or a
+ # pull request. Mirrors what the page shows: the fastest entry is bolded and
+ # the slower column only appears for comparison reports.
+ def report_markdown(report, fastest, url)
+ columns = ["name", "iterations/second"]
+ columns << "slower" if report.compare
+
+ lines = []
+ lines << "| #{columns.join(" | ")} |"
+ lines << "| #{columns.map { "---" }.join(" | ")} |"
+
+ report.entries.each do |entry|
+ name = markdown_cell(entry["name"])
+ name = "**#{name}**" if fastest && entry["name"] == fastest["name"]
+
+ cells = [name, "#{format_ips(entry["ips"]).strip} \u00b1 #{format_stddev(entry).strip}"]
+ cells << times_slower(fastest, entry) if report.compare
+
+ lines << "| #{cells.join(" | ")} |"
+ end
+
+ environment = report_environment(report)
+ lines << ""
+ lines << [environment, "Full report: #{url}"].compact.join(". ")
+
+ lines.join("\n")
+ end
+
+ # "interpolation and 3 others - benchmark.fyi". A single-entry report gets just
+ # the name, since "and 0 others" reads like a bug.
+ def report_title(report, fastest)
+ name = fastest ? fastest["name"] : "Report"
+ others = report.entries.size - 1
+ name = "#{name} and #{pluralize(others, "other")}" if others.positive?
+
+ "#{name} - benchmark.fyi"
+ end
+
+ # Benchmark names are arbitrary strings. An unescaped pipe would add a column
+ # to the markdown table and break the row for everyone who pastes it.
+ def markdown_cell(value)
+ value.to_s.gsub("|") { "\\|" }
+ end
+
+ # "ruby 4.0.6, darwin/arm64" from whichever of those fields the client sent.
+ # Older reports predate them entirely, so this can be nil.
+ def report_environment(report)
+ ruby = "ruby #{report.ruby}" if report.ruby.present?
+ machine = [report.os, report.arch].reject(&:blank?).join("/")
+
+ parts = [ruby, machine.presence].compact
+ parts.any? ? parts.join(", ") : nil
+ end
end
diff --git a/app/mailers/application_mailer.rb b/app/mailers/application_mailer.rb
deleted file mode 100644
index 286b223..0000000
--- a/app/mailers/application_mailer.rb
+++ /dev/null
@@ -1,4 +0,0 @@
-class ApplicationMailer < ActionMailer::Base
- default from: 'from@example.com'
- layout 'mailer'
-end
diff --git a/app/views/docs/index.html.erb b/app/views/docs/index.html.erb
index 8dd8f47..6b9bbee 100644
--- a/app/views/docs/index.html.erb
+++ b/app/views/docs/index.html.erb
@@ -1,21 +1,58 @@
-benchmark-ips version 2.6.0 or greater and run your benchmark with SHARE=1. I.e.: SHARE=1 ruby my_benchmark.rb
- + Run your benchmark-ips + benchmark with one extra environment variable and get a URL you can paste + into an issue, a pull request, or a blog post. +
+
+ Requires benchmark-ips 2.6.0 or greater. Add x.compare! to your
+ benchmark for the times-slower column.
+
+ The URL is printed in your terminal after the run. Share it with friends, + enemies, whoever. +
+
+ Yes. Point benchmark-ips at it with SHARE_URL instead of
+ SHARE, and it posts there rather than here.
+
+ Send a pull request to + github.com/fastruby/benchmark.fyi + with your changes. +
++ Excellent. Open an issue or send a pull request to + github.com/fastruby/benchmark.fyi. +
+