Removes the need for Iframes in quickstart

This registers all the components into Vue. This ia a temp fix until github.com/vuejs/vuepress/issues/1173 is patched
okta · Mar 7, 2019 · c03f307 · c03f307
1 parent 66882d1
commit c03f307
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 45 deletions.
diff --git a/packages/@okta/vuepress-site/.vuepress/enhanceApp.js b/packages/@okta/vuepress-site/.vuepress/enhanceApp.js
@@ -1,5 +1,10 @@
 var redirectsJson = require('./redirects.json');
+import pageComponents from '@internal/page-components'
 
-export default ({ router }) => {
+export default ({ router, Vue }) => {
   router.addRoutes(redirectsJson)
+
+  for (const [name, component] of Object.entries(pageComponents)) {
+    Vue.component(name, component)
+  }
 }
diff --git a/packages/@okta/vuepress-theme-default/layouts/Quickstart.vue b/packages/@okta/vuepress-theme-default/layouts/Quickstart.vue
@@ -28,9 +28,7 @@
           </ul>
         </div>
 
-        <div id="client_content" class="example-content-well">
-          <div v-html="clientContent"></div>
-        </div>
+        <Content :pageKey="activeClientComponent" id="client_content" class="example-content-well"></Content>
 
         <h2 id="server_setup">Server Setup</h2>
 
@@ -56,9 +54,7 @@
           </ul>
         </div>
 
-        <div id="server_content" class="example-content-well">
-          <div v-html="serverContent"></div>
-        </div>
+        <Content :pageKey="activeServerComponent" id="server_content" class="example-content-well"></Content>
       </div>
 
       <div class="TableOfContents TableOfContentsPreload">
@@ -68,8 +64,6 @@
       </div>
       <!-- END Page Content -->
     </section>
-    <iframe style="display:none;" id="clientContentIframe" :src="clientContentUrl"></iframe>
-    <iframe style="display:none;" id="serverContentIframe" :src="serverContentUrl"></iframe>
     <Footer/>
   </div>
 </template>
@@ -86,13 +80,7 @@
         activeClient: null,
         activeServer: null,
         activeFramework: null,
-        activeTab: null,
-        clientContentUrl: null,
-        serverContentUrl: null,
-        clientContentLoading: true,
-        serverContentLoading: true,
-        clientContent: "",
-        serverContent: ""
+        activeTab: null
       }
     },
     created: function () {
@@ -131,17 +119,28 @@
         })
         return activeServerFrameworks.frameworks
       },
+
       activeClientComponent: function () {
         let component = this.$site.pages.find((page) => {
           return page.regularPath.startsWith('/quickstart-fragments/'+this.activeClient+'/default-example')
         })
 
+        return component.key
+      },
+
+      activeServerComponent: function () {
+        let client = this.$themeConfig.quickstarts.clients.filter((client) => {
+          return client.name === this.activeClient
+        })[0];
+        let component = this.$site.pages.find((page) => {
+          return page.regularPath.startsWith('/quickstart-fragments/' + this.activeServer + '/' + this.activeFramework + '-' + client.serverExampleType + '/')
+        })
+
         return component.key
       }
     },
     watch: {
       activeClient: function () {
-        this.loadClientContent()
         window.location.hash = '/'+this.activeClient+'/'+this.activeServer+'/'+this.activeFramework
       },
       activeServer: function () {
@@ -178,11 +177,9 @@
 
         this.activeFramework = frameworkToSet
 
-        this.loadServerContent()
         window.location.hash = '/'+this.activeClient+'/'+this.activeServer+'/'+this.activeFramework
       },
       activeFramework: function () {
-        this.loadServerContent()
         window.location.hash = '/'+this.activeClient+'/'+this.activeServer+'/'+this.activeFramework
       }
     },
@@ -201,32 +198,6 @@
       },
       scrollTo: function (element) {
         window.scrollTo(0, document.querySelectorAll(element)[0].offsetTop - 150)
-      },
-
-      loadClientContent: function () {
-        this.clientContentLoading = true
-
-        this.clientContentUrl = '/quickstart-fragments/' + this.activeClient + '/default-example/'
-
-
-        document.getElementById('clientContentIframe').onload = () => {
-          this.clientContentLoading = false
-          this.clientContent = document.getElementById('clientContentIframe').contentDocument.querySelector('.PageContent-main').innerHTML
-        }
-      },
-
-      loadServerContent: function () {
-        this.serverContentLoading = true
-        let client = this.$themeConfig.quickstarts.clients.filter((client) => {
-          return client.name === this.activeClient
-        })[0];
-
-        this.serverContentUrl = '/quickstart-fragments/' + this.activeServer + '/' + this.activeFramework + '-' + client.serverExampleType + '/'
-
-        document.getElementById('serverContentIframe').onload = () => {
-          this.serverContentLoading = false
-          this.serverContent = document.getElementById('serverContentIframe').contentDocument.querySelector('.PageContent-main').innerHTML
-        }
       }
     }
   }