docs: support configure preview link for Previewer component

Author: PeachScript

docs/.vuepress/theme/components/Previewer.vue

@@ -1,6 +1,11 @@
 <template>
   <div class="previewer">
-    <div class="content"></div>
+    <div class="previewer-content">
+      <!-- add a wrapper to prevent overflow hidden property effect box-shadow -->
+      <div class="iframe-wrapper" v-if="$page.frontmatter.previewLink">
+        <iframe :src="$page.frontmatter.previewLink" frameborder="0" width="100%" height="100%"></iframe>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -21,7 +26,7 @@ export default {
   height $s-preview-width * $ratio
   background url('../assets/images/16th-mockup.png') no-repeat center/100%
 
-  .content
+  .previewer-content
     $s-vertical = 28px
     $s-horizontal = 11px
 
@@ -34,4 +39,11 @@ export default {
     background-color #fff
     box-shadow 0 0 0 1.5px rgba(0,0,0,0.8)
     border-radius 32px
+
+    .iframe-wrapper
+      position relative
+      width 100%
+      height 100%
+      border-radius 32px
+      overflow hidden
 </style>