Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-28 00:17:12 +01:00
Code Issues Projects Releases Wiki Activity

docs: add academy links and banners (#6083)

Browse Source 
This PR adds academy links and banners. Supersedes #6077
This commit is contained in:
Thomas Heartman 2024-01-31 18:18:21 +09:00 committed by GitHub
parent ccf165568a
commit bc95ed654f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
13 changed files with 539 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
website/docs/unleash-academy/academy.md
View File

@ -5,8 +5,13 @@ 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'
<Banner/>
<LearningLinks />
# Unleash Academy
## Introduction

8
website/docs/unleash-academy/advanced-for-devs.md
View File

@ -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'
<CourseBanner level='advanced' description='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.'/>
:::info
**This Unleash Academy course is for all developer roles working with Unleash, after Foundational content has been reviewed.**
@ -34,3 +38,7 @@ 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
<LearningLinks />

8
website/docs/unleash-academy/foundational.md
View File

@ -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'
<CourseBanner level='beginners' description='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.'/>
:::info
**This Unleash Academy course is for all roles working with Unleash - Developers, Product owners, Leaders.**
@ -52,3 +56,7 @@ 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
<LearningLinks />

8
website/docs/unleash-academy/managing-unleash-for-devops.md
View File

@ -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'
<CourseBanner level='advanced' description='Understand how to deploy Unleash in a secure and performant manner through Edge, maintain and manage users, groups, permissions, and RBAC.'/>
:::info
**This Unleash Academy course is for all DevOps and Admin roles working with Unleash, after Foundational content has been reviewed.**
@ -33,3 +37,7 @@ 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
<LearningLinks />

23
website/src/components/unleash-academy/Banner.jsx Normal file
View File

@ -0,0 +1,23 @@
import React from 'react';
const Component = () => {
return (
<div className='banner-container'>
<div className='banner'>
<h3>
Gain new skills, earn certifications, train your team, and
advance your career.
</h3>
<ul className="unleash-academy-banner-list">
<li>100% Free & online</li>
<li>Valuable certification</li>
</ul>
<div className='small-logo'></div>
<span className='unleash-action-button'>Get certified</span>
</div>
<div className='big-logo'></div>
</div>
);
};
export default Component;

16
website/src/components/unleash-academy/CourseBanner.jsx Normal file
View File

@ -0,0 +1,16 @@
import React from 'react';
const Component = ({ level, description }) => {
return (
<div className={ `course-banner-container ${level.toLowerCase()}`}>
<span className='level'>{level}</span>
<p>{description}</p>
<ul className="unleash-academy-banner-list">
<li>100% Free & online</li>
<li>Valuable certification</li>
</ul>
</div>
);
};
export default Component;

66
website/src/components/unleash-academy/Links.jsx Normal file
View File

@ -0,0 +1,66 @@
import React from 'react';
import Link from '@docusaurus/Link';
const LinkBox = ({ level, header, description, link }) => {
return (
<article className={level.toLowerCase()}>
<div className='header'>
<span className='level'>{level}</span>
<h3>{header}</h3>
</div>
<p>{description}</p>
<Link
className='unleash-action-button'
to={`/unleash-academy/${link}`}
title={header}
>
Start learning
</Link>
</article>
);
};
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 (
<div className='links-container'>
<ul className='unleash-academy-links'>
{links.map(({ level, header, description, link }) => (
<li key={header}>
<LinkBox
level={level}
header={header}
description={description}
link={link}
/>
</li>
))}
</ul>
</div>
);
};
export default Component;

267
website/src/css/custom.css
View File

@ -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

17
website/static/img/unleash-academy/academy-logo.svg Normal file
View File

File diff suppressed because one or more lines are too long
Side by Side

After

Width:  |  Height:  |  Size: 11 KiB

8
website/static/img/unleash-academy/advanced-pixels.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="57" height="58" viewBox="0 0 57 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<rect width="39" height="39" transform="matrix(-1 0 0 1 58 0)" fill="#817AFE"/>
<rect width="16" height="16" transform="matrix(-1 0 0 1 19 39)" fill="#817AFE"/>
<rect width="10" height="10" transform="matrix(-1 0 0 1 19 1)" fill="#817AFE"/>
<rect width="10" height="10" transform="matrix(-1 0 0 1 57 39)" fill="#817AFE"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 448 B

63
website/static/img/unleash-academy/banner-bg-pixels.svg Normal file
View File

