diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js index 7973471c..970651c5 100644 --- a/website/docusaurus.config.js +++ b/website/docusaurus.config.js @@ -29,7 +29,7 @@ const resources = [ }, { label: 'FAQ', - href: 'https://docs.litmuschaos.io/docs/faq-general/' + href: 'https://docs.litmuschaos.io/docs/faq/' }, { label: 'Issues', @@ -51,6 +51,14 @@ module.exports = { apiKey: 'b388bb42bbdfcd9c02f0eb32c6ee9fa4', indexName: 'litmuschaos' }, + announcementBar: { + id: 'support_us', + content: + 'Star our repository on GitHub to stay updated with new features and contribute to our project!', + backgroundColor: '#d8dbfa', + textColor: '#5b44ba', + isCloseable: true, + }, navbar: { title: 'Litmus Docs', logo: { @@ -59,10 +67,6 @@ module.exports = { src: 'img/litmus-light-icon.svg' }, items: [ - { - type: 'docsVersion', - position: 'right' - }, { activeBasePath: 'Version', label: 'Versions', @@ -84,6 +88,15 @@ module.exports = { }, ] }, + { + type: 'docsVersion', + position: 'left' + + }, + { + type: 'search', + position: 'right', + }, { label: 'APIs', to: 'https://litmuschaos.github.io/litmus/graphql/v3.11.0/api.html', @@ -95,23 +108,33 @@ module.exports = { position: 'right' }, { - to: 'https://github.com/litmuschaos/litmus', - label: 'GitHub', + to: 'https://hub.litmuschaos.io/', + label: 'ChaosHub', position: 'right' + } , + { + to: 'https://github.com/litmuschaos/litmus', + position: 'right', + label: 'Try Litmus', + className: 'try-button', + 'aria-label': 'Try Litmus', }, { - to: 'https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN', - label: 'Slack', - position: 'right' + href: 'https://github.com/litmuschaos/litmus', + className: 'github-button', + position: 'right', + 'aria-label': 'GitHub repository', }, { - to: 'https://hub.litmuschaos.io/', - label: 'ChaosHub', - position: 'right' + href: 'https://app.slack.com/client/T09NY5SBT/CNXNB0ZTN', + className: 'slack-button', + position: 'right', + 'aria-label': 'Slack', } + ] }, - colorMode: { + colorMode: { // "light" | "dark" defaultMode: 'light', diff --git a/website/sidebars.js b/website/sidebars.js index a5e33c47..b037b32e 100644 --- a/website/sidebars.js +++ b/website/sidebars.js @@ -1,7 +1,12 @@ module.exports = { docs: [ { - Introduction: [ + type: 'category', + label: 'Introduction', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: [ 'introduction/what-is-litmus', 'introduction/features', 'introduction/usage', @@ -10,10 +15,50 @@ module.exports = { ] }, { - 'Getting Started': ['getting-started/resources', 'getting-started/installation'] + type: 'category', + label: 'Getting Started', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: [ + 'getting-started/installation', + { + type: 'category', + label: 'Concepts', + items: [ + 'concepts/overview', + 'concepts/chaos-infrastructure', + 'concepts/chaoshub', + 'concepts/chaos-workflow', + 'concepts/probes', + 'concepts/user-management', + 'concepts/projects', + 'concepts/teaming', + 'concepts/gitops', + 'concepts/oauth-dex-concept', + 'concepts/visualize-experiment' + ] + }, + { + type: 'category', + label: 'Tutorial', + items: [ + 'tutorials/overview', + 'tutorials/podtato-head' + ] + }, + 'developer-guide/chaoscenter-developer-guide', + 'glossary', + 'getting-started/resources' + ] }, { - Architecture: [ + type: 'category', + label: 'Architecture', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: [ 'architecture/overview', 'architecture/architecture-summary', 'architecture/chaos-control-plane', @@ -22,22 +67,12 @@ module.exports = { ] }, { - Concepts: [ - 'concepts/overview', - 'concepts/chaos-infrastructure', - 'concepts/chaoshub', - 'concepts/chaos-workflow', - 'concepts/probes', - 'concepts/user-management', - 'concepts/projects', - 'concepts/teaming', - 'concepts/gitops', - 'concepts/oauth-dex-concept', - 'concepts/visualize-experiment' - ] - }, - { - 'User Guides': [ + type: 'category', + label: 'User Guides', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: [ 'user-guides/overview', { 'Advanced Installation': [ @@ -107,20 +142,32 @@ module.exports = { ] }, { - 'Developer Guide': ['developer-guide/chaoscenter-developer-guide'] + type: 'category', + label: 'Litmusctl', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: ['litmusctl/installation', 'litmusctl/litmusctl-usage'] }, { - Litmusctl: ['litmusctl/installation', 'litmusctl/litmusctl-usage'] + type: 'category', + label: 'Integrations', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: ['integrations/prometheus', 'integrations/grafana', 'integrations/backstage'] }, { - Integrations: ['integrations/prometheus', 'integrations/grafana', 'integrations/backstage'] - }, - { - Tutorials: ['tutorials/overview', 'tutorials/podtato-head'] - }, - 'troubleshooting', - 'best-practices', - 'glossary', - 'faq' + type: 'category', + label: 'Reference', + className: 'category-as-header', + collapsed: false, + collapsible: false, + items: [ + 'troubleshooting', + 'best-practices', + 'faq' + ] + } ] } diff --git a/website/src/css/global.css b/website/src/css/global.css index c3679f2f..3f42ec7b 100644 --- a/website/src/css/global.css +++ b/website/src/css/global.css @@ -1,5 +1,168 @@ @import url('https://fonts.googleapis.com/css2?family=Work+Sans&display=swap'); + +:root { + --ifm-menu-font-size: 15px; + --ifm-menu-color-background-active: #8890992E; + --ifm-link-menu-color-background-hover: #8890992E; + --ifm-litmus-light: #7b84ea; + --ifm-litmus-dark: #5b44ba; +} + +.table-of-contents { + max-width: 280px !important; +} + +.navbar { + padding: 0px 24px; +} + +/* Side bar Styles */ + +.category-as-header .menu__list { + font-size: 16px; +} + +.category-as-header .menu__link{ + padding-left: 8px; +} +.category-as-header>.menu__list-item-collapsible:first-child a { + font-size: 18px; + font-style: normal; + font-weight: 600 !important; + line-height: 20px; + margin-top: 20px; + color: #1B1F24; + padding-left: 15px; +} + +[data-theme='dark'] .category-as-header>.menu__list-item-collapsible:first-child a { + color: white; +} + +.category-as-header .menu__link--active { + color: var(--ifm-litmus-dark); +} + +[data-theme='dark'] .category-as-header .menu__link--active { + color: var(--ifm-litmus-light); +} + + +.navbar__link, .navbar__link:hover { + color: #1B1F24; +} + +[data-theme='dark'] .navbar__link { + color: white; +} + +.try-button { + color: white; + background-color: var(--ifm-litmus-dark); + text-decoration: none; + font-size: 12px; + font-weight: 600; + border-radius: 6px; + margin: 0px 6px !important; + box-shadow: 0px 0px 1px 0px rgba(48, 50, 51, 0.05), + 0px 1px 1px 0px rgba(48, 50, 51, 0.10); + border: 1px solid var(--ifm-litmus-dark); + display: flex; + justify-content: center; + align-items: center; + padding: 5px 13px !important; + transition: background-color 0.2s ease; +} + + +.try-button:hover { + background-color: var(--ifm-litmus-dark); + color: white; +} + +@media screen and (max-width: 996px) { + .try-button { + display: none !important; + } +} + + +.category-as-header .menu__link--active:not(.menu__link--sublist) { + background-color: var(--ifm-menu-color-background-active); +} + +[data-theme='dark'] .category-as-header .menu__link--active:not(.menu__link--sublist) { + color: var(--ifm-litmus-light); +} + +.category-as-header .menu__link:not(.menu__link--sublist) { + max-width: 94%; +} + +.category-as-header>.menu__list-item-collapsible:first-child:hover { + background-color: transparent; +} + +.github-button::before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background-color: var(--ifm-navbar-link-color); + mask-image: 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"); + transition: background-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.slack-button::before { + content: ''; + width: 24px; + height: 24px; + display: flex; + background-image: url('../../static/img/Socials/slack.png'); + background-size: contain; + background-repeat: no-repeat; + background-position: center; + transition: background-color var(--ifm-transition-fast) + var(--ifm-transition-timing-default); +} + +.DocSearch-Button { + border: 1px solid #CCD1D5 !important; + border-radius: 6px !important; + background: transparent !important; + height: 32px !important; + width: 250px !important; +} + +.DocSearch-Button-Key { + border: none !important; + box-shadow: none !important; + background: transparent !important; + color: #6A727C !important; + font: inherit !important; + padding: 0 !important; +} + +.DocSearch-Search-Icon { + height: 16px; + width: 16px; + color: #6A727C !important +} + +.DocSearch-Button-Placeholder { + font-size: 12px; + color: #6A727C +} + +.navbarSearchContainer_Bca1 { + border-right: 1px solid #E4E7EB !important; + padding: 4px 16px !important; + margin-right: 8px; +} + + html { font-family: 'Work Sans', sans-serif; } diff --git a/website/static/img/Socials/slack.png b/website/static/img/Socials/slack.png new file mode 100644 index 00000000..edce0d20 Binary files /dev/null and b/website/static/img/Socials/slack.png differ