Embed video tutorials into the documentation (#169)

documentation/.gitignore

@@ -5,6 +5,7 @@ bundle
 .DS_Store
 .next
 out
+components/*.js
 
 # Yarn related files
 .pnp.*

documentation/components/player.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+export const YoutubePlayer = (props: { videoId: string }) => {
+    return (
+        <iframe
+            width="100%"
+            height="470"
+            style={{ marginTop: '20px', marginBottom: '20px' }}
+            src={'https://www.youtube-nocookie.com/embed/' + props.videoId + '?loop=1&modestbranding=1&color=white'}
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+            allowFullScreen
+        ></iframe>
+    );
+};

documentation/pages/_meta.json

@@ -12,6 +12,9 @@
     "install": {
         "title": "Install"
     },
+    "guides": {
+        "title": "Guides"
+    },
     "---1": {
         "type": "separator"
     },

documentation/pages/guides.mdx

@@ -0,0 +1,14 @@
+# Our guides in video
+
+We made a series of videos to help you understand how to use the CLI.
+
+<iframe
+    width="100%"
+    height="470"
+    style={{ marginTop: '20px' }}
+    src="https://www.youtube-nocookie.com/embed/videoseries?list=PLaJHdXnJiAn4rWs-YlmKuoX__33BAq_xf"
+    title="Dashlane CLI Playlist"
+    frameborder="0"
+    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+    allowfullscreen
+></iframe>

documentation/pages/personal/secrets/exec.mdx

@@ -1,11 +1,14 @@
 import { Steps } from 'nextra/components';
+import { YoutubePlayer } from '../../../components/player';
 
 # Load secrets into environment variables
 
 The Dashlane CLI allows you to load secrets into environment variables. This is useful for example when you want to use secrets in your applications in development.
 
 By using secret references in your environment variables, you can load secrets from your Dashlane account into your environment variables and avoid having to store them in plain text in your code.
 
+<YoutubePlayer videoId="A4TM6mSRwbs" />
+
 <Steps>
 ### Get your secret reference
 

documentation/pages/personal/secrets/inject.mdx

@@ -1,10 +1,13 @@
 import { Steps, Callout } from 'nextra/components';
+import { YoutubePlayer } from '../../../components/player';
 
 # Load secrets into templated files
 
 Using Dashlane CLI you can inject secrets into templated files.
 This is useful for example to inject secrets into configuration files and avoid storing secrets in your repository.
 
+<YoutubePlayer videoId="FfjBC8MBAQk" />
+
 <Steps>
 ### Get your secret reference
 

documentation/pages/personal/secrets/read.mdx

@@ -1,9 +1,13 @@
+import { YoutubePlayer } from '../../../components/player';
+
 # Read secrets references
 
 A secret reference is an URI starting by `dl://` that points to a secret stored in your vault.
 
 You can use a secret reference to securely load a secret from your vault into environment variables, scripts or configuration files.
 
+<YoutubePlayer videoId="i1TAKqM5nOg" />
+
 ## Structure of secret references
 
 The URI is composed of 4 parts:

documentation/pages/personal/vault.mdx

@@ -1,4 +1,5 @@
 import { Callout } from 'nextra/components';
+import { YoutubePlayer } from '../../components/player';
 
 # Accessing your Vault
 
@@ -8,6 +9,8 @@ import { Callout } from 'nextra/components';
 
 ## Get a password
 
+<YoutubePlayer videoId="dMII21YI5s4" />
+
 ```sh
 dcli p mywebsite
 # will return any entry for which either the url or the title matches mywebsite
@@ -26,12 +29,19 @@ Note: You can select a different output for passwords among `clipboard, password
 
 ## Generate an OTP code
 
+You can get an OTP code from your vault as well as the remaining time before it expires.
+Just use the `otp` or `o` command and filter similarly to the password command:
+
 ```sh copy
 dcli otp [filters]
 ```
 
 ## Get a secure note
 
+<YoutubePlayer videoId="n8OxYRfrgfk" />
+
+Getting a secure note is very simple, just use the `note` or `n` command and filter by title:
+
 ```sh copy
 dcli note [titleFilter]
 ```