Merge pull request #394 from pressbooks/dev

v2.4 release

.env.example

@@ -3,6 +3,7 @@ VITE_ALGOLIA_API_READ_KEY=
 VITE_ALGOLIA_INDEX=
 VITE_ALGOLIA_INDEX_ALPHABETICAL_REPLICA=
 VITE_ALGOLIA_INDEX_LAST_UPDATED_REPLICA=
+VITE_CLICK_COUNT_ENDPOINT=
 VITE_HEADER_ADDITIONAL_TEXT=
 VITE_USER_NODE_ENV=
 VITE_APP_GA_MEASUREMENT_ID=

README.md

@@ -68,7 +68,7 @@ BrowserStack reports can be accessed in [App Live BrowserStack Dashboard](https:
 ### Run E2E tests locally
 Tests can also be run locally as well using the instructions below: 
 1. You can run local tests on **Chrome**, **Firefox** and **Edge**. Make sure you have at least one of those browsers installed on your local machine.
-1. Make sure that you have properly configured the Algolia indices to be used by your application. The Pressbooks internal team can find details [here](https://docs.google.com/document/d/1SNf7jIelkXwzzAxEbGSjEL59GMDeh3o3wH7myY3LfBM/edit?usp=sharing)
+1. Make sure that you have properly configured the Algolia indices to be used by your application. The Pressbooks internal team can find details [here](https://docs.google.com/document/d/1F82PSJKeufpKp8bGrDifjPxGo2x6tKD-HJpTsuadCeg/edit#heading=h.3j6ezaup0nca)
 1. The local server should already be running: `npm run dev` before tests are run locally.
 1. Tests can be run locally with the following command:  `npm run test`. Cypress app will open, and you would choose in which browser do you want to run your tests
 1. You can run E2E tests on headless mode by running: `npm run test:ci`

e2e/integration/bookCards.spec.js

@@ -1,5 +1,5 @@
 import Elements from '../support/elements';
-import {clickAccordionHeader, clickFilter, search} from '../support/common';
+import {clickAccordionHeader, clickFilter, clickPage, search} from '../support/common';
 import helpers from '../../src/store/helpers';
 
 describe('Book cards', function () {
@@ -70,7 +70,7 @@ describe('Book cards', function () {
       search('Nursing Pharmacology').then(()=>{
         cy.get(Elements.booksCards.editors)
           .first()
-          .contains('Elizabeth Christman, MSN, RN, CNE and Kimberly Ernstmeyer, CNE, CHSE, APNP-BC');
+          .should('include.text', 'Elizabeth Christman, MSN, RN, CNE and Kimberly Ernstmeyer');
       });
     });
     it('Search a book with description and check it is present in the book cards', () => {
@@ -183,9 +183,24 @@ describe('Book cards', function () {
       search('math');
 
       cy.get(Elements.booksCards.cover)
-        .eq(1).find('img')
+        .eq(3).find('img')
         .should('have.attr', 'src')
         .should('include', '/assets/images/default-book-cover.jpg');
     });
+    it('Lazy loading cover images', () => {
+      clickPage(3);
+
+      cy.get(Elements.booksCards.cover)
+        .eq(2).find('img')
+        .should('have.attr', 'src')
+        .should('include', '/assets/images/default-book-cover.jpg');
+
+      cy.get('[data-cy=storage-filter]').scrollIntoView()
+        .wait(200);
+      cy.get(Elements.booksCards.cover)
+        .eq(2).find('img')
+        .should('have.attr', 'src')
+        .should('include', 'monarch.jpg');
+    });
   });
 });

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pressbooks-directory",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "engines": {
     "node": ">=15.14.0",
     "npm": ">=7.0.0"
@@ -11,6 +11,7 @@
     "build:staging": "TAILWIND_MODE=build vite build --mode staging",
     "serve": "vite preview",
     "lint": "eslint ./src --ext .js --ext .vue",
+    "lint:fix": "eslint ./src --ext .js --ext .vue --fix",
     "start": "npm run dev & wait-on tcp:3001 -v",
     "test": "cypress open",
     "test:ci": "cypress run --headless",
@@ -28,10 +29,10 @@
     "intro.js": "^3.4.0",
     "nprogress": "^0.2.0",
     "search-insights": "^2.0.0",
-    "v-img-fallback": "^0.1.5",
     "vue": "^2.6.12",
     "vue-clamp": "^0.3.2",
     "vue-instantsearch": "^3.6.0",
+    "vue-lazyload": "^1.3.3",
     "vue-router": "^3.5.1",
     "vue-select": "^3.11.2",
     "vue-tailwind": "^2.2.1",

src/components/PbBookCover.vue

@@ -1,24 +1,28 @@
 <template>
-  <img
-    v-img-fallback="'/assets/images/default-book-cover.jpg'"
-    class="w-full"
-    :src="image"
+  <div
+    v-lazy-container="{ selector: 'img', error: defaulImg, loading: defaulImg }"
   >
+    <img
+      class="w-full"
+      :data-src="image"
+    >
+  </div>
 </template>
 
 <script>
-import { ImgFallback } from 'v-img-fallback';
 
 export default {
   name: 'PbBookCover',
-  directives: {
-    ImgFallback
-  },
   props: {
     image: {
       type: String,
       default: ''
     },
   },
+  data() {
+    return {
+      defaulImg: '/assets/images/default-book-cover.jpg'
+    };
+  }
 };
 </script>

src/components/books/BookInfo.vue

@@ -14,13 +14,24 @@
         target="_blank"
         rel="noopener"
         data-cy="book-title"
-        @click="$emit('book-title-click')"
+        @click="clickBook"
       >
         {{ item.name }}
       </a>
     </h2>
     <p class="leading-tight">
-      <span data-cy="book-word-count">{{ item.wordCount | numberFormat }}</span> words | <span data-cy="book-size">{{ sizeInMb }}</span> MB | <span data-cy="h5p-count">{{ item.h5pActivities | numberFormat }}</span> H5P activities
+      <span data-cy="book-word-count">{{ item.wordCount | numberFormat }}</span> words | <span data-cy="book-size">{{ sizeInMb }}</span> MB | <template v-if="hasH5PActivities">
+        <a
+          :href="item.url + 'h5p-listing'"
+          class="text-pb-red underline"
+          target="_blank"
+        ><span data-cy="h5p-count">{{ item.h5pActivities | numberFormat }}</span> H5P activities</a>
+      </template>
+      <template v-else>
+        <span
+          data-cy="h5p-count"
+        >{{ item.h5pActivities | numberFormat }}</span> H5P activities
+      </template>
     </p>
   </div>
 </template>
@@ -40,6 +51,25 @@ export default {
       const size = (parseInt(this.item.storageSize) / 1024) / 1024;
 
       return size.toFixed(2);
+    },
+    hasH5PActivities() {
+      return this.item.hasH5pActivities && this.item.h5pActivities > 0;
+    }
+  },
+  methods: {
+    clickBook() {
+      this.$emit('book-title-click');
+      const clickEndpoint = import.meta.env.VITE_CLICK_COUNT_ENDPOINT;
+      if (clickEndpoint) {
+        fetch(clickEndpoint,{
+          mode: 'no-cors',
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({book_id:this.item.objectID}),
+        });
+      }
     }
   }
 };

src/main.js

@@ -3,6 +3,7 @@ import App from './App.vue';
 import InstantSearch from 'vue-instantsearch';
 import VueSelect from 'vue-select';
 import VueTailwind from 'vue-tailwind';
+import VueLazyload from 'vue-lazyload';
 import router from './router';
 import VueTailwindConfig from './vuetailwind.config';
 import dayjs from 'dayjs';
@@ -14,6 +15,7 @@ import {store} from './store';
 Vue.component('VueSelect', VueSelect);
 Vue.use(InstantSearch);
 Vue.use(VueTailwind, VueTailwindConfig);
+Vue.use(VueLazyload);
 Vue.mixin(AlgoliaMixin);
 Vue.filter('numberFormat', (value, locale) => value.toLocaleString(locale || 'en'));