@ -0,0 +1,63 @@
<svg width="554" height="282" viewBox="0 0 554 282" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.1">
<path d="M502.377 16.1992H471.798V41.1588H502.377V16.1992Z" fill="#817AFE"/>
<path d="M563.54 1.79883H532.96V26.7585H563.54V1.79883Z" fill="#817AFE"/>
<path d="M288.323 41.1602H257.743V66.1198H288.323V41.1602Z" fill="#817AFE"/>
<path d="M318.899 16.1992H288.32V41.1588H318.899V16.1992Z" fill="#817AFE"/>
<path d="M349.485 16.1992H318.906V41.1588H349.485V16.1992Z" fill="#817AFE"/>
<path d="M380.062 41.1602H349.482V66.1198H380.062V41.1602Z" fill="#817AFE"/>
<path d="M471.796 41.1602H441.217V66.1198H471.796V41.1602Z" fill="#817AFE"/>
<path d="M563.54 26.7598H532.96V51.7194H563.54V26.7598Z" fill="#817AFE"/>
<path d="M318.899 66.1172H288.32V91.0768H318.899V66.1172Z" fill="#817AFE"/>
<path d="M349.485 66.1172H318.906V91.0768H349.485V66.1172Z" fill="#817AFE"/>
<path d="M471.796 66.1172H441.217V91.0768H471.796V66.1172Z" fill="#817AFE"/>
<path d="M502.377 66.1172H471.798V91.0768H502.377V66.1172Z" fill="#817AFE"/>
<path d="M532.959 66.1172H502.379V91.0768H532.959V66.1172Z" fill="#817AFE"/>
<path d="M318.899 91.0762H288.32V116.036H318.899V91.0762Z" fill="#817AFE"/>
<path d="M349.485 91.0762H318.906V116.036H349.485V91.0762Z" fill="#817AFE"/>
<path d="M441.219 91.0762H410.64V116.036H441.219V91.0762Z" fill="#817AFE"/>
<path d="M288.323 116.037H257.743V140.997H288.323V116.037Z" fill="#817AFE"/>
<path d="M380.062 116.037H349.482V140.997H380.062V116.037Z" fill="#817AFE"/>
<path d="M532.959 116.037H502.379V140.997H532.959V116.037Z" fill="#817AFE"/>
<path d="M563.539 116.037H532.96V140.997H563.539V116.037Z" fill="#817AFE"/>
<path d="M288.323 140.996H257.743V165.956H288.323V140.996Z" fill="#817AFE"/>
<path d="M349.485 140.996H318.906V165.956H349.485V140.996Z" fill="#817AFE"/>
<path d="M380.062 140.996H349.482V165.956H380.062V140.996Z" fill="#817AFE"/>
<path d="M502.377 140.996H471.798V165.956H502.377V140.996Z" fill="#817AFE"/>
<path d="M563.562 140.998H532.688V170.998H563.562V140.998Z" fill="#817AFE"/>
<path d="M318.899 165.957H288.32V190.917H318.899V165.957Z" fill="#817AFE"/>
<path d="M441.219 165.957H410.64V190.917H441.219V165.957Z" fill="#817AFE"/>
<path d="M471.796 165.957H441.217V190.917H471.796V165.957Z" fill="#817AFE"/>
<path d="M441.219 190.918H410.64V215.878H441.219V190.918Z" fill="#817AFE"/>
<path d="M532.959 190.918H502.379V215.878H532.959V190.918Z" fill="#817AFE"/>
<path d="M410.643 215.875H380.063V240.835H410.643V215.875Z" fill="#817AFE"/>
<path d="M532.959 215.875H502.379V240.835H532.959V215.875Z" fill="#817AFE"/>
<path d="M288.323 240.836H257.743V265.796H288.323V240.836Z" fill="#817AFE"/>
<path d="M380.062 240.836H349.482V265.796H380.062V240.836Z" fill="#817AFE"/>
<path d="M410.643 240.836H380.063V265.796H410.643V240.836Z" fill="#817AFE"/>
<path d="M441.219 240.836H410.64V265.796H441.219V240.836Z" fill="#817AFE"/>
<path d="M441.219 66.1172H410.64V91.0768H441.219V66.1172Z" fill="#817AFE"/>
</g>
<g opacity="0.1">
<path d="M134.973 41.9219H159.526V62.8018H134.973V41.9219Z" fill="#817AFE"/>
<path d="M1.92756 68.6934H26.4806V89.5733H1.92756V68.6934Z" fill="#817AFE"/>
<path d="M206.327 60.5996H231.32V80.9996H206.327V60.5996Z" fill="#817AFE"/>
<path d="M181.333 60.5996H206.326V80.9996H181.333V60.5996Z" fill="#817AFE"/>
<path d="M156.339 81H181.332V101.4H156.339V81Z" fill="#817AFE"/>
<path d="M64.6746 92.6055H89.2277V113.485H64.6746V92.6055Z" fill="#817AFE"/>
<path d="M64.6746 15.8066H89.2277V36.6866H64.6746V15.8066Z" fill="#817AFE"/>
<path d="M233.19 95.6387H257.743V116.519H233.19V95.6387Z" fill="#817AFE"/>
<path d="M233.19 179.16H257.743V200.04H233.19V179.16Z" fill="#817AFE"/>
<path d="M61.3184 191.117H85.8715V211.997H61.3184V191.117Z" fill="#817AFE"/>
<path d="M12.2073 164.348H36.7604V185.228H12.2073V164.348Z" fill="#817AFE"/>
<path d="M0.446604 245.945H24.9996V266.825H0.446604V245.945Z" fill="#817AFE"/>
<path d="M141.906 137.398H166.459V158.278H141.906V137.398Z" fill="#817AFE"/>
<path d="M184.286 221.398H209.279V241.798H184.286V221.398Z" fill="#817AFE"/>
<path d="M184.417 201H209.41V221.4H184.417V201Z" fill="#817AFE"/>
<path d="M208.637 116.52H233.19V137.4H208.637V116.52Z" fill="#817AFE"/>
<path d="M89.2323 113.484H113.785V134.364H89.2323V113.484Z" fill="#817AFE"/>
<path d="M233.19 21H257.743V41.88H233.19V21Z" fill="#817AFE"/>
<path d="M166.459 137.398H191.012V158.278H166.459V137.398Z" fill="#817AFE"/>
<path d="M134.973 179.16H159.526V200.04H134.973V179.16Z" fill="#817AFE"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 4.4 KiB

