diff --git a/website/docs/unleash-academy/academy.md b/website/docs/unleash-academy/academy.md index c85ec58d05..b775f21ceb 100644 --- a/website/docs/unleash-academy/academy.md +++ b/website/docs/unleash-academy/academy.md @@ -5,25 +5,30 @@ title: Unleash Academy import Tabs from '@theme/Tabs'; import TabItem from '@theme/TabItem'; import Figure from '@site/src/components/Figure/Figure.tsx' +import LearningLinks from '@site/src/components/unleash-academy/Links.jsx' +import Banner from '@site/src/components/unleash-academy/Banner.jsx' + + + + -# Unleash Academy ## Introduction **Unleash Academy is your go-to portal for complimentary self-paced training materials around the Unleash platform.** -Whether you are new to feature flags or a seasoned feature management user and whatever your organizational role, our materials will help onboard you to the full suite of capabilities the Unleash platform has to offer, refresh your existing knowledge, broaden your knowledge to new use cases, and much more! +Whether you are new to feature flags or a seasoned feature management user and whatever your organizational role, our materials will help onboard you to the full suite of capabilities the Unleash platform has to offer, refresh your existing knowledge, broaden your knowledge to new use cases, and much more! -Any Unleash user is welcomed - from Open Source, Pro to Enterprise. +Any Unleash user is welcomed - from Open Source, Pro to Enterprise. -Content is carefully curated to ensure the best, most relevant targeted learning experience. Review the next section on how to use the content to get started today! +Content is carefully curated to ensure the best, most relevant targeted learning experience. Review the next section on how to use the content to get started today! ## Learning Paths and How to use this content Content is built around Learning Paths that are based on common user roles and _personas_ using Unleash today. This helps ensure that you maximize value from the time you spend with Unleash Academy by reviewing content that will help you achieve your goals with Unleash. -**1. Start by identifying the _persona_ most closely associated with your day to day responsibilities.** +**1. Start by identifying the _persona_ most closely associated with your day to day responsibilities.** Example titles are provided for additional guidance: - **Developer** @@ -39,11 +44,11 @@ Example titles are provided for additional guidance: All roles working with Unleash start with the [**Foundational**](foundational.md) training. Then, role dependent courses are offered thereafter. ::: -**2. Now check the course directory or the graphic below to find out which courses apply to your persona!** +**2. Now check the course directory or the graphic below to find out which courses apply to your persona!** ## Course Directory - + ### Directory by Persona @@ -73,18 +78,18 @@ All roles working with Unleash start with the [**Foundational**](foundational.md --- - -Select the tab that corresponds to your persona. A course list is shown - plan to complete the courses in the displayed order, noting the estimated completion times. + +Select the tab that corresponds to your persona. A course list is shown - plan to complete the courses in the displayed order, noting the estimated completion times. :::info See also the following visualization of the learning paths -::: +:::
--- - + ### Directory by Course -- [**Foundational**](foundational.md) - For all roles working with Unleash - Developers, Product owners, Leaders. -- [**Advanced for Developers**](advanced-for-devs.md) - For Developers only, after Foundational content has been reviewed +- [**Foundational**](foundational.md) - For all roles working with Unleash - Developers, Product owners, Leaders. +- [**Advanced for Developers**](advanced-for-devs.md) - For Developers only, after Foundational content has been reviewed - [**Managing Unleash for DevOps/Admins**](managing-unleash-for-devops.md) - For DevOps, Platform leads and Admins only after Foundational content has been reviewed diff --git a/website/docs/unleash-academy/advanced-for-devs.md b/website/docs/unleash-academy/advanced-for-devs.md index 105b2ce0f5..1d91544a5e 100644 --- a/website/docs/unleash-academy/advanced-for-devs.md +++ b/website/docs/unleash-academy/advanced-for-devs.md @@ -3,6 +3,10 @@ id: advanced-for-devs title: Advanced for Developers --- import VideoContent from '@site/src/components/VideoContent.jsx' +import CourseBanner from '@site/src/components/unleash-academy/CourseBanner.jsx' +import LearningLinks from '@site/src/components/unleash-academy/Links.jsx' + + :::info **This Unleash Academy course is for all developer roles working with Unleash, after Foundational content has been reviewed.** @@ -13,24 +17,28 @@ import VideoContent from '@site/src/components/VideoContent.jsx' ::: --- - + ## Learning Objectives -Unlock the full potential of Unleash, streamline your development process and make data-driven decisions with confidence. Learn how Unleash can support your business needs and understand advanced usage like collaboration, data insights and A/B testing, auto-remediation, and integration into third party tools. +Unlock the full potential of Unleash, streamline your development process and make data-driven decisions with confidence. Learn how Unleash can support your business needs and understand advanced usage like collaboration, data insights and A/B testing, auto-remediation, and integration into third party tools. You’ll master advanced use cases and implement best practices - this course will empower you to maximize Unleash's capabilities for your projects. --- - + ## Course Detail - - + + :::info Embedded Player -The full course is shown above. -Click the icon in the top right corner of the embedded player to view your progress as you work through the videos. +The full course is shown above. +Click the icon in the top right corner of the embedded player to view your progress as you work through the videos. Options to go full screen, view the playlist on YouTube or share are also enabled. ::: + +## All courses + + diff --git a/website/docs/unleash-academy/foundational.md b/website/docs/unleash-academy/foundational.md index 20cd844440..27ebe0f61f 100644 --- a/website/docs/unleash-academy/foundational.md +++ b/website/docs/unleash-academy/foundational.md @@ -3,6 +3,10 @@ id: foundational title: Foundational --- import VideoContent from '@site/src/components/VideoContent.jsx' +import CourseBanner from '@site/src/components/unleash-academy/CourseBanner.jsx' +import LearningLinks from '@site/src/components/unleash-academy/Links.jsx' + + :::info **This Unleash Academy course is for all roles working with Unleash - Developers, Product owners, Leaders.** @@ -13,18 +17,18 @@ import VideoContent from '@site/src/components/VideoContent.jsx' ::: --- - -## Learning Objectives -Gain a baseline understanding of why to use Unleash in your development and a general introduction to CI/CD. +## Learning Objectives + +Gain a baseline understanding of why to use Unleash in your development and a general introduction to CI/CD. An understanding of Unleash anatomy and architecture and how the different systems connect together. --- - + **Intro to Feature Flags/Toggles & Unleash** - Feature flags - What they are & why to use them - - What is Unleash? + - What is Unleash? **Anatomy of Unleash** - Covering the various components that exist within the Unleash system and how they interact with each other and with external applications. Components that include but not limited to: projects, environments, variants, feature toggles --> strategies, tokens, tags, context @@ -41,14 +45,18 @@ An understanding of Unleash anatomy and architecture and how the different syste - API tokens (Personal Access Tokens, client, frontend) --- - + ## Course Detail - + - + :::info Embedded Player -The full course is shown above. -Click the icon in the top right corner of the embedded player to view your progress as you work through the videos. +The full course is shown above. +Click the icon in the top right corner of the embedded player to view your progress as you work through the videos. Options to go full screen, view the playlist on YouTube or share are also enabled. -::: \ No newline at end of file +::: + +## All courses + + diff --git a/website/docs/unleash-academy/managing-unleash-for-devops.md b/website/docs/unleash-academy/managing-unleash-for-devops.md index 34c108c168..ef5ab430f7 100644 --- a/website/docs/unleash-academy/managing-unleash-for-devops.md +++ b/website/docs/unleash-academy/managing-unleash-for-devops.md @@ -3,6 +3,10 @@ id: managing-unleash-for-devops title: Managing Unleash for DevOps/Admins --- import VideoContent from '@site/src/components/VideoContent.jsx' +import CourseBanner from '@site/src/components/unleash-academy/CourseBanner.jsx' +import LearningLinks from '@site/src/components/unleash-academy/Links.jsx' + + :::info **This Unleash Academy course is for all DevOps and Admin roles working with Unleash, after Foundational content has been reviewed.** @@ -14,22 +18,26 @@ import VideoContent from '@site/src/components/VideoContent.jsx' --- - -## Learning Objectives + +## Learning Objectives Understand how to deploy Unleash in a secure and performant manner through Edge, maintain and manage users, groups, permissions, and RBAC. --- - + ## Course Detail - + :::info Embedded Player -The full course is shown above. -Click the icon in the top right corner of the embedded player to view your progress as you work through the videos. +The full course is shown above. +Click the icon in the top right corner of the embedded player to view your progress as you work through the videos. Options to go full screen, view the playlist on YouTube or share are also enabled. -::: \ No newline at end of file +::: + +## All courses + + diff --git a/website/src/components/unleash-academy/Banner.jsx b/website/src/components/unleash-academy/Banner.jsx new file mode 100644 index 0000000000..b119df8951 --- /dev/null +++ b/website/src/components/unleash-academy/Banner.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const Component = () => { + return ( +
+
+

