add videos to various places; hide Team section

Author: lihebi

docs/1-intro.md

@@ -10,6 +10,12 @@ bump interactive coding beyond prototyping and demos. Our website is
 [https://codepod.io](https://codepod.io). More details are in our paper:
 [https://arxiv.org/abs/2301.02410](https://arxiv.org/abs/2301.02410)
 
-Start with the [user manual](/docs/manual).
+## Get started with the following pointers
+
+Here are the pointers to get you started:
+
+- Read the [user manual](/docs/manual).
+- Try [the app](/login) online
+- Watch [tutorial videos](/docs/video)
 
 <!-- Codepod is free and open source, you can deploy your own CodePod by following hte [developer manual](/docs/developer). -->

docs/3-manual/README.md

@@ -28,10 +28,10 @@ This manual describes all the Operations and User Interface for the app.
 
 <iframe 
   style={{
-    width: "100%",
+    width: "80%",
     aspectRatio: 16/9,
   }}
-src="https://www.youtube.com/embed/M0t2zxSrF6Q?si=1YweMxN8XHiArZlF" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+src="https://www.youtube.com/embed/M0t2zxSrF6Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
 
 ## tl;dr (Cheatsheet)
 

docs/7-video.md

@@ -0,0 +1,19 @@
+# Videos
+
+### Introduction and Basic Tutorial in 5 minutes
+
+<iframe 
+  style={{
+    width: "80%",
+    aspectRatio: 16/9,
+  }}
+src="https://www.youtube.com/embed/M0t2zxSrF6Q" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+
+### Detailed Tutorial on a real project in 20 minutes
+
+<iframe 
+  style={{
+    width: "80%",
+    aspectRatio: 16/9,
+  }}
+src="https://www.youtube.com/embed/06yr8FTTxtI" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

docusaurus.config.ts

@@ -97,6 +97,11 @@ const config: Config = {
           position: "left",
           label: "Screenshots",
         },
+        {
+          to: "docs/video",
+          position: "left",
+          label: "Videos",
+        },
         {
           href: "https://github.com/codepod-io/codepod",
           label: "GitHub",

src/pages/index.tsx

@@ -99,6 +99,20 @@ function Hero() {
             Read our paper <span aria-hidden="true">→</span>
           </a>
         </div>
+        <iframe
+          style={{
+            marginTop: "4rem",
+            width: "60%",
+            aspectRatio: 16 / 9,
+          }}
+          src="https://www.youtube.com/embed/M0t2zxSrF6Q"
+          title="YouTube video player"
+          frameBorder="0"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+          referrerPolicy="strict-origin-when-cross-origin"
+          allowFullScreen
+        ></iframe>
+
         <div
           style={{
             marginTop: "4rem",
@@ -465,6 +479,47 @@ function Contact() {
   );
 }
 
+function Videos() {
+  return (
+    <div
+      style={{
+        // margin: "auto",
+        // width: "100%",
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        gap: "2rem",
+      }}
+    >
+      {/* <iframe
+        style={{
+          width: "40%",
+          aspectRatio: 16 / 9,
+        }}
+        src="https://www.youtube.com/embed/M0t2zxSrF6Q"
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      ></iframe> */}
+      <iframe
+        style={{
+          width: "40%",
+          aspectRatio: 16 / 9,
+        }}
+        src="https://www.youtube.com/embed/06yr8FTTxtI"
+        title="YouTube video player"
+        frameBorder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+        referrerPolicy="strict-origin-when-cross-origin"
+        allowFullScreen
+      ></iframe>
+    </div>
+  );
+}
+
 export default function Home(): JSX.Element {
   const { siteConfig } = useDocusaurusContext();
   return (
@@ -480,9 +535,10 @@ export default function Home(): JSX.Element {
       >
         {/* <HomepageFeatures /> */}
         <WhyIn3 />
+        <Videos />
         <LDAExample />
         <FeatureList2 />
-        <Team />
+        {/* <Team /> */}
         <Contact />
       </main>
     </Layout>