add iframe demo

docs/package.json

@@ -17,6 +17,7 @@
     "globby": "^11.0.0",
     "gridsome": "0.7.23",
     "gridsome-plugin-simple-analytics": "^1.1.0",
+    "iframe-resizer": "^4.3.1",
     "portal-vue": "^2.1.7",
     "raw-loader": "^4.0.2",
     "react": "^17.0.1",

docs/src/index.html

@@ -8,5 +8,6 @@
     ${app}
     ${scripts}
     <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/@docsearch/js@alpha"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/iframe-resizer/4.2.11/iframeResizer.contentWindow.min.js" integrity="sha512-FOf4suFgz7OrWmBiyyWW48u/+6GaaAFSDHagh2EBu/GH/1+OQSYc0NFGeGeZK0gZ3vuU1ovmzVzD6bxmT4vayg==" crossorigin="anonymous"></script>
   </body>
 </html>

docs/src/main.js

@@ -3,6 +3,7 @@ import 'prismjs/components/prism-jsx.js'
 import 'prismjs/components/prism-typescript.js'
 import 'prismjs/components/prism-scss.js'
 import PortalVue from 'portal-vue'
+import iframeResize from 'iframe-resizer/js/iframeResizer'
 import App from '~/layouts/App'
 
 Prism.manual = true
@@ -20,6 +21,16 @@ export default function (Vue, { head }) {
   }
 
   Vue.use(PortalVue)
+
+  Vue.directive('resize', {
+    bind(el, { value = {} }) {
+      el.addEventListener('load', () => iframeResize(value, el))
+    },
+    unbind(el) {
+      el.iFrameResizer.removeListeners()
+    },
+  })
+
   Vue.component('Layout', App)
   Vue.component('Demo', () => import(/* webpackChunkName: "demo" */ '~/components/Demo'))
   Vue.component('LiveDemo', () => import(/* webpackChunkName: "live-demo" */ '~/components/LiveDemo'))

docs/src/pages/index.vue

@@ -13,6 +13,14 @@
     </app-section>
 
     <app-section>
+      <iframe
+        v-resize
+        src="demos/Examples/CollaborativeEditing"
+        style="background-color: white; border-radius: 8px;"
+        width="100%"
+        height="400"
+        frameborder="0"
+      />
       <demo name="Examples/CollaborativeEditing" :show-source="false" inline />
     </app-section>
 

docs/src/templates/DemoPage/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="demo-page">
-    <demo :name="$context.name" :show-source="false" />
+    <demo :name="$context.name" :show-source="false" inline />
   </div>
 </template>
 

docs/src/templates/DemoPage/style.scss

@@ -1,4 +1,4 @@
 .demo-page {
-  max-width: 40rem;
-  margin: 2rem auto;
+  // max-width: 40rem;
+  // margin: 2rem auto;
 }

yarn.lock

@@ -8121,6 +8121,11 @@ iferr@^0.1.5:
   resolved "https://registry.yarnpkg.com/iferr/-/iferr-0.1.5.tgz#c60eed69e6d8fdb6b3104a1fcbca1c192dc5b501"
   integrity sha1-xg7taebY/bazEEofy8ocGS3FtQE=
 
+iframe-resizer@^4.3.1:
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/iframe-resizer/-/iframe-resizer-4.3.1.tgz#7aca964ac02ba1fd2b8099b8ef30bc9a1f4f72ca"
+  integrity sha512-PkoTPNF6EYhTbDjogdKu7JVgKqRwwNBXMeywZaQyzEYM3BNltA8O9fIIrtUkmj+8VZGckXpwtXsWsaQ5lrhd0w==
+
 ignore-walk@^3.0.1:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/ignore-walk/-/ignore-walk-3.0.3.tgz#017e2447184bfeade7c238e4aefdd1e8f95b1e37"