tecladocode · jslvtr · Oct 25, 2022 · Oct 24, 2022 · Oct 24, 2022 · Oct 24, 2022
diff --git a/README.md b/README.md
@@ -6,7 +6,7 @@
 
 <div align="center">
 
-[![Udemy rating 4.6/5](https://img.shields.io/badge/udemy-4.6%2F5-brightgreen)](https://go.tecla.do/rest-apis-sale) ![GitHub last commit](https://img.shields.io/github/last-commit/tecladocode/rest-apis-flask-python/develop) ![Python 3.10](https://img.shields.io/badge/python-3.10-yellow) [![Discord](https://img.shields.io/discord/614395983807250433)](https://discord.gg/78Nvd3p) [![Twitter Follow](https://img.shields.io/twitter/follow/jslvtr?style=social) ](https://twitter.com/jslvtr)
+[![Udemy rating 4.6/5](https://img.shields.io/badge/udemy-4.6%2F5-brightgreen)](https://go.tecla.do/rest-apis-ebook) ![GitHub last commit](https://img.shields.io/github/last-commit/tecladocode/rest-apis-flask-python/develop) ![Python 3.10](https://img.shields.io/badge/python-3.10-yellow) [![Discord](https://img.shields.io/discord/614395983807250433)](https://discord.gg/78Nvd3p) [![Twitter Follow](https://img.shields.io/twitter/follow/jslvtr?style=social) ](https://twitter.com/jslvtr)
 
 </div>
 
@@ -16,7 +16,7 @@
 
 ## Getting started
 
-Enrol in the course by going to [this link](https://go.tecla.do/rest-apis-sale).
+Enrol in the course by going to [this link](https://go.tecla.do/rest-apis-ebook).
 
 Then you can come back here to download the repository. This repository contains the code that we develop in each section of the course.
 

diff --git a/docs/docs/01_course_intro/01_curriculum_overview/README.md b/docs/docs/01_course_intro/01_curriculum_overview/README.md
@@ -5,4 +5,7 @@ description: A brief description of the lecture goes here.
 
 # Curriculum overview
 
-The curriculum overview goes here.
+import DocCategoryIndex from '@theme/DocCardList';
+import {useDocsSidebar} from '@docusaurus/theme-common/internal';
+
+<DocCategoryIndex items={useDocsSidebar().items} />
diff --git a/docs/docs/01_course_intro/index.md b/docs/docs/01_course_intro/index.md
@@ -4,6 +4,12 @@ id: intro
 
 # REST APIs with Flask and Python
 
+import VideoEmbed from "@site/src/components/VideoEmbed";
+
+<div style={{ maxWidth: "720px", margin: "3rem auto", boxShadow: "0 5px 15px 0 rgba(0, 0, 0, 0.15)" }}>
+<VideoEmbed url="https://customer-zmitazl0ztnd2pvm.cloudflarestream.com/1c4db6119cf0c6e682a88a737af146eb/iframe?poster=https%3A%2F%2Fcustomer-zmitazl0ztnd2pvm.cloudflarestream.com%2F1c4db6119cf0c6e682a88a737af146eb%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" />
+</div>
+
 Hi, and welcome!
 
 REST APIs with Flask and Python is a complete course that teaches you how to develop complete, professional REST APIs using **Flask**, **PostgreSQL**, and **Docker**.

diff --git a/docs/docs/03_first_rest_api/01_project_overview/README.md b/docs/docs/03_first_rest_api/01_project_overview/README.md
@@ -5,6 +5,12 @@ description: A first look at the project we'll build in this section.
 
 # Overview of your first REST API
 
+import VideoEmbed from "@site/src/components/VideoEmbed";
+
+<div style={{ maxWidth: "720px", margin: "3rem auto", boxShadow: "0 5px 15px 0 rgba(0, 0, 0, 0.15)" }}>
+<VideoEmbed url="https://customer-zmitazl0ztnd2pvm.cloudflarestream.com/cda9c0473bdc485a36905144f13f4d3f/iframe?poster=https%3A%2F%2Fcustomer-zmitazl0ztnd2pvm.cloudflarestream.com%2Fcda9c0473bdc485a36905144f13f4d3f%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" />
+</div>
+
 In this section we'll make a simple REST API that allows us to:
 
 - Create stores, each with a `name` and a list of stocked `items`.

diff --git a/docs/docs/03_first_rest_api/02_getting_set_up/README.md b/docs/docs/03_first_rest_api/02_getting_set_up/README.md
@@ -5,6 +5,12 @@ description: Set up a Flask project and create the Flask app.
 
 # Getting set up
 
+import VideoEmbed from "@site/src/components/VideoEmbed";
+
+<div style={{ maxWidth: "720px", margin: "3rem auto", boxShadow: "0 5px 15px 0 rgba(0, 0, 0, 0.15)" }}>
+<VideoEmbed url="https://customer-zmitazl0ztnd2pvm.cloudflarestream.com/42b7de55034431b4c4c9420460f8df7d/iframe?poster=https%3A%2F%2Fcustomer-zmitazl0ztnd2pvm.cloudflarestream.com%2F42b7de55034431b4c4c9420460f8df7d%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" />
+</div>
+
 Create a virtual environment and activate it.
 
 ```

diff --git a/docs/docs/03_first_rest_api/03_first_rest_api_endpoint/README.md b/docs/docs/03_first_rest_api/03_first_rest_api_endpoint/README.md
@@ -5,6 +5,10 @@ description: Learn how to define a REST API endpoint using Flask.
 
 # Your First REST API Endpoint
 
+import LockedVideoEmbed from "@site/src/components/LockedVideoEmbed";
+
+<LockedVideoEmbed />
+
 Let's start off by defining where we'll store our data. In most REST APIs, you'd store your data in a database. For now, and for simplicity, we'll store it in a Python list.
 
 Later on we'll work on making this data dynamic. For now let's use some sample data.

diff --git a/docs/docusaurus.config.js b/docs/docusaurus.config.js
@@ -58,20 +58,28 @@ const config = {
             label: "Tutorial",
           },
           {
-            href: "https://go.tecla.do/rest-apis-sale",
+            href: "https://go.tecla.do/rest-apis-ebook",
             label: "Get the course",
             position: "right",
           },
         ],
       },
+      announcementBar: {
+        id: "support_us",
+        content:
+          '<span style="font-weight: 600">Unlock all video lessons and support us by <a target="_blank" style="background-image: linear-gradient(90deg, #FF7D82, #50e3c2); background-clip: text; color: transparent; " rel="noopener noreferrer" href="https://go.tecla.do/rest-apis-ebook">buying the course</a>!</span>',
+        backgroundColor: "#1c2023",
+        textColor: "#fff",
+        isCloseable: false,
+      },
       footer: {
         style: "dark",
         links: [
           {
             title: "Learn",
             items: [
               {
-                href: "https://go.tecla.do/rest-apis-sale",
+                href: "https://go.tecla.do/rest-apis-ebook",
                 label: "Get the course",
               },
               {

diff --git a/docs/src/components/LockedVideoEmbed/background.png b/docs/src/components/LockedVideoEmbed/background.png
diff --git a/docs/src/components/LockedVideoEmbed/index.js b/docs/src/components/LockedVideoEmbed/index.js
@@ -0,0 +1,128 @@
+import React from "react";
+import Background from "./background.png";
+
+export default function LockedVideoEmbed() {
+  return (
+    <div style={{ maxWidth: "720px", margin: "4rem auto 4rem auto" }}>
+      <div style={{ position: "relative", paddingTop: "56.25%" }}>
+        <div
+          style={{
+            border: "none",
+            position: "absolute",
+            top: "0",
+            left: "0",
+            height: "100%",
+            width: "100%",
+            textAlign: "center",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
+          <img
+            src={Background}
+            style={{
+              zIndex: 1,
+              position: "absolute",
+              top: "0",
+              left: "0",
+              height: "100%",
+              width: "100%",
+              objectFit: "cover",
+              filter: "blur(5px) grayscale(80%) brightness(0.4)",
+            }}
+          />
+          <svg
+            style={{ zIndex: 2 }}
+            viewBox="0 0 100 100"
+            height="50%"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.000 50.000 A40.000 40.000 0 1 0 90.000 50.000 A40.000 40.000 0 1 0 10.000 50.000 Z"
+              fill="#D9EDFF"
+            />
+            <path
+              d="M71.767,43.426a1.323,1.323,0,0,1,0,1.476C69.6,48.127,60.072,60.827,44.47,60.827s-25.129-12.7-27.3-15.925a1.326,1.326,0,0,1,0-1.476C19.341,40.2,28.868,27.5,44.47,27.5S69.6,40.2,71.767,43.426Z"
+              fill="#ffffff"
+            />
+            <path
+              d="M32.568 44.164 A11.902 11.902 0 1 0 56.372 44.164 A11.902 11.902 0 1 0 32.568 44.164 Z"
+              fill="#B0D9FF"
+            />
+            <path
+              d="M71.767,43.426a1.323,1.323,0,0,1,0,1.476C69.6,48.127,60.072,60.827,44.47,60.827s-25.129-12.7-27.3-15.925a1.326,1.326,0,0,1,0-1.476C19.341,40.2,28.868,27.5,44.47,27.5S69.6,40.2,71.767,43.426Z"
+              fill="none"
+              stroke="#020064"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M32.568 44.164 A11.902 11.902 0 1 0 56.372 44.164 A11.902 11.902 0 1 0 32.568 44.164 Z"
+              fill="none"
+              stroke="#020064"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M39.841 44.164 A4.629 4.629 0 1 0 49.099 44.164 A4.629 4.629 0 1 0 39.841 44.164 Z"
+              fill="#ffffff"
+            />
+            <path
+              d="M39.841 44.164 A4.629 4.629 0 1 0 49.099 44.164 A4.629 4.629 0 1 0 39.841 44.164 Z"
+              fill="none"
+              stroke="#020064"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M31.820 69.282 A12.65 1.725 0 1 0 57.120 69.282 A12.65 1.725 0 1 0 31.820 69.282 Z"
+              fill="#B0D9FF"
+            />
+            <path
+              d="M56.917 54.275 L80.377 54.275 L80.377 72.623 L56.917 72.623 Z"
+              fill="#B0D9FF"
+            />
+            <path
+              d="M59.263,54.275v-4.3A9.774,9.774,0,0,1,69.038,40.2h0a9.774,9.774,0,0,1,9.774,9.775v4.3H74.9v-4.3a5.865,5.865,0,0,0-5.865-5.865h0a5.865,5.865,0,0,0-5.865,5.865v4.3Z"
+              fill="#ffffff"
+              stroke="#020064"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M56.917 54.275 L80.377 54.275 L80.377 72.623 L56.917 72.623 Z"
+              fill="none"
+              stroke="#020064"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+            <path
+              d="M71.775,62.066a2.737,2.737,0,1,0-3.91,2.463v1.447a1.173,1.173,0,0,0,1.173,1.173h0a1.173,1.173,0,0,0,1.173-1.173V64.529A2.729,2.729,0,0,0,71.775,62.066Z"
+              fill="#ffffff"
+              stroke="#020064"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+          <p
+            style={{
+              zIndex: 2,
+              textAlign: "center",
+              color: "#020064",
+              color: "white",
+              fontWeight: "bolder",
+            }}
+          >
+            This video is locked. Please{" "}
+            <a href="https://go.tecla.do/rest-apis-ebook">
+              purchase the course
+            </a>{" "}
+            to view it.
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/docs/src/components/VideoEmbed/index.js b/docs/src/components/VideoEmbed/index.js
@@ -0,0 +1,21 @@
+import React from "react";
+
+export default function VideoEmbed({ url }) {
+  return (
+    <div style={{ position: "relative", paddingTop: "56.25%" }}>
+      <iframe
+        src={url}
+        style={{
+          border: "none",
+          position: "absolute",
+          top: "0",
+          left: "0",
+          height: "100%",
+          width: "100%",
+        }}
+        allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+        allowfullscreen="true"
+      ></iframe>
+    </div>
+  );
+}
diff --git a/docs/src/pages/index.js b/docs/src/pages/index.js
@@ -5,6 +5,7 @@ import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import styles from "./index.module.css";
 import HomepageFeatures from "@site/src/components/HomepageFeatures";
+import VideoEmbed from "@site/src/components/VideoEmbed";
 
 function HomepageHeader() {
   const { siteConfig } = useDocusaurusContext();
@@ -35,6 +36,16 @@ export default function Home() {
     >
       <HomepageHeader />
       <main>
+        <div
+          style={{
+            border: "4px solid black",
+            maxWidth: "800px",
+            margin: "4rem auto 4rem auto",
+            boxShadow: "0 5px 15px 0 rgba(0, 0, 0, 0.15)",
+          }}
+        >
+          <VideoEmbed url="https://customer-zmitazl0ztnd2pvm.cloudflarestream.com/1c4db6119cf0c6e682a88a737af146eb/iframe?poster=https%3A%2F%2Fcustomer-zmitazl0ztnd2pvm.cloudflarestream.com%2F1c4db6119cf0c6e682a88a737af146eb%2Fthumbnails%2Fthumbnail.jpg%3Ftime%3D%26height%3D600" />
+        </div>
         <HomepageFeatures />
       </main>
     </Layout>

diff --git a/docs/src/pages/markdown-page.md b/docs/src/pages/markdown-page.md