docs: add video embeds

packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue

@@ -1,26 +1,85 @@
 <script setup lang="ts">
 import { useData } from 'vitepress'
+import { computed, ref } from 'vue'
+
+// TODO: split into 2 components
 
 const { site } = useData()
 const translations = {
-  'en-US':
-    'Master this and much more with the official video course by the author of Pinia',
-  'zh-CN': '通过 Pinia 作者的官方视频课程掌握更多内容',
+  videoLink: {
+    'en-US':
+      'Master this and much more with the official video course by the author of Pinia',
+    'zh-CN': '通过 Pinia 作者的官方视频课程掌握更多内容',
+  },
+  videoEmbed: {
+    'en-US': 'Master this and much more with a free video from Mastering Pinia',
+    'zh-CN': '通过 Mastering Pinia 的免费视频掌握更多内容',
+  },
+  watchMoreA: {
+    'en-US': 'Watch more on ',
+    'zh-CN': '在 ',
+  },
+  watchMoreB: {
+    'en-US': '',
+    'zh-CN': ' 上观看更多内容',
+  },
 }
-defineProps<{ href: string; title: string }>()
+const props = defineProps<{ href: string; title: string, mpLink?: string }>()
+const isVideo = computed(() => props.href.startsWith('https://play.gumlet.io/'))
+const isVideoOpen = ref(false)
 </script>
 
 <template>
   <div class="mp">
+    <template v-if="isVideo">
+      <div class="video-embed" v-if="isVideoOpen">
+        <div style="padding: 56.25% 0 0 0; position: relative">
+          <iframe
+            loading="lazy"
+            title="Gumlet video player"
+            false
+            :src="href + '?preload=false&autoplay=true&loop=false&disable_player_controls=false'"
+            style="
+              border: none;
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 100%;
+              width: 100%;
+            "
+            allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture; fullscreen;"
+            frameborder="0"
+            allowfullscreen
+          >
+          </iframe>
+        </div>
+
+        <div class="watch-more">
+          {{ translations.watchMoreA[site.lang] }}
+          <a :href="mpLink || 'https://masteringpinia.com'" target="_blank" rel="noopener">
+            Mastering Pinia
+            <img src="/mp-pinia-logo.svg" alt="mastering pinia logo" />
+          </a>
+          {{ translations.watchMoreB[site.lang] }}
+        </div>
+      </div>
+
+      <button class="cta" :title v-else @click="isVideoOpen = true">
+        <div class="text">
+          <slot>{{ translations.videoEmbed[site.lang] }}</slot>
+        </div>
+      </button>
+    </template>
     <a
+      v-else
       :href="href"
       target="_blank"
       rel="noopener"
       :title="title"
-      class="no-icon"
+      class="no-icon cta"
     >
       <div class="text">
-        <slot>{{ translations[site.lang] }}</slot>
+        <slot>{{ translations.videoLink[site.lang] }}</slot>
       </div>
     </a>
   </div>
@@ -29,19 +88,39 @@ defineProps<{ href: string; title: string }>()
 <style scoped>
 .mp {
   margin-top: 20px;
-  background-color: var(--vp-code-block-bg);
-  padding: 1em 1.25em;
-  border-radius: 2px;
+}
+.mp:has(.cta) {
   position: relative;
+  transition: border-color 0.5s;
+  padding: 1em 1.25em;
+  background-color: var(--vp-code-block-bg);
   border-radius: 1em;
   border: 2px solid var(--vp-c-bg-alt);
-  transition: border-color 0.5s;
 }
