Skip to content

Commit 483e824

Browse files
Guilherme Ferreirajoelfoliveira
Guilherme Ferreira
authored and
joelfoliveira
committed
docs: add intro video to website
1 parent 6b6d7d8 commit 483e824

File tree

4 files changed

+58
-22
lines changed

4 files changed

+58
-22
lines changed

‎website/package.json

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,8 @@
2020
"clsx": "^2.0.0",
2121
"prism-react-renderer": "^2.3.0",
2222
"react": "^18.0.0",
23-
"react-dom": "^18.0.0"
23+
"react-dom": "^18.0.0",
24+
"react-lite-youtube-embed": "^2.4.0"
2425
},
2526
"devDependencies": {
2627
"@docusaurus/module-type-aliases": "3.1.0",

‎website/src/pages/index.js

Lines changed: 44 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,27 @@
1-
import React from 'react';
2-
import clsx from 'clsx';
3-
import Link from '@docusaurus/Link';
4-
import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl';
5-
import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
6-
import Layout from '@theme/Layout';
7-
8-
import styles from './index.module.css';
1+
import React from "react";
2+
import clsx from "clsx";
3+
import Link from "@docusaurus/Link";
4+
import useBaseUrl, { useBaseUrlUtils } from "@docusaurus/useBaseUrl";
5+
import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
6+
import Layout from "@theme/Layout";
7+
import LiteYouTubeEmbed from "react-lite-youtube-embed";
98

9+
import styles from "./index.module.css";
10+
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";
1011

1112
function HomepageHeader() {
12-
const {siteConfig} = useDocusaurusContext();
13+
const { siteConfig } = useDocusaurusContext();
1314
return (
14-
<header className={clsx('hero', styles.heroBanner)}>
15+
<header className={clsx("hero", styles.heroBanner)}>
1516
<div className="container">
16-
<img
17-
alt={siteConfig.title}
18-
src={useBaseUrl('/img/logo.svg')}
19-
width="512"
20-
/>
17+
<img
18+
alt={siteConfig.title}
19+
src={useBaseUrl("/img/logo.svg")}
20+
width="512"
21+
/>
2122
<p className="hero__subtitle">{siteConfig.tagline}</p>
2223
<div className={styles.buttons}>
23-
<Link
24-
className="button button--secondary button--lg"
25-
to="/docs/">
24+
<Link className="button button--secondary button--lg" to="/docs/">
2625
Get Started
2726
</Link>
2827
</div>
@@ -31,13 +30,38 @@ function HomepageHeader() {
3130
);
3231
}
3332

33+
function VideoContainer() {
34+
return (
35+
<div className="container text--center margin-bottom--xl">
36+
<div className="row">
37+
<div className="col">
38+
<h2>Check it out in a intro video</h2>
39+
<div className={styles.videoContainer}>
40+
<LiteYouTubeEmbed
41+
id="paYrVKO1Pi4"
42+
params="autoplay=1&autohide=1&showinfo=0&rel=0"
43+
title="The NETFLIX Way to Keep Your .NET APIs Reliable"
44+
poster="maxresdefault"
45+
webp
46+
/>
47+
</div>
48+
</div>
49+
</div>
50+
</div>
51+
);
52+
}
53+
3454
export default function Home() {
35-
const {siteConfig} = useDocusaurusContext();
55+
const { siteConfig } = useDocusaurusContext();
3656
return (
3757
<Layout
3858
title={`Hello from ${siteConfig.title}`}
39-
description="Description will go into a meta tag in <head />">
59+
description="Description will go into a meta tag in <head />"
60+
>
4061
<HomepageHeader />
62+
<main>
63+
<VideoContainer />
64+
</main>
4165
</Layout>
4266
);
4367
}

‎website/src/pages/index.module.css

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,4 +22,10 @@
2222
justify-content: center;
2323
}
2424

25-
25+
.videoContainer {
26+
position: relative;
27+
overflow: hidden;
28+
width: 100%;
29+
max-width: 560px;
30+
margin: 0 auto;
31+
}

‎website/yarn.lock

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6905,6 +6905,11 @@ react-json-view-lite@^1.2.0:
69056905
resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-1.2.1.tgz#c59a0bea4ede394db331d482ee02e293d38f8218"
69066906
integrity sha512-Itc0g86fytOmKZoIoJyGgvNqohWSbh3NXIKNgH6W6FT9PC1ck4xas1tT3Rr/b3UlFXyA9Jjaw9QSXdZy2JwGMQ==
69076907

6908+
react-lite-youtube-embed@^2.4.0:
6909+
version "2.4.0"
6910+
resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2"
6911+
integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ==
6912+
69086913
react-loadable-ssr-addon-v5-slorber@^1.0.1:
69096914
version "1.0.1"
69106915
resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz#2cdc91e8a744ffdf9e3556caabeb6e4278689883"

0 commit comments

Comments
 (0)