New docs theme ✨🎨

website/docusaurus.config.ts

@@ -67,6 +67,7 @@ const config: Config = {
             indexName: 'getunleash',
         },
         navbar: {
+            style: 'dark',
             logo: {
                 alt: 'Unleash logo',
                 src: 'img/unleash_logo_white.svg',
@@ -164,10 +165,15 @@ const config: Config = {
                     value: '<span class="navbar-separator"></span>',
                 },
                 {
-                    href: 'https://github.com/Unleash/unleash',
+                    type: 'html',
                     position: 'right',
-                    className: 'header-github-link',
-                    'aria-label': 'Unleash GitHub repository',
+                    value: `<a
+href="https://github.com/Unleash/unleash"
+aria-label="Unleash GitHub repository"
+class="header-github-link"
+>
+<svg width="28px" height="28px" viewBox="0 0 21 20"><path fill="currentColor" d="M10.537 1.833c-4.602 0-8.333 3.544-8.333 7.917 0 4.373 3.73 7.917 8.333 7.917s8.334-3.544 8.334-7.917c0-4.373-3.73-7.917-8.334-7.917Zm0 1.584c3.676 0 6.667 2.842 6.667 6.333 0 .371-.039.736-.104 1.089a4.345 4.345 0 0 0-.86-.1 6.375 6.375 0 0 0-.859.075 2.76 2.76 0 0 0 .156-.89c0-.761-.39-1.47-1.015-2.054.172-.61.342-1.655-.104-2.078a2.762 2.762 0 0 0-2.084.94 5.684 5.684 0 0 0-1.276-.149 5.91 5.91 0 0 0-1.64.248l.156-.124s-.733-.965-2.083-.965c-.472.452-.258 1.596-.079 2.177-.638.579-1.041 1.262-1.041 2.004 0 .26.065.507.13.742-.231-.024-1.064-.098-1.406-.098-.303 0-.772.067-1.146.148a5.912 5.912 0 0 1-.078-.965c0-3.491 2.991-6.333 6.666-6.333Zm-5.442 7.347c.329 0 1.328.112 1.458.124.016.043.033.084.052.124-.358-.031-1.051-.078-1.51-.025-.306.034-.697.14-1.042.223-.026-.1-.059-.195-.078-.297.365-.074.843-.149 1.12-.149Zm11.146.174c.332.003.634.055.833.098-.01.053-.04.096-.052.149a5.042 5.042 0 0 0-.964-.124c-.195-.003-.508.007-.781.025.013-.025.016-.05.026-.074.283-.037.645-.078.938-.074Zm-10.625.222c.468.003.908.034 1.093.05.437.773 1.319 1.345 2.683 1.583a2.621 2.621 0 0 0-.86.718c-.195.015-.4.024-.599.024-.58 0-.94-.492-1.25-.915-.312-.424-.696-.47-.911-.495-.218-.025-.293.093-.182.173.634.464.862 1.015 1.12 1.51.23.445.715.692 1.25.692h.103a1.33 1.33 0 0 0-.026.248v.865c-1.923-.739-3.388-2.3-3.932-4.23.342-.08.726-.164 1.016-.198.133-.016.302-.028.495-.025Zm10.442.1c.375.008.707.076.912.123-.46 1.639-1.592 3.003-3.1 3.835v-.47c0-.675-.56-1.54-1.353-1.955 1.318-.229 2.177-.776 2.63-1.51.316-.02.687-.03.911-.024Zm-5.104 3.24a.41.41 0 0 1 .417.396v1.138c-.274.034-.55.05-.834.05v-1.188a.41.41 0 0 1 .417-.396Zm-1.667.792a.41.41 0 0 1 .417.396v.346a7.438 7.438 0 0 1-.833-.148v-.198a.41.41 0 0 1 .416-.396Zm3.334 0c.202 0 .377.139.416.321-.27.106-.546.201-.833.273v-.198a.41.41 0 0 1 .417-.396Z"/></svg>
+</a>`,
                 },
             ],
         },

website/global.js

@@ -1,3 +1,3 @@
 if(typeof document !== 'undefined') {
   !function(){var e,t,n;e="5fe670e3422303a",t=function(){Reo.init({clientID:"5fe670e3422303a"})},(n=document.createElement("script")).src="https://static.reo.dev/"+e+"/reo.js",n.async=!0,n.onload=t,document.head.appendChild(n)}();
-}
+}

website/src/css/academy.css

@@ -0,0 +1,257 @@
+/* Unleash academy content */
+
+/* breakpoints:
+   show wide: >=1247
+   show narrow: 997-1246
+   show wide: 711-996
+   show narrow: <=710
+*/
+
+/* shared academy styles */
+
+.unleash-academy-level-badge {
+    border: 2px solid;
+    border-radius: 60px;
+    padding-inline: 0.5em;
+    text-transform: capitalize;
+}
+
+html[data-theme="light"] .unleash-academy-level-badge {
+    border-color: var(--unleash-logo-purple);
+    color: var(--unleash-logo-purple);
+}
+
+html[data-theme="dark"] .unleash-academy-level-badge {
+    border-color: var(--ifm-link-color);
+    color: var(--ifm-link-color);
+}
+
+.unleash-academy-level-container.advanced {
+    background-image: url("/img/unleash-academy/advanced-pixels.svg");
+}
+
+.unleash-academy-level-container.beginners {
+    background-image: url("/img/unleash-academy/beginner-pixels.svg");
+}
+
+.unleash-academy-banner {
+    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
+    --unleash-academy-logo-width: 85px;
+    --banner-padding: calc(var(--ifm-spacing-vertical) * 3);
+    --banner-font-color: #000;
+    --button-color: var(--unleash-logo-purple);
+
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
+    position: relative;
+    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
+    padding: var(--banner-padding);
+    border-radius: var(--ifm-global-radius);
+    background-color: #f1f0fc;
+    background-image: url("/img/unleash-academy/banner-bg-pixels.svg");
+    background-position: top right;
+    background-repeat: no-repeat;
+    overflow: hidden;
+    color: var(--banner-font-color);
+}
+
+html[data-theme="dark"] .course-banner-container {
+    background-color: inherit;
+    color: inherit;
+}
+
+.academy-banner-main-text {
+    font-weight: normal;
+    font-size: 1.4em;
+}
+
+.unleash-academy-banner-list {
+    grid-area: bullets;
+    display: flex;
+    flex-flow: column;
+    gap: calc(var(--ifm-spacing-horizontal) * 2);
+    padding-inline-start: 0;
+}
+
+.unleash-academy-banner-list > li {
+    font-weight: bold;
+    list-style-type: none;
+    background-image: url("/img/unleash-academy/bullet-check.svg");
+    background-repeat: no-repeat;
+    background-position: left center;
+    padding-left: 30px;
+}
+
+.unleash-academy-banner-list > li::marker {
+    height: 100%;
+}
+
+.unleash-academy-banner-list > li + li {
+    margin-block-start: 0;
+}
+
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
+    .unleash-academy-banner-list {
+        flex-flow: row;
+    }
+}
+
+.unleash-action-button {
+    --button-color: #6c65e5;
+    --button-hover-color: #615bc2;
+    display: block;
+    border-radius: var(--ifm-global-radius);
+    width: 100%;
+    background: var(--button-color);
+    color: white;
+    text-align: center;
+    padding: calc(var(--ifm-spacing-horizontal) * 0.5);
+}
+
+.unleash-action-button:hover {
+    background: var(--button-hover-color);
+    color: white;
+    text-decoration: none;
+}
+
+/* begin certification links */
+.unleash-academy-links-container {
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: var(--ifm-spacing-vertical);
+    --button-background-color: var(--color-purple);
+    --border-color: var(--ifm-color);
+}
+
+.unleash-academy-links {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-flow: column;
+    width: 100%;
+    gap: var(--ifm-spacing-vertical);
+}
+
+.unleash-academy-links-container li:has(article) {
+    margin: 0;
+    padding: 0;
+}
+
+.unleash-academy-links-container article {
+    border-radius: var(--ifm-global-radius);
+    border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200);
+    padding: calc(var(--ifm-spacing-vertical) * 2);
+    display: grid;
+    grid-template-rows: min-content auto min-content;
+    background-position: top right;
+    background-repeat: no-repeat;
+    height: 100%;
+}
+
+.unleash-academy-links-container article .header > * + * {
+    margin-block-start: calc(var(--ifm-spacing-vertical) * 0.5);
+}
+
+.unleash-academy-links-container article p {
+    font-size: var(--unleash-font-size-smaller);
+}
+
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
+    .unleash-academy-links {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+    }
+
+    .unleash-academy-links-container article {
+        height: 100%;
+    }
+}
+
+/* End of certification links styles */
+
+/* Specific styles for the main Unleash academy banner */
+.academy-general-banner-content {
+    display: grid;
+    grid-template-areas: "header logo" "bullets bullets" "button button";
+    grid-template-columns: auto var(--unleash-academy-logo-width);
+    gap: var(--ifm-spacing-horizontal);
+}
+
+.academy-general-banner-content .unleash-action-button {
+    grid-area: button;
+}
+
+.academy-general-banner .academy-banner-main-text {
+    grid-area: header;
+}
+
+.academy-general-banner .small-logo {
+    grid-area: logo;
+    background-image: url("/img/unleash-academy/academy-logo.svg");
+    background-repeat: no-repeat;
+    background-position: center;
+    width: 100%;
+    aspect-ratio: 1;
+    background-size: contain;
+}
+
+@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) {
+    .academy-general-banner-content {
+        grid-template-areas: "header logo" "bullets logo" "button logo";
+        grid-template-columns: 480px auto;
+    }
+
+    .academy-general-banner-content .unleash-action-button {
+        width: 240px;
+    }
+
+    .academy-general-banner .small-logo {
+        display: none;
+    }
+
+    .academy-general-banner .big-logo {
+        position: absolute;
+        background-image: url("/img/unleash-academy/academy-logo.svg");
+        bottom: 0;
+        right: 40px;
+        width: 200px;
+        height: 100%;
+        background-repeat: no-repeat;
+        background-position-x: left;
+        background-position-y: 190%;
+    }
+}
+
+/* end banner */
+
+/* course banner-specific styling */
+.course-banner-container.beginners {
+    background-size: 108px;
+}
+
+.course-banner-container.advanced {
+    background-size: 108px;
+}
+
+.course-banner-container > * + * {
+    margin-block-start: var(--ifm-spacing-vertical);
+    margin-block-end: 0;
+}
+
+.unleash-academy-level-badge {
+    border: 2px solid;
+    border-radius: 60px;
+    padding-inline: 0.5em;
+    text-transform: capitalize;
+}
+
+html[data-theme="light"] .unleash-academy-level-badge {
+    border-color: var(--unleash-logo-purple);
+    color: var(--unleash-logo-purple);
+}
+
+html[data-theme="dark"] .unleash-academy-level-badge {
+    border-color: var(--ifm-link-color);
+    color: var(--ifm-link-color);
+}
+

