docs: mastering pinia

vuejs · Aug 24, 2023 · 648e4f0 · 648e4f0
1 parent a01de8a
commit 648e4f0
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 3 deletions.
diff --git a/packages/docs/.vitepress/theme/styles/home-links.css b/packages/docs/.vitepress/theme/styles/home-links.css
@@ -22,6 +22,52 @@ a.cta.vue-mastery::before {
   margin-right: 0.5em;
 }
 
+a.cta.mastering-pinia {
+  height: 100%;
+  line-height: 100%;
+  display: flex;
+  justify-content: center;
+  white-space: pre;
+  min-height: 41px;
+  position: relative;
+}
+a.cta.mastering-pinia::before {
+  content: '';
+  width: 156px;
+  height: 100%;
+  display: inline-block;
+  background-image: url('/mp-logo.svg');
+  background-size: 156px;
+  background-repeat: no-repeat;
+  vertical-align: bottom;
+  line-height: normal;
+  transform: translateY(6px);
+}
+a.cta.mastering-pinia:hover::after {
+  animation: none;
+}
+a.cta.mastering-pinia::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  /* background-color: var(--vp-button-brand-border); */
+  border: 1px solid var(--vp-button-brand-border);
+  border-radius: 20px;
+  animation: ping 3s cubic-bezier(0, 0, 0.2, 1) infinite;
+  z-index: -1;
+}
+
+@keyframes ping {
+  15%,
+  to {
+    transform: scale(1.25, 2);
+    opacity: 0;
+  }
+}
+
 a.cta.vueschool {
   position: relative;
   color: currentColor;

diff --git a/packages/docs/index.md b/packages/docs/index.md
@@ -4,7 +4,7 @@ layout: home
 title: Pinia
 titleTemplate: The intuitive store for Vue.js
 
-hero: 
+hero:
   name: Pinia
   text: The intuitive store for Vue.js
   tagline: Type Safe, Extensible, and Modular by design. Forget you are even using a store.
@@ -18,6 +18,9 @@ hero:
     - theme: alt
       text: Demo
       link: https://stackblitz.com/github/piniajs/example-vue-3-vite
+    - theme: cta mastering-pinia
+      text: ' '
+      link: https://masteringpinia.com
     - theme: cta vueschool
       text: Watch Video Introduction
       link: https://vueschool.io/lessons/introduction-to-pinia?friend=vuerouter&utm_source=pinia&utm_medium=link&utm_campaign=homepage

diff --git a/packages/docs/package.json b/packages/docs/package.json
@@ -2,9 +2,10 @@
   "name": "@pinia/docs",
   "version": "0.0.0",
   "private": true,
+  "type": "module",
   "scripts": {
     "docs": "vitepress dev .",
-    "docs:api": "node run-typedoc.js",
+    "docs:api": "node run-typedoc.cjs",
     "docs:build": "vitepress build ."
   },
   "dependencies": {