Add learning page

site/docusaurus.config.js

@@ -25,6 +25,12 @@ module.exports = {
 					label: 'Docs',
 					position: 'right',
 				},
+				{
+					to: 'learn',
+					activeBasePath: 'learn',
+					label: 'Learn',
+					position: 'right',
+				},
 				{
 					href: 'https://github.com/styleguidist/react-styleguidist',
 					label: 'GitHub',

site/src/components/Box.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import styles from './Box.module.css';
+
+export const Box = ({ children, textAlign, className, as: Component = 'div', ...rest }) => (
+	<Component
+		className={clsx(styles.box, textAlign && styles[`box--textAlign-${textAlign}`], className)}
+		{...rest}
+	>
+		{children}
+	</Component>
+);
+
+Box.propTypes = {
+	children: PropTypes.node,
+	textAlign: PropTypes.oneOf(['center']),
+	className: PropTypes.string,
+	as: PropTypes.string,
+};

site/src/components/Box.module.css

@@ -0,0 +1,3 @@
+.box--textAlign-center {
+	text-align: center;
+}

site/src/components/List.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import { Stack } from './Stack';
+import styles from './List.module.css';
+
+export const List = ({ children, className, ...rest }) => (
+	<Stack as="ul" gap="s" className={clsx(styles.list, className)} {...rest}>
+		{children}
+	</Stack>
+);
+
+List.propTypes = {
+	children: PropTypes.node,
+	className: PropTypes.string,
+};

site/src/components/List.module.css

@@ -0,0 +1,5 @@
+.list {
+	margin: 0;
+	padding: 0;
+	list-style: none;
+}

site/src/components/VideoImage.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import styles from './VideoImage.module.css';
+
+export const VideoImage = ({ className, ...rest }) => (
+	<div className={clsx(styles.container, className)}>
+		<img {...rest} />
+	</div>
+);
+
+VideoImage.propTypes = {
+	src: PropTypes.string.isRequired,
+	alt: PropTypes.string.isRequired,
+	className: PropTypes.string,
+};

site/src/components/VideoImage.module.css

@@ -0,0 +1,16 @@
+.container {
+	position: relative;
+}
+
+.container::after {
+	content: '';
+	position: absolute;
+	left: calc(50% - 2rem);
+	top: calc(50% - 4rem);
+	width: 0;
+	height: 0;
+	border-style: solid;
+	border-width: 4rem 0 4rem 6.95rem;
+	border-color: transparent transparent transparent var(--ifm-color-primary-lightest);
+	filter: drop-shadow(0 0 0.75rem var(--ifm-color-gray-400));
+}

site/src/pages/learn.js

@@ -0,0 +1,173 @@
+import React from 'react';
+import Layout from '@theme/Layout';
+import Link from '@docusaurus/Link';
+import { Row, Column } from '../components/Column';
+import { Stack } from '../components/Stack';
+import { List } from '../components/List';
+import { ImageLink } from '../components/ImageLink';
+import { VideoImage } from '../components/VideoImage';
+import styles from './learn.module.css';
+
+const sections = [
+	{
+		title: 'Video courses',
+		items: [
+			{
+				title: 'React Styleguidist essentials',
+				href: 'https://egghead.io/playlists/react-styleguidist-essentials-627f',
+				image: '/img/rsgcourse.png',
+				type: 'video',
+			},
+			{
+				title: 'Component-driven development in React',
+				href: 'https://egghead.io/playlists/component-driven-development-in-react-e0bf',
+				image: '/img/cddcourse.png',
+				type: 'video',
+			},
+		],
+	},
+	{
+		title: 'Workshops',
+		description: (
+			<Stack gap="m">
+				<p>
+					Learn how to create resilient component libraries using React Styleguidist from its
+					maintainers at{' '}
+					<Link
+						href="https://component-driven.io/offerings"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						Component-driven
+					</Link>
+					.
+				</p>
+				<Link
+					href="https://component-driven.io/offerings"
+					target="_blank"
+					rel="noopener noreferrer"
+					className={styles.componentDrivenHero}
+				>
+					<img src="/img/component-driven-inverted.svg" alt="Component-driven" />
+				</Link>
+			</Stack>
+		),
+	},
+	{
+		title: 'Articles',
+		links: [
+			{
+				title: 'Front-End Documentation, Style Guides and the Rise of MDX',
+				href: 'https://css-tricks.com/front-end-documentation-style-guides-and-the-rise-of-mdx/',
+			},
+			{
+				title: 'How to Visualise Your Components with React Styleguidist',
+				href: 'https://medium.com/simply/3-react-styleguidist-c7f67830f40a',
+			},
+			{
+				title: 'React Components Living Style Guides Overview',
+				href: 'https://www.nearform.com/blog/react-components-living-style-guides-overview/',
+			},
+			{
+				title: 'Storybook vs Styleguidist: A comparison of the top UI component explorers',
+				href: 'https://blog.hichroma.com/storybook-vs-styleguidist-2bd93d6dcc06',
+			},
+		],
+	},
+	{
+		title: 'Talks',
+		links: [
+			{
+				title: 'Using React Styleguidist The Wrong Way by Bogdan Kolbik',
+				href: 'https://youtu.be/2J0WtYfPc-A',
+			},
+			{
+				title: 'Scalable Design Systems with TypeScript by Tejas Kumar',
+				href: 'https://youtu.be/ZsBW4S8hYMU',
+			},
+			{
+				title: 'The Dream of Styleguide Driven Development by Sara Vieira',
+				href: 'https://youtu.be/JjXnmhNW8Cs',
+			},
+		],
+	},
+];
+
+const EditIcon = () => (
+	<svg
+		fill="currentColor"
+		height="1.2em"
+		width="1.2em"
+		preserveAspectRatio="xMidYMid meet"
+		viewBox="0 0 40 40"
+		style={{
+			marginRight: '0.3em',
+			verticalAlign: 'sub',
+		}}
+	>
+		<g>
+			<path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z" />
+		</g>
+	</svg>
+);
+
+function Learn() {
+	return (
+		<Layout
+			title="Learn React Styleguidist"
+			description="Video courses, workshops, talks, articles and other learning resources about React Styleguidist"
+		>
+			<Stack gap="l" className="container padding-vert--lg">
+				<Stack gap="m" as="header">
+					<h1>Learn React Styleguidist</h1>
+					<p>
+						Learn how to use React Styleguidist efficiently from its creators and the community.
+					</p>
+				</Stack>
+				{sections.map(section => (
+					<Stack key={section.title} gap="m" as="section">
+						<h2>{section.title}</h2>
+						{section.description}
+						{section.links && (
+							<List>
+								{section.links.map(link => (
+									<li key={link.href}>
+										<Link href={link.href} target="_blank" rel="noopener noreferrer">
+											{link.title}
+										</Link>
+									</li>
+								))}
+							</List>
+						)}
+						{section.items && (
+							<Row>
+								{section.items.map(item => (
+									<Column key={item.href} size={6}>
+										<ImageLink href={item.href}>
+											<Stack gap="xs">
+												{item.type === 'video' && <VideoImage src={item.image} alt="" />}
+												<div>{item.title}</div>
+											</Stack>
+										</ImageLink>
+									</Column>
+								))}
+							</Row>
+						)}
+					</Stack>
+				))}
+				<p>
+					<Link
+						href="https://github.com/styleguidist/react-styleguidist/edit/master/site/src/pages/learn.js"
+						target="_blank"
+						rel="noopener noreferrer"
+					>
+						<EditIcon />
+						Edit this page
+					</Link>
+				</p>
+			</Stack>
+		</Layout>
+	);
+}
+
+export default Learn;

site/src/pages/learn.module.css

@@ -0,0 +1,10 @@
+.componentDrivenHero {
+	--shade-color: hsla(228, 37%, 31%, 0.8);
+
+	display: block;
+	padding: 2rem 1rem;
+	text-align: center;
+	background-image: linear-gradient(var(--shade-color), var(--shade-color)), url(/img/workshop.jpg);
+	background-position: 50% 50%;
+	background-size: cover;
+}