website/src/css/api-docs.css

@@ -0,0 +1,72 @@
+/* docusaurus-plugin-openapi-docs styling
+
+Taken from
+https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/blob/02922a6ad6d635373e01409dac8c17a88da2b72e/demo/src/css/custom.css#L45-L9
+
+Based on this thread:
+https://github.com/PaloAltoNetworks/docusaurus-openapi-docs/issues/177
+
+*/
+
+/* Sidebar Method labels */
+.api-method > .menu__link {
+    align-items: center;
+    justify-content: start;
+}
+
+.api-method > .menu__link::before {
+    width: 50px;
+    height: 20px;
+    font-size: 12px;
+    line-height: 20px;
+    text-transform: uppercase;
+    font-weight: 600;
+    border-radius: 0.25rem;
+    border: 1px solid;
+    border-inline-start-width: 5px;
+    margin-right: var(--ifm-spacing-horizontal);
+    text-align: center;
+    flex-shrink: 0;
+}
+
+.get > .menu__link::before {
+    content: "get";
+    background-color: var(--ifm-color-info-contrast-background);
+    color: var(--ifm-color-info-contrast-foreground);
+    border-color: var(--ifm-color-info-dark);
+}
+
+.post > .menu__link::before {
+    content: "post";
+    background-color: var(--ifm-color-success-contrast-background);
+    color: var(--ifm-color-success-contrast-foreground);
+    border-color: var(--ifm-color-success-dark);
+}
+
+.delete > .menu__link::before {
+    content: "del";
+    background-color: var(--ifm-color-danger-contrast-background);
+    color: var(--ifm-color-danger-contrast-foreground);
+    border-color: var(--ifm-color-danger-dark);
+}
+
+.put > .menu__link::before {
+    content: "put";
+    background-color: var(--ifm-color-warning-contrast-background);
+    color: var(--ifm-color-warning-contrast-foreground);
+    border-color: var(--ifm-color-warning-dark);
+}
+
+.patch > .menu__link::before {
+    content: "patch";
+    background-color: var(--ifm-color-success-contrast-background);
+    color: var(--ifm-color-success-contrast-foreground);
+    border-color: var(--ifm-color-success-dark);
+}
+
+.head > .menu__link::before {
+    content: "head";
+    background-color: var(--ifm-color-secondary-contrast-background);
+    color: var(--ifm-color-secondary-contrast-foreground);
+    border-color: var(--ifm-color-secondary-dark);
+}