From: Daniel Kelly <me@danielkelly.io>
Date: Mon, 28 Feb 2022 16:43:10 +0000 (-0600)
Subject: docs: add link to free Vue School course on homepage [skip ci] (#1089)
X-Git-Tag: @pinia/testing@0.0.10~19
X-Git-Url: http://git.ipfire.org/?a=commitdiff_plain;h=821024b083a160d30ef38a67046279e25f38cd8f;p=thirdparty%2Fvuejs%2Fpinia.git

docs: add link to free Vue School course on homepage [skip ci] (#1089)
---

diff --git a/packages/docs/.vitepress/theme/Layout.ts b/packages/docs/.vitepress/theme/Layout.ts
index 2e0dd2f8..b6a7b34e 100644
--- a/packages/docs/.vitepress/theme/Layout.ts
+++ b/packages/docs/.vitepress/theme/Layout.ts
@@ -16,6 +16,19 @@ export const Layout = defineComponent({
         Theme.Layout,
         {},
         {
+          'home-hero': ()=>(
+            h("div", {
+              class: "vue-school-homepage-link",
+            }, [
+              h("a", {
+                  href: "https://vueschool.io/lessons/introduction-to-pinia?friend=vuerouter&utm_source=pinia&utm_medium=link&utm_campaign=homepage",
+                  target:"_blank",
+                  rel:"noopener"
+                },
+                [h("span", "Watch Video Introduction")]
+              )
+            ])
+          ),
           'sidebar-top': () =>
             h('div', { class: 'sponsors sponsors-top' }, [
               h('span', 'Platinum Sponsors'),
diff --git a/packages/docs/.vitepress/theme/custom.css b/packages/docs/.vitepress/theme/custom.css
index 331e09a8..7247ba93 100644
--- a/packages/docs/.vitepress/theme/custom.css
+++ b/packages/docs/.vitepress/theme/custom.css
@@ -211,3 +211,38 @@ code {
   width: auto;
   max-width: 150px;
 }
+.vue-school-homepage-link{
+  text-align: center; margin-top: -40px;
+}
+.vue-school-homepage-link a{
+  position: relative;
+  padding-left: 23px;
+}
+.vue-school-homepage-link a::before{
+  content: '';
+  position: absolute;
+  display: block;
+  width: 20px;
+  height: 20px;
+  top: calc(50% - 10px);
+  left: -4px;
+  border-radius: 50%;
+  border: 1px solid var(--c-brand);
+}
+.vue-school-homepage-link a::after{
+  content: '';
+  position: absolute;
+  display: block;
+  width: 0;
+  height: 0;
+  top: calc(50% - 4px);
+  left: 4px;
+  border-top: 4px solid transparent;
+  border-bottom: 4px solid transparent;
+  border-left: 7px solid var(--c-brand);
+}
+@media screen and (max-width: 720px){
+  .vue-school-homepage-link{
+    text-align: center; margin-top: -20px;
+  }
+}