Skip to content

Commit

Permalink
📃 Redesign doc header (airbytehq#30475)
Browse files Browse the repository at this point in the history
  • Loading branch information
Tim Roes authored Sep 18, 2023
1 parent 2e014a1 commit 9751703
Show file tree
Hide file tree
Showing 5 changed files with 126 additions and 13 deletions.
28 changes: 20 additions & 8 deletions docusaurus/docusaurus.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,6 +50,10 @@ const config = {
}),
],

clientModules: [
require.resolve("./src/scripts/cloudStatus.js"),
],

presets: [
[
"classic",
Expand Down Expand Up @@ -93,19 +97,13 @@ const config = {
alt: "Simple, secure and extensible data integration",
src: "img/logo-dark.png",
srcDark: "img/logo-light.png",
width: 140,
height: 40,
},
items: [
{
href: "https://airbyte.io/",
position: "left",
label: "Home",
},
{
href: "https://status.airbyte.io/",
label: "Status",
position: "left",
label: "About Airbyte",
},
{
href: "https://airbyte.com/tutorials",
Expand All @@ -117,11 +115,25 @@ const config = {
label: "Support",
position: "left",
},
// --- Right side ---
{
href: "https://status.airbyte.com",
label: "Cloud Status",
id: "cloudStatusLink",
position: "right",
},
{
href: "https://cloud.airbyte.io/signup?utm_campaign=22Q1_AirbyteCloudSignUpCampaign_Trial&utm_source=Docs&utm_content=NavBar",
label: "Try Airbyte Cloud",
position: "left",
position: "right",
className: "header-button",
},
{
href: "https://github.com/airbytehq",
position: "right",
"aria-label": "Airbyte on GitHub",
className: "header-github-link",
}
],
},
prism: {
Expand Down
81 changes: 76 additions & 5 deletions docusaurus/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,12 +58,58 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
display: none;
}

/* .navbar {
padding: 0 63px;
} */
.navbar__logo img {
/* Correct for visual imbalance in the logo */
transform: translateY(-2px);
}

.navbar__items--right {
gap: 4px;
}

.header-github-link:hover {
opacity: 0.6;
}

.header-github-link::before {
content: '';
width: 24px;
height: 24px;
display: flex;
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}

.navbar__brand {
margin: 0 75px;
[data-theme='dark'] .header-github-link::before {
background: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='white' d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/%3E%3C/svg%3E")
no-repeat;
}

.navbar .header-button.navbar__link {
background: var(--ifm-color-primary);
color: white !important;
border-radius: 1.5em;
}

.navbar .header-button svg {
display: none;
}

.navbar .header-button:hover {
background: var(--ifm-color-primary-dark);
}

.navbar .navbar__link {
color: var(--ifm-menu-color);
}

.navbar .navbar__link:hover {
color: var(--ifm-color-primary-light);
}

/* Disable external link icons. */
.navbar .navbar__link svg {
display: none;
}

.navbar__link--active {
Expand All @@ -87,6 +133,31 @@ html[data-theme="dark"] .docusaurus-highlight-code-line {
background-color: var(--ifm-hover-overlay);
}

#cloudStatusLink {
display: flex;
gap: 4px;
align-items: center;
}

#cloudStatusLink::before {
content: "";
display: inline-block;
height: 10px;
width: 10px;
border-radius: 100%;
background: #D1D1D1;
transition: background 0.3s ease;
}

#cloudStatusLink.status-up::before,
#cloudStatusLink.status-undermaintenance::before {
background: #00B093;
}

#cloudStatusLink.status-hasissues::before {
background: #ED8936;
}

.codeBlockContainer_I0IT {
box-shadow: none !important;
}
Expand Down
30 changes: 30 additions & 0 deletions docusaurus/src/scripts/cloudStatus.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import ExecutionEnvironment from "@docusaurus/ExecutionEnvironment";

if (ExecutionEnvironment.canUseDOM) {
function updateCloudStatus() {
// Load status from instatus and attach page status as CSS class
// https://instatus.com/help/widgets/custom
fetch("https://status.airbyte.com/summary.json")
.then((resp) => resp.json())
.then((summary) => {
const status = summary.page.status;
const el = document.getElementById("cloudStatusLink");
el.classList.forEach((className) => {
if (className.startsWith("status-")) {
el.classList.remove(className);
}
});
el.classList.add(`status-${status.toLowerCase()}`)
});
}

setInterval(() => {
// Check Cloud status every 10 minutes
updateCloudStatus();
}, 10 * 60 * 1000);

setTimeout(() => {
// Wait 1 execution slot for first status load, since the navigation bar might not have rendered yet
updateCloudStatus();
});
}
Binary file modified docusaurus/static/img/logo-dark.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified docusaurus/static/img/logo-light.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 9751703

Please sign in to comment.