) element
diff --git a/app/frontend/css/components/_frame_header.scss b/app/frontend/css/components/_frame_header.scss
new file mode 100644
index 00000000000..2a9ca551b51
--- /dev/null
+++ b/app/frontend/css/components/_frame_header.scss
@@ -0,0 +1,40 @@
+.Frameheader {
+ border-radius: 8px 8px 0 0;
+ display: block;
+ text-align: center;
+ padding: 4px 8px;
+ border: 1px solid #ddd;
+ border-bottom: 0 none;
+ width: 100%;
+ box-sizing: border-box;
+ font-size: 14px !important;
+}
+
+.Frameheader__address {
+ display: inline-block;
+ padding: 1px 12px;
+ background: $navy-100;
+ color: $navy-600;
+ border-radius: 6px;
+ min-width: 50%;
+ transition: color 0.2s ease;
+}
+
+.Frameheader__address::after {
+ content: "ā";
+ padding-left: 4px;
+ display: inline-block;
+ transform: translateX(-50%);
+ opacity: 0;
+ transition: transform 0.2s ease, opacity 0.2s ease;
+}
+
+.Frameheader:hover {
+ .Frameheader__address {
+ color: $purple1-600;
+ }
+ .Frameheader__address::after {
+ transform: translateX(0%);
+ opacity: 1;
+ }
+}
diff --git a/app/frontend/css/components/_global_links.scss b/app/frontend/css/components/_global_links.scss
index f1ce77fe0bd..b065eb042b6 100644
--- a/app/frontend/css/components/_global_links.scss
+++ b/app/frontend/css/components/_global_links.scss
@@ -1,10 +1,12 @@
.GlobalLinks {
display: flex;
- flex-direction: column;
+ flex-direction: row;
width: 100%;
+ align-items: center;
+ justify-content: center;
- @media (min-width: $screen-sm) {
- flex-direction: row;
+ @media (min-width: $screen-md) {
+ justify-content: end;
}
}
diff --git a/app/frontend/css/components/_index.scss b/app/frontend/css/components/_index.scss
index 1ac1200a8ba..8be1d8c0fa6 100644
--- a/app/frontend/css/components/_index.scss
+++ b/app/frontend/css/components/_index.scss
@@ -6,8 +6,10 @@
@import "cards_grid";
@import "copy_to_clipboard_button";
@import "divider";
+@import "page_copy_dropdown";
@import "dropdown";
@import "footer";
+@import "frame_header";
@import "global_links";
@import "heading_group";
@import "hero";
@@ -20,4 +22,5 @@
@import "site_header";
@import "status_badges";
@import "tiles";
+@import "theme_select";
@import "toc";
diff --git a/app/frontend/css/components/_menu_toggle.scss b/app/frontend/css/components/_menu_toggle.scss
index 33df73b647c..4cfc804ec7f 100644
--- a/app/frontend/css/components/_menu_toggle.scss
+++ b/app/frontend/css/components/_menu_toggle.scss
@@ -14,6 +14,9 @@
&:checked ~ .SiteHeader__nav,
&:checked ~ .SiteHeader__global-links {
display: flex;
+ @media (max-width: 959px) {
+ width: 100%;
+ }
}
}
diff --git a/app/frontend/css/components/_nav.scss b/app/frontend/css/components/_nav.scss
index cce6689065e..9c5dd6e6176 100644
--- a/app/frontend/css/components/_nav.scss
+++ b/app/frontend/css/components/_nav.scss
@@ -47,6 +47,7 @@
&__link {
align-items: center;
+ text-align: left;
background-color: transparent;
border: none;
border-radius: 4px;
@@ -130,6 +131,46 @@
}
}
+ &--level5 {
+ &::before {
+ left: 62px;
+
+ @media (min-width: $screen-md) {
+ left: 42px;
+ }
+ }
+ }
+
+ &--level6 {
+ &::before {
+ left: 72px;
+
+ @media (min-width: $screen-md) {
+ left: 52px;
+ }
+ }
+ }
+
+ &--level7 {
+ &::before {
+ left: 82px;
+
+ @media (min-width: $screen-md) {
+ left: 62px;
+ }
+ }
+ }
+
+ &--level8 {
+ &::before {
+ left: 92px;
+
+ @media (min-width: $screen-md) {
+ left: 72px;
+ }
+ }
+ }
+
&--type {
&-back {
&::before {
@@ -201,6 +242,30 @@
padding-left: 55px;
}
}
+
+ &--level6 {
+ padding-left: 90px;
+
+ @media (min-width: $screen-md) {
+ padding-left: 66px;
+ }
+ }
+
+ &--level7 {
+ padding-left: 100px;
+
+ @media (min-width: $screen-md) {
+ padding-left: 77px;
+ }
+ }
+
+ &--level8 {
+ padding-left: 110px;
+
+ @media (min-width: $screen-md) {
+ padding-left: 88px;
+ }
+ }
}
&__toggle {
diff --git a/app/frontend/css/components/_page.scss b/app/frontend/css/components/_page.scss
index aea46f5671c..380964417b5 100644
--- a/app/frontend/css/components/_page.scss
+++ b/app/frontend/css/components/_page.scss
@@ -10,7 +10,7 @@ $lg-screen-margin-top: map-get($header-height, "one-row");
.Page {
display: grid;
- grid-template-rows: auto;
+ grid-template-rows: minmax(0, auto);
grid-template-columns: 1fr;
grid-template-areas:
"sidebar"
diff --git a/app/frontend/css/components/_page_copy_dropdown.scss b/app/frontend/css/components/_page_copy_dropdown.scss
new file mode 100644
index 00000000000..1be1052ad77
--- /dev/null
+++ b/app/frontend/css/components/_page_copy_dropdown.scss
@@ -0,0 +1,312 @@
+@import "../base/variables";
+
+.PageHeader {
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 24px;
+ padding: 0;
+
+ @media (max-width: 768px) {
+ margin-bottom: 16px;
+ }
+}
+
+.Article[data-has-copy-dropdown="true"] {
+ .page-heading-container {
+ display: flex;
+ align-items: flex-start;
+ gap: 1rem;
+ margin-top: 0;
+ margin-bottom: 1.5rem;
+ line-height: 1.3;
+
+ @media (max-width: 768px) {
+ flex-wrap: nowrap;
+ gap: 0.5rem;
+ }
+
+ h1 {
+ flex: 1;
+ margin: 0;
+ min-width: 0;
+ word-wrap: break-word;
+ hyphens: auto;
+ }
+
+ .page-copy-dropdown--inline {
+ flex-shrink: 0;
+ margin: 0;
+ align-self: flex-start;
+ }
+ }
+}
+
+.page-copy-dropdown {
+ position: relative;
+ display: inline-flex;
+ margin-bottom: 1rem;
+ flex-shrink: 0;
+
+ &.page-copy-dropdown--inline {
+ margin-bottom: 0;
+ order: 1;
+
+ @media (max-width: 768px) {
+ // order: -1;
+ // margin-bottom: 0.5rem;
+ // align-self: flex-start;
+ }
+ }
+
+ &__button {
+ @extend .Button;
+ @extend .Button--default;
+ @extend .Button--small;
+
+ --icon-color: #{rgba(map-get($color-aliases, "icon"), 0.8)};
+
+ display: flex;
+ align-items: center;
+ padding-left: 12px;
+ gap: 8px;
+ font-size: 14px;
+ font-weight: 500;
+ cursor: pointer;
+ background: $base-0;
+ color: map-get($color-aliases, "text-base");
+ white-space: nowrap;
+ transition: all 0.15s ease;
+
+ &:hover {
+ border-color: map-get($color-aliases, "border");
+ transform: translateY(-1px);
+ }
+
+ &:active {
+ transform: translateY(0);
+ }
+
+ svg {
+ flex-shrink: 0;
+ }
+
+ .lucide-copy {
+ color: rgba(map-get($color-aliases, "icon"), 0.8);
+ }
+
+ .lucide-chevron-down {
+ margin-left: 5px;
+
+ @media (max-width: 768px) {
+ margin-left: 2px;
+ }
+ }
+
+ @media (max-width: 768px) {
+ padding: 8px 10px;
+ gap: 4px;
+ min-width: auto;
+ }
+
+ @media (max-width: 480px) {
+ padding: 6px 5px 6px 8px;
+ gap: 2px;
+ }
+ }
+
+ &__button-text-full {
+ @media (max-width: 768px) {
+ display: none;
+ }
+ }
+
+ &__button-text-short {
+ display: none;
+
+ @media (max-width: 768px) {
+ display: none;
+ }
+ }
+
+ &__menu {
+ position: absolute;
+ top: 100%;
+ right: 0;
+ margin-top: 4px;
+ padding: 4px;
+ background: $base-0;
+ border: 1px solid map-get($color-aliases, "border");
+ border-radius: 6px;
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+ 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+ min-width: 260px;
+ z-index: 50;
+ opacity: 0;
+ visibility: hidden;
+ transform: translateY(-8px);
+ transition: all 0.15s ease;
+
+ &--open {
+ opacity: 1;
+ visibility: visible;
+ transform: translateY(0);
+ }
+
+ @media (max-width: 768px) {
+ max-width: calc(100vw - 16px);
+ box-shadow: 0 8px 12px -2px rgba(0, 0, 0, 0.1),
+ 0 2px 4px -1px rgba(0, 0, 0, 0.05);
+ }
+
+ @media (max-width: 480px) {
+ max-width: calc(100vw - 32px);
+ }
+ }
+
+ &__divider {
+ height: 1px;
+ background: $gray-100;
+ margin: 4px 0;
+ }
+
+ &__item {
+ display: flex;
+ align-items: center;
+ gap: 12px;
+ width: 100%;
+ padding: 12px 12px;
+ border: none;
+ border-radius: 4px;
+ background: none;
+ color: map-get($color-aliases, "text-base");
+ font-family: $font-family-base;
+ font-size: 14px;
+ font-weight: 500;
+ text-align: left;
+ cursor: pointer;
+ transition: all 0.15s ease;
+ text-decoration: none;
+
+ &:hover {
+ background: map-get($color-aliases, "panel-background");
+ color: $navy-900;
+ }
+
+ &:first-child {
+ border-top-left-radius: 5px;
+ border-top-right-radius: 5px;
+ }
+
+ &:last-child {
+ border-bottom-left-radius: 5px;
+ border-bottom-right-radius: 5px;
+ }
+
+ svg {
+ flex-shrink: 0;
+ color: map-get($color-aliases, "icon");
+ }
+
+ @media (max-width: 768px) {
+ padding: 10px 8px;
+ gap: 10px;
+ font-size: 13px;
+ }
+
+ @media (max-width: 480px) {
+ padding: 8px 6px;
+ gap: 8px;
+ }
+ }
+
+ &__item {
+ &--loading {
+ color: map-get($color-aliases, "icon");
+ pointer-events: none;
+
+ .page-copy-dropdown__item-icon svg {
+ color: map-get($color-aliases, "icon");
+ }
+ }
+
+ &--success {
+ color: map-get($color-aliases, "state-success");
+
+ .page-copy-dropdown__item-icon svg {
+ color: map-get($color-aliases, "state-success");
+ }
+ }
+
+ &--error {
+ color: map-get($color-aliases, "state-fail");
+
+ .page-copy-dropdown__item-icon svg {
+ color: map-get($color-aliases, "state-fail");
+ }
+ }
+ }
+
+ &__item-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 20px;
+ height: 20px;
+ flex-shrink: 0;
+
+ svg {
+ color: map-get($color-aliases, "icon");
+ }
+ }
+
+ &__item-content {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ gap: 2px;
+ }
+
+ &__item-title {
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 1.2;
+ }
+
+ &__item-subtitle {
+ font-size: 12px;
+ color: $charcoal-300;
+ line-height: 1.2;
+ }
+
+ &__item-external {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 16px;
+ height: 16px;
+ flex-shrink: 0;
+ opacity: 0.6;
+
+ svg {
+ color: currentColor;
+ }
+ }
+
+ // Temporarily hide Cursor MCP connection until hosted server is ready
+ &__item[data-action="connect-cursor"] {
+ display: none;
+ }
+}
+
+@keyframes spin {
+ from {
+ transform: rotate(0deg);
+ }
+ to {
+ transform: rotate(360deg);
+ }
+}
+
+.animate-spin {
+ animation: spin 1s linear infinite;
+}
diff --git a/app/frontend/css/components/_responsive_table.scss b/app/frontend/css/components/_responsive_table.scss
index 18342dac62a..9ffc94d15fa 100644
--- a/app/frontend/css/components/_responsive_table.scss
+++ b/app/frontend/css/components/_responsive_table.scss
@@ -103,6 +103,15 @@
}
}
+ code {
+ /* Including this seems to do the opposite of what's intended. */
+ /* overflow-wrap: break-word; */
+ display: inline-block;
+ /* Forces internal wrapping of longer code lines, making them look ugly in table cells. */
+ /* max-width: 30ch; */
+ vertical-align: top;
+ }
+
&--single-column-rows {
tbody {
tr {
@@ -128,4 +137,13 @@
display: none;
}
}
+
+ &--wrap-th-codeblocks tbody {
+ th code,
+ td:first-child code {
+ @media (min-width: $screen-lg) {
+ white-space: wrap;
+ }
+ }
+ }
}
diff --git a/app/frontend/css/components/_site_header.scss b/app/frontend/css/components/_site_header.scss
index a5de22878c1..3a5bc122e00 100644
--- a/app/frontend/css/components/_site_header.scss
+++ b/app/frontend/css/components/_site_header.scss
@@ -109,3 +109,11 @@
color: map-get($color-aliases, "brand");
}
}
+
+.Wordmark__Brand {
+ color: #1a002e;
+}
+
+.Wordmark__SubBrand {
+ color: #504581;
+}
diff --git a/app/frontend/css/components/_theme_select.scss b/app/frontend/css/components/_theme_select.scss
new file mode 100644
index 00000000000..b42f0ce86ca
--- /dev/null
+++ b/app/frontend/css/components/_theme_select.scss
@@ -0,0 +1,44 @@
+.theme-ui {
+ border-radius: 6px;
+ border: 1px solid $navy-200;
+ display: block;
+ position: relative;
+ svg {
+ color: $navy-600;
+ }
+}
+
+.theme-chevron {
+ width: 16px;
+ height: 16px;
+ position: absolute;
+ right: 6px;
+ top: 10px;
+ pointer-events: none;
+}
+
+.theme-icon {
+ width: 20px;
+ position: absolute;
+ top: 8px;
+ left: 8px;
+ pointer-events: none;
+}
+
+.theme-inactive {
+ display: none;
+}
+
+#theme-select {
+ appearance: none;
+ font-size: 14px;
+ margin-left: 12px;
+ line-height: 16px;
+ border: 0 none;
+ background: transparent;
+ padding: 10px 24px 10px 20px;
+ color: currentColor;
+ &:focus {
+ outline: none;
+ }
+}
diff --git a/app/frontend/css/components/_tiles.scss b/app/frontend/css/components/_tiles.scss
index 1f04b32bd46..9185ff6fe26 100644
--- a/app/frontend/css/components/_tiles.scss
+++ b/app/frontend/css/components/_tiles.scss
@@ -20,7 +20,7 @@
}
.TileItem__title {
- font-size: 1.1875rem;
+ font-size: 1rem;
font-weight: 500;
margin: 0 0 8px;
}
diff --git a/app/frontend/css/pages/_docs.scss b/app/frontend/css/pages/_docs.scss
index 65983ed1b09..bbfaa0b9cc0 100644
--- a/app/frontend/css/pages/_docs.scss
+++ b/app/frontend/css/pages/_docs.scss
@@ -37,7 +37,7 @@
transition: all 0.2s;
}
- &:hover {
+ th:hover {
.Docs__attribute__link {
opacity: 1;
@@ -88,21 +88,20 @@
}
a.Docs__example-repo {
- border: 1px solid #ccc;
color: map-get($color-aliases, "text-base");
display: flex;
- padding: 15px;
+ padding: 12px 16px;
text-decoration: none;
+ border-radius: $rounded;
+ background: $base-0;
+ box-shadow: $box-shadow-depth-100;
+ transition: box-shadow 0.2s ease;
&:hover,
&:active,
&:focus {
- border-color: map-get($color-aliases, "brand");
color: black;
-
- .repo {
- color: map-get($color-aliases, "brand");
- }
+ box-shadow: $box-shadow-depth-100-hover;
}
.icon {
diff --git a/app/frontend/css/pages/homepage/_products.scss b/app/frontend/css/pages/homepage/_products.scss
index cc509aed9fa..c6aa9bce150 100644
--- a/app/frontend/css/pages/homepage/_products.scss
+++ b/app/frontend/css/pages/homepage/_products.scss
@@ -6,12 +6,14 @@
.Products__row {
display: flex;
flex-direction: column;
- gap: 24px;
+ gap: 12px;
margin-left: $gutter / -2;
margin-right: $gutter / -2;
@media (min-width: $screen-sm) {
flex-direction: row;
+ align-items: stretch;
+ gap: 24px;
}
@media (min-width: $screen-md) {
@@ -22,9 +24,11 @@
.Products__link {
text-decoration: none;
+ flex: 1;
}
.ProductCard {
+ box-sizing: border-box;
background-color: $base-0;
border-radius: $rounded;
box-shadow: $box-shadow-depth-100;
@@ -33,6 +37,7 @@
gap: $gutter / 2;
padding: $gutter / 2;
transition: box-shadow $transition-speed;
+ height: 100%;
@media (min-width: $screen-xs) {
flex-direction: row;
@@ -55,6 +60,29 @@
.ProductCard__img {
@media (min-width: $screen-xs) {
- width: 148px;
+ height: 50px;
+ }
+}
+
+.ProductBadge {
+ display: inline-flex;
+ align-items: center;
+ border-radius: 12px;
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1),
+ 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 1px 0px 0px rgba(0, 0, 0, 0.09),
+ 0px 2px 2px 0px rgba(0, 0, 0, 0.04), 0px 3px 3px 0px rgba(0, 0, 0, 0.02),
+ 0px 4px 4px 0px rgba(0, 0, 0, 0.01);
+ padding-right: 12px;
+ background: #fff;
+ font-size: 15px;
+ color: #28243f;
+ font-weight: 600;
+ margin-bottom: 16px;
+ svg {
+ width: 24px;
+ height: 24px;
+ padding: 8px;
+ border-right: 1px solid rgba(0, 0, 0, 0.2);
+ margin-right: 12px;
}
}
diff --git a/app/frontend/css/utilities/_dark_mode.scss b/app/frontend/css/utilities/_dark_mode.scss
new file mode 100644
index 00000000000..3801c207a7d
--- /dev/null
+++ b/app/frontend/css/utilities/_dark_mode.scss
@@ -0,0 +1,475 @@
+.dark-only {
+ display: none;
+}
+
+html.dark {
+ background: #020617;
+
+ --docsearch-text-color: rgb(245, 246, 247);
+ --docsearch-container-background: rgba(9, 10, 17, 0.8);
+ --docsearch-modal-background: rgb(21, 23, 42);
+ --docsearch-modal-shadow: inset 1px 1px 0 0 rgb(44, 46, 64),
+ 0 3px 8px 0 rgb(0, 3, 9);
+ --docsearch-searchbox-background: rgb(9, 10, 17);
+ --docsearch-searchbox-focus-background: #000;
+ --docsearch-hit-color: rgb(190, 195, 201);
+ --docsearch-hit-shadow: none;
+ --docsearch-hit-background: rgb(9, 10, 17);
+ --docsearch-key-gradient: linear-gradient(
+ -26.5deg,
+ rgb(86, 88, 114) 0%,
+ rgb(49, 53, 91) 100%
+ );
+ --docsearch-key-shadow: inset 0 -2px 0 0 rgb(40, 45, 85),
+ inset 0 0 1px 1px rgb(81, 87, 125), 0 2px 2px 0 rgba(3, 4, 9, 0.3);
+ --docsearch-footer-background: rgb(30, 33, 54);
+ --docsearch-footer-shadow: inset 0 1px 0 0 rgba(73, 76, 106, 0.5),
+ 0 -4px 8px 0 rgba(0, 0, 0, 0.2);
+ --docsearch-muted-color: rgb(127, 132, 151);
+ --docsearch-logo-color: rgb(255, 255, 255);
+
+ .SiteHeader,
+ .Page__sidebar,
+ .SiteHeader__nav,
+ .divider,
+ .Article tbody tr,
+ iframe,
+ hr {
+ border-color: $navy-800;
+ }
+
+ .Article thead {
+ border-color: $navy-700;
+ }
+
+ .Wordmark__Brand {
+ color: #ffffff;
+ }
+
+ .Wordmark__SubBrand {
+ color: $navy-400;
+ }
+
+ .SiteHeader,
+ .Nav--sidebar .Nav__section--level2 {
+ background: #020617;
+ }
+
+ h1,
+ h2,
+ h3,
+ h4,
+ h5,
+ h6,
+ .TileItem .TileItem__title-link,
+ .Docs__heading .Docs__heading__anchor,
+ .Footer__heading,
+ .Card__title-link {
+ color: $navy-50;
+ }
+
+ .Nav__link,
+ .Dropdown__menu-link {
+ color: $navy-300;
+ &:hover {
+ background: #1f023e;
+ color: $navy-200;
+ }
+ }
+
+ .Toc__link {
+ color: $navy-300;
+ }
+
+ .Nav__link--parent {
+ color: #e5e1ff !important;
+ }
+
+ .Nav__link--current {
+ background: #340469 !important;
+ color: #e5e1ff !important;
+ }
+
+ .Article,
+ .Footer,
+ .HeroBanner__summary,
+ .ProductCard__summary,
+ .Card__list-item-link,
+ .Reference__link,
+ p {
+ color: $navy-300;
+ a {
+ color: #9f83fe;
+ text-decoration-color: #340469;
+ &:hover {
+ text-decoration-color: #9f83fe;
+ }
+ }
+ }
+
+ .Article pre {
+ border-color: #1e293b;
+ background-color: #0f172a;
+ }
+
+ .Article .highlight-figure figcaption {
+ border-color: #1e293b;
+ color: $navy-500;
+ background-color: #0f172a;
+ }
+
+ .highlight {
+ color: $navy-300;
+ }
+
+ .CopyToClipboardButton {
+ background: $navy-600 !important;
+ svg {
+ color: $navy-200 !important;
+ }
+ }
+
+ .highlight .s,
+ .highlight .sb,
+ .highlight .sc,
+ .highlight .s2,
+ .highlight .se,
+ .highlight .sh,
+ .highlight .si,
+ .highlight .sx,
+ .highlight .sr,
+ .highlight .s1,
+ .highlight .ss {
+ color: #00e285;
+ }
+
+ .highlight .na,
+ .highlight .nc,
+ .highlight .nd,
+ .highlight .ni,
+ .highlight .ne,
+ .highlight .nf,
+ .highlight .nl,
+ .highlight .nn,
+ .highlight .nx,
+ .highlight .py,
+ .highlight .nv,
+ .highlight .vc,
+ .highlight .vg,
+ .highlight .vi {
+ color: #9f83fe;
+ }
+
+ .highlight .k,
+ .highlight .kc,
+ .highlight .kd,
+ .highlight .kn,
+ .highlight .kp,
+ .highlight .kr,
+ .highlight .kt,
+ .highlight .nb,
+ .highlight .bp,
+ .highlight .nt,
+ .highlight .no,
+ .highlight .o,
+ .highlight .ow,
+ .highlight .mf,
+ .highlight .mh,
+ .highlight .mi,
+ .highlight .il,
+ .highlight .mo,
+ .highlight .ld,
+ .highlight .m {
+ color: #f2545b;
+ }
+
+ .callout {
+ background: #0f172a;
+ color: $navy-300;
+ p {
+ color: inherit;
+ }
+ }
+
+ .Button--default,
+ .Article details {
+ background-color: #0f172a;
+ color: $navy-50 !important;
+ box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.01),
+ 0px 3px 3px 0px rgba(0, 0, 0, 0.02), 0px 2px 2px 0px rgba(0, 0, 0, 0.04),
+ 0px 1px 0px 0px rgba(0, 0, 0, 0.09), 0px 0px 0px 1px rgba(0, 0, 0, 0.09);
+ }
+
+ .Button--default:hover,
+ .PopularGuide:hover {
+ background-color: #1e293b;
+ }
+
+ .Article table {
+ box-shadow: #121e3c 0px 0px 0px 1px, #10172ac7 0px 1px 3px;
+ }
+
+ .Article h1:not([class]) > code,
+ .Article h2:not([class]) > code,
+ .Article h3:not([class]) > code,
+ .Article h4:not([class]) > code,
+ .Article h5:not([class]) > code,
+ .Article h6:not([class]) > code,
+ .Article p:not([class]) > code,
+ .Article a:not([class]) > code,
+ .Article p > code,
+ .Article li > code,
+ .Article dt > code,
+ .Article td > code,
+ .Article th > code {
+ background-color: #0f172a;
+ }
+
+ .callout p code {
+ background-color: #ffffff0f !important;
+ }
+
+ .theme-ui {
+ border-color: #1e293b;
+ svg {
+ color: $navy-400;
+ }
+ }
+
+ #theme-select {
+ color: $navy-300;
+ }
+
+ .ProductCard,
+ .Card {
+ background: #0f172a;
+ }
+
+ .Card__title-link:hover,
+ .Card__icon-link:hover + .Card__title .Card__title-link {
+ color: #e5e1ff;
+ }
+
+ .Toc .Toc__list-item.active > .Toc__link,
+ .Toc .Toc__link:hover {
+ color: #9f83fe;
+ }
+
+ .Toc path {
+ stroke: #9f83fe;
+ }
+
+ .DocSearch-Button {
+ color: #fff;
+ background: #020617;
+ }
+
+ .Toc {
+ background: #020617;
+ border: 1px solid $navy-800;
+ @media (min-width: 1280px) {
+ border: 0 none;
+ background: transparent;
+ }
+ }
+
+ .Dropdown,
+ .Dropdown__menu {
+ background: #020617;
+ color: #fff;
+ }
+
+ .Dropdown__menu {
+ border: 1px solid $navy-800;
+ }
+
+ .Dropdown__menu::before {
+ border-bottom-color: $navy-800;
+ }
+
+ .Dropdown__menu::after {
+ border-bottom-color: #020617;
+ }
+
+ .Button {
+ color: $navy-50;
+ }
+
+ a.Docs__example-repo {
+ background: #020617;
+ border-color: $navy-700;
+ color: $navy-300;
+ box-shadow: 0px 4px 4px 0px rgba($base-1000, 0.01),
+ 0px 3px 3px 0px rgba($base-1000, 0.18),
+ 0px 2px 2px 0px rgba($base-1000, 0.08),
+ 0px 1px 0px 0px rgba($base-1000, 0.18),
+ 0px 0px 0px 1px rgba($base-1000, 0.18),
+ inset 0 1px 0 rgba(255, 255, 255, 0.075),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.09);
+
+ &:hover,
+ &:active,
+ &:focus {
+ box-shadow: 0px 4px 4px 0px rgba($base-1000, 0.01),
+ 0px 3px 3px 0px rgba($base-1000, 0.18),
+ 0px 2px 2px 0px rgba($base-1000, 0.08),
+ 0px 1px 0px 0px rgba($base-1000, 0.18),
+ 0px 0px 0px 1px rgba($base-1000, 0.18),
+ inset 0 1px 0 rgba(255, 255, 255, 0.1),
+ inset 0 0 0 1px rgba(255, 255, 255, 0.1);
+ }
+ .repo {
+ color: $navy-400;
+ &:hover {
+ color: $purple1-500;
+ }
+ }
+ }
+
+ .callout {
+ @include callout($navy-200, #0f172a, default_dark);
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
+ .callout__anchor {
+ &:hover,
+ &:active,
+ &:focus {
+ color: $navy-50 !important;
+ }
+ }
+ }
+
+ .callout--troubleshooting {
+ @include callout(#fed7aa, #431407, troubleshooting_dark);
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
+ .callout__anchor {
+ &:hover,
+ &:active,
+ &:focus {
+ color: $navy-50 !important;
+ }
+ }
+ }
+
+ .callout--wip {
+ @include callout(#d6d3d1, #1c1917, wip_dark);
+ box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
+ .callout__anchor {
+ &:hover,
+ &:active,
+ &:focus {
+ color: $navy-50 !important;
+ }
+ }
+ }
+
+ .Button__icon--16x16,
+ .MenuToggleLabel {
+ filter: invert(92%) hue-rotate(180deg);
+ }
+
+ .MenuToggleLabel {
+ background-color: #fff;
+ &:hover {
+ background-color: #eee;
+ }
+ }
+
+ .ProductBadge {
+ background: #1e293b;
+ color: #fff;
+ svg {
+ border-right: 1px solid rgba(255, 255, 255, 0.2);
+ margin-right: 8px;
+ }
+ }
+
+ .invertible {
+ filter: invert(92%) hue-rotate(180deg);
+ }
+
+ .Frameheader {
+ border-color: $navy-800;
+ }
+
+ .Frameheader__address {
+ background: $navy-900;
+ color: $navy-400;
+ }
+
+ .Frameheader:hover .Frameheader__address {
+ color: $purple1-400;
+ }
+
+ .light-only {
+ display: none;
+ }
+
+ .dark-only {
+ display: block;
+ }
+
+ .responsive-image-container {
+ box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2),
+ 0 -1px 0 0 rgba(255, 255, 255, 0.05);
+ }
+
+ .page-copy-dropdown {
+ &__button {
+ --icon-color: $navy-400;
+ border-color: #1e293b;
+
+ &:hover {
+ border-color: rgba(map-get($color-aliases, "icon"), 0.6);
+ transform: translateY(-1px);
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
+ }
+
+ &:active {
+ transform: translateY(0);
+ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
+ }
+
+ .lucide-copy {
+ color: $navy-100;
+ }
+ }
+
+ &__menu {
+ background: #020617;
+ border-color: $navy-800;
+ }
+
+ &__item {
+ color: $gray-100;
+
+ &:hover {
+ background: #1f023e;
+ color: $navy-200;
+ }
+
+ &--loading {
+ color: $gray-500;
+
+ .page-copy-dropdown__item-icon svg {
+ color: $gray-500;
+ }
+ }
+ }
+
+ &__item-icon svg {
+ color: $gray-500;
+ }
+
+ &__item-subtitle {
+ color: $gray-500;
+ }
+
+ &__divider {
+ background: #140d30;
+ }
+
+ &__item[data-action="open-chatgpt"] svg path {
+ fill: white !important;
+ }
+ }
+}
diff --git a/app/frontend/css/utilities/_index.scss b/app/frontend/css/utilities/_index.scss
index a6d29b0f88e..e3021a68700 100644
--- a/app/frontend/css/utilities/_index.scss
+++ b/app/frontend/css/utilities/_index.scss
@@ -6,3 +6,4 @@
@import "responsive_image_container";
@import "sr_only";
@import "standard_top_section";
+@import "dark_mode";
diff --git a/app/frontend/entrypoints/application.js b/app/frontend/entrypoints/application.js
index 1a201db67ef..a154e14a932 100644
--- a/app/frontend/entrypoints/application.js
+++ b/app/frontend/entrypoints/application.js
@@ -1,12 +1,18 @@
import * as Turbo from "@hotwired/turbo";
-import { bindToggles } from "../components/nav";
+import { bindToggles, preserveScroll } from "../components/nav";
import { initToc } from "../components/toc";
import { attachCopyToClipboardButton } from "../components/copyToClipboardButton";
+import { themeToggle } from "../components/themeToggle";
+import { initPageCopyDropdown } from "../components/pageCopyDropdown";
import docsearch from "@docsearch/js";
Turbo.start();
+// Store cleanup functions for proper memory management
+let cleanupFunctions = [];
+
document.addEventListener("turbo:render", async (event) => {
+ cleanup();
render();
});
@@ -14,6 +20,20 @@ window.addEventListener("DOMContentLoaded", () => {
render();
});
+function cleanup() {
+ // Call all cleanup functions from previous renders
+ cleanupFunctions.forEach((fn) => {
+ if (typeof fn === "function") {
+ try {
+ fn();
+ } catch (error) {
+ console.warn("Error during cleanup:", error);
+ }
+ }
+ });
+ cleanupFunctions = [];
+}
+
function render() {
docsearch({
container: "#search",
@@ -23,8 +43,16 @@ function render() {
});
bindToggles();
+ preserveScroll();
initToc();
attachCopyToClipboardButton("pre.highlight");
+ themeToggle();
+
+ // Store cleanup function if component returns one
+ const dropdownCleanup = initPageCopyDropdown();
+ if (dropdownCleanup) {
+ cleanupFunctions.push(dropdownCleanup);
+ }
}
window.addEventListener("DOMContentLoaded", () => {
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index 0121923d9ce..fa71c2ff0eb 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -3,6 +3,10 @@ def dashboard_path
"/dashboard"
end
+ def buildkite_url
+ @buildkite_url ||= Page::BuildkiteUrl.new
+ end
+
def nav_path(path)
if path =~ URI::regexp
path
diff --git a/app/models/agent_installers.rb b/app/models/agent_installers.rb
index a13779132ba..b33d90c76b7 100644
--- a/app/models/agent_installers.rb
+++ b/app/models/agent_installers.rb
@@ -1,24 +1,26 @@
-AGENT_INSTALLERS = [
+AgentInstallers = [
{ title: "Ubuntu",
- url: "agent/v3/ubuntu" },
+ url: "agent/v3/self-hosted/install/ubuntu" },
{ title: "Debian",
- url: "agent/v3/debian" },
+ url: "agent/v3/self-hosted/install/debian" },
{ title: "Red Hat/CentOS",
- url: "agent/v3/redhat" },
+ url: "agent/v3/self-hosted/install/redhat" },
{ title: "FreeBSD",
- url: "agent/v3/freebsd" },
+ url: "agent/v3/self-hosted/install/freebsd" },
{ title: "macOS",
- url: "agent/v3/macos" },
+ url: "agent/v3/self-hosted/install/macos" },
{ title: "Windows",
- url: "agent/v3/windows" },
+ url: "agent/v3/self-hosted/install/windows" },
{ title: "Linux",
- url: "agent/v3/linux" },
+ url: "agent/v3/self-hosted/install/linux" },
{ title: "Docker",
- url: "agent/v3/docker" },
+ url: "agent/v3/self-hosted/install/docker" },
+ { title: "Agent Stack for Kubernetes",
+ url: "agent/v3/self-hosted/agent-stack-k8s" },
{ title: "AWS",
- url: "agent/v3/aws" },
+ url: "agent/v3/self-hosted/aws" },
{ title: "Elastic CI Stack for AWS",
- url: "agent/v3/elastic-ci-aws" },
+ url: "agent/v3/self-hosted/aws/elastic-ci-stack" },
{ title: "Google Cloud",
- url: "agent/v3/gcloud" }
+ url: "agent/v3/self-hosted/gcp" }
].freeze
diff --git a/app/models/beta_pages.rb b/app/models/beta_pages.rb
index 67eb97cc0ac..952c7cc0bda 100644
--- a/app/models/beta_pages.rb
+++ b/app/models/beta_pages.rb
@@ -1,14 +1,8 @@
class BetaPages
def self.all
[
- 'pipelines/cluster-queue-metrics',
- 'test-analytics/test-ownership',
- 'apis/rest-api/team-pipelines',
- 'apis/rest-api/organizations/members',
- 'apis/rest-api/teams',
- 'apis/rest-api/teams/members',
- 'apis/rest-api/teams/pipelines',
- 'apis/rest-api/teams/suites'
+ 'path/page-name',
+ 'path/last-page-name-in-list-without-trailing-comma'
]
end
end
diff --git a/app/models/llm_text.rb b/app/models/llm_text.rb
new file mode 100644
index 00000000000..52f5ed58555
--- /dev/null
+++ b/app/models/llm_text.rb
@@ -0,0 +1,79 @@
+# frozen_string_literal: true
+
+class LLMText
+ attr_reader :nav
+
+ def initialize(nav)
+ @nav = nav
+ end
+
+ class << self
+ def generate
+ new(Rails.application.config.default_nav).generate
+ end
+ end
+
+ def generate
+ content = [
+ "# Buildkite Documentation",
+ "",
+ "> Buildkite is a platform for running fast, secure, and scalable continuous integration pipelines on your own infrastructure.",
+ ""
+ ]
+
+ # Process each top-level navigation section
+ nav.data.each do |section|
+ next unless section["children"] # Skip sections without children
+
+ # Check if this section has any valid children after filtering
+ temp_content = []
+ process_nav_children(section["children"], temp_content, 3)
+
+ # Only add the section if there's actual content
+ if temp_content.any? { |line| line.start_with?("- ") || line.start_with?("#") }
+ content << "## #{section['name']}"
+ content << ""
+
+ content.concat(temp_content)
+ content << ""
+ end
+ end
+
+ content.join("\n")
+ end
+
+ private
+
+ def process_nav_children(children, content, heading_level)
+ children.each_with_index do |child, index|
+ next if child["type"] == "divider"
+ next if should_skip_item?(child)
+
+ if child["path"]
+ # This is a leaf node with a path - add it as a link
+ url = "https://buildkite.com/docs/#{child['path']}.md"
+ content << "- [#{child['name']}](#{url})"
+ elsif child["children"]
+ # Check if this section has any valid children after filtering
+ temp_content = []
+ process_nav_children(child["children"], temp_content, heading_level + 1)
+
+ # Only add the heading if there's actual content
+ if temp_content.any? { |line| line.start_with?("- ") || line.start_with?("#") }
+ # Add spacing before heading if there's previous content
+ content << "" unless content.empty? || content.last == ""
+
+ heading_prefix = "#" * [heading_level, 6].min # Max heading level is H6
+ content << "#{heading_prefix} #{child['name']}"
+ content << ""
+
+ content.concat(temp_content)
+ end
+ end
+ end
+ end
+
+ def should_skip_item?(item)
+ item["path"]&.include?("apis/graphql/schemas/") # Skip GraphQL schema docs
+ end
+end
diff --git a/app/models/page.rb b/app/models/page.rb
index 9bdff985dc3..2dda19e56f0 100644
--- a/app/models/page.rb
+++ b/app/models/page.rb
@@ -1,21 +1,21 @@
# frozen_string_literal: true
class Page
- HEADING_REGEX = /^[#]{2}\s(.+)$/
+ HEADING_REGEX = /^\#{2}\s(.+)$/
class << self
# Find all markdown pages in the pages directory (ignoring partials).
def all
Dir.glob("#{Rails.root}/pages/**/*.md")
- .select { |path | !path.to_s.include?("/_") }
- .map do |path|
- Struct.new(:path, :updated_at).new(
- path
- .sub("#{Rails.root}/pages/", "/docs/")
- .sub(/\.md$/, "")
- .gsub("_", "-"),
- File.mtime(path)
- )
+ .select { |path| !path.to_s.include?('/_') }
+ .map do |path|
+ Struct.new(:path, :updated_at).new(
+ path
+ .sub("#{Rails.root}/pages/", '/docs/')
+ .sub(/\.md$/, '')
+ .gsub('_', '-'),
+ File.mtime(path)
+ )
end
end
end
@@ -30,10 +30,12 @@ def initialize(view_helpers: nil, image_path: '')
end
def estimated_time(description)
- %{Estimated time: #{description}
}
+ %(Estimated time: #{description}
)
end
- def image(name, args={})
+ def image(name, args = {})
+ align = args.delete(:align)&.to_s
+
# Support the same :size that the standard Rails helper supports
if size = args.delete(:size)
width, height = size.split('x').map(&:to_i)
@@ -43,61 +45,70 @@ def image(name, args={})
if args.include?(:width) && args.include?(:height)
args[:max_width] = args[:width]
+ args[:align] = align if align
responsive_image_tag(image_path(name),
args[:width],
args[:height],
args.except(:width, :height))
else
+ if align == 'center'
+ # Add centering styles for non-responsive images
+ args[:style] = merge_styles(args[:style], 'display:block; margin-inline: auto;')
+ end
@view_helpers.image_tag(image_path(name), args)
end
end
def image_path(name)
- stripped_image_path = @image_path.sub(/\Adocs\//, "")
- @view_helpers.vite_asset_path(File.join("images", stripped_image_path, name))
+ stripped_image_path = @image_path.sub(%r{\Adocs/}, '')
+ @view_helpers.vite_asset_path(File.join('images', stripped_image_path, name))
end
def paginated_resource_docs_url
@url_helpers.docs_path + '/rest-api#pagination'
end
- def url_helpers
- @url_helpers
- end
+ attr_reader :url_helpers
def get_binding
binding
end
+ def merge_styles(*styles)
+ styles.compact.join(' ').strip.presence
+ end
+
def render(partial)
- PagesController.render(partial: partial, formats: [:md, :html])
+ PagesController.render(partial: partial, formats: %i[md html])
end
def render_markdown(partial: nil, text: nil)
- if partial.blank? && text.blank?
- raise ArgumentError, "partial or nil not specified"
- end
+ raise ArgumentError, 'partial or nil not specified' if partial.blank? && text.blank?
text = if partial
- render(partial)
- else
- text
- end
+ render(partial)
+ else
+ text
+ end
Page::Renderer.render(text).html_safe
end
- def responsive_image_tag(image, width, height, image_tag_options={}, &block)
+ def responsive_image_tag(image, width, height, image_tag_options = {}, &block)
+ align_center = image_tag_options.delete(:align)&.to_s == 'center'
max_width = image_tag_options.delete(:max_width)
- img_class = image_tag_options.delete(:class).try(:split, " ") || []
- img_class << "responsive-image-container"
+ img_class = image_tag_options.delete(:class).try(:split, ' ') || []
+ img_class << 'responsive-image-container'
- container = content_tag :div, image_tag(image, image_tag_options), class: img_class
+ container_style = align_center && !max_width ? 'margin-inline: auto;' : nil
+ container = content_tag :div, image_tag(image, image_tag_options), class: img_class, style: container_style
if max_width
- content_tag :div, container, style: "max-width: #{max_width}px"
+ outer_style = "max-width: #{max_width}px"
+ outer_style << '; margin-inline: auto' if align_center
+ content_tag :div, container, style: outer_style
else
container
end
@@ -122,15 +133,19 @@ def exists?
end
def sections
- extracted_data.fetch("sections")
+ extracted_data.fetch('sections')
end
def markdown_body
erb_renderer = ERB.new(file.content, trim_mode: '-')
template_binding = TemplateBinding.new(view_helpers: @view,
- image_path: File.join("docs", basename))
+ image_path: File.join('docs', basename))
- erb_renderer.result(template_binding.get_binding)
+ result = erb_renderer.result(template_binding.get_binding)
+
+ # Remove HTML comments from the markdown output
+ # This ensures they don't appear in .md format responses or copy functionality
+ filter_html_comments(result)
end
def body
@@ -150,17 +165,17 @@ def is_canonical?
end
def basename
- @name.to_s.gsub(/[^0-9a-zA-Z\-\_\/]/, '').underscore
+ @name.to_s.gsub(%r{[^0-9a-zA-Z\-_/]}, '').underscore
end
# Page title, either from front matter or extracted from the markdown
def title
- front_matter.fetch(:title, agentize_title(extracted_data.fetch("name")))
+ front_matter.fetch(:title, agentize_title(extracted_data.fetch('name')))
end
# Page description, either from front matter or extracted from the markdown
def description
- front_matter.fetch(:description, extracted_data.fetch("shortDescription"))
+ front_matter.fetch(:description, extracted_data.fetch('shortDescription'))
end
# Should page render a table of contents?
@@ -174,7 +189,7 @@ def toc_include_h3?
end
def template
- front_matter.fetch(:template, "show")
+ front_matter.fetch(:template, 'show')
end
# Returns focus keywords to guide content writers with an overview of the page content
@@ -192,7 +207,7 @@ def front_matter
# Default to rendering table of contents
"toc": true,
# Default to H3s being included in the table of contents
- "toc_include_h3": true,
+ "toc_include_h3": true
}
if file.front_matter
defaults.merge(file.front_matter.symbolize_keys)
@@ -204,28 +219,39 @@ def front_matter
def file
@_file ||= ::FrontMatterParser::Parser.parse_file(filename)
- rescue
+ rescue StandardError
raise "Error parsing #{filename}"
end
def filename
@filename ||= begin
- directory = Rails.root.join("pages")
+ directory = Rails.root.join('pages')
- potential_files = [ "#{basename}.md" ].map { |n| directory.join(n) }
- potential_files.find { |file| File.exist?(file) }
- end
+ potential_files = ["#{basename}.md"].map { |n| directory.join(n) }
+ potential_files.find { |file| File.exist?(file) }
+ end
end
def agentize_title(title)
- if basename =~ /^agent\/v(.+?)\/?/ and basename.exclude?('elastic_ci')
- "#{title} v#{$1}"
+ if basename =~ %r{^agent/v(.+?)/?} and basename.exclude?('elastic_ci')
+ "#{title} v#{::Regexp.last_match(1)}"
else
title
end
end
def keywords_from_path
- @view.request.path.split("/").reject(&:empty?).map { |segment| segment.gsub("-", " ") }.join(", ")
+ @view.request.path.split('/').reject(&:empty?).map { |segment| segment.gsub('-', ' ') }.join(', ')
+ end
+
+ def filter_html_comments(text)
+ # Remove HTML comments using a regex that handles:
+ # - Single line comments:
+ # - Multi-line comments that span multiple lines
+ # - Comments with various content including newlines and special characters
+ result = text.gsub(//m, '')
+
+ # Clean up any resulting blank lines (but preserve intentional spacing)
+ result.gsub(/\n\s*\n\s*\n/, "\n\n")
end
end
diff --git a/app/models/page/buildkite_url.rb b/app/models/page/buildkite_url.rb
index 541ce814913..a460cbd3513 100644
--- a/app/models/page/buildkite_url.rb
+++ b/app/models/page/buildkite_url.rb
@@ -4,7 +4,7 @@ def user_authorizations_url
end
def signup_path
- "https://buildkite.com/signup"
+ "https://buildkite.com/signup?iaid=pricing-free"
end
def user_access_tokens_url
diff --git a/app/models/page/renderer.rb b/app/models/page/renderer.rb
index 857009dccb9..50c922ee720 100644
--- a/app/models/page/renderer.rb
+++ b/app/models/page/renderer.rb
@@ -17,6 +17,7 @@ def render(text, options = {})
doc = add_automatic_ids_to_headings(doc)
doc = add_heading_anchor_links(doc)
doc = fix_curl_highlighting(doc)
+ doc = remove_syntax_error_highlighting(doc)
doc = add_code_filenames(doc)
doc = add_callout(doc)
doc = decorate_external_links(doc)
@@ -123,6 +124,23 @@ def fix_curl_highlighting(doc)
doc
end
+ def remove_syntax_error_highlighting(doc)
+ # Remove all error highlighting spans from code blocks
+ # Rouge's syntax highlighters often incorrectly mark valid syntax as errors
+ doc.search('.//pre[contains(@class, "highlight")]').each do |pre|
+ code_block = pre.at('code')
+ next unless code_block
+
+ # Replace error spans with plain text (unwrap the content)
+ code_block.inner_html = code_block.inner_html.gsub(
+ /(.+?)<\/span>/,
+ '\1'
+ )
+ end
+
+ doc
+ end
+
def add_code_filenames(doc)
doc.search('./p').each do |node|
next unless node.text.starts_with?('{: codeblock-file=')
diff --git a/app/views/application/_analytics.html.erb b/app/views/application/_analytics.html.erb
index 312e87bf2d3..f0ebbed1e8b 100644
--- a/app/views/application/_analytics.html.erb
+++ b/app/views/application/_analytics.html.erb
@@ -102,4 +102,12 @@ var getFirstSource = function() {
}}();
<% end %>
- <%= javascript_include_tag "https://buildkite.com/_site/scripts/utm.js", async: true %>
+<%= javascript_tag nonce: true do %>
+ !function(t,e){var o,n,p,r;e.__SV||(window.posthog=e,e._i=[],e.init=function(i,s,a){function g(t,e){var o=e.split(".");2==o.length&&(t=t[o[0]],e=o[1]),t[e]=function(){t.push([e].concat(Array.prototype.slice.call(arguments,0)))}}(p=t.createElement("script")).type="text/javascript",p.crossOrigin="anonymous",p.async=!0,p.src=s.api_host.replace(".i.posthog.com","-assets.i.posthog.com")+"/static/array.js",(r=t.getElementsByTagName("script")[0]).parentNode.insertBefore(p,r);var u=e;for(void 0!==a?u=e[a]=[]:a="posthog",u.people=u.people||[],u.toString=function(t){var e="posthog";return"posthog"!==a&&(e+="."+a),t||(e+=" (stub)"),e},u.people.toString=function(){return u.toString(1)+".people (stub)"},o="init capture identify alias people.set people.set_once set_config register register_once unregister opt_out_capturing has_opted_out_capturing opt_in_capturing reset isFeatureEnabled onFeatureFlags getFeatureFlag getFeatureFlagPayload reloadFeatureFlags group updateEarlyAccessFeatureEnrollment getEarlyAccessFeatures getActiveMatchingSurveys getSurveys onSessionId get_distinct_id".split(" "),n=0;n
\ No newline at end of file
diff --git a/app/views/application/_brand.html.erb b/app/views/application/_brand.html.erb
index 45211112894..498c4a72903 100644
--- a/app/views/application/_brand.html.erb
+++ b/app/views/application/_brand.html.erb
@@ -3,6 +3,9 @@
<% end %>
<%= link_to home_page_path, title: "Return to Docs index page" do %>
- 
" />
+
<% end %>
diff --git a/app/views/application/_footer.html.erb b/app/views/application/_footer.html.erb
index 04a3d8e4706..99f14b3809b 100644
--- a/app/views/application/_footer.html.erb
+++ b/app/views/application/_footer.html.erb
@@ -14,7 +14,7 @@
 %>)
- Contribute an update
+ Edit this page
diff --git a/app/views/application/_global_links.html.erb b/app/views/application/_global_links.html.erb
index 35b7f2546ce..01825308532 100644
--- a/app/views/application/_global_links.html.erb
+++ b/app/views/application/_global_links.html.erb
@@ -12,6 +12,22 @@
+
+
+
<% if probably_authenticated? %>
<%= link_to "Dashboard", dashboard_path, class: "Button Button--purple Button--small" %>
@@ -21,7 +37,7 @@
<%= link_to "Login", "https://buildkite.com/login", class: "Button Button--link Button--small" %>
- <%= link_to "Sign up for free", "https://buildkite.com/signup", class: "Button Button--purple Button--small" %>
+ <%= link_to "Sign up for free", buildkite_url.signup_path, class: "Button Button--purple Button--small" %>
<% end %>
diff --git a/app/views/application/_head.html.erb b/app/views/application/_head.html.erb
index c815c443965..9daa07de4b3 100644
--- a/app/views/application/_head.html.erb
+++ b/app/views/application/_head.html.erb
@@ -1,10 +1,8 @@
<%= tag :link, rel: "dns-prefetch", href: ENV["ASSET_HOST"] if ENV["ASSET_HOST"] %>
-
-
-
-
+
+
<%= [content_for(:page_title), "Buildkite Documentation"].compact.join(" | ") %>
<% if description = content_for(:page_description) %>
@@ -22,9 +20,13 @@
<%# Links to pages on the same origin, but outside /docs site shouldn't use Turbo %>
-<%= tag :link, rel: "shortcut icon", href: vite_asset_path("images/favicon.png"), type: "image/x-icon" %>
-<%= tag :link, rel: "apple-touch-icon", href: vite_asset_path("images/appicon.png") %>
-<%= tag :link, rel: "mask-icon", href: vite_asset_path("images/logo-pinned.svg"), color: "#14CC80" %>
+
+<%= tag :link, rel: "icon", href: vite_asset_path("images/favicon.svg"), type: "image/svg+xml" %>
+<%= tag :link, rel: "icon", href: vite_asset_path("images/favicon.png"), type: "image/png" %>
+<%= tag :link, rel: "apple-touch-icon", href: "/apple-touch-icon.png" %>
+<%= tag :meta, property: "theme-color", media:"(prefers-color-scheme: light)", content:"#FFFFFF" %>
+<%= tag :meta, property: "theme-color", media:"(prefers-color-scheme: dark)", content:"#020617" %>
+<%= tag :link, rel: "manifest", href: "/manifest.json", crossOrigin: "use-credentials" %>
<%= tag :meta, property: "twitter:card", content: content_for(:page_twitter_card) || "summary_large_image" %>
@@ -34,7 +36,7 @@
<%= tag :meta, property: "og:type", content: content_for(:page_og_type) || "website" %>
<%= tag :meta, property: "og:title", content: content_for(:page_og_title) || content_for(:page_title) || "Buildkite"%>
<%= tag :meta, property: "og:description", content: content_for(:page_og_description) || content_for(:page_description) || "Automate your teamās software development processes, from testing through to delivery, no matter the language, environment or toolchain." %>
-<%= tag :meta, property: "og:image", content: content_for(:page_image) || image_path("opengraph_default.png").gsub(/^\/\//, 'https://') %>
+<%= tag :meta, property: "og:image", content: content_for(:page_image) || "https://buildkite.com#{image_path("opengraph_default.png")}" %>
<% if page_image_alt = content_for(:page_image_alt) %>
<%= tag :meta, property: "og:image:alt", content: page_image_alt %>
<% end %>
@@ -53,6 +55,16 @@
<%= render 'helpscout' %>
+
+
<% if ENV.fetch("DD_RUM_ENABLED", false) %>