From 5085fecd43901205b1394228f5a5cb09cc023d1c Mon Sep 17 00:00:00 2001
From: Jeff Sagal <sagalbot@gmail.com>
Date: Fri, 13 Mar 2020 12:02:23 -0700
Subject: [PATCH] ci: build docs on test step (#1105)

docs(infinite-scroll): fix SSR
docs(pagination): bind a boolean not a string
ci: build docs on test workflow
ci: install docs deps in same step
---
 .github/workflows/test.yml                   | 10 ++++++++--
 docs/.vuepress/components/InfiniteScroll.vue | 18 ++++++++++++------
 docs/.vuepress/components/Paginated.vue      |  2 +-
 3 files changed, 21 insertions(+), 9 deletions(-)

diff --git a/.github/workflows/test.yml b/.github/workflows/test.yml
index 874868b..52dbed6 100644
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@@ -29,10 +29,16 @@ jobs:
           node-version: 12
 
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: |
+          yarn install --frozen-lockfile
+          cd docs
+          yarn install --frozen-lockfile
 
-      - name: Build
+      - name: Build Dist
         run: yarn build
 
       - name: Bundlewatch
         run: npx bundlewatch
+
+      - name: Build Docs
+        run: yarn build:docs
diff --git a/docs/.vuepress/components/InfiniteScroll.vue b/docs/.vuepress/components/InfiniteScroll.vue
index 677d8fb..8bd85dc 100644
--- a/docs/.vuepress/components/InfiniteScroll.vue
+++ b/docs/.vuepress/components/InfiniteScroll.vue
@@ -19,12 +19,18 @@ import countries from '../data/countries';
 
 export default {
   name: "InfiniteScroll",
-  data () {
-    return {
-      observer: new IntersectionObserver(this.infiniteScroll),
-      limit: 10,
-      search: ''
-    }
+  data: () => ({
+    observer: null,
+    limit: 10,
+    search: ''
+  }),
+  mounted () {
+    /**
+     * You could do this directly in data(), but since these docs
+     * are server side rendered, IntersectionObserver doesn't exist
+     * in that environment, so we need to do it in mounted() instead.
+     */
+    this.observer = new IntersectionObserver(this.infiniteScroll);
   },
   computed: {
     filtered () {
diff --git a/docs/.vuepress/components/Paginated.vue b/docs/.vuepress/components/Paginated.vue
index 65fc0b8..4ec9ad0 100644
--- a/docs/.vuepress/components/Paginated.vue
+++ b/docs/.vuepress/components/Paginated.vue
@@ -1,5 +1,5 @@
 <template>
-  <v-select :options="paginated" @search="query => search = query" filterable="false">
+  <v-select :options="paginated" @search="query => search = query" :filterable="false">
     <li slot="list-footer" class="pagination">
       <button @click="offset -= 10" :disabled="!hasPrevPage">Prev</button>
       <button @click="offset += 10" :disabled="!hasNextPage">Next</button>