Add setup video & store ID info to docs (wasp-lang#349)

* add video & store id info

* Update VideoPlayer.astro

Author: vincanger

opensaas-sh/blog/src/assets/lemon-squeezy/store-id.png

@@ -6,19 +6,40 @@ interface Props {
 }
 
 const { src, lgWidth = '55%', smWidth = '100%' } = Astro.props;
+
+// Function to check if the URL is a YouTube URL and, if so, extract the video ID
+function getYouTubeId(url: string): string | null {
+  const regExp = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
+  const match = url.match(regExp);
+  return match && match[2].length === 11 ? match[2] : null; // Note: all YouTube video IDs are 11 characters long.
+}
+
+const youTubeId = getYouTubeId(src);
+const isYouTube = !!youTubeId;
 ---
 
-<video
-  src={src}
-  preload="true"
-  autoplay
-  muted
-  controls
-  loop
-  class="video-player"
->
-  <track kind="captions">
-</video>
+{isYouTube ? (
+  <iframe
+    src={`https://www.youtube.com/embed/${youTubeId}`}
+    title="YouTube video player"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+    style="aspect-ratio: 16 / 9; width: 100%;"
+  >
+  </iframe>
+) : (
+  <video
+    src={src}
+    preload="true"
+    autoplay
+    muted
+    controls
+    loop
+    class="video-player"
+  >
+    <track kind="captions">
+  </video>
+)}
 
 <style define:vars={{ lgWidth, smWidth }}>
   .video-player {

opensaas-sh/blog/src/components/VideoPlayer.astro

@@ -15,6 +15,7 @@ import addVariant from '@assets/lemon-squeezy/add-variant.png';
 import variantId from '@assets/lemon-squeezy/variant-id.png';
 import subscriptionVariantIds from '@assets/lemon-squeezy/subscription-variant-ids.png';
 import ngrok from '@assets/lemon-squeezy/ngrok.png';
+import storeId from '@assets/lemon-squeezy/store-id.png';
 
 This guide will show you how to set up Payments for testing and local development with the following payment processors:
 - Stripe
@@ -244,6 +245,14 @@ Once you've created your account, you'll need to get your test API keys. You can
 - Give your API key a name
 - Copy and paste it in your `.env.server` file under `LEMONSQUEEZY_API_KEY=`
 
+### Get your Lemon Squeezy Store ID
+
+<Image src={storeId} alt="store id" loading="lazy" />
+
+To get your store ID, go to the [Lemon Squeezy Dashboard](https://app.lemonsqueezy.com/settings/stores) and copy the `Store ID` from the top right corner.
+
+Copy and paste this number in your `.env.server` file under `LEMONSQUEEZY_STORE_ID=`
+
 ### Create Test Products
 
 To create a test product, go to the test products url [https://app.lemonsqueezy.com/products](https://app.lemonsqueezy.com/products).

opensaas-sh/blog/src/content/docs/guides/payments-integration.mdx

@@ -4,9 +4,14 @@ banner:
   content: |
     Open SaaS is now running on <b><a href='https://wasp-lang.dev'>Wasp v0.15</a></b>! <br/>⚙️<br/>If you're running an older version and would like to upgrade, please follow the <a href="https://wasp-lang.dev/docs/migration-guides/migrate-from-0-14-to-0-15">migration instructions.</a>
 ---
+import VideoPlayer from '../../../components/VideoPlayer.astro';
 
 This guide will help you get your new SaaS app up and running.
 
+If you prefer video tutorials, you can watch this walkthrough below which will guide you through most of the setup (installation, authentication, payments, etc.). If you get stuck at any point, you can refer back to these docs for more information.
+
+<VideoPlayer src="https://youtu.be/lFGtwbwt66k" lgWidth="100%" />
+
 ## Install Wasp
 
 ### Pre-requisites
@@ -22,38 +27,35 @@ To switch easily between Node.js versions, we recommend using [nvm](https://gith
     Need help with nvm?
   </summary>
   <div>
+    Install nvm via your OS package manager (`apt`, `pacman`, `homebrew`, ...) or via the [nvm](https://github.com/nvm-sh/nvm#install--update-script) install script.
 
-Install nvm via your OS package manager (`apt`, `pacman`, `homebrew`, ...) or via the [nvm](https://github.com/nvm-sh/nvm#install--update-script) install script.
+    Then, install a version of Node.js that you need:
 
-Then, install a version of Node.js that you need:
+    ```shell
+    nvm install 20
+    ```
 
-```shell
-nvm install 20
-```
+    Finally, whenever you need to ensure a specific version of Node.js is used, run:
 
-Finally, whenever you need to ensure a specific version of Node.js is used, run:
+    ```shell
+    nvm use 20
+    ```
 
-```shell
-nvm use 20
-```
+    to set the Node.js version for the current shell session.
 
-to set the Node.js version for the current shell session.
+    You can run
 
-You can run
+    ```shell
+    node -v
+    ```
 
-```shell
-node -v
-```
-
-to check the version of Node.js currently being used in this shell session.
-
-Check NVM repo for more details: [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm).
+    to check the version of Node.js currently being used in this shell session.
 
+    Check NVM repo for more details: [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm).
   </div>
 </details>
 :::
 
-
 ### Linux and macOS
 
 Open your terminal and run:
@@ -73,9 +75,9 @@ Given that the wasp binary is built for x86 and not for arm64 (Apple Silicon), y
 softwareupdate --install-rosetta
 ```
 Once Rosetta is installed, you should be able to run Wasp without any issues.
-:::
 
 </details>
+:::
 
 ### Windows