From: Eduardo San Martin Morote <posva13@gmail.com>
Date: Fri, 17 May 2024 09:25:48 +0000 (+0200)
Subject: docs: add video embeds
X-Git-Tag: @pinia/nuxt@0.5.2~38
X-Git-Url: http://git.ipfire.org/gitweb/gitweb.cgi?a=commitdiff_plain;h=37f0bf0c4f45d7b9d47b86bbc503e1f308272a5f;p=thirdparty%2Fvuejs%2Fpinia.git

docs: add video embeds
---

diff --git a/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue b/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue
index 5a934a2a..8475c425 100644
--- a/packages/docs/.vitepress/theme/components/MasteringPiniaLink.vue
+++ b/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;
diff --git a/packages/docs/cookbook/testing.md b/packages/docs/cookbook/testing.md
index 74b6159a..0127440a 100644
--- a/packages/docs/cookbook/testing.md
+++ b/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`:
diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md
index 0d6dc7e9..7ce1466a 100644
--- a/packages/docs/core-concepts/index.md
+++ b/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"
 />
 
diff --git a/packages/docs/core-concepts/outside-component-usage.md b/packages/docs/core-concepts/outside-component-usage.md
index 12f766fe..e8159220 100644
--- a/packages/docs/core-concepts/outside-component-usage.md
+++ b/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"
 />
 
diff --git a/packages/docs/introduction.md b/packages/docs/introduction.md
index c5e085c8..62eb986b 100644
--- a/packages/docs/introduction.md
+++ b/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"
 />
 
diff --git a/packages/docs/zh/cookbook/testing.md b/packages/docs/zh/cookbook/testing.md
index a05ab9b1..ee8c108a 100644
--- a/packages/docs/zh/cookbook/testing.md
+++ b/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 时，我们需要注意三件事：
diff --git a/packages/docs/zh/core-concepts/index.md b/packages/docs/zh/core-concepts/index.md
index 15b7e50e..1845a500 100644
--- a/packages/docs/zh/core-concepts/index.md
+++ b/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"
 />
 
diff --git a/packages/docs/zh/core-concepts/outside-component-usage.md b/packages/docs/zh/core-concepts/outside-component-usage.md
index 2a699743..62bf9be5 100644
--- a/packages/docs/zh/core-concepts/outside-component-usage.md
+++ b/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"
 />
 
diff --git a/packages/docs/zh/introduction.md b/packages/docs/zh/introduction.md
index f91c2c3f..a5f10ac8 100644
--- a/packages/docs/zh/introduction.md
+++ b/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"
 />