From 3cc4d376f9f10fed4929b1ee8de31fb948de1bd8 Mon Sep 17 00:00:00 2001 From: Guilherme Ferreira Date: Wed, 21 Feb 2024 10:10:14 +0000 Subject: [PATCH] docs: add intro video to website --- website/package.json | 3 +- website/src/pages/index.js | 64 ++++++++++++++++++++---------- website/src/pages/index.module.css | 8 +++- website/yarn.lock | 5 +++ 4 files changed, 58 insertions(+), 22 deletions(-) diff --git a/website/package.json b/website/package.json index 0b8d9c4..543b56e 100644 --- a/website/package.json +++ b/website/package.json @@ -20,7 +20,8 @@ "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0", "react": "^18.0.0", - "react-dom": "^18.0.0" + "react-dom": "^18.0.0", + "react-lite-youtube-embed": "^2.4.0" }, "devDependencies": { "@docusaurus/module-type-aliases": "3.1.0", diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 34e3e5c..33b9812 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -1,28 +1,27 @@ -import React from 'react'; -import clsx from 'clsx'; -import Link from '@docusaurus/Link'; -import useBaseUrl, {useBaseUrlUtils} from '@docusaurus/useBaseUrl'; -import useDocusaurusContext from '@docusaurus/useDocusaurusContext'; -import Layout from '@theme/Layout'; - -import styles from './index.module.css'; +import React from "react"; +import clsx from "clsx"; +import Link from "@docusaurus/Link"; +import useBaseUrl, { useBaseUrlUtils } from "@docusaurus/useBaseUrl"; +import useDocusaurusContext from "@docusaurus/useDocusaurusContext"; +import Layout from "@theme/Layout"; +import LiteYouTubeEmbed from "react-lite-youtube-embed"; +import styles from "./index.module.css"; +import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css"; function HomepageHeader() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( -
+
- {siteConfig.title} + {siteConfig.title}

{siteConfig.tagline}

- + Get Started
@@ -31,13 +30,38 @@ function HomepageHeader() { ); } +function VideoContainer() { + return ( +
+
+
+

Check it out in a intro video

+
+ +
+
+
+
+ ); +} + export default function Home() { - const {siteConfig} = useDocusaurusContext(); + const { siteConfig } = useDocusaurusContext(); return ( + description="Description will go into a meta tag in " + > +
+ +
); } diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 120d310..72f3c0f 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -22,4 +22,10 @@ justify-content: center; } - \ No newline at end of file + .videoContainer { + position: relative; + overflow: hidden; + width: 100%; + max-width: 560px; + margin: 0 auto; + } \ No newline at end of file diff --git a/website/yarn.lock b/website/yarn.lock index 2b0bdb2..4c7ea8a 100644 --- a/website/yarn.lock +++ b/website/yarn.lock @@ -6905,6 +6905,11 @@ react-json-view-lite@^1.2.0: resolved "https://registry.yarnpkg.com/react-json-view-lite/-/react-json-view-lite-1.2.1.tgz#c59a0bea4ede394db331d482ee02e293d38f8218" integrity sha512-Itc0g86fytOmKZoIoJyGgvNqohWSbh3NXIKNgH6W6FT9PC1ck4xas1tT3Rr/b3UlFXyA9Jjaw9QSXdZy2JwGMQ== +react-lite-youtube-embed@^2.4.0: + version "2.4.0" + resolved "https://registry.yarnpkg.com/react-lite-youtube-embed/-/react-lite-youtube-embed-2.4.0.tgz#1f56a12be1061d50431444d52d836bd09a1283a2" + integrity sha512-Xo6cM1zPlROvvM97JkqQIoXstlQDaC4+DawmM7BB7Hh1cXrkBHEGq1iJlQxBTUWAUklmpcC7ph7qg7CztXtABQ== + react-loadable-ssr-addon-v5-slorber@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/react-loadable-ssr-addon-v5-slorber/-/react-loadable-ssr-addon-v5-slorber-1.0.1.tgz#2cdc91e8a744ffdf9e3556caabeb6e4278689883"