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 (file)
index 0000000..6bde6b7
--- /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 (file)
index 0000000..0589d3f
--- /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 4a464910073802f93c001eab9fcac91f4489ae76..a6cfb3fca7662ebdceba8d59fe0320280a239fe7 100644 (file)
--- 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 e87499810a74a54a605a681136e0463c17addd61..671420ac5d42c4657814564ed272fc635c55de60 100644 (file)
--- 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 7eb0d960e866aaffdbf3590ebc8829231ac137ee..a7031401db81af0e025ccaedc0bed9f6610a95fe 100644 (file)
--- 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 e0483b3ba48016db801dea16cd5487083bfcb4f1..b22ac85f6b5d4073c9bd882f027b7d134b030a65 100644 (file)
--- 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: