Add sticky media support

Author: onattech

.env.development

@@ -1,3 +1,5 @@
 EMAILJS_SERVER_ID=service_sedddrb
 EMAILJS_TEMPLATE_ID=template_2w42djr
-EMAILJS_PUBLIC_KEY=6_tNcp-iBTQ09T2Ql
+EMAILJS_PUBLIC_KEY=6_tNcp-iBTQ09T2Ql
+APPLICATION_ID=QREGAGU3YC
+API_KEY=95b0c6179810e72eefdf5f0e8915ac85

docs/content/how-to/sticky-media.md

@@ -0,0 +1,25 @@
+---
+title: Sticky Media
+sidebar_label: Sticky Media
+---
+
+# Sticky media
+
+You may add a sticky video by giving `sticky-popup` class to an `a` tag.
+
+```html
+<!-- md content above -->
+
+<a className="sticky-popup" target="_blank" href="https://www.youtube.com/watch?v=uRgQ_TpTj4g">Sticky video</a>
+
+<!-- md content below -->
+```
+
+## Try it!
+
+<a
+    className="sticky-popup"
+    target="_blank"
+    href="https://www.youtube.com/watch?v=uRgQ_TpTj4g"
+    data-video-id="uRgQ_TpTj4g"
+    >Sticky video</a>

docusaurus.config.js

@@ -6,6 +6,7 @@ const lightCodeTheme = require("prism-react-renderer/themes/github");
 // const darkCodeTheme = require("prism-react-renderer/themes/dracula");
 // const Embed = require("./plugins/remark/embed");
 const darkCodeTheme = require("prism-react-renderer/themes/shadesOfPurple");
+require('dotenv').config()
 const customFields = {
 	meta: {
 		title: "An atom based state manager for JavaScript apps.",
@@ -52,6 +53,16 @@ const config = {
 		defaultLocale: "en",
 		locales: ["en"],
 	},
+
+	scripts: [
+        {
+            src: '//cdn.jsdelivr.net/gh/app-generator/[email protected]/dist/index.min.js',
+            id: 'stickyVideoScript',
+            defer: true,
+            class: 'sticky-popup',
+        },
+    ],
+
 	// themes: ["@docusaurus/theme-live-codeblock"],
 	plugins: [
 		// "docusaurus-plugin-sass",

src/css/custom.css

@@ -265,3 +265,11 @@ ul.menu__list > li > a.menu__link--active {
 }
 
 /* Home Page Header */
+
+/* Sticky media */
+.sticky-video-modal {
+    width: 100%;
+    height: 100%;
+    right: 0;
+    bottom: 0;
+}