Fetch pubs from zotero on home instead of manual curation

cypress/integration/accessibility.spec.js

@@ -10,6 +10,8 @@ describe("Accessibility Testing", () => {
         // Ensure masthead has loaded
         cy.get("#masthead-logo").should("be.visible");
         // Only check for #app; ignores twitter and sidecar.
+        // This wait is not great; testing if this is something in deferred load of pubs.
+        cy.wait(2500);
         cy.checkA11y("#app", CYPRESS_ACCESSIBILITY_CONFIG);
     });
     it("Use page has no detectable a11y violations on load", () => {

src/components/Publications.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="pseudo-card col-sm-12">
+        <h2>
+            <g-link to="https://www.zotero.org/groups/galaxy">
+                <span :class="`icon fas fa-book-open`"></span>
+                <b>Recent Publications</b>
+            </g-link>
+        </h2>
+        <b-row class="mb-2" v-for="(item, i) in this.items" :key="i">
+            <b-col cols="11">
+                <g-link class="title" :to="item.data.url">{{ item.data.title }}</g-link>
+                <br />
+                <div class="tease">
+                    {{ item.meta.creatorSummary }},
+                    {{ item.data.journalAbbreviation ? item.data.journalAbbreviation : "preprint" }},
+                    {{ item.data.date }}.
+                </div>
+            </b-col>
+            <b-col cols="1">
+                <span class="altmetric-embed" data-badge-type="donut" :data-doi="item.data.DOI"></span>
+            </b-col>
+        </b-row>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    props: {
+        limit: {
+            type: Number,
+            default: 5,
+        },
+    },
+    data() {
+        return {
+            items: [],
+        };
+    },
+    methods: {
+        initAltmetric() {
+            setTimeout(() => {
+                if (typeof window._altmetric_embed_init !== "undefined") {
+                    window._altmetric_embed_init();
+                } else {
+                    this.initAltmetric();
+                }
+            }, 100);
+        },
+        fetchPubs() {
+            axios
+                .get(`https://api.zotero.org/groups/1732893/items/top?start=0&limit=${this.limit}`)
+                .then((response) => {
+                    this.items = response.data;
+                    this.initAltmetric();
+                })
+                .catch((error) => {
+                    console.log(error);
+                });
+        },
+    },
+    mounted() {
+        // Inject altmetric scripts and kick off pub fetch
+        const altmetricScript = document.createElement("script");
+        altmetricScript.src = "https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js";
+        document.head.appendChild(altmetricScript);
+        this.fetchPubs();
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "~/assets/styles.scss";
+
+.pseudo-card {
+    background-color: $gray-200;
+    border: 4px solid white;
+    border-radius: 8px;
+}
+h2 .icon {
+    margin-right: 0.7em;
+}
+.content.markdown::v-deep p {
+    font-size: 80%;
+}
+.content.markdown::v-deep a {
+    font-size: 120%;
+}
+.title {
+    font-weight: bold;
+}
+.tease {
+    font-size: 80%;
+}
+</style>

src/pages/Index.vue

@@ -18,8 +18,6 @@
                 <div class="text-center markdown" v-html="$page.jumbotron.content" />
             </section>
         </div>
-        <br /><font-awesome-icon icon="fa-regular fa-circle-user" />
-        <i class="fa-regular fa-circle-user"></i>
         <b-row id="profiles" class="justify-content-md-center">
             <HomeProfile
                 title="SCIENTISTS"
@@ -77,21 +75,9 @@
         </div>
 
         <div class="row">
-            <HomeCard
-                :title="inserts.platforms.title"
-                :link="inserts.platforms.link"
-                :icon="inserts.platforms.icon"
-                :content="inserts.platforms.content"
-                :items="inserts.platforms.items"
-            />
-            <HomeCard
-                :title="inserts.pubs.title"
-                :link="inserts.pubs.link"
-                :icon="inserts.pubs.icon"
-                :content="inserts.pubs.content"
-                :items="inserts.pubs.items"
-                :width="8"
-            />
+            <ClientOnly>
+                <Publications />
+            </ClientOnly>
         </div>
 
         <footer class="page-footer markdown" v-if="$page.footer" v-html="$page.footer.content" />
@@ -100,12 +86,15 @@
 
 <script>
 import HomeCard from "@/components/HomeCard";
+import Publications from "@/components/Publications";
 import { rmPrefix, rmSuffix } from "~/utils.js";
 import HomeProfile from "../components/HomeProfile.vue";
+
 export default {
     components: {
         HomeCard,
         HomeProfile,
+        Publications,
     },
     metaInfo: {
         title: "Home",
@@ -140,10 +129,6 @@ export default {
                 fjs.parentNode.insertBefore(js, fjs);
             }
         })(document, "script", "twitter-wjs");
-
-        const altmetricScript = document.createElement("script");
-        altmetricScript.src = "https://d1bxh8uas1mnw7.cloudfront.net/assets/embed.js";
-        document.head.appendChild(altmetricScript);
     },
 };
 /** Convert an Article to an "item", with the title, link, and tease fields expected by ItemListBrief. */