From: Andy Li <63885381+tutorialcode@users.noreply.github.com>
Date: Wed, 26 Oct 2022 12:30:43 +0000 (-0400)
Subject: docs: Vue Mastery links for pinia cheat sheet (#1718)
X-Git-Tag: @pinia/nuxt@0.4.4~12
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=6f7594721fd543be1a001bdc6c9a28554a47cdc5;p=thirdparty%2Fvuejs%2Fpinia.git

docs: Vue Mastery links for pinia cheat sheet (#1718)

Co-authored-by: Andy <andy@Andys-MacBook-Pro.local>
---

diff --git a/packages/docs/.vitepress/components/VueMasteryHomeLink.vue b/packages/docs/.vitepress/components/VueMasteryHomeLink.vue
new file mode 100644
index 00000000..6bde6b7c
--- /dev/null
+++ b/packages/docs/.vitepress/components/VueMasteryHomeLink.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+</script>
+
+<template>
+  <div class="container">
+    <div class="inside">
+      <a href="https://www.vuemastery.com/pinia?coupon=PINIA-DOCS&via=eduardo" target="_blank">
+        <span class="logo-wrapper">
+          <img alt="Vue Mastery Logo" width="25px" src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&token=941fcc3a-2b6f-40e9-b4c8-56b3890da108">
+        </span>
+        <span class="description">
+          Get the <span class="highlight">Pinia Cheat Sheet</span> from Vue Mastery
+        </span>
+      </a>
+    </div>
+  </div>
+</template>
+
+
+<style scoped>
+.container {
+  text-align: center;
+  margin-top: 30px;
+}
+.inside {
+  width:960px;
+  border-bottom: 1px solid var(--c-divider);
+  padding-bottom:50px;
+  margin: 0 auto;
+}
+a {
+  background-color: var(--c-bg-accent);
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+}
+.description {
+  line-height: 20px;
+  color: var(--c-text);
+  margin-left:10px;
+  transition: color 0.5s;
+}
+a:hover {
+  text-decoration: none !important;
+}
+a:hover .highlight {
+  text-decoration: underline;
+}
+.highlight {
+  color: var(--c-brand);
+}
+@media (max-width: 960px) {
+  .inside {
+    width:100%;
+  }
+}
+@media (max-width: 420px) {   
+  a {
+    display:block;
+    margin-left: 10px;
+    margin-right: 10px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/docs/.vitepress/components/VueMasteryLogoLink.vue b/packages/docs/.vitepress/components/VueMasteryLogoLink.vue
new file mode 100644
index 00000000..0589d3f8
--- /dev/null
+++ b/packages/docs/.vitepress/components/VueMasteryLogoLink.vue
@@ -0,0 +1,77 @@
+<script setup lang="ts">
+const props = defineProps<{
+  for: string,
+}>()
+
+const links = {
+  'pinia-cheat-sheet': 'https://www.vuemastery.com/pinia?coupon=PINIA-DOCS&via=eduardo'
+}
+
+const link = links[props.for]
+const forPiniaCheatSheet = props.for === 'pinia-cheat-sheet'
+</script>
+
+<template>
+  <a :href="link" target="_blank">
+    <span class="logo-wrapper">
+      <img alt="Vue Mastery Logo" width="25px" src="https://firebasestorage.googleapis.com/v0/b/vue-mastery.appspot.com/o/flamelink%2Fmedia%2Fvue-mastery-logo-small.png?alt=media&token=941fcc3a-2b6f-40e9-b4c8-56b3890da108">
+    </span>
+    <span v-if="forPiniaCheatSheet" class="description">
+      Get the <span class="highlight">Pinia Cheat Sheet</span> from Vue Mastery
+    </span>
+  </a>
+</template>
+
+<style scoped>
+a {
+  background-color: var(--c-bg-accent);
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+  display: flex;
+  align-items: center;
+  margin-top:10px;
+  margin-bottom:10px;
+}
+.description {
+  flex: 1;
+  line-height: 20px;
+  color: var(--c-text);
+  margin: 0 0 0 12px;
+  transition: color 0.5s;
+}
+a:hover {
+  text-decoration: none !important;
+}
+a:hover .highlight {
+  text-decoration: underline;
+}
+.highlight {
+  color: var(--c-brand);
+}
+.logo-wrapper {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: white;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-left:5px;
+}
+.logo-wrapper img {
+  width: 25px;
+  object-fit: contain;
+}
+@media (max-width: 576px) {
+  .description {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  .logo-wrapper {
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index 4a464910..a6cfb3fc 100644
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -5,6 +5,7 @@ import './sponsors.css'
 import { darkStorageConfig } from '../theme/dark-theme'
 import { useDark } from '@vueuse/core'
 import BannerTop from '../components/BannerTop.vue'
+import VueMasteryHomeLink from '../components/VueMasteryHomeLink.vue'
 import './banner-top.css'
 
 export const Layout = defineComponent({
@@ -38,6 +39,7 @@ export const Layout = defineComponent({
                   ),
                 ]
               ),
+              h(VueMasteryHomeLink),
             ]),
           'page-top': () => h(BannerTop),
           'sidebar-top': () =>
diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js
index e8749981..671420ac 100644
--- a/packages/docs/.vitepress/theme/index.js
+++ b/packages/docs/.vitepress/theme/index.js
@@ -1,5 +1,6 @@
 import Theme from 'vitepress/theme'
 import VueSchoolLink from '../components/VueSchoolLink.vue'
+import VueMasteryLogoLink from '../components/VueMasteryLogoLink.vue'
 import { Layout } from './Layout'
 import './custom.css'
 import './code-theme.css'
@@ -14,6 +15,7 @@ const config = {
   enhanceApp({ app }) {
     // app.use(createPinia())
     app.component('VueSchoolLink', VueSchoolLink)
+    app.component('VueMasteryLogoLink', VueMasteryLogoLink)
   },
 }
 
diff --git a/packages/docs/getting-started.md b/packages/docs/getting-started.md
index 7eb0d960..a7031401 100644
--- a/packages/docs/getting-started.md
+++ b/packages/docs/getting-started.md
@@ -1,5 +1,8 @@
 ## Installation
 
+<VueMasteryLogoLink for="pinia-cheat-sheet">
+</VueMasteryLogoLink>
+
 Install `pinia` with your favorite package manager:
 
 ```bash
diff --git a/packages/docs/introduction.md b/packages/docs/introduction.md
index e0483b3b..b22ac85f 100644
--- a/packages/docs/introduction.md
+++ b/packages/docs/introduction.md
@@ -22,6 +22,9 @@ Pinia is a store library for Vue, it allows you to share a state across componen
 - Proper TypeScript support or **autocompletion** for JS users
 - Server Side Rendering Support
 
+<VueMasteryLogoLink for="pinia-cheat-sheet">
+</VueMasteryLogoLink>
+
 ## Basic example
 
 This is what using Pinia looks like in terms of API (make sure to check the [Getting Started](./getting-started.md) for complete instructions). You start by creating a store: