reuse vue mastery widget

vuejs · Dec 24, 2022 · 64ffb8a · 64ffb8a
1 parent a420e66
commit 64ffb8a
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 163 deletions.
diff --git a/src/VueMastery.vue b/src/VueMastery.vue
@@ -0,0 +1,95 @@
+<template>
+  <div class="vue-mastery-link">
+    <a
+      href="https://www.vuemastery.com/migration-guide-cheat-sheet/"
+      target="_blank"
+    >
+      <div class="banner-wrapper">
+        <img
+          class="banner"
+          alt="Vue Mastery banner"
+          width="96px"
+          height="56px"
+          src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png"
+        />
+      </div>
+      <p class="description">
+        Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span>
+      </p>
+      <div class="logo-wrapper">
+        <img
+          alt="Vue Mastery Logo"
+          width="25px"
+          src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png"
+        />
+      </div>
+    </a>
+  </div>
+</template>
+
+<style>
+.vue-mastery-link {
+  background-color: #f9f9f9;
+  border-radius: 8px;
+  padding: 8px 16px 8px 8px;
+}
+
+.vue-mastery-link a {
+  display: flex;
+  align-items: center;
+  text-decoration: none;
+}
+
+.vue-mastery-link .banner {
+  background-color: #f9f9f9;
+  border-radius: 4px;
+  width: 96px;
+  height: 56px;
+  object-fit: cover;
+}
+
+.vue-mastery-link .description {
+  flex: 1;
+  font-weight: 500;
+  font-size: 14px;
+  line-height: 20px;
+  color: #213547;
+  margin: 0 0 0 16px;
+}
+
+.vue-mastery-link .description span {
+  color: #42b883;
+}
+
+.vue-mastery-link .logo-wrapper {
+  position: relative;
+  width: 48px;
+  height: 48px;
+  border-radius: 50%;
+  background-color: #ffffff;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.vue-mastery-link .logo-wrapper img {
+  width: 25px;
+  object-fit: contain;
+}
+
+@media (max-width: 576px) {
+  .vue-mastery-link .banner {
+    width: 56px;
+  }
+
+  .vue-mastery-link .description {
+    font-size: 12px;
+    line-height: 18px;
+  }
+  .vue-mastery-link .logo-wrapper {
+    position: relative;
+    width: 32px;
+    height: 32px;
+  }
+}
+</style>
diff --git a/src/index.md b/src/index.md
@@ -3,92 +3,12 @@
 This guide is primarily for users with prior Vue 2 experience who want to learn about the changes between Vue 2 and Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.** The recommended way to learn Vue 3 is by reading the [new documentation](https://vuejs.org).
 
 <!-- VueMastery Start -->
-<style>
-.vue-mastery-link {
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  padding: 8px 16px 8px 8px;
-}
-
-.vue-mastery-link a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-}
-
-.vue-mastery-link .banner {
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  width:96px;
-  height:56px;
-  object-fit: cover;
-}
-
-.vue-mastery-link .description {
-  flex: 1;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: #213547;
-  margin: 0 0 0 16px;
-}
-
-.vue-mastery-link .description span {
-  color: #42b883;
-}
-
-.vue-mastery-link .logo-wrapper {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.vue-mastery-link .logo-wrapper img {
-  width: 25px;
-  object-fit: contain;
-}
-
-@media (max-width: 576px) {
-  .vue-mastery-link .banner {
-    width:56px;
-  }
-
-  .vue-mastery-link .description {
-    font-size: 12px;
-    line-height: 18px;
-  }
-  .vue-mastery-link .logo-wrapper {
-    position: relative;
-    width: 32px;
-    height: 32px;
-  }
-}
-</style>
-
-<div class="vue-mastery-link">
-  <a href="https://www.vuemastery.com/migration-guide-cheat-sheet/" target="_blank">
-    <div class="banner-wrapper">
-      <img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
-    </div>
-    <p class="description">Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span></p>
-    <div class="logo-wrapper">
-        <img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
-    </div>
-  </a>
-</div>
+<script setup>
+import VueMasteryWidget from './VueMastery.vue'
+</script>
+<VueMasteryWidget/>
 <!-- VueMastery End -->
 
-<style>
-.note {
-  color: #476582;
-}
-</style>
-
 ## Notable New Features
 
 Some of the new features to keep an eye on in Vue 3 include:
@@ -117,3 +37,9 @@ New framework-level recommendations are listed [here](./recommendations).
 ## Migration Build
 
 If you have an existing Vue 2 project or library that you intend to upgrade to Vue 3, we provide a build of Vue 3 that offers Vue 2 compatible APIs. Check out the [Migration Build](./migration-build.html) page for more details.
+
+<style>
+.note {
+  color: #476582;
+}
+</style>
diff --git a/src/zh/index.md b/src/zh/index.md
@@ -3,84 +3,10 @@
 本指南主要是为有 Vue 2 经验的、希望了解 Vue 3 的新功能和更改的用户而提供的。**在试用 Vue 3 之前，你不必完整阅读这些内容**。学习 Vue 3 的推荐方法是阅读[新的文档](https://cn.vuejs.org)。
 
 <!-- VueMastery Start -->
-<style>
-.vue-mastery-link {
-  background-color: #f9f9f9;
-  border-radius: 8px;
-  padding: 8px 16px 8px 8px;
-}
-
-.vue-mastery-link a {
-  display: flex;
-  align-items: center;
-  text-decoration: none;
-}
-
-.vue-mastery-link .banner {
-  background-color: #f9f9f9;
-  border-radius: 4px;
-  width:96px;
-  height:56px;
-  object-fit: cover;
-}
-
-.vue-mastery-link .description {
-  flex: 1;
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: #213547;
-  margin: 0 0 0 16px;
-}
-
-.vue-mastery-link .description span {
-  color: #42b883;
-}
-
-.vue-mastery-link .logo-wrapper {
-  position: relative;
-  width: 48px;
-  height: 48px;
-  border-radius: 50%;
-  background-color: #ffffff;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.vue-mastery-link .logo-wrapper img {
-  width: 25px;
-  object-fit: contain;
-}
-
-@media (max-width: 576px) {
-  .vue-mastery-link .banner {
-    width:56px;
-  }
-
-  .vue-mastery-link .description {
-    font-size: 12px;
-    line-height: 18px;
-  }
-  .vue-mastery-link .logo-wrapper {
-    position: relative;
-    width: 32px;
-    height: 32px;
-  }
-}
-</style>
-
-<div class="vue-mastery-link">
-  <a href="https://www.vuemastery.com/migration-guide-cheat-sheet/" target="_blank">
-    <div class="banner-wrapper">
-      <img class="banner" alt="Vue Mastery banner" width="96px" height="56px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vuemastery-graphical-link-96x56.png" />
-    </div>
-    <p class="description">Get the free Migration Guide Cheat Sheet at <span>VueMastery.com</span></p>
-    <div class="logo-wrapper">
-        <img alt="Vue Mastery Logo" width="25px" src="https://storage.googleapis.com/vue-mastery.appspot.com/flamelink/media/vue-mastery-logo.png" />
-    </div>
-  </a>
-</div>
+<script setup>
+import VueMasteryWidget from '../VueMastery.vue'
+</script>
+<VueMasteryWidget/>
 <!-- VueMastery End -->
 
 <style>
@@ -116,4 +42,4 @@ Vue 2 和 Vue 3 之间的非兼容性更改[在此](./breaking-changes/)列出
 
 ## 用于迁移的构建版本
 
-如果您有一个现有的 Vue 2 项目或库，并打算将其升级到 Vue 3，我们将提供一个 Vue 3 的构建版本，它提供与 Vue 2 兼容的 api。查看[用于迁移的构建版本](./migration-build)页面了解更多细节。
+如果您有一个现有的 Vue 2 项目或库，并打算将其升级到 Vue 3，我们将提供一个 Vue 3 的构建版本，它提供与 Vue 2 兼容的 api。查看[用于迁移的构建版本](./migration-build)页面了解更多细节。