-.mp:hover {
+.mp:has(.cta):hover {
   border: 2px solid var(--vp-c-brand-1);
 }
+.cta:hover {
+  color: var(--vp-c-brand-1);
+  text-decoration: underline;
+}
+
+.watch-more {
+  text-align: end;
+  font-size: 0.8em;
+  background-color: var(--vp-code-block-bg);
+  border-radius: 0 0 1em 1em;
+  padding-right: 1em;
+}
+
+.watch-more img {
+  height: 1em;
+  display: inline-block;
+  /* vertical-align: middle; */
+}
 
-.mp a {
+.cta {
+  font-size: inherit;
   color: var(--c-text);
   position: relative;
   display: flex;
@@ -51,10 +130,10 @@ defineProps<{ href: string; title: string }>()
   justify-content: space-between;
   padding-left: 36px;
 }
-.mp a .content {
+.cta .content {
   flex-grow: 1;
 }
-.mp a:before {
+.cta:before {
   content: '';
   position: absolute;
   display: block;
@@ -65,10 +144,10 @@ defineProps<{ href: string; title: string }>()
   border-radius: 50%;
   background-color: var(--vp-c-brand-1);
 }
-html.dark .mp a:after {
+html.dark .cta:after {
   --play-icon-color: #000;
 }
-.mp a:after {
+.cta:after {
   content: '';
   position: absolute;
   display: block;

packages/docs/cookbook/testing.md

@@ -1,8 +1,8 @@
 # Testing stores
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/introduction-to-testing-stores"
-  title="Learn how to test stores"
+  href="https://play.gumlet.io/embed/65f9a9c10bfab01f414c25dc"
+  title="Watch a free video of Mastering Pinia about testing stores"
 />
 
 Stores will, by design, be used at many places and can make testing much harder than it should be. Fortunately, this doesn't have to be the case. We need to take care of three things when testing stores:
@@ -65,6 +65,13 @@ beforeEach(() => {
 
 ## Unit testing components
 
+<!-- NOTE: too long maybe but good value -->
+<!-- <MasteringPiniaLink
+  href="https://play.gumlet.io/embed/6630f540c418f8419b73b2b2?t1=1715867840&t2=1715867570609?preload=false&autoplay=false&loop=false&disable_player_controls=false"
+  title="Watch a free video of Mastering Pinia about testing stores"
+/> -->
+
+
 This can be achieved with `createTestingPinia()`, which returns a pinia instance designed to help unit tests components.
 
 Start by installing `@pinia/testing`:

packages/docs/core-concepts/index.md

@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/quick-start-with-pinia"
+  href="https://play.gumlet.io/embed/651ecff2e4c322668b0a17af"
+  mp-link="https://masteringpinia.com/lessons/quick-start-with-pinia"
   title="Get started with Pinia"
 />
 

packages/docs/core-concepts/outside-component-usage.md

@@ -1,7 +1,8 @@
 # Using a store outside of a component
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/how-does-usestore-work"
+  href="https://play.gumlet.io/embed/651ed1ec4c2f339c6860fd06"
+  mp-link="https://masteringpinia.com/lessons/how-does-usestore-work"
   title="Using stores outside of components"
 />
 

packages/docs/introduction.md

@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
+  href="https://play.gumlet.io/embed/651ecf274c2f339c6860e36b"
+  mp-link="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
   title="Create your own Pinia from scratch"
 />
 

packages/docs/zh/cookbook/testing.md

@@ -1,8 +1,8 @@
 # store 测试 %{#testing-stores}%
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/introduction-to-testing-stores"
-  title="Learn how to test stores"
+  href="https://play.gumlet.io/embed/65f9a9c10bfab01f414c25dc"
+  title="Watch a free video of Mastering Pinia about testing stores"
 />
 
 从设计上来说，许多地方都会使用 store，所以可能比正常情况更难测试。但幸运的是，这不一定是真的。在测试 store 时，我们需要注意三件事：

packages/docs/zh/core-concepts/index.md

@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/quick-start-with-pinia"
+  href="https://play.gumlet.io/embed/651ecff2e4c322668b0a17af"
+  mp-link="https://masteringpinia.com/lessons/quick-start-with-pinia"
   title="Get started with Pinia"
 />
 

packages/docs/zh/core-concepts/outside-component-usage.md

@@ -1,7 +1,8 @@
 # 在组件外使用 store %{#using-a-store-outside-of-a-component}%
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/how-does-usestore-work"
+  href="https://play.gumlet.io/embed/651ed1ec4c2f339c6860fd06"
+  mp-link="https://masteringpinia.com/lessons/how-does-usestore-work"
   title="Using stores outside of components"
 />
 

packages/docs/zh/introduction.md

@@ -6,7 +6,8 @@
 /> -->
 
 <MasteringPiniaLink
-  href="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
+  href="https://play.gumlet.io/embed/651ecf274c2f339c6860e36b"
+  mp-link="https://masteringpinia.com/lessons/the-what-and-why-of-state-management-and-stores"
   title="Create your own Pinia from scratch"
 />