docs: add vue school links (#1045)

diff --git a/packages/docs/.vitepress/components/VueSchoolLink.vue b/packages/docs/.vitepress/components/VueSchoolLink.vue
new file mode 100644 (file)
index 0000000..16a3633
--- /dev/null
+++ b/packages/docs/.vitepress/components/VueSchoolLink.vue
@@ -0,0 +1,58 @@
+<template>
+  <div class="vueschool">
+    <a
+      :href="`${href}?friend=vuerouter`"
+      target="_blank"
+      rel="sponsored noopener"
+      :title="title"
+    >
+      <slot>Watch a free video lesson on Vue School</slot>
+    </a>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    href: { type: String, required: true },
+    title: { type: String, required: true },
+  },
+}
+</script>
+<style scoped>
+.vueschool {
+  margin-top: 20px;
+  background-color: var(--code-bg-color);
+  padding: 1em 1.25em;
+  border-radius: 2px;
+  position: relative;
+  display: flex;
+}
+.vueschool a {
+  color: var(--c-text);
+  position: relative;
+  padding-left: 36px;
+}
+.vueschool a:before {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 30px;
+  height: 30px;
+  top: calc(50% - 15px);
+  left: -4px;
+  border-radius: 50%;
+  background-color: #73abfe;
+}
+.vueschool a:after {
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 5px);
+  left: 8px;
+  border-top: 5px solid transparent;
+  border-bottom: 5px solid transparent;
+  border-left: 8px solid #fff;
+}
+</style>
\ No newline at end of file

diff --git a/packages/docs/.vitepress/theme/index.js b/packages/docs/.vitepress/theme/index.js
index 7de263897b17ed6583211ebcf25d980f46a7b9f3..9e45f8c1e365fb3f4c21f5ca9dee82d01e87cfb6 100644 (file)
--- a/packages/docs/.vitepress/theme/index.js
+++ b/packages/docs/.vitepress/theme/index.js
@@ -1,4 +1,5 @@
 import Theme from 'vitepress/theme'
+import VueSchoolLink from '../components/VueSchoolLink.vue'
 import { Layout } from './Layout'
 import './custom.css'
 import './code-theme.css'
@@ -10,9 +11,9 @@ const config = {
 
   Layout,
 
-  // enhanceApp({ app }) {
-  // app.use(createPinia())
-  // },
+  enhanceApp({ app }) {
+    app.component('VueSchoolLink', VueSchoolLink)
+  },
 }
 
 export default config

diff --git a/packages/docs/core-concepts/actions.md b/packages/docs/core-concepts/actions.md
index d6330edf8deff73ea000ca3e0292d48563cb1cd0..7cad0ca8356df2ca1c70ed6bde04e778a3bbdc1b 100644 (file)
--- a/packages/docs/core-concepts/actions.md
+++ b/packages/docs/core-concepts/actions.md
@@ -1,5 +1,7 @@
 # Actions
 
+<VueSchoolLink href="https://vueschool.io/lessons/synchronous-and-asynchronous-actions-in-pinia"/>
+
 Actions are the equivalent of [methods](https://v3.vuejs.org/guide/data-methods.html#methods) in components. They can be defined with the `actions` property in `defineStore()` and **they are perfect to define business logic**:
 
 ```js

diff --git a/packages/docs/core-concepts/getters.md b/packages/docs/core-concepts/getters.md
index 292a3b562bb577e28d1d1fdc62bbed304791c9b1..1681186b7be9e936afab47715dae56ff591ded9a 100644 (file)
--- a/packages/docs/core-concepts/getters.md
+++ b/packages/docs/core-concepts/getters.md
@@ -1,5 +1,7 @@
 # Getters
 
+<VueSchoolLink href="https://vueschool.io/lessons/getters-in-pinia"/>
+
 Getters are exactly the equivalent of [computed values](https://v3.vuejs.org/guide/reactivity-computed-watchers.html#computed-values) for the state of a Store. They can be defined with the `getters` property in `defineStore()`. They receive the `state` as the first parameter **to encourage** the usage of arrow function:
 
 ```js

diff --git a/packages/docs/core-concepts/index.md b/packages/docs/core-concepts/index.md
index 47c8854f757e21bf09221b948637ac77de11817a..7e1e2987a2bcdba3476c643574eac33d22327df3 100644 (file)
--- a/packages/docs/core-concepts/index.md
+++ b/packages/docs/core-concepts/index.md
@@ -1,5 +1,7 @@
 # Defining a Store
 
+<VueSchoolLink href="https://vueschool.io/lessons/define-your-first-pinia-store"/>
+
 Before diving into core concepts, we need to know that a store is defined using `defineStore()` and that it requires a **unique** name, passed as the first argument:
 
 ```js

diff --git a/packages/docs/core-concepts/state.md b/packages/docs/core-concepts/state.md
index 93c0ce8fb06b3ce22b10b5cd58e7b00d51f5df3f..7c78cac162cf178a4791553def32fe2cead48a86 100644 (file)
--- a/packages/docs/core-concepts/state.md
+++ b/packages/docs/core-concepts/state.md
@@ -1,5 +1,7 @@
 # State
 
+<VueSchoolLink href="https://vueschool.io/lessons/access-state-from-a-pinia-store"/>
+
 The state is, most of the time, the central part of your store. People often start by defining the state that represents their app. In Pinia the state is defined as a function that returns the initial state. This allows Pinia to work in both Server and Client Side.
 
 ```js

diff --git a/packages/docs/introduction.md b/packages/docs/introduction.md
index 5b38493b01376e4abe0da4f076c40039630ffee2..2ea3d71af41c28a4b35fc50e4369f79c7cd21d69 100644 (file)
--- a/packages/docs/introduction.md
+++ b/packages/docs/introduction.md
@@ -1,5 +1,7 @@
 # Introduction
 
+<VueSchoolLink href="https://vueschool.io/lessons/introduction-to-pinia"/>
+
 Pinia [started](https://github.com/vuejs/pinia/commit/06aeef54e2cad66696063c62829dac74e15fd19e) as an experiment to redesign what a Store for Vue could look like with the [Composition API](https://github.com/vuejs/composition-api) around November 2019. Since then, the initial principles are still the same, but Pinia works for both Vue 2 and Vue 3 **and doesn't require you to use the composition API**. The API is the same for both except for _installation_ and _SSR_, and these docs are targeted to Vue 3 **with notes about Vue 2** whenever necessary so it can be read by Vue 2 and Vue 3 users!
 
 ## Why should I use Pinia?