+ Gain new skills, earn certifications, train your team, and + advance your career. +

+
    +
  • 100% Free & online
    • +
  • Valuable certification
    • +
+
+ Get certified +
+
+
+ ); +}; + +export default Component; diff --git a/website/src/components/unleash-academy/CourseBanner.jsx b/website/src/components/unleash-academy/CourseBanner.jsx new file mode 100644 index 0000000000..0452543d1a --- /dev/null +++ b/website/src/components/unleash-academy/CourseBanner.jsx @@ -0,0 +1,16 @@ +import React from 'react'; + +const Component = ({ level, description }) => { + return ( +
+ {level} +

{description}

+
    +
  • 100% Free & online
    • +
  • Valuable certification
    • +
+
+ ); +}; + +export default Component; diff --git a/website/src/components/unleash-academy/Links.jsx b/website/src/components/unleash-academy/Links.jsx new file mode 100644 index 0000000000..c5c122bfa5 --- /dev/null +++ b/website/src/components/unleash-academy/Links.jsx @@ -0,0 +1,66 @@ +import React from 'react'; +import Link from '@docusaurus/Link'; + +const LinkBox = ({ level, header, description, link }) => { + return ( +
+
+ {level} +

{header}

+
+

{description}

+ + Start learning + +
+ ); +}; + +const links = [ + { + level: 'Beginners', + header: 'Foundational', + description: + 'For all roles working with Unleash - Developers, Product owners, Leaders', + link: 'foundational', + }, + { + level: 'Advanced', + header: 'Advanced for Developers', + description: + 'For Developers only, after Foundational content has been reviewed', + link: 'advanced-for-devs', + }, + { + level: 'Advanced', + header: 'Managing Unleash for DevOps/Admins', + description: + 'For DevOps, Platform leads and Admins only after Foundational content has been reviewed', + link: 'managing-unleash-for-devops', + }, +]; + +const Component = () => { + return ( +
+
    + {links.map(({ level, header, description, link }) => ( +
  • + +
    • + ))} +
+
+ ); +}; + +export default Component; diff --git a/website/src/css/custom.css b/website/src/css/custom.css index 05c27a13cc..b031103840 100644 --- a/website/src/css/custom.css +++ b/website/src/css/custom.css @@ -7,7 +7,8 @@ /* You can override the default Infima variables here. */ :root { - --unleash-color-purple: #635dc5; + --unleash-logo-purple: #635dc5; + --unleash-color-purple: var(--unleash-logo-purple); --unleash-color-gray: #ecebeb; --unleash-color-green: #1a4049; @@ -211,6 +212,270 @@ li.theme-doc-sidebar-item-category-level-1 > div::before { /* end video content container */ +/* Unleash academy content */ + +/* breakpoints: + show wide: >=1247 + show narrow: 997-1246 + show wide: 711-996 + show narrow: <=710 +*/ + +/* begin certification links */ + +html[data-theme='light'] .links-container { + --color-purple: var(--unleash-color-purple); +} + +html[data-theme='dark'] .links-container { + --color-purple: rgb(76, 73, 146); +} + +.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); +} + +.links-container li:has(article) { + margin: 0; + padding: 0; +} + +.links-container article.advanced { + background-image: url('/img/unleash-academy/advanced-pixels.svg'); +} + +.links-container article.beginners { + background-image: url('/img/unleash-academy/beginner-pixels.svg'); +} + +.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%; +} + +.links-container article .level { + border: 2px solid var(--ifm-link-color); + border-radius: 60px; + color: var(--ifm-link-color); + padding-inline: .5em; +} + +.links-container article .header > * + * { + margin-block-start: calc(var(--ifm-spacing-vertical) * .5); +} + +.links-container article p { + font-size: var(--unleash-font-size-smaller); +} + +.links-container article a { + border-radius: inherit; + width: 100%; + background: var(--color-purple); + color: white; + text-align: center; + padding: calc(var(--ifm-spacing-horizontal) * .5); +} + +@media (min-width: 711px) and (max-width: 996px), (min-width: 1247px) { + .unleash-academy-links { + display: grid; + grid-template-columns: repeat(3, 1fr); + } + + .links-container article { + height: 100%; + } +} + +/* End of certification links styles */ + +/* Styles for .banner-container */ +.banner-container { + --button-color: var(--unleash-logo-purple); + --unleash-academy-logo-width: 85px; + --banner-padding: calc(var(--ifm-spacing-vertical) * 3); + --banner-font-color: #000; + + 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); +} + +.banner-container .banner { + 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); +} + +.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; +} + +.banner-container .unleash-action-button { + grid-area: button; + 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) * .5); +} + +.banner-container h3 { + font-weight: normal; + font-size: 1.4em; + grid-area: header; +} + +.banner-container .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) { + .banner-container .banner { + grid-template-areas: "header logo" "bullets logo" "button logo"; + grid-template-columns: 480px auto; + } + + .unleash-academy-banner-list { + flex-flow: row; + } + + .banner-container .unleash-action-button { + width: 240px; + } + + .banner-container .small-logo { + display: none; + } + + .banner-container .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 */ + +/* Styles for .course-banner-container */ +.course-banner-container { + --banner-padding: calc(var(--ifm-spacing-vertical) * 3); + --banner-font-color: #000; + + margin-block-start: var(--ifm-spacing-vertical); + margin-block-end: var(--ifm-spacing-vertical); + border: var(--ifm-global-border-width) solid var(--ifm-color-emphasis-200); + padding: var(--banner-padding); + border-radius: var(--ifm-global-radius); + background-position: top right; + background-repeat: no-repeat; + overflow: hidden; +} + +html[data-theme='light'] .course-banner-container { + background-color: #F1F0FC; + color: var(--banner-font-color); +} + +.course-banner-container.beginners { + background-image: url('/img/unleash-academy/beginner-pixels.svg'); + background-size: 108px; +} + +.course-banner-container.advanced { + background-image: url('/img/unleash-academy/advanced-pixels.svg'); + background-size: 108px; +} + +.course-banner-container > * + * { + margin-top: var(--ifm-spacing-vertical); +} + +.course-banner-container .level { + border: 2px solid; + border-radius: 60px; + padding-inline: .5em; + text-transform: capitalize; +} + +html[data-theme='light'] .course-banner-container .level { + border-color: var(--unleash-logo-purple); + color: var(--unleash-logo-purple); +} + +html[data-theme='dark'] .course-banner-container .level { + border-color: var(--ifm-link-color); + color: var(--ifm-link-color); +} + +.course-banner-container p { + font-size: 1.4em; +} /* docusaurus-plugin-openapi-docs styling Taken from diff --git a/website/static/img/unleash-academy/academy-logo.svg b/website/static/img/unleash-academy/academy-logo.svg new file mode 100644 index 0000000000..f33c31767c --- /dev/null +++ b/website/static/img/unleash-academy/academy-logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/website/static/img/unleash-academy/advanced-pixels.svg b/website/static/img/unleash-academy/advanced-pixels.svg new file mode 100644 index 0000000000..c5a4d5d9b8 --- /dev/null +++ b/website/static/img/unleash-academy/advanced-pixels.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/website/static/img/unleash-academy/banner-bg-pixels.svg b/website/static/img/unleash-academy/banner-bg-pixels.svg new file mode 100644 index 0000000000..0e4a98111d --- /dev/null +++ b/website/static/img/unleash-academy/banner-bg-pixels.svg @@ -0,0 +1,63 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/website/static/img/unleash-academy/beginner-pixels.svg b/website/static/img/unleash-academy/beginner-pixels.svg new file mode 100644 index 0000000000..7e5414781f --- /dev/null +++ b/website/static/img/unleash-academy/beginner-pixels.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/website/static/img/unleash-academy/bullet-check.svg b/website/static/img/unleash-academy/bullet-check.svg new file mode 100644 index 0000000000..78724db1fe --- /dev/null +++ b/website/static/img/unleash-academy/bullet-check.svg @@ -0,0 +1,8 @@ + + + + + + + +