Add sticky media support

docusaurus-plugin/stickyMedia.js

@@ -0,0 +1,26 @@
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment'
+
+const instantiateStickyMedia = () => {
+    new StickyMedia()
+}
+
+// On route change
+export function onRouteDidUpdate({ location, previousLocation }) {
+    // Don't execute if we are still on the same page; the lifecycle may be fired
+    // because the hash changes (e.g. when navigating between headings)
+    if (location.pathname === previousLocation?.pathname) return
+    setTimeout(instantiateStickyMedia, 100)
+}
+
+// On load
+if (ExecutionEnvironment.canUseDOM) {
+    window.addEventListener('load', () => {
+        // Remove stale video info
+        localStorage.removeItem('videoID')
+        localStorage.removeItem('videoModalFlag')
+        localStorage.removeItem('videoModalTime')
+        localStorage.setItem('videoModalView', 'fullscreen-mode')
+
+        setTimeout(instantiateStickyMedia, 100)
+    })
+}

docusaurus.config.js

@@ -32,13 +32,6 @@ const config = {
     onBrokenLinks: 'throw',
     onBrokenMarkdownLinks: 'warn',
 
-    // EmailJS
-    // customFields: {
-    //     EMAILJS_SERVER_ID: process.env.EMAILJS_SERVER_ID,
-    //     EMAILJS_TEMPLATE_ID: process.env.EMAILJS_TEMPLATE_ID,
-    //     EMAILJS_PUBLIC_KEY: process.env.EMAILJS_PUBLIC_KEY,
-    // },
-
     customFields: { ...customFields },
 
     // Even if you don't use internalization, you can use this field to set useful
@@ -49,6 +42,15 @@ const config = {
         locales: ['en'],
     },
 
+    scripts: [
+        {
+            src: '//cdn.jsdelivr.net/gh/app-generator/sticky-media@0.0.13/dist/index.min.js',
+            async: true,
+        },
+    ],
+
+    clientModules: [require.resolve('./docusaurus-plugin/stickyMedia.js')],
+
     presets: [
         [
             'classic',

src/css/custom.css

@@ -18,6 +18,7 @@
     --ifm-background-color: #f8f9fa;
     --ifm-navbar-background-color: #f8f9fa;
     --ifm-font-family-base: 'Roboto', 'Helvetica', 'Arial', sans-serif;
+    --docusaurus-highlighted-code-line-bg: rgb(76, 218, 251, 0.1);
 }
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
@@ -43,3 +44,10 @@
     box-sizing: content-box;
     padding: 2px;
 }
+
+.sticky-video-modal {
+    width: 100%;
+    height: 100%;
+    right: 0;
+    bottom: 0;
+}

versioned_docs/version-0.1/tutorial-extras/sticky-media.md

@@ -0,0 +1,30 @@
+---
+sidebar_position: 3
+---
+
+# Sticky media
+
+You may add a sticky video by giving `sticky-popup` class to an `a` tag.
+
+```html
+<!-- md content above -->
+
+<a
+    // highlight-next-line
+    class="sticky-popup"
+    target="_blank"
+    href="https://www.youtube.com/watch?v=G1OM2L7XK5Y"
+    >Sticky video</a
+>
+
+<!-- md content below -->
+```
+
+## Try it!
+
+<a
+    class="sticky-popup"
+    target="_blank"
+    href="https://www.youtube.com/watch?v=G1OM2L7XK5Y"
+    data-video-id="G1OM2L7XK5Y"
+    >Sticky video</a>