chore: add YouTube video

Author: ServerlessLife

.vitepress/config.mts

@@ -1,4 +1,5 @@
 import { defineConfig } from 'vitepress';
+import markdownItYouTubeEmbed from './markdown-it-youtube-embed.js';
 
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
@@ -106,4 +107,9 @@ export default defineConfig({
       },
     ],
   },
+  markdown: {
+    config: (md) => {
+      md.use(markdownItYouTubeEmbed);
+    },
+  },
 });

.vitepress/markdown-it-youtube-embed.ts

@@ -0,0 +1,45 @@
+import { PluginWithOptions } from 'markdown-it';
+import { RuleCore } from 'markdown-it/lib/parser_core.mjs';
+
+const markdownItYouTubeEmbed: PluginWithOptions<void> = (md) => {
+  const youtubeEmbedRule: RuleCore = (state) => {
+    const tokens = state.tokens;
+
+    for (let i = 0; i < tokens.length; i++) {
+      const token = tokens[i];
+
+      if (
+        token.type === 'inline' &&
+        token.children &&
+        token.children.length >= 1 &&
+        token.children[0].type === 'link_open'
+      ) {
+        const linkToken = token.children[0];
+        const href = linkToken.attrGet('href');
+
+        if (href && href.startsWith('https://www.youtube.com/watch?v=')) {
+          const videoId = href.split('v=')[1];
+          const iframeHtml = `
+            <div class="responsive-video">
+              <iframe
+                src="https://www.youtube.com/embed/${videoId}"
+                frameborder="0"
+                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+                allowfullscreen>
+              </iframe>
+            </div>
+          `;
+
+          // Replace current token with a new HTML block token
+          const newToken = new state.Token('html_block', '', 0);
+          newToken.content = iframeHtml;
+          tokens[i] = newToken;
+        }
+      }
+    }
+  };
+
+  md.core.ruler.push('youtube_embed', youtubeEmbedRule);
+};
+
+export default markdownItYouTubeEmbed;

.vitepress/theme/custom.css

@@ -25,3 +25,20 @@
 .VPSidebar {
   padding-bottom: 20px !important;
 }
+
+.responsive-video {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 aspect ratio */
+  height: 0;
+  overflow: hidden;
+  max-width: 100%;
+  background: #000;
+}
+
+.responsive-video iframe {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}

README.md

@@ -13,6 +13,8 @@ It supports the following frameworks:
 - Any other framework or setup by implementing a simple function in TypeScript
 - ... (Need support for another framework? Let me know!)
 
+[![Video presentation of Lambda Live Debugger](https://img.youtube.com/vi/BrhybwyDM0I/0.jpg)](https://www.youtube.com/watch?v=BrhybwyDM0I)
+
 ## Why?
 
 Serverless is amazing and solves many issues with traditional systems. However, writing code for Lambda functions can be challenging. The cycle of writing, deploying, running, fixing, and redeploying is time-consuming and tedious. You could use tools to run Lambda locally or use unit/integration tests; those approaches often don't replicate the actual environment closely enough.

tsconfig.json

@@ -3,8 +3,7 @@
   "compilerOptions": {
     "allowJs": true,
     "checkJs": true,
-    "outDir": "./dist",
-    "rootDir": "./src"
+    "outDir": "./dist"
   },
   "include": ["src/**/*", "test/**/*", "*.*", ".vitepress/**/*"],
   "exclude": ["node_modules", "dist"]