diff --git a/docs/index.mdx b/docs/index.mdx index 70814d9325a..68a8d33f3e6 100644 --- a/docs/index.mdx +++ b/docs/index.mdx @@ -18,7 +18,7 @@ This API reference includes: ### API Support -integration@swan.io +Contact your Swan technical contact, or submit a ticket through your Dashboard. ### Sales team diff --git a/docusaurus.config.js b/docusaurus.config.js index 2559a146926..21bfcd6bad2 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -61,14 +61,18 @@ module.exports = { { position: "right", href: "https://explorer.swan.io/", - label: "API Explorer", + label: "API Explorer", + className: "swan-api-explorer" }, { - position: "right", - href: "https://docs.swan.io/changelog", - label: "Changelog", - target: "_self", - }, + type: "html", + position: "right", + value: `
+ Changelog +
+ Preview +
` + } ], }, // footer: { @@ -102,6 +106,9 @@ module.exports = { [ "@docusaurus/preset-classic", { + googleTagManager: { + containerId: 'GTM-NWPK43X', + }, docs: { routeBasePath: "/", sidebarPath: require.resolve("./sidebars.js"), diff --git a/src/components/SidebarAutoScroll/index.js b/src/components/SidebarAutoScroll/index.js new file mode 100644 index 00000000000..185997295e2 --- /dev/null +++ b/src/components/SidebarAutoScroll/index.js @@ -0,0 +1,22 @@ +import { useEffect } from "react"; + +export default function SidebarAutoScroll() { + useEffect(() => { + const activeLinks = document.querySelectorAll(".menu__link--active"); + // Take the last in selection, as every ancestor link is also marked as active + const deepestActiveLink = activeLinks[activeLinks.length - 1]; + if (deepestActiveLink == null) { + return; + } + const menu = deepestActiveLink.closest(".menu"); + + if (menu != null) { + const activeLinkRect = deepestActiveLink.getBoundingClientRect(); + const menuRect = menu.getBoundingClientRect(); + menu.scrollTop = + activeLinkRect.top - menuRect.height / 2 - activeLinkRect.height / 2; + } + }, []); + + return null; +} diff --git a/src/css/custom.css b/src/css/custom.css index ce42ad81e90..aa9c156a65e 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -106,13 +106,13 @@ body { } .markdown h2 { - font-size: 20px; + font-size: 24px; font-weight: 600; } .markdown h3 { font-size: 20px; - font-weight: 400; + font-weight: 600; } .docusaurus-highlight-code-line { @@ -130,10 +130,6 @@ pre { line-height: 1.7; } -/* .menu__list { - transition: none !important; - } */ - .graphiql-container { flex-grow: 1; } @@ -243,7 +239,128 @@ pre { } } -.navbar__link[href="https://docs.swan.io/changelog"] svg -{ - display: none; +.explorer-badge { + display: inline-flex; + align-items: center; + background: #e9e0f2; + border: 1px solid #c0b3e1; + border-bottom: none; + border-radius: 6px 6px 0 0; + padding: 8px 32px 8px 16px; + font-size: 14px; + color: var(--ifm-color-primary); + text-decoration: none; + font-weight: 600; + margin-left: 1rem; + cursor: pointer; + transition: all 0.2s ease; +} + +.explorer-badge:hover { + background: var(--ifm-navbar-link-hover-color); + color: white; + text-decoration: none; + border-color: var(--ifm-color-primary); +} + +.explorer-badge::before { + content: "🔍"; + margin-right: 8px; +} + +.tabs-container { + background: #fff; + border-radius: 10px; + box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04); + margin: 24px 0; + padding: 0 24px 24px 24px; + border: 1px solid #edeff3; } + +.tabs { + background: #eff3f9; + margin: 0 -24px; + padding: 3px 3px 0; + border-radius: 8px 8px 0 0; +} + +.tabs__item { + padding: 0.75em 1.5em; +} + +.tabs__item--active { + background: #fff; + color: var(--ifm-color-primary); + border-bottom: 2px solid var(--ifm-color-primary); + font-weight: 600; +} + +html[data-theme="dark"] .tabs-container { + background: #1e293b; + border-bottom-color: #475569; +} + +html[data-theme="dark"] .tabs { + background: #334155; +} + +html[data-theme="dark"] .tabs__item--active { + background: #1e293b; +} + +.navbar__link.swan-api-explorer, +.swan-unified-nav { + padding: 0.5rem 1rem; + background: #f1f5f9; + border: 1px solid #cbd5e1; + border-radius: 8px; + font-weight: 500; + transition: all 0.65s ease; +} + +.navbar__link.swan-api-explorer:hover, +.swan-unified-nav:hover { + background: none; + border-color: #94a3b8; +} + +.swan-unified-nav { + display: flex; + align-items: center; + padding: 0; + overflow: hidden; +} + +.swan-unified-nav a { + padding: 0.5rem 1rem; + color: inherit; + text-decoration: none; + transition: background-color 0.2s; + position: relative; +} + +.swan-unified-nav a::after { + content: ''; + position: absolute; + bottom: 0; + left: 0; + width: 100%; + height: 2px; + background: #94a3b8; + transform: scaleX(0); + transition: transform 0.2s ease; +} + +.swan-unified-nav a:hover { + opacity: 0.8; +} + +.swan-unified-nav a:hover::after { + transform: scaleX(1); +} + +.swan-unified-nav .separator { + width: 1px; + height: 20px; + background: #cbd5e1; +} \ No newline at end of file diff --git a/src/theme/Root.js b/src/theme/Root.js new file mode 100644 index 00000000000..63583944bda --- /dev/null +++ b/src/theme/Root.js @@ -0,0 +1,11 @@ +import React from 'react'; +import SidebarAutoScroll from '../components/SidebarAutoScroll'; + +export default function Root({ children }) { + return ( + <> + {children} + + + ); +} \ No newline at end of file