<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>
<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;
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;
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;
# 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:
## 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`:
projects / thirdparty / vuejs / pinia.git / commitdiff