5
website/static/img/unleash-academy/beginner-pixels.svg Normal file
View File

@ -0,0 +1,5 @@
<svg width="58" height="58" viewBox="0 0 58 58" fill="none" xmlns="http://www.w3.org/2000/svg">
<g opacity="0.2">
<path fill-rule="evenodd" clip-rule="evenodd" d="M58 0H19V8H28V20H19V39H26V31H38V39H58V0ZM52 14H40V26H52V14ZM0 10H13V23H0V10ZM38 46H50V58H38V46ZM7 43V55H19V43H7Z" fill="#817AFE"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 305 B

8
website/static/img/unleash-academy/bullet-check.svg Normal file
View File

@ -0,0 +1,8 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<mask id="mask0_21750_244356" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="24">
<rect width="24" height="24" fill="#D9D9D9"/>
</mask>
<g mask="url(#mask0_21750_244356)">
<path d="M10.6 13.8L8.45 11.65C8.26667 11.4667 8.03333 11.375 7.75 11.375C7.46667 11.375 7.23333 11.4667 7.05 11.65C6.86667 11.8333 6.775 12.0667 6.775 12.35C6.775 12.6333 6.86667 12.8667 7.05 13.05L9.9 15.9C10.1 16.1 10.3333 16.2 10.6 16.2C10.8667 16.2 11.1 16.1 11.3 15.9L16.95 10.25C17.1333 10.0667 17.225 9.83333 17.225 9.55C17.225 9.26667 17.1333 9.03333 16.95 8.85C16.7667 8.66667 16.5333 8.575 16.25 8.575C15.9667 8.575 15.7333 8.66667 15.55 8.85L10.6 13.8ZM12 22C10.6167 22 9.31667 21.7375 8.1 21.2125C6.88333 20.6875 5.825 19.975 4.925 19.075C4.025 18.175 3.3125 17.1167 2.7875 15.9C2.2625 14.6833 2 13.3833 2 12C2 10.6167 2.2625 9.31667 2.7875 8.1C3.3125 6.88333 4.025 5.825 4.925 4.925C5.825 4.025 6.88333 3.3125 8.1 2.7875C9.31667 2.2625 10.6167 2 12 2C13.3833 2 14.6833 2.2625 15.9 2.7875C17.1167 3.3125 18.175 4.025 19.075 4.925C19.975 5.825 20.6875 6.88333 21.2125 8.1C21.7375 9.31667 22 10.6167 22 12C22 13.3833 21.7375 14.6833 21.2125 15.9C20.6875 17.1167 19.975 18.175 19.075 19.075C18.175 19.975 17.1167 20.6875 15.9 21.2125C14.6833 21.7375 13.3833 22 12 22ZM12 20C14.2333 20 16.125 19.225 17.675 17.675C19.225 16.125 20 14.2333 20 12C20 9.76667 19.225 7.875 17.675 6.325C16.125 4.775 14.2333 4 12 4C9.76667 4 7.875 4.775 6.325 6.325C4.775 7.875 4 9.76667 4 12C4 14.2333 4.775 16.125 6.325 17.675C7.875 19.225 9.76667 20 12 20Z" fill="#817AFE"